Getting Started with App Framework 2.0

 

The Intel® XDK includes the App Framework JavaScript* library, a blazingly fast cross-platform UI (User Interface) library built from the ground up for mobile HTML5 apps. The UI styles in this library are designed to easily adapt to your target platform (Google Android*, Apple iOS*, Microsoft Windows* 8, and new RIM Blackberry* devices) so you can give your application a target-specific look and feel. The App Framework library also includes an optional query selector library that takes advantage of the latest built-in HTML5 and CSS3 features of browsers and supports valid W3C CSS selectors. The query selector library is a subset of the popular jQuery* library, and has been optimized for performance on mobile devices; if you prefer, you can also use the UI component of the App Framework library with the standard jQuery library to maximize the jQuery functionality.

Download Site: App Framework 2.0

When using the App Framework, make sure to use only W3C valid selectors. The App Framework UI is designed for mobile platforms, so it may not show desired results on desktop browsers.

Creating a simple single page app:

We start by including App Framework into the page's head section from a content delivery network (CDN):

<script src="//cdn.app-framework-software.intel.com/appframework.min.js" type="text/javascript"></script>

Or from your local download location:

<script type="text/javascript" charset="utf-8" src="app_framework/appframework.ui.min.js/src/appframework.ui.js"></script>

Define meta settings and include the stylesheets afui.css  and icons.css  for default styles.

    <head>
        <title>App Framework single page</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <link rel="stylesheet" type="text/css" href="appframework-2.0/css/icons.css" />

        <link rel="stylesheet" type="text/css" href="appframework-2.0/css/afui.css" />

Within the body define the container div with id id="afui". This is the main container for the app(the code appears below).

For this simple single page application we have a header, footer and a content div with some content.

Adding header:

Use id="header" for creating a header and place a header text inside an <h1> tag. This gives you a default style for the header.

           <div id="header">
                <h1>Single Page App</h1>
            </div>

Optionally adda button for back navigation inside the header.

<div id="header">
                <a id="backButton" href="javascript:;" class="button" style="visibility: hidden;">Back</a>
                <h1>Single Page App</h1>
            </div>

Adding the content:

Add all content for the page in the div with id="content". Using this div will ensure that you can auto expand or adjust the space on the device.

       <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </div>

Adding a footer:

A footer appears as a navigation bar at the bottom. Create a div with id="navbar". Add various icons to navigate to different parts on the page or another page. We create these navigation icons in the footer : Home, Sketch and picture.

<div id="navbar">
                <a href="#home" id='navbar_home' class='icon home'>home</a>
                <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a>
                <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a>
 </div>

Putting all together :

<!DOCTYPE html>
<html>
 
    <head>
        <title>App Framework single page</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <link rel="stylesheet" type="text/css" href="appframework-2.0/css/icons.css" />
        <link rel="stylesheet" type="text/css" href="appframework-2.0/css/afui.css" />
     </head>
 
    <body>
        <div id="afui"> 
            <div id="header">
                <a id="backButton" href="javascript:;" class="button" >Back</a>
                <h1>Single Page App</h1>
            </div>
            <div id="content">
                <div id="home">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>
                <div id="sketch">
                    <p>sketch</p>
                </div>
            </div>
           
            <div id="navbar">
                <a href="#home" id='navbar_home' class='icon home'>home</a>
                <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a>
                <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a>
            </div>
        </div>
    </body>

</html>

Here is the app displayed on a mobile device:

To learn more visit other articles in the series:

 
有关编译器优化的更完整信息,请参阅优化通知
标签: