APP Framework is a CSS and JavaScript library which is used to design mobile applications created using HTML5 Mobile frameworks like Phonegap or Intel XDK. Intel APP Framework can do more things than just designing, its primary objective is to design apps.
This is a tutorial for beginners who don’t have any knowledge about APP Framework. In this tutorial I will provide an overview of the library and some code example.
Overview of APP Framework
APP Framework is comprised of three parts: App Framework UI, App Framework Selectors and Plugins.
- App Framework UI: App framework UI provides CSS styles to create UI components and JavaScript interfaces to alter the UI.
- App Framework Selectors: Its a set of JavaScript interfaces that allows you to manipulate the DOM with minimal impact on performance.
- Plugins: You can also create plugins for App Framework to add new UI/DOM functionality.
In this tutorial I will provide an overview of APP framework UI and Selectors.
Including APP Framework
You can download APP framework’s CSS and JS files and include it in your project. Or else you can include the files from CDN.
Here is the code to include complete APP Framework from CDN
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/af.ui.base.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/af.ui.css">
<script src="http://cdn.app-framework-software.intel.com/2.1/af.ui.jquery.min.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/appframework.min.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/appframework.ui.min.js"></script>
Creating a Sample APP Layout
Here is a example list of how each of the UI components provided by APP Framework looks.
Let’s create a sample APP design only using App Framework’s UI CSS styles. Put the below code inside body tag.
<div id="header">
</div>
<div id="content">
<div id="favs" data-title="Favorites" class="panel" selected="true">
</div>
<div id="welcome" data-title="Welcome" class="panel" selected="true">
<ul class="list">
<li><a class="icon star" href="#favs">Favorites <span class="af-badge">2</span></a></li>
</ul>
</div>
</div>
<div id="navbar">
<a href="#welcome" class="icon home">Home</a>
<a href="#favs" class="icon star">Favorites<span class="af-badge">2</span></a>
</div>
</div>
A App Framework app is a collection of panels or pages. Each panel has a header and a footer navbar. The default header of all pages is defined using id “header”. Similarly the default footer for all pages is defined using the id “navbar”. Data attributes of panels is used to define the components of default header which is different across different pages, for example the title of each page is defined using “data-title” attribute.
A page can also have a custom header and footer instead of using the default header and footer.
Let’s add some APP Framework’s JavaScript Interfaces to the above code.
<div id="header">
</div>
<div id="content">
<div id="favs" data-title="Favorites" class="panel" selected="true">
<button onclick="full_screen();">Full Screen</button>
</div>
<div id="welcome" data-title="Welcome" class="panel" selected="true">
<ul class="list">
<li><a class="icon star" href="#favs">Favorites <span class="af-badge">2</span></a></li>
</ul>
</div>
</div>
<div id="navbar">
<a href="#welcome" class="icon home">Home</a>
<a href="#favs" class="icon star">Favorites<span class="af-badge">2</span></a>
</div>
</div>
<script>
function full_screen()
{
//We selected the page using APP Framework's selectors library and then made it full screen using APP Framework's UI JavaScript interfaces
$.ui.showModal("#favs","fade");
}
</script>
Complete Code for Intel XDK
Here is the complete code of the design for Intel XDK framework
<html>
<head>
<title>Sample APP to Demonstrate Intel XDK Caching API</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/icons.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/af.ui.base.css">
<link rel="stylesheet" href="http://cdn.app-framework-software.intel.com/2.1/af.ui.css">
</head>
<body>
<div id="afui">
<div id="header">
</div>
<div id="content">
<div id="favs" data-title="Favorites" class="panel" selected="true">
<button onclick="full_screen();">Full Screen</button>
</div>
<div id="welcome" data-title="Welcome" class="panel" selected="true">
<ul class="list">
<li><a class="icon star" href="#favs">Favorites <span class="af-badge">2</span></a></li>
</ul>
</div>
</div>
<div id="navbar">
<a href="#welcome" class="icon home">Home</a>
<a href="#favs" class="icon star">Favorites<span class="af-badge">2</span></a>
</div>
</div>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/af.ui.jquery.min.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/appframework.min.js"></script>
<script src="http://cdn.app-framework-software.intel.com/2.1/appframework.ui.min.js"></script>
<script>
function full_screen()
{
//We selected the page using APP Framework's selectors library and then made it full screen using APP Framework's UI JavaScript interfaces
$.ui.showModal("#favs","fade");
}
</script>
</body>
</html>
Tools
APP Framework website has three great free tools. Let’s see what they can do:
- Style Builder: The af.ui.css file we loaded from CDN contains UI component classes for all platforms. You can generate a custom CSS file for specific platforms.
- CSS Chooser: You can also change the default color of UI components by generating a custom selected color CSS file and replacing it with af.ui.css file.
- App Starter:
If you a bad markup design then you can use this tool to create interface by using drag and drop method and then generate code for the created interface.
