jQueryMobile App using Navbars For Android and BlackBerry

In this post we describe Step by step How to create a jQueryMobile App using Navbars For Android and BlackBerry.

In this article we'll build from scratch in 20 minutes a small jQuery Mobile HTML5 App using Navbars at both  header and footer , for use on all kind of Mobile Devices  : Nexus Galaxy, BlackBerry, Acer , Nokia, iPad, iPhone, and more...
This Mobile App can be downloaded from the following GitHub repository:
https://github.com/CarmelSoftware/jQueryMobile_Navbars
This small Mobile App shows like this:

This is how it is displayed on the Ripple Mobile emulator:

jQueryMobile App using Navbars For Android and BlackBerry 

For this tutorial we will need the jQuery Mobile and the jQuery Frameworks, therefore go to http://jquerymobile.com/ and to  the  jQuery official web site  and copy the URLs of the latest version of the frameworks on CDN  . We  will also need a Mobile Emulator, for testing purposes, so please follow this 5 minutes tutorial on installing the Ripple Mobile Emulator.

There is a more detailed explanation on installing the frameworks and the emulator,  at this "First jQueryMobile App" Tutorial.  :

After you got the frameworks, add the references to a new HTML5 file:

1) Header's Navbar with Shadows and Round Corners:

Write a div to be a Page of our jQueryMobile App , and insert another <div> in it , to be its Header:

We use the data-role jQuery Mobile directive to define a "navbar" inside the Header.

This Navbar will hold a <ul> list which its <li> list items will contain jQuery Mobile Buttons , based on <a> hyperlinks.

Also, we add to the three buttons , Icons, shadows and round corners, using jQuery Mobile classes.

Next, if you like, add some text to the page, and some more buttons:

2) Footer's Navbar with Horizontal Grouping, Icons , Shadows and Round Corners:

Next, we add a Navbar to the Footer, which is a fixed footer :

Again, we create a <ul> list with some <a> buttons in it. They will have icons, defined with the data-icon directive.

But this time we do not add shadows nor round corners, to attain a more compact group of Navbar buttons.

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

We used the data-position "fixed" directive at the header and the footer, in order to stuck them while the user is scrolling the page.  

Now let's open our jQuery Mobile App in the Ripple emulator to check it:

 As you can see, the Navbar at the Header has shadows and round corners, making it more appealing and good looking:

 The Footer Navbar that we did , contains five buttons with icons, but we refused to add shadows and round corners. However, it looks very nice either:

For customizing this App we added some style in a CSS file as follows:

That's it....Hope you've enjoyed this article  ,

Happy programming.....

      by Carmel Schvartzman

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

How to install the Ripple Mobile App Emulator for Android BlackBerry Nokia iPad iPhone in 5 minutes

In this post we describe Step by step How to install the Ripple Mobile App Emulator for Android BlackBerry Nokia iPad iPhone in 5 minutes.

In this article we install a Mobile Emulator for use on the kind of Mobile Device that you wish: Nexus Galaxy, BlackBerry, Acer , Nokia, iPad, iPhone, and more...
Ripple is multi-platform aimed to mobile HTML5 application development and testing.
This jquery Mobile Emulator looks as the following:

How to install the Ripple Mobile App Emulator for Android BlackBerry Nokia iPad iPhone in 5 minutes 

You can get and run the code for the jQuery Mobile App showed above, from this GitHub rep:
https://github.com/CarmelSoftware/jQueryMobile_PaginationAndButtons

Ripple is browser agnostic. However, here we'll be installing it on Chrome.
Open the Chrome Webstore and make a search for the FREE "Ripple" Emulator:

At the moment of writing this post, there is a "Beta" version of the Ripple Emulator. But it is being tested and it responds very well. Take a look at the feedbacks: by now, more than 500 web developers have rated this beta version with 4 stars. So go ahead and install this Chrome extension 

After the installation, open some jQuery Mobile App url. The emulator will respond with this screen:

This will be just the first time that you use Ripple. The emulator wants to know your preferences. You can just click on the default option ("Mobile Web").

Next, check that the "Allow access to file URLs" option is enabled in Chrome:

Finally, you can test your Mobile App with plenty of different devices :

You can choose for a "Dark" or a "Light" background also:

That's it.... 

Happy programming.....

      by Carmel Schvartzman

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

How to create a jQueryMobile Popup Dialog in 10 minutes

In this article we review Step by step How to create a jQueryMobile Popup Dialog in 10 minutes.

Here we make from scratch in 10 minutes a small jQuery Mobile HTML5 App with buttons , paging , and a PopUp Dialog for use on all kinds of Mobile Devices  : Nexus Galaxy, BlackBerry, Acer , Nokia, iPad, iPhone,  ...
Here we'll build a Mobile app with two pages. When the user wants to go to the second page (a fictitious external web site) she/he will be prompted with a Popup Dialog whether is sure to abandon the site, and will be given the chose between proceeding or canceling the decision.
The complete code for this Mobile App can be get from this GitHub repository:
https://github.com/CarmelSoftware/jQueryMobile_PopUp

This small jquery Mobile App will display as the following:

How to create a jQueryMobile Popup Dialog in 10 minutes 

First , we need the jQuery Mobile files and the jQuery Framework, so browse to http://jquerymobile.com/ and to  the  jQuery official web site  and get the latest version of the frameworks  . Also we'll need an emulator, to see how our App will display on different Mobile devices, therefore open the Chrome Webstore and look for the FREE "Ripple" Emulator. Install it and check at the Chrome Extensions that the Emulator has full access to file URLs , and that it's enabled.

For a more detailed explanation about downloading those script frameworks and emulator, refer to this "First jQueryMobile App" Tutorial. 

After you get the scripts, add the following references to a new HTML5 file at the "head" element :

Next,  write a div to contain a first Page of our jQueryMobile App:

Now add a button to open the Popup Dialog as follows:

The important thing here is the data-rel="dialog" and the href reference to the Dialog page.

This is our first page, with three <div>s for a Header , Content and a Footer,  identified by the "data-role" jQueryMobile  directive, and with some style got by using the "data-theme" directive.

Now let's add a second page as follows:

We add here a button to go back to the first page:

And also some text for demonstration's sake:

Now we create the Dialog, as a page:

In the Content data-role we write the message, and add two buttons: one for cancelling with the data-rel="back" directive, and the other to go to page2:

Notice that the "back" rel goes back with the same transition that we apply from the previous page.

Let's see how it is displayed at the mobile emulator:

Click the button to browse to the SomewhereElse page:

And proceed to the next page:

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

Happy programming with jQueryMobile.....

      by Carmel Schvartzman

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

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 

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  :

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

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:

After the installation check that the Emulator has access to file URLs , and that it's enabled:

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

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 :

Next, let's write a div to contain the first Page of our jQueryMobile App:

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:

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:

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

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:

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:

Click the button to browse to the second page:

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

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:

Do the same for all pages:

Now let's try our Mobile App:

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

 jQueryMobile SlideDown animation:

 Fade animation:

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

Happy programming.....

      by Carmel Schvartzman

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