Adam Wills Before starting with mobile HTML5 development task, we are going to provide what actually App Framework is. It is one type of JavaScript library for HTML5 mobile applications development, allowing development of HTML5/JavaScript mobile applications. Here, we are going to discuss the basic and its main concepts of App framework.
jQuery inspires App Framework library. Powerful interfaces can be designed by using app framework for mobile devices like iOS and Android. Mainly, three elements such as a library of graphical interface, a library of queries and event management, and a plug-in for WebKit library are included in this framework that makes it richer than jQuery Mobile. One of the best things about App Framework is it only requires only 3KB of memory. Additionally, it has three time faster scripts than jQuery on Android and two times faster on iOS.
Challenging Frameworks
Users can find many competing frameworks to App Framework that has more or less functionality than App Framework. In this post, we have mentioned jQuery Mobile, Sencha Touch and jQTouch. The most amazing advantage of App Framework is its execution speed and weight. If you are looking at the most powerful solution for mobile HTML 5 frameworks, then App Framework is on the top.
Fundamentals
Proxy Creation
Here, one can have to create domain requests using Ajax. It is to set PHP server and Apache for processing such requests. It is advisable to set up a small proxy through PHP as JavaScript does not allow manage the cross-domain requests directly. It is must to paste below given code into a server.php file that is located in the same place as HTML page. Ensure to enable the “php_curl” module in php.ini.
<? php $ url1 = $ _GET ["url"]; $ ch1 = curl_init () / / Check that the php_curl extension is enabled in php.ini curl_setopt ($ ch1, CURLOPT_URL, $ url); curl_setopt ($ ch1, CURLOPT_HEADER, false); curl_setopt ($ ch1, CURLOPT_RETURNTRANSFER, true); $ xml1 = curl_exec ($ ch1); echo $ xml1; curl_close ($ ch1); ?>
App Framework
App Framework is a mobile adaptation of jQuery, so both use the same syntax. Making use of this tutorial, you have to gather knowledge of jQuery. Click here to download the App Framework and paste in the directory of your site in the following folders and files like:
- ui
- kitchensink
- plugins
If you want to test, you must require a browser compatible with webkit and HTML5.
Tutorial
Do you want to know how to use App Framework for building mobile application? Let’s go through this example that based on the notion of a small reader of RSS feeds. It is basic information on App Framework. For this, we have to create our GUI with jqUI and have to implement features with App Framework.
Develop a page
In the first step, we have to create page and configure the App Framework. See below the skeleton of an App Framework Application:
<html>
<head>
<meta content="text/html; http-equiv="Content-type" charset=utf-8"/>
<script src="//cdn.app-framework-software.intel.com/2.0/appframework.min.js" type="text/javascript">
</script><script type="text/javascript" charset="utf-8"src="./ui/appframework.ui.min.js">
<link rel="stylesheet" type="text/css" href="css /af.ui.css"title="default" />
</script><script>
$.ui.ready (function ( ) {
$.ui.backButtonText ="Back". / / We override the back button text to always say" Back"
} ) ;
if (! ( (window.DocumentTouch && document instanceof DocumentTouch ) | | ' ontouchstart ' in window )) {
var script = document.createElement (" script");
script.src =" plugins/af.desktopBrowsers.js" ;
var tag = $ (" head" ). append ( script) ;
$.os.android = true;. / / let 's make it run like an android device
$.os.desktop = true. ;
}
</script>
</head>
<body>
<div id="afui">
</ div>
</ body>
</ html>Make a page “index.html” in the root of your server and paste the above given code. This code becomes the base of page. It takes the scripts that are must to make use of App Framework. Two components like a page and its content and a menu will be decomposed by application. Apart from, many other divs inside the “content” div of our HTML file are created through App framework for developing page.
We will begin with development of “RSS” through main page as it consists of an input that permits the user to enter a panel and an RSS link that contain the title list in the RSS flow. Now, you have to add the “content” div in the “afui” div. Ensure to give title “RSS” in your first page.
<div id="afui"> <div id="content"> <div title='RSS' class="panel" id="rss" style ="overflow: hidden" > </ div> </ div> </ div>
Now, you have to add a label, an input element and a submit button to allow users to enter a URL. The HTML5 tag “fieldset” will be used for allowing a grouping of input fields into logical categories (thematic).
</fieldset><fieldset> <legend> RSS 2.0 <form id="parser" onsubmit="return false"> <label for="links"> Enter rss 2.0 url <br /> <input type="text"id="links" name="links" class='jq-ui-forms'/> <input type="submit" class="button" value="Submit" onclick=" Rssparse ()"/> </ form> </ fieldset>
You will find classic HTML tags in the input and label tags to which we have to add classes that provided by afui. After that, you have to implement “Rssparse ()” function. After that, you have to create the part that shows the outcomes of the RSS feed. It is best to display RSS in the list form in various titles. The section is created dynamically, but we have to make the ground. Like same way, now we will add the same form to existing fieldset a second fieldset.
<fieldset> <legend> Rss Feed <ul id="flux"> </ul> </ fieldset>
In above given code, the HTML tag “ul” is added by us as our content is a list of titles. The HTML tag “ul” will be inserted by App Framework.
Menu Creation
It’s a time to create menu to an application. Two different types of menus are created by App framework, i.e. a navigation bar at the bottom of the application and menu on the left side of an application. Users will see second menu on their big screen device while it is retractable on smart phone. Let’s see how to create second type of menu. First of all, we are going to start developing a second page to our application for that, you just have to make a second div with a class “panel”.
<div title="Project" id="test">
Now, we have to add menu through “nav” tag by putting it outside of #content. This menu is automatically created by afui while class “title” allows defining a section. You can easily specify the link between the internal application pages in afui. So, the call of the page test will be created by href =”# test”.
<nav> <div class='title'> Business </div> <ul> <li class="BusinessHome"> <a href="#rss"> Home </a> </li> <li > <a href="#test"> test </a> </li> </ul> </nav>
Request and modification of the DOM
In next step, you have to implement the internal features and make it dynamic with the basis of our GUI.
Selectors
Once URL confirmed, we are going to recover the action of the users in our form. While creating this form, we have to define the submit button like this:
<input type="submit" value="Submit" onclick=" Rssparse ()"/>
The Rssparse() function will be called repeatedly when user click on the submit button. So, we have to implement it and have to more towards JavaScript. It would be good to implement the parserRss() function at the end of index.html file after “/html” (the closing tag). Firstly, the URL validated will be displayed by this function by the user.
<script>
function Rssparse ()
{
alert ($ ("# link1").val ())
}We all have noted that syntax is as same as jQuery. With this selector, one can get different objects of the DOM from their classes, id and tag type. While creating form, it is must to assign the input of type text, an id = link. It is input text containing the URL that inserted by users comes back while you are calling the selector $ (“# link1?). After selecting this element, you have to call val() function that return the value of the selected item. $ (” # link1?).val ( ) returns the URL entered by the user!
Ajax request
Ajax requests can be created by App Framework, just like jQuery. In this case also, App Framework doesn’t permit to create cross-domain Ajax requests because of cross-domain restrictions of the browsers. If you want to get a RSS feed from a URL, make a request on a server by using our proxy (cf. prerequisites):
function Rssparse ()
{
$. ajax ( {
url : ' ? server.php url =' + $ ("# link1" ).val ( ),
success : function ( data) {
alert (" ok");
},
error: function () {alert ("fail");}
} ) ;
}Here, an intermediate request is created on the proxy that specifying the true URL of the request. After that, proxy makes the request and sends us the outcome.
Xml parser and dynamic modification of the DOM
In next step, you have to deal with collected xml data. Using parseXML method that provided by App Framework allows to create a DOM Document object. Now, we have to call directly on the object that results from parseXML function, methods like getElementsByTagName.
function Rssparse ()
{
$. ajax ( {
url : ' ? server.php url =' + $ ("# link" ) val ( ).
success : function ( data) {
var xmld = $.parseXML (data) ;
var nodes =xmld.getElementsByTagName ("item" ) ;
$("# flux" ).empty ();
for (i + + var i = 0 ; i < nodes.length )
{
var titles= nodes[ i ].getElementsByTagName ("title" );
var dom = $ ("# flux" ).append (" <li> <a href=' ' >" + titles [0] childNodes [0]. nodeValue +"< / li >"...) ;
}
}
error: function () {alert ("fail");}
} ) ;
}No doubt, you will get most of the jQuery’s features in App Framework for mobile devices. Its rich libraries and unmatched performance make it an HTML5 mobile framework. Using this framework, you can simply create mobile applications within limited time-frame. For more information, visit this link. You can also share your views about this post through our comment section.
Loading…