Skip to content

February 1, 2012

6

Basic cross-platform mobile app with jQuery Mobile and Phonegap

by nady

In this tutorial we will show how to build basic mobile apps using jQuery mobile and PhoneGap.

In this tutorial we will cover the next topics:

  • Setup jQuery Mobile along with Phonegap
  • Create pages with toolbars and navigation
  • Get device information

Final result:

jquery mobile and phonegapjquery mobile and phonegap example 2

Download sourcecode example of using jquery mobile and phonegap

Phonegap is a open source framework that allows you to create native mobile applications using web technologies like HTML5, CSS3 and JavaScript.

The user interface for the application will be build with jQuery Mobile that is an HTML5 user interface framework made with jQuery and jQuery UI for smartphones and tablets , working with iOS, Android, Blackberry, Bada, Windows Phone, WebOS, Symbian and Meego. This is the simplest way to build source code portable mobile apps by using jQuery mobile and PhoneGap.

1. Download & Setup

We will proceed to configure jQuery mobile and PhoneGap. First will setup your new project with Phonegap. For different platforms follow these indications. Follow this tutorial to setup your first mobile application with Phonegap for Android. Of course the same technologies: jquery mobile and phonegap can be easyliy used for building iPhone apps as we said. Such tutorial about developing iPhone apps using jquery mobile and phonegap will be written later.

Now in your project/assets/www (from now on we’ll call this path as www) add the following folders and files to keep our structure well organized.

Move your phonegap.js into a new js folder and create js/script.js
Create css/style.css
Create folder mylibs
You should have already index.html, create a new file page2.html

Download jQuery minified version into www/mylibs .

Download jQuery Mobile Zip file and extract folder images and files jquery.mobile-VERSION.min.css and jquery.mobile-VERSION.min.js into www/mylibs/jQueryMobile .

Open index.html and add the following starting code:

<!DOCTYPE HTML>
<html>
<head>
      <title>DigitalNoiz</title>
      <!-- jQuery Mobile setup -->
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="mylibs/jQueryMobile/jquery.mobile-1.0.1.min.css" />
      <script src="mylibs/jquery-1.7.1.min.js"></script>
      <script src="mylibs/jQueryMobile/jquery.mobile-1.0.1.min.js"></script>
      <!-- Phonegap setup -->
      <script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>
      
      <link rel="stylesheet" href="css/style.css" />
      <script type="text/javascript" charset="utf-8" src="js/script.js"></script>
</head>
<body>

</body>
</html>

The meta viewport in the head assures that the width will always have the same size as the device screen.

2. Create pages

See next code, following our jquery mobile and phonegap tutorial:

<div data-role="page">
    <div data-role="header" data-position="fixed"></div>
    <div data-role="content"></div>
    <div data-role="footer" data-position="fixed"></div>
</div>

In order to create a page we need inside the <body> tag a <div> that has the attribute data-role="page". Then inside the page we create other 3 divs that will be the header, content and footer by adding the data-role attribute with the corresponding value. Because the toolbars will have a fixed position, we add the attribute data-position="fixed".

To create multiple pages you could use multiple .html files or add into the same .html file multiple divs with data-role="page" that will be referenced by id. Ex:

<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed"></div>
    <div data-role="content"></div>
    <div data-role="footer" data-position="fixed"></div>
</div>

<div data-role="page" id="page2">
    <div data-role="header" data-position="fixed"></div>
    <div data-role="content"></div>
    <div data-role="footer" data-position="fixed"></div>
</div>

When loading a page the content is brought with AJAX and appended to DOM if it’s not already there, so be careful not to duplicate ids.

3. Toolbars

Continuing our tutorial on jQuery mobile and PhoneGap, the header will contain a back button, a heading and a home button. Buttons in toolbars are made with anchor.

<div data-role="header" data-position="fixed">
    <a href="#" data-rel="back" data-icon="arrow-l">Back</a>
    <h1>DigitalNoiz Title</h1>
    <a href="index.html" data-icon="home">Home</a>
</div>

To obtain the back button behavior we add data-rel="back" that ignores the anchor href and goes back one history entry.
We add some icons to the buttons with attribute data-icon, find more predefined icons here

The footer will contain the navigation, a navbar with a list of anchors.

<div data-role="footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="index.html" data-icon="grid" class="ui-btn-active ui-state-persist">Page 1</a></li>
            <li><a href="page2.html" data-icon="gear">Page 2</a></li>
        </ul>
    </div>
</div>

The icons from navbar are by default set above the text, but it can be set to whatever position you like.
In order to indicate what button is selected add the class ui-btn-active and for this button to remain selected when the user returns to this page by using back button add class ui-state-persist .

4. Second page

So far so good in building our app using jQuery mobile and PhoneGap. Copy the code you have created until now in index.html and put it in page2.html.

Let’s make some changes on page 2:

  • change the title of the page into Page 2 | DigitalNoiz
  • change the heading in header to DigitalNoiz Title 2
  • the basic transition between pages is slide from right to left and to make the transition of home button stand out a little add the attribute data-transition="pop" . The available page transitions options are slide, slideup, slidedown, pop, fade and flip.
  • add some lorem ipsum text and an <h2> tag to the content div
  • to create an effect of sliding from page 2 back to page 1 (slide from left to right) add the attribute data-direction="reverse" on page 1 anchor from navbar
  • move classes ui-btn-active and ui-state-persist to page 2 anchor
<!DOCTYPE HTML>
<html>
<head>
      <title>Page 2 | DigitalNoiz</title>
      <!-- jQuery Mobile setup -->
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="mylibs/jQueryMobile/jquery.mobile-1.0.1.min.css" />
      <script src="mylibs/jquery-1.7.1.min.js"></script>
      <script src="mylibs/jQueryMobile/jquery.mobile-1.0.1.min.js"></script>
      <!-- Phonegap setup -->
      <script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>
</head>
<body>

<div data-role="page">
      <div data-role="header" data-position="fixed">
            <a href="#" data-rel="back" data-icon="arrow-l">Back</a>
            <h1>DigitalNoiz Title 2</h1>
            <a href="index.html" data-icon="home" data-transition="pop">Home</a>
      </div>
      <div data-role="content">
            <h2>Lorem Ipsum</h2>
            <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue eros ultricies diam mattis molestie. Cras vitae urna vitae lorem lacinia eleifend ut nec ipsum. Pellentesque dignissim, neque sit amet lacinia ultricies, felis turpis malesuada ipsum, in vestibulum mi nunc quis sapien. Mauris eleifend auctor nibh, eu lobortis dolor vehicula sed. Cras pretium ullamcorper dapibus. Suspendisse potenti. Integer viverra elementum sapien, nec consectetur magna gravida sit amet. Nulla facilisi. Donec tortor lectus, varius ut tincidunt eu, egestas eu velit. Nam accumsan tellus vitae dui tristique sit amet scelerisque ligula consequat. Curabitur sagittis dolor eget lacus congue aliquam. Suspendisse fringilla tempus elit sed vehicula. Curabitur ultrices tempus felis sed accumsan. Etiam hendrerit vestibulum turpis non laoreet. Aliquam elementum, libero nec fermentum sollicitudin, magna odio tincidunt est, vel pretium mauris dolor sed metus. Sed id mi libero, et feugiat urna.
            </p>
      </div>
      <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                  <ul>
                        <li><a href="index.html" data-icon="grid" data-direction="reverse">Page 1</a></li>
                        <li><a href="page2.html" data-icon="gear" class="ui-btn-active ui-state-persist">Page 2</a></li>
                  </ul>
            </div>
      </div>
</div>

</body>
</html>

5. Get device information

It’s time for our mobile application to tell us about the device on which is running!
Into the content div add the following:

<h2>Device Details</h2>
<table>
    <tr>
        <th>Device Name:</th>
        <td id="devName"></td>
    </tr>
    <tr>
        <th>Device Platform:</th>
        <td id="devPlatform"></td>
    </tr>
    <tr>
        <th>Device UUID:</th>
        <td id="devUUID"></td>
    </tr>
    <tr>
        <th>Device Version:</th>
        <td id="devVersion"></td>
    </tr>
    <tr>
        <th>Device Phonegap:</th>
        <td id="devPhonegap"></td>
    </tr>
</table> 

Open js/script.js and add:

// handling document ready and phonegap deviceready
window.addEventListener('load', function () {
    document.addEventListener('deviceready', onDeviceReady, false);
}, false);

// Phonegap is loaded and can be used
function onDeviceReady(){
      getDeviceInfo();
}

// get device info
function getDeviceInfo(){
      $('#devName').text(device.name);
      $('#devPlatform').text(device.platform);
      $('#devUUID').text(device.uuid);
      $('#devVersion').text(device.version);
      $('#devPhonegap').text(device.phonegap);
}

The two event listeners assure that both jQuery Mobile and Phonegap are ready to use. When Phonegap is loaded it runs the function onDeviceReady() and the API is safe to use.
In the function getDeviceInfo(), the device object gives us details about the device hardware and software.

6. Deploy

The application built using jQuery mobile and PhoneGap is ready to use, but before that let’s style just a little bit the content.
Open css/style.css and add:

h2{
      text-align:center;
      color:#060;
}

p{
      text-align:justify;
}

table{
      font-size:18px;
}

tr:nth-child(odd){
      background:#eee;
}

th{
      text-align:left;
}

This concludes this tutorial on how to build an app with web technologies by using jQuery mobile and PhoneGap, which is a great choice if you want to: quickly develop mobile apps that are portable (at source code level) and are easy to develop (by using web technologies). Follow the other tutorials that uses jQuery mobile and PhoneGap, the purpose is to cover most of what can be done using jquery mobile and phonegap technology. Later we will cover other technologies for building mobile apps.

There you go! This is your app using jquery mobile and PhoneGap, Enjoy!

Read more from Mobile

Leave a Reply

required
required

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments