Creating a Mobile HTML5 Application with App Framework

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

The input and label tags are classic HTML tags, to which we added classes provided directly by afui. The “Rssparse ()” function will be implemented later.

Now that we have the first part of our page, we will have to create the part that displays the results of the RSS feed. We want to display, in the form of list, the various titles in the RSS feed. This section will mainly be created dynamically, but we have to prepare the ground. In the same way as for the form, we will add to the existing fieldset a second fieldset.

<fieldset>
        <legend> Rss Feed 
            <ul id="flux">
            </ul>
</ fieldset>

We have added the HTML tag “ul” because our content is a list of titles. App Framework will insert the “li” tags.

Creating a Menu

We are going to create a menu to our application. App Framework can easily create two types of menu. The first one is a navigation bar at the bottom of the application. The second is a menu on the left side of our application. The second menu is constantly displayed on the big screens but is retractable on smaller screens (smart phone). We will create this second type of menu.

Firstly we will start by creating a second page to our application. Just create a second div with a class “panel”.

<div title="Project" class="panel" id="test">

We will now add our menu through a tag “nav”. This tag is to be placed outside of #content. The menu is created automatically by afui. The class “title” allow us to define a section title. In afui the links between the internal pages of the application are specified by their id. So the call of our page test will be made 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

Now that we have the basis of our GUI, we are going to implement the internal features and make it dynamic.

selectors

As a first step, we are going to recover the action of the user when this one confirm a URL in our form. When creating this form, we defined the submit button like this:

<input type="submit" class="button" value="Submit" onclick=" Rssparse ()"/>

When the user will click on the submit button, the Rssparse() function will be called automatically. So we need to implement it. We will now turn to JavaScript. We will implement the parserRss() function at the end of our index.html file, after the closing tag “/html”. Initially this function will display the URL validated by the user.

<script>
function Rssparse ()
{
alert ($ ("# link1").val ())
}

The syntax is the same as jQuery. These selectors will allow us to get different objects of the DOM, from their id, their classes or their tag type.

Remember that during the creation of our form, we assigned to the input of type text, an id = link. By calling the selector $ (“# link1″ ), it is our input text containing the url entered by the user that is returned. Once this element was selected, we call val() function, that returns us the value of the selected item. $ (” # link1″ ).val ( ) returns the URL entered by the user!

Ajax request

In the same way as jQuery, App Framework can make Ajax requests. Due to cross-domain restrictions of the browsers, App Framework, just like jQuery, does not allow to make cross-domain Ajax requests.In our case, to get a RSS feed from a URL, we want to make a request on a server that is not ours. To make this request, we will use our proxy (cf. prerequisites ).

function Rssparse ()
{
$. ajax ( {
url : ' ? server.php url =' + $ ("# link1" ).val ( ),
success : function ( data) {
alert (" ok");
},
error: function () {alert ("fail");}
} ) ;
}

Here we make an intermediate request on our proxy specifying him the true URL of the request. Our proxy will then, take care, in PHP, to make the request and send us the result.

Xml parser and dynamic modification of the DOM

Having collected our xml data, we must now deal with them. App Framework provide us with a method named parseXML which allow, from a xml text, to build a DOM Document object. We can call directly on the object resulting from parseXML function, methods such as 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");}
} ) ;
}

Conclusion

App Framework offers most of the features of jQuery adapted to mobile devices.Its rich libraries and its unmatched performance, make it a comprehensive mobile HTML5 framework. This framework will allow you to build mobile applications in a very short time.

You can find the documentation here http://app-framework-software.intel.com/documentation.php.