About this blog

This community site is for software developers interested in topics related to Web 2.0 and mobile device user interface development. This includes both general trends and technology discussions, as well as specific discussions and other resources involv

Tags

Recent tweets

Dynamic Page Loading for PhoneGap

Introduction

Mobile PhoneGap applications vary in complexity and size from simple, one-screen applications to large, multi-screen apps. To simplify development of applications that have more than one screen, JavaScript frameworks such as Dojo, jQuery or jQTouch can be used. They provide a way to display one screen while hiding the remaining screens. This is accomplished by using a single HTML file containing div elements for each screen. The current screen is made visible by setting it's css style properties. As the application grows to include more screens and function, the HTML file also grows in size. Since mobile devices have limited resources, larger HTML files load and run slower - particularly upon application launch.

To improve application performance, dynamic page loading can be used. For an application that uses dynamic page loading, the app launches and loads only the first screen. Based upon user interaction a new screen can be displayed by retrieving the new HTML content and replacing the current screen with it.

This blog post will describe how a PhoneGap mobile application can be structured to utilize dynamic page loading. Source code is provided for readers who want to build and run the application.

Dynamic Page Loading

The main HTML page for our application contains a div element to display dynamic content. It also loads the JavaScript code used by our application. Referring to the HTML code below, the container div is where we will place our content.

The content is retrieved using XHR (also referred to as Ajax) from the same location that our HTML page was loaded.

PhoneGap applications typically load their main HTML page from the device; thus, XHR can access both local files or server files. However, if the main HTML page is loaded from a server, then only XHR requests to that server are allowed. This is a security restriction to prevent cross-domain security concerns.

The loadPage() function makes an XHR call to load the specified url. Once the content is available, the container div is updated by setting it's innerHTML property.

The final step is to specify the initial content to be displayed. This is done inside the init() function, which is run after the HTML page is loaded (defined by the onload property of the body element).

Application Screens

With our dynamic loading function completed, it's time to write the screens that comprise our application. There is an HTML file for each screen in the app. Navigation between screens is accomplished by calling loadPage() from within a screen, or using global navigation links from outside the container div as shown below.

You don't need to specify the head or body tags in the screen files, since the content is HTML and will be set to the container's innerHTML.

Running JavaScript

When setting innerHTML with content, none of the embedded script tags are run - only the HTML content is rendered. To execute JavaScript when a new screen is loaded the JavaScript function must already exist. It can be included as part of the main HTML file for an application, or be located in a script file that is loaded by the main HTML file.

Referring to the code snippet above, the PhoneGap library is loaded, since the application will use PhoneGap APIs. In particular, we will call the compass API in screen3.html.

Several JavaScript functions are used by screen3.html to access the compass API, so we include them by loading screen3.js.

We have modified loadPage() to include two additional parameters. The onleave parameter is a function that is called when leaving the current screen, and the onenter function is called after the new screen is loaded.

We add a new button to screen1 that loads screen3, and runs the deviceInfo() function necessary to initialize the screen3 contents. This is accomplished by setting the onenter parameter.

When screen3.html is passed to loadPage('screen3.html', null, deviceInfo), the deviceInfo() function is called immediately after the file is loaded. This ensures that the HTML elements defined in screen3.html exist before attempting to fill in the device information determined by PhoneGap.

Transitions between Screens

JavaScript toolkits such as Dojo have transitions or animations when navigating from one screen to another. This feature can be easily added to our example by using the css webkitTransition property. Instead of replacing the container div with our new screen, two divs can be used as HTML containers between which we animate.

Once the transition has completed after 0.5 seconds, we reposition div0 at left=100% so that it can be used by the next screen to slide in from the right. With the transitions specified above, all screens will slide from right to left. You can reverse this by specifying a different direction in the webkitTransition property.

Summary

This blog post showed how to write mobile applications that use dynamic page loading to load each screen of an app individually, instead of loading all screens at once inside a single HTML file. The result is a shorter startup time for large, complex mobile applications, and simplified development and management of individual screens.

Code

The index.html file has links for two examples. The first one, simple.html, demonstrates how to do a simple replace of content in a container div. The second file, transition.html, demonstrates how to use two divs to animate the transition between screens.

Quarantine this entry

The code works perfectly when developing with Android/Eclipse.
<br />
However, I faced an issue with the iphone where I was unable to get
the local files using just the filename. <br />
What could be the issue?