Basics

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

Page Layout

The basic page layout is composed as shown below.

[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"]2

        [div id="iHeader"]3
            ...
        [/div]
        
        [div id="iGroup"]4

            [div class="iLayer"] ... [/div]

            [div class="iLayer"] ... [/div]
            
            ...
        [/div]

        [div id="iFooter"]5
            ...
        [/div]

    [/div]
    [/body]
[/html]
	
  1. Required WebApp.Net components
  2. Main web application container, this item is mandatory
  3. Page header containing title and navigation buttons
  4. Layers container, this item is also mandatory
  5. Optional footer container

All these items are discussed in details below.

WebApp.Net components

These lines are required and enable you to load components required by WebApp.Net micro-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 the related section.

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.

Header

The header, if available, is automatically handled by the micro-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.

Footer

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

Saturday, 20-Jun-2009 14:40:32 CEST