Using the framework
This page is specific to: WebApp.Net Version:0.20.30.50.6
The first step to use WebApp.Net in 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 WebApp.Net live demo (to use preferably on your mobile device) and available packages, including base package and graphic package.
Installation
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.
printcopy to clipboardCode 1.1.1
<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 .
Quick start
You can start playing with the WebApp.Net framework trying the following sample code. It shows a simple implementation of the base Page structure with two layers and a back button. You can switch from one layer to the other using the link in each layer.
printcopy to clipboardSample 1.1.2
<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>
See also
Additionally you can check the following documentation references.
- Basics: Page structure