Getting Started with App Framework 2.0

Tweet Like

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>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

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>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

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" />

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

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>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

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>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

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>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

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>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

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>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Here is the app displayed on a mobile device:

To learn more visit other articles in the series: