Creating a Mobile HTML5 Application with App FrameworkBy Adrien Tchuya
What is App Framework?
App Framework library is inspired by jQuery. App Framework can design powerful interfaces for mobile devices such as Android or iOS. App Framework is composed of three elements: a library of queries and event management, a library of graphical interface and a plugin for WebKit library.
The library is functionally richer than jQuery Mobile. Another strong point of App Framework is that it requires only 3KB of memory against 35KB for jQuery. Scripts are also three times faster than jQuery on Android, and 2.2 times more faster on iOS.
There are several competing frameworks to App Framework. These frameworks have more or less the same functionality as App Framework. We can mention among the best known: jQuery Mobile, Sencha Touch, jQTouch. The biggest advantage of App Framework is its weight and its execution speed. App Framework is the most powerful solution for mobile HTML 5 frameworks.
Creation of a proxy
<? 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 is a mobile adaptation of jQuery, so, both Frameworks use the same syntax. For this tutorial it is better to have some knowledge of jQuery. The App Framework can be downloaded at this address. Copy and paste into the directory of your site the following folders and files:
Note: To test, you need a browser compatible with webkit and HTML5.
We will show you through this example how you can use App Framework to build your mobile application. Briefly, our example will be based on the conception of a small reader of RSS feeds. This is just to give you a basic knowledge of App Framework. Firstly we will build our GUI with jqUI and implement some features with App Framework.
Create a page
As a first step, we will create our page and configure our App Framework. Here is the skeleton of an App Framework Application:
Create a page “index.html” in the root of your server and add the code above. This code is the base of our page, it imports the scripts that are necessary to use App Framework.Our application will be decomposed into two components: a page and its content and a menu. With App Framework, in order to create a page, we will create several divs inside the “content” div of our HTML file.
We’ll start by creating our main page “RSS” It will contain an input that allow the user to enter an RSS link and a panel containing the list of titles in the RSS flow. In the “afui” div we will add the “content” div. It is within this specific div that we will create the different pages of our application. Our first page will be titled “RSS”.
<div id="afui"> <div id="content"> <div title='RSS' class="panel" id="rss" style ="overflow: hidden" > </ div> </ div> </ div>
We will add to our page an input element, a label and a submit button that allows the user to enter a URL. We will use the HTML5 tag “fieldset”. The
- 1 Why You Need to Know About Sketch's New File Format
- 2 Fetching Data from a Third-Party API with Vue.js and Axios
- 3 How to Improve Site Performance (and Conversions) with Dareboost
- 4 Killer Way to Show a List of Items in Android Collection Widget
- 5 Make Your Own Social Network, Game Server, or Knowledgebase! - Sourcehunt