Published: 05 Mar 2012
By: Brian Mains

Brian Mains explains how to create pages with the jQuery Mobile framework.

Contents [hide]

Introduction

When accessing a mobile device, every window you see within a mobile application is a view. Views are linked together and driven from one page to another by user interaction. For instance, imagine an application that displays the news of the day, like the CNN or Fox News application. When the application loads, each of the news stories of the day appear in the main list. Clicking on a category link navigates to another view displaying stories for only that category. Clicking on the story navigates to a view displaying the entire story. Clicking on the image associated with the story navigates to another view with the image displayed as a large view. In practice, each of these actions use separate views for each of these functions, with each view linked together by user interaction.

Single Page Templates

In JQuery, views are a DIV with a page role, sometimes referred to as a page template, defined within a web page. A single HTML page can have one page template (referred to as a single page template) or many page templates (referred to as a multi-page template).

An example single page template appears in Listing 1.

Listing 1: A Single Page Template

A page consists of a header, footer, and content region. The header is the title of the application, typically the toolbar that appears at the top. A header can consist of any content, though may typically consist of a header element (an H1 element) and various buttons (more on buttons later). The content of the header is ordered as it's placed in the DOM, but can be aligned differently using CSS. The footer acts very similarly, and is often used for navigational features or general application information (like copyright info, etc.).

All content fits within the content region, and is the meat of the page. In Listing 1, the page has a sample button that links to another page. JQuery mobile treats hyperlinks with a button role as a functional button fior redirection (at least from a visual standpoint). We'll look more at buttons later in this article. The content region is optional; all markup is considered within the content region if all regions are omitted.

Multi-Page Templates

A multi-page template contains multiple DIV's with a page role, as shown in Listing 2. Multiple page templates provide a convenient way to break up large pages into separate user interfaces. The first page will be visible on load, and the other pages will be hidden. It's best to give each page a unique ID; page ID's are used for page navigation (discussed later in the article). Each page can have a header, footer, and content. Take a look at a multi-page template below.

Listing 2: A Multi-Page Template

A multi-page template works great with navigation-based scenarios like wizards; however, be careful of the amount of markup involved in the view; otherwise, the view may become too large and negatively affect performance. As a workaround, views can be dynamically injected, something that we'll talk about later.

Page Content

By default, in most scenarios, the contents of the page stretch. What I mean by this is that the contents of buttons and other containers stretch across the entire page in a block format. Some elements can change this behavior by defining data attributes to only take up the space it requires, or by using CSS. For instance, the button widget allows for the data-inline attribute to control whether it renders in inline or block form.

Buttons

As we mentioned earlier, buttons allow for navigation between pages. A button defines a role of button with either an HTML page reference or a page ID in the href attribute. For instance, in Listing 1, the button referred to another HTML page, but Listing 2 refers to each page by the page ID (ie. #Page1 or #Page2). JQuery Mobile styles these hyperlinks as appearing to be an actual button.

Buttons have a lot of useful attributes that change the buttons appearance. Buttons can define a pre-defined set of icons supported with JQuery mobile by using the data-icon attribute, which supports values like arrow-l, arrow-r, check, delete, and a lot more. Icons normally appear to the left of the button's text (if any), and can be controlled by the data-iconpos attribute, accepting values of left, right, up and down. Listing 3 contains some samples of buttons.

Listing 3: Sample Buttons

Buttons normally render in block mode and stretch across the entire page. Adding data-inline="true" causes the button to only take up the minimal amount of space required. This can be useful when grouping buttons together using a control group. A control group is a widget that groups the buttons together in a vertical or horizontal fashion, as in Listing 4.

Listing 4: Using a Control Group

Input Buttons

While JQuery Mobile uses hyperlinks as buttons for navigation, it still supports using submit and other types of input buttons for posting data back to the server. JQuery Mobile automatically styles these buttons in the same fashion as a navigation button, to be consistent with its appearance.

Conclusion

JQuery Mobile uses a page template to define the view of the mobile web page or application. A single HTML page can contain a single template or many templates. Pages have a header, footer, and content regions by applying a container with the appropriate role. Pages are linked to each other using buttons, which is a hyperlink defining a role of type button. Buttons can navigate to elements within the DOM or to another page depending on the type of redirection needed.

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Brian Mains

Brian Mains is an application developer consultant with Computer Aid Inc. He formerly worked with the Department of Public Welfare. In both places of business, he developed both windows and web applications, small and large, using the latest .NET technologies. In addition, he had spent many hou...

This author has published 73 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Code First Approach using Entity Framework 4.1, Inversion of Control, Unity Framework, Repository and Unit of Work Patterns, and MVC3 Razor View
A detailed introduction about the code first approach using Entity Framework 4.1, Inversion of Contr...
jQuery Mobile ListView
In this article, we're going to look at what JQuery Mobile uses to represent lists, and how capable ...
Exception Handling and .Net (A practical approach)
Error Handling has always been crucial for an application in a number of ways. It may affect the exe...
JQuery Mobile Widgets Overview
An overview of widgets in jQuery Mobile.
Book Review: SignalR: Real-time Application Development
A book review of SignalR by Simone.

You might also be interested in the following related blog posts


Free Open Source .NET Mobile API From Mobile Experts - 51degrees.mobi read more
BLinq - Linq to Bing Search APIs read more
Script# (Script Sharp) writing javascript in C# read more
CodeDigest.Com - Articles,FAQs, Codes, News - Aug,2009 read more
Using jQuery in SharePoint to Display Notifications for Open Tasks read more
Creating jQuery plug-ins from MicrosoftAjax components read more
Kobe - Oh Dear Lord Why?! read more
Using jQuery Grid With ASP.NET MVC read more
jQuery and ASP.NET Article Posted read more
jQuery and ASP.NET Article Part 2 Posted read more
Top
 
 
 

Please login to rate or to leave a comment.