Building a multipage application
In this tutorial we will learn:
- The basics of a multi-page application
- How to load an external HTML file
- How to implement page navigation with history
The basics of a multi-page application
A MobileFirst hybrid application uses a single DOM model.
A single DOM model means that you must never navigate between various HTML files by using hyperlinks or changing the
In this tutorial, a multi-page MobileFirst application implementation is explained by using built-in functionality only with jQuery.
Applications with multiple pages can be built in two ways:
- Single HTML file that contains all the application "pages"
- A separate HTML file for each application "page"
A single HTML file is the preferred model for simpler applications, where the developer is responsible for showing the "current" page
DIV and hiding the rest.
However, larger applications present a challenge:
- The developer must take full responsibility for which DIVs are shown and which
DIVs are hidden at any moment
- If new content is needed in a page, for example a table, a prepared template cannot be loaded, rather it must be generated manually
- A single large HTML file with many pages takes longer to load
- It is easy to get lost in a single HTML file that contains multiple "pages". Separate files are easier to manage
Building a rich dynamic application with multiple pages can be easier with dynamic page loading:
- Built-in jQuery APIs can be used to dynamically load, update, and insert DOM elements in your application
- Navigation history can be implemented
- When you implement multi-page navigation in the Windows Phone 8 environment, you must change the URL each time you use the jQuery
load()API method. The example project for this training module demonstrates in detail how you can perform this task.
/www/default/at the beginning of the URL path string. For example: Change To
- When implementing multipage navigation for the Windows Phone 8 environment, and jQuery Mobile is used with the
changePage()API method, a jQuery Mobile defect prevents it from properly working. To overcome the defect, consult the changes that need to be made in the .js file of jQuery Mobile, as described in the following Stack Overflow question: IBM Worklight v 5.0.6 - Can't navigate multipages on Windows Phone 7.5 environment
Loading an external HTML file
An external HTML file is a segment of HTML code that can be injected into any location in the existing DOM. A single HTML file can contain a multiple HTML elements hierarchy.
- CSS files can be included by using the
- The HTML file can be injected into the parent element, usually a
DIV, but this is not mandatory
$().load()API method can be used to implement the above
To load an HTML file, use the following syntax:
containerSelector – jQuery CSS selector of element to host the loaded content.
filePath – Relative path to an HTML file. Always relative to the main HTML file.
This code loads the MainPage.html file and inserts its content into the
pagePort DIV element.
Implementing page navigation with history
By using the previously described technique to load an external HTML file, it is possible to implement a navigation interface with history.
The navigation history must be preserved as a stack in a global array object.
A reference to the currently loaded page must be preserved as well by using a global object variable.
A reference to the file path is needed for Windows Phone 8.
Implementing page navigation with history: Step 1
- On application launch, MainPage.html is loaded from the application code and injected into the
- MainPage.js is loaded as a part of MainPage.html.
- The currentPage object is declared.
- The currentPage.init function is declared.
- When the MainPage.html loading completes, the currentPage.init method is called.
Implementing page navigation with history: Step 2
- MainPage.html is pushed into
- Page1.html is loaded and injected into
#pagePort DIVPage1.js is loaded as a part of Page1.html.
currentPageobject is declared and overrides the old one.
currentPage.initfunction is declared.
When the loading of Page1.html completes, a new
currentPage.init method is called.
Implementing page navigation with history: Step 3
- The previous HTML file name is popped from the
- It is loaded and injected into
MainPage.js is loaded as a part of MainPage.html.
currentPage object is declared and overrides the old one.
currentPage.init function is declared.
When MainPage.html loading completes, the
currentPage.init method is called.
Click to download the Studio project.▲