Basics
The first step to use WebApp.Net on your project is to download the related package from the WebApp.Net web site. If you haven't check yet the official web site please take some times to discover the demo (to use preferably on your iPhone or iPod Touch) and available packages, including base package and graphic package.
Installation instruction
Once you've downloaded the base package, unpack it and copy the WebApp folder to the root of your web site or development folder. Then, add the following line to your page.
...
[head]
...
[link rel="stylesheet" href="WebApp/Design/Render.css" /]
[script type="text/javascript" src="WebApp/Action/Logic.js"][/script]
[/head]
...
You should not change the content or structure of the WebApp folder in order to ease package updates. If you want to change styles (colors, fonts, ...) please consider to create a new CSS file and overload existing styles. For more informations about how to do this, refer to the releated section.
Getting start
You can start playing with the micro-framework trying the following sample. It shows a simple page with two layers and a back buttons to switch from one layer to the other.
Sample 1.1
[html]
[head]
[title]My WebApp[/title]
[meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /]
[link rel="stylesheet" href="WebApp/Design/Render.css" /]
[script type="text/javascript" src="WebApp/Action/Logic.js"][/script]
[/head]
[body]
[div id="WebApp"]
[div id="iHeader"]
[a href="#" id="waBackButton"]Back[/a]
[span id="waHeadTitle"]WebApp Demo[/span]
[/div]
[div id="iGroup"]
[div class="iLayer" id="waHome" title="Home"]
[div class="iBlock"]
[h1]Layer 1[/h1]
[p]This is the first layer. [a href="#_Next"]Tap here[/a] to slide to the next layer.
A back button will then appear in the header.[/p]
[/div]
[/div]
[div class="iLayer" id="waNext" title="Next Layer"]
[div class="iBlock"]
[h1]Layer 2[/h1]
[p]This is the second layer. [a href="#_Home"]Tap here[/a] to go back to the previous
layer or press the top back button.[/p]
[/div]
[/div]
[/div]
[/div]
[/body]
[/html]
