Monday, May 4, 2015

Simple First jQueryMobile App For Android and BlackBerry in 20 minutes

In this post we describe Step by step How to create a Simple First jQueryMobile App For Android and BlackBerry in 20 minutes.
In this article we make from scratch in 20 minutes a small jQuery Mobile HTML5 App with buttons and paging , for use on the kind of Mobile Device that you wish: Nexus Galaxy, BlackBerry, Acer , Nokia, iPad, iPhone, and more...
This jquery Mobile App will show as the following:
Simple First jQueryMobile App For Android and BlackBerry in 20 minutes
Simple First jQueryMobile App For Android and BlackBerry in 20 minutes  1



Simple First jQueryMobile App For Android and BlackBerry in 20 minutes 


The complete code for this App can be downloaded from this GitHub rep:
https://github.com/CarmelSoftware/jQueryMobile_PaginationAndButtons

First , we need the jQuery Mobile files, so browse to http://jquerymobile.com/and get the latest version of the framework  :

Simple First jQueryMobile App For Android and BlackBerry in 20 minutes    2


Simple First jQueryMobile App For Android and BlackBerry in 20 minutes   3




Since jQuery Mobile uses jQyery, do the same thing to get the jQuery Framework from the  jQuery official web site:

Simple First jQueryMobile App For Android and BlackBerry in 20 minutes   4

Simple First jQueryMobile App For Android and BlackBerry in 20 minutes   5



Next, we'll need an emulator, to see how our App will show on Mobile devices. 
So open the Chrome Webstore and search for the FREE "Ripple" Emulator:

Simple First jQueryMobile App For Android and BlackBerry in 20 minutes   6

Simple First jQueryMobile App For Android and BlackBerry

After the installation check that the Emulator has access to file URLs , and that it's enabled:
Simple First jQueryMobile App For Android and BlackBerry in 20 minutes

Open the jQueryMobile and the jQuery downloaded files and find the following .js javascript files:



First jQueryMobile App For Android and BlackBerry in 20 minutes

Copy them to a "script" folder in your project. Do the same which the "jquery.mobile-X.X.X.css" CSS file, inside a "style" folder (the "X.X.X" are for the current CSS version of the file).
Add all the references to a new HTML5 file at the "head" element :

 jQueryMobile App For Android and BlackBerry in 20 minutes
Next, let's write a div to contain the first Page of our jQueryMobile App:

Mobile App For Android and BlackBerry in 20 minutes

Take a close look at the code: there is a <div> with ID="page1" : that is our first page. Inside there are three <div>s for a Header , Content and a Footer, all of them identified by the "data-role" jQueryMobile  directive. Also, we add some style using the "data-theme" directive.

Let's try it. Open Chrome and click the Ripple button at the top-right:

App For Android and BlackBerry in 20 minutes

The HTML page will open and you can choose the kind of Mobile Device that you want: Nexus Galaxy, BlackBerry, Acer, Nokia, iPad, iPhone, and more:

Android and BlackBerry in 20 minutes

Provided everything's ok, we proceed to add a button to open a second page, as follows:

Simple First jQueryMobile App For Android and BlackBerry
The directives are as before, and we add a new one data-transition directive for the animation between pages.
Now let's append a second page as follows:

Simple First jQueryMobile App For Android

We did the same as before, but this time there are two buttons, one for the previous page and another for the next one.
Let's see how it is displayed at the mobile emulator:


Simple First jQueryMobile App

Click the button to browse to the second page:

Simple First jQueryMobile

Next, let's add a third page as follows:


Simple jQueryMobile App   BlackBerry in 20 minutes

As you see, now the button reference points to the second page. Also, we try different transitions : pop, flip, slide, slideup, slidedown, fade....Choose the one that you wish...
And finally, let's add some text to make it more realistic:


Simple  Mobile App For   BlackBerry in 20 minutes

Do the same for all pages:

Simple   jQuery  App For Android  in 20 minutes


Now let's try our Mobile App:

 App For Android and BlackBerry in 20 minutes

Simple   jQuery  App For  BlackBerry in 20 minutes

 First jQueryMobile App For Android   minutes

All three pages look fine , and the animations are attractive: Flip:

 jQueryMobile App For   BlackBerry in  minutes

 jQueryMobile SlideDown animation:
 Android and BlackBerry in 20 minutes

 Fade animation:
 BlackBerry in 20 minutes




That's it....Hoping you enjoyed this article  ,

Happy programming.....

      by Carmel Schvartzman


כתב: כרמל שוורצמן