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.

View code
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]
		
Friday, 24-Aug-2012 15:05:15 CEST