Page structure

This page is specific to: WebApp.Net Version:0.2 0.30.50.6

December, 19th 2009

The informations exposed here are only related to basic usage of the WebApp.Net framework. You can, of course, work with it as you want, using only sliding feature or asynchronous capabilities and ignoring header and footer.

Layout

The basic page structure is composed of different eelements as shown in the code example below.

html

print copy to clipboardCode 1.2.1

<html>
    <head>
        <title>My WebApp</title>

        <link rel="stylesheet" href="WebApp/Design/Render.css" />1
        <script type="text/javascript" src="WebApp/Action/Logic.js"></script>    
    </head>
    
    <body>
        <div id="WebApp">
        
            <div id="iHeader">
                ...
            </div>
            
            <div id="iGroup">
            
                <div class="iLayer"> ... </div>
                
                <div class="iLayer"> ... </div>
            
                ...
            </div>
            
            <div id="iFooter">
                ...
            </div>
        
        </div>
    </body>
</html>

Framework components

These lines are required and enable you to load components required by the WebApp.Net framework. You may not change the order of these tags. If you need to add you own CSS files and/or scripts, put them just after these lines.

For installation instruction read Using the framework.

Main container

This element is required mainly for internal use but will also enable you to define a style depending on the device orientation. For more information about orientation behaviors, read the orientationchange event section.

Page header

The header, if available, is automatically handled by the WebApp.Net framework, including buttons (back, home, ...), title and any other items related to the header. For more information about the header, read the related section.

Layers container

This is the place where stand all layers. A layer is a pseudo page and enable sliding effect from one to another. You can also add a loader is this container which will be displayed till the end of page loading. For more information about layers, read the related section.

Page footer

This optional item let you add a common footer to all layers. It is managed by the WebApp.Net framework so that there is no weird beahvior and jumping elements while sliding.

History

TODO