Thursday, May 28, 2015

jQuery Mobile App using Grids For Android and BlackBerry

Here we describe Step by step How to create a jQueryMobile App using Grids For Android and BlackBerry
In this post we'll build together in 20 minutes a small jQuery Mobile HTML5 App using Grids for all kind of Mobile Devices  : BlackBerry, Nexus , Acer , Nokia, iPad, iPhone, etc...
The source code for this tutorial is located in this GitHub repository:
https://github.com/CarmelSoftware/jQueryMobile_Grids
This small Mobile App looks like this:


And this is how it is displayed on a Mobile emulator:

jQuery Mobile App using Grids For Android and BlackBerry   1



jQueryMobile App using Grids For Android and BlackBerry 



For this tutorial we will use the jQuery Mobile and  jQuery Frameworks, so browse to http://jquerymobile.com/ and to  jQuery official web site  . Then copy the URLs of the latest versions of the files on CDN  . We  will also use a Mobile Emulator,  so please refer to this 5 minutes tutorial on installing the Ripple Mobile Emulator.
There is   this "First jQueryMobile App" Tutorial. for a more detailed explanation on installing the frameworks and the emulator.

After you obtain the frameworks URLs, add them to the HTML5 file:

jQuery Mobile App using Grids For Android and BlackBerry  2

Then, add a data-role="page" and a data-role="header" :

jQuery Mobile App using Grids For Android and BlackBerry   3


1) Grid with 100% Column Width:



jQuery Mobile has a set of built-in CSS3 column layouts, meant to position buttons , navigation tabs, etc , as if it was in a table.
This is accomplished by using the ui-grid-solo|a|b|c|d classes for the parent div,
and ui-block-a|b|c|d|e for the elements.
Inside the div that we wrote, that represents a Page of our jQueryMobile App , we insert another <div> in it , to be a Grid with only one compartment , using the class ui-grid-solo :
jQuery Mobile App using Grids For Android and BlackBerry   4



We use the  jQuery Mobile class ui-block-a to define a column to the left inside the Grid.
Inside, we add a button , with Icon, shadow and round corners, using the correspondant  jQuery Mobile classes.


2) Grid with 50% - 50% Column Widths:


Now we create a Grid with two columns as follows :

jQuery Mobile App using Grids For Android


3)  Grid with 33% -  33% -  33% Column Widths:

Next, we add another Grid , this time for three columns, which is done this way :
jQuery Mobile App using Grids


Finally, we append a Footer , in order to properly close this jQuery Mobile App, with a Navbar:


jQuery Mobile App using Grids For  BlackBerry

The complete list of Grid options can be found at the  jQuery Mobile official web site.

If you wish , you can also add a data-role="page" for the dialog that the buttons above open:


jQuery Mobile App using Grids For Android and BlackBerry


Now let's open the Ripple jQuery Mobile Emulator to see our App and to check it:




jQuery Mobile App using Grids 1


Here you see the One Column's Layout:

jQuery Mobile App using Grids For Android and BlackBerry


Here you see the Two Column's Layout and the Three Columns one:

 Mobile App using Grids For Android and BlackBerry


We customized this App by adding some style in a CSS3 file as follows:

.content {
    text-align:center;    
    font:900 30px Lucida Handwriting;
    font-style:italic;    
    background:#F0FFFF;
    color:#3399FF;
}
.footer {
    font:700 8px Comic Sans MS;
}
.container {
   text-align:center;
}




That's it....

Happy programming.....

      by Carmel Schvartzman


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