06 - Build App with Multiple Screens in Phonegap

Introduction

If you are a regular user of mobile apps, you might know that most of the mobile apps have more than one screen. Most of the apps need multiple screens to display the required details. Of course, you might have to navigate between screens to accomplish the purpose of the app. PhoneGap also allows you to build apps with multiple screens. To navigate between those screens, we can either include hyperlinks or buttons.

Create an app with multiple screens

Let’s create a mobile app for Android platform this time. This app has three screens that allow us to navigate between. So, first open the terminal window and point to the android/bin folder by entering the following command:

cd /Users/apple/Documents/MobileAppDevelopment/phonegap-2.9.0/lib/android/bin (Make sure that path to your PhoneGap folder is specified correctly)

Enter the following command to create a project named AndroidMultiScreens on the desktop.

./create /Users/apple/Desktop/AndroidMultiScreens com.learn. AndroidMultiScreens AndroidMultiScreens

Once the project is created on the desktop, we have to bring the project into the Android Development Environment. Open the Eclipse IDE from the eclipse folder in the adt bundle. By going through File → New -->Project → Android Project From Existing Code, browse the project from the Desktop to open it in Eclipse.

Open the index.html file inside the assets/www folder using your favourite text editor. Let’s clean up the file by removing the long comment, removing the line that links to the style sheet, moving the <script> tag that links to the cordova.js from <body> section to <head> section and finally removing everything else inside the <head> section. Let the <head> section be empty for the time being. Change the title to “Multi Screen App”. We will be adding some code for navigation once the other screens are ready. Save the index.html file.

We are planning to create an app with three screens as already mentioned. We already have one of the screens: that is index.html. Now we are going to create the remaining two screens. You can add a new page (screen) using your text editor. Most of the text editors allow you to create a new file using File menu and New option. There could be slight differences in the option name. So, find the correct option in your text editor that creates a new file. I am using Komodo Edit and the option is File → New → New File and it will create a blank text file.

newfile.png

Copy the content from the index.html file into this new file. Now we have to save this file as an html file. So go to File → Save As which will allow you to enter the name of your file. So, specify the name as personal.html. We have to save it inside the same assets/www folder where the index.html resides. So, browse to the www folder and click the Save button.

saveas.png

Repeat the same process to create another file named professional.html in the same assets/www folder.

Now we are ready with three screens for our app. But there should be some mechanism to navigate between screens. You can include either buttons or hyperlinks to move from page to page. Though professional apps usually use buttons to navigate between screens, let’s try both hyperlinks and buttons in our app to become familiar with both the techniques. Let us assume that our app is a personal app that displays introductory details of a famous personality in one screen, the personal details in another screen and professional details in some other screen (just for the sake of doing).

Open the index.html file in your text editor (it might be already opened). Inside the <body> section, add the following lines of code:

<h1 style="color:red;">Barack Obama</h1>
<p>Barack Obama is the current President of the United States.</p>
<a href="personal.html">Know Personal Details</a><br/>
<a href="professional.html">Know Professional Details</a>

You could find that we have added some inline style to make the h1 heading red. We have also added two links using <a> hyperlink to navigate to both the personal.html and professional.html. If you have developed websites using HTML, CSS, JavaScript, you will find it more comfortable in working on PhoneGap.

Now open the personal.html and change its title to Personal Details. Add the following lines of code inside the <body> section.

<p>Barack Hussein Obama II was born on 4th August, 1961 in Honolulu, Hawaii.
        His parents are    Barack Hussein Obama, Sr and Stanley Ann Dunham.
        His wife is Michelle LaVaughn Robinson and they have two children, Malia Ann Obama and Natasha Obama.</p>
 <button id="btnClick">Home</button>
 <a href="professional.html">Professional Details</a>

Add the following lines of code in the <head> section of the personal.html file.

<script>
    window.onload = function()
    {
        document.addEventListener("deviceready", init, false);
    }
    function init()
    {
        var myButton = document.getElementById("btnClick");
        myButton.addEventListener("click", goToHome, false);
    }
    function goToHome()
    {
        window.location = "index.html";
    }
</script>

Here, we invoke a function named init when the device becomes ready. In the init function, we attach the event handler for the click button and the function goToHome loads the home page, that is index.html.

Open the professional.html and change its title to Professional Details. Add the same <script> section (given just above) within the <head> section. Next, add the following lines of code inside the <body> section.

<p>Barack Obama is the 44th President of the United States and the first African American to hold the office.

Obama is a graduate of Columbia University and Harvard Law School, where he served as president of the Harvard Law Review.

He served three terms representing the 13th District in the Illinois Senate from 1997 to 2004.</p>

<button id="btnClick">Home</button>

<a href="personal.html">Personal Details</a>

Now you can run the app in Eclipse. So, right click the name of the project in the Package Explorer and click Run As àAndroid Project.

runas.png

You can create a new emulator with different screen size and all using the Android Virtual Device Manager if you want. Once the emulator is loaded, click the app and you will get a screen like this:

out1.png

You can navigate to and from all the screens by clicking corresponding links or buttons.

out3.png

out2.png

Summary

In this tutorial, we have created an app with multiple screens. We have also included links and buttons to move to and from screens. Likewise, you can create apps with as many screens as you want.

 

Like us on Facebook