Published using Google Docs
App Framework Online Basic Tutorial
Updated automatically every 5 minutes

App Framework (Online Basic Tutorial)  

What Is App Framework?

App Framework is a JavaScript library for mobile HTML5 app development. It allows you to build simple, rich and full HTML5/JavaScript mobile applications.

App Framework is comprised of three parts:

a) App Framework - a query selector library

b) UI - a UI/UX library for smartphone and tablets

c) Plugins - plugins built on top of App Framework

Steps

1) Browse Online Compiler Web Site

e.g http://www.compileonline.com/try_html5_online.php 

2) Delete startup codes

Delete startup codes as highlighted in the above screenshot.

3) Add BODY codes

<div id="afui" class='ios'>

         

<div id="header"></div>

         

<div id="content">

    <div class="panel" title="Main" data-nav="nav_0" id="page_0" selected="selected">

            <a class="button" href="#" style="" data-appbuilder-object="button" data-position="static">Hello World</a>

        </div>

</div>

         

<div id="navbar">

    <a href="#page_0" class="icon home">Home</a>    

</div>

       

<header id="header_0" data-appbuilder-object="header">

        <a id="backButton" href="#" class="button back" style="visibility: visible; ">Back</a>

        <h1 id="pageTitle" class="">

                test

        </h1>

</header>

<nav id="nav_0" data-appbuilder-object="nav">

        <h1>

                Side Menu

        </h1>            

</nav>

</div>

Notice the Result Preview button in the above screenshot.

4) Result Preview

5) Add HEAD Codes

    <script src="http://cdn.app-framework-software.intel.com/2.1/appframework.ui.min.js"></script>

    <link href="http://cdn.app-framework-software.intel.com/2.1/icons.css" rel="stylesheet" type="text/css"></link>

    <link href="http://cdn.app-framework-software.intel.com/2.1/af.ui.css" rel="stylesheet" type="text/css"></link>

6) Result Preview

The result is different from Step 4.

The codes in the HEAD tag have changed the LOOK and FEEL of the page.

This is the effect of App Framework library codes.

The codes are referring to the CDN site (Content Developer Network).

If you want to run this page offline, you need to download the library codes and store it in your project folder.

REFERENCES

  1. CDN Site - http://app-framework-software.intel.com/cdn.php 
  2. App Framework Documentation - http://app-framework-software.intel.com/documentation.php