Bintu  Harwani Author of Evaluating Organization Development
FEATURED AUTHOR

Bintu Harwani

Founder and owner of Microchip Computer Education (MCE), based in Ajmer, India
Microchip Computer Education (MCE)

B.M.Harwani is founder and owner of Microchip Computer Education (MCE), based in Ajmer, India that provides computer education in all programming and web developing platforms. He graduated with a BE in computer engineering from the University of Pune, and also has a 'C' Level (master's diploma in computer technology) from DOEACC, Government Of India. Being involved in teaching field for over 18 years, he has developed the art of explaining even the most complicated topics in a straightforward an

Biography

Books Published
• Foundation Joomla published by Friends Of ED
• jQuery Recipes published by Apress
• Core Data iOS Essentials published by Packt
• Introduction to Python Programming and Developing GUI Applications with PyQT published by Cengage Learning
• Android Programming Unleashed  published by Sams Publishing
• The Android Tablet Developer's Cookbook (Developer's Library) published by Addison-Wesley Professional
• PhoneGap Build: Developing Cross Platform Mobile Applications in the Cloud published by CRC Press

Education

    B.E. (Comp. Engg.) from the University of Pune, and 'C' Level (Master's Diploma in Computer Technology) from DOEACC, Government Of India.

Areas of Research / Professional Expertise

    Web Development and Smartphone Programming

Websites

Books

Featured Title
 Featured Title - PhoneGap Build - 1st Edition book cover

News

Implementing Navigation Among Pages in a Mobile Application

By: Bintu Harwani
Subjects: Computer Science & Engineering

Unlike traditional Web pages, where each Web page is maintained in a separate HTML file, in mobile programming, multiple pages are defined into a single HTML file. The idea is that once the file is loaded, all the contained pages can be navigated without network requests.

We can define multiple pages in an application by using the data-role attribute. By assigning a page value to the data-role attribute for more than one, we can define multiple pages. For example, the following code defines two pages, Home and Page 2, in an application:

<!—Home Page—>

<div data-role = "page" id = "home">

<div data-role = "header">

<h1>Home page heading</h1>

</div>

<div data-role = "content">

<p>Body of the Home Page </p>

</div>

<div data-role = "footer">

<p>Footer of the Home Page </p>

</div>

</div>

<!—Page 2—>

<div data-role = "page" id = "page2" ">

<div data-role = "header">

<h1>Page 2 </h1>

</div>

<div data-role = "content">

<p>Body of the Page 2 </p>

</div>

<div data-role = "footer">

<p>Footer of the Page 2 </p>

</div>

</div>

The unique ID is assigned to each page for identifying them and also for implementing navigation among them. For example, if the ID of a page is page2, then a hyperlink href ="#page2" can be used to navigate to page2.

The following link, when added in the header or footer of the home page, will enable navigating to page 2:

<a href = "#page2">Page 2</a>

The link is automatically rendered as a button. We can also exclusively specify a button by associating data-role = "button" with the link shown below:

<a data-role = "button" href = "#page2" >Page 2</a>

The button in the code above will appear on the left side of the header or footer. To make the button appear on the right side, we add class = "ui-btn-right" to the link, as shown below:

<a data-role = "button" href = "#page2" class = "ui-btn-right">Page 2</a>

We can always add an icon to the link. jQuery Mobile includes a number of icons that we can use in our application. For example, the following hyperlink uses the info icon for navigating to page 2.

<a href = "#page2" data-icon = "info">Page 2</a>

In order to add a Back button in the header of a page to navigate us one page back in the history, the following code is used:

<a href = "#home" data-icon = "arrow-l" data-rel = "back">Back</a>

The code above will navigate back to the Home page of the application. The data-rel = "back" attribute in the statement above will make the Back button mimic a browser’s Back button.

Let us create an application that comprises of three pages, Home, Page 2, and Page 3. The Home page will have a link button in its header that, when clicked, will navigate us to Page 2. In Page 2, there will be a Back button in its header that, as expected, when clicked, will navigate us back to the Home page. In the footer of Page 2, there will be a link button that, when clicked, will navigate us to Page 3. In Page 3, there will be two link buttons in the header. The link button on the left, when clicked, will navigate us back to Page 2, and the button on the right side, when clicked, will navigate us to the Home page of the application. To create three pages and implement navigation among them, add an html page called multiplepage.html to the assets/www folder of our Android project, JQMIntroApp. In the multiplepage.html write the code as shown in Listing 1.

Listing 1 Code Written in the multiplepage.html File

<!DOCTYPE HTML>

<html>

<head>

<title>PhoneGap Application</title>

<script type = "text/javascript" charset = "utf-8" src = "cordova-2.3.0.js">

</script>

<link href = "jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" rel =

"stylesheet" type = "text/css"/>

<script src = "jquery-1.8.3.min.js" type = "text/javascript"></script>

<script src = "jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js" type = "text/

javascript"></script>

<script type = "text/javascript">

function onBodyLoad(){

document.addEventListener("deviceready", PhonegapLoaded, false);

}

function PhonegapLoaded(){

alert("PhoneGap loaded");

}

</script>

</head>

<body onload = "onBodyLoad()">

<!—Home Page—>

<div data-role = "page" id = "home">

<div data-role = "header">

<h1>PhoneGap Mobile Application</h1>

<a data-role = "button" href = "#page2" >Page 2</a>

</div>

<div data-role = "content">

<p>Body of the Home Page </p>

</div>

</div>

<!—Page 2—>

<div data-role = "page" id = "page2" data-add-back-btn = "true">

<div data-role = "header">

<h1>Page 2 </h1>

</div>

<div data-role = "content">

<p>Body of the Second Page </p>

</div>

<div data-role = "footer">

<a href = "#page3" data-icon = "info">Page 3</a>

</div>

</div>

<!—Page 3—>

<div data-role = "page" id = "page3">

<div data-role = "header">

<h1>Page 3 </h1>

<a data-role = "button" href = "#page2" data-icon = "arrow-l"

>Back</a>

<a data-role = "button" href = "#home" data-icon = "home">Home</a>

</div>

<div data-role = "content">

<p>Body of the Third Page </p>

</div>

</div>

</body>

</html>

Our multiple-page application is ready to run. Upon running the application, a page, Home page, will appear on start-up, as shown in Figure1.

 

The header of the Home page shows the text PhoneGap Mobile Application. On the left side of the header, a button with the caption Page 2 will appear. Upon clicking the Page 2 button from the Home page, we will be navigated to Page 2  (see Figure 2).

 

The content of Page 2 displays the text, Body of the Second Page. The footer of Page 2 contains a button with the caption Page 3, which, if clicked, will navigate us to Page 3. Page 3 has two buttons, Back and Home, in its header, as shown in Figure 3).

 

The Back button will navigate us to Page 2, and the Home button, if clicked, will navigate us to the Home page. The content of Page 3 displays the text, Body of the Third Page.

To learn more about mobile applications and to develop your own cross platform mobile applications, read my book, PhoneGap Build: Developing Cross Platform Mobile Applications in the Cloud available at the below given link:

http://www.amazon.com/PhoneGap-Build-Developing-Platform-Applications/dp/1466589744/ref=sr_1_1?ie=UTF8&qid=1396638130&sr=8-1&keywords=bintu+harwani