Paging in Mobile Web Forms

The biggest difference between web applications designed specially for use on Mobile Devices is the limitation imposed by the small screen size of Mobile devices. We have to work with a different mind frame to come up with user interfaces that are more compact and yet deliver information as needed. However, you cannot practically reduce the content displayed on a mobile form beyond a certain point – and this is where our example focuses on – We will discuss the simple but immensely useful features of Pagination and the PagerStyle for Mobile Forms.

We will use Visual Studio.Net for our example. You can refer to the code listing below and use any editor of your choice.

Details

Create a new project of type Visual C# .Net Mobile Web Application.

In the default mobile web form, add the mobile controls from the ToolBox. I created a registration form as shown below.

Control Property Name Value Label Text Registration Form Label Text First Name Textbox Label Text Middle Name Textbox Label Text Last Name Textbox Label Text Email Textbox Label Text Confirm Email Textbox Label Text Password TextBox Password True Command Button Text Submit

Table : Controls on our mobile web form.

Figure : User interface for our sample.

Compile the project. Shown below are the results of the mobile web form.

Figure: Results of our long mobile web form.

Note how difficult it is for the end user to scroll all the way on the web form. In some mobile devices, an error can result if the page size is too long for the device to handle.

Break Down the Web form into Pages

Return to Visual Studio and now set the Paginate property of the Mobile Form to True

The mobile page is now displayed in good-sized chunks. Take a look at the results below.

Figure: Mobile Form is now displayed in parts, with a Next and Previous button at the bottom of the screen.

Customize the Pagination

You can customize the pagination look and feel by modifying the PagerStyle of the Form. The PagerStyle can be included in a StyleSheet object, enabling you to reuse the same style for all the mobile forms in the application.

The PagerStyle has three key properties.

NextPageText : Sets or returns the label that the user clicks to browse to the next page. You can use the value {0} which is substituted with the page number of the next page.

PreviousPageText : Similar to NextPageText, but used for returning to the previous page. You can use the value {0} to refer to the page number of the previous page within the value of this property.

Page Label : Sets or returns the value of the label displayed on the current page. You can use format-specifiers {0} and {1} to display the current page number and the total number of pages respectively. This property only applies to HTML devices.

You can also modify other properties like Font, BackColor, ForeColor etc where supported.

Let’s look at a live example using these properties.

Make changes as shown below in our sample application to the Mobile Web Form’s Form control properties:

ControlPropertyValue FormPagerStyle NextPageTextNext(Page {0}) PageLabel[{0} of {1}] PreviousPageTextBack(Page {0})

Figure: Original web page distributed in multiple pages with Customized Scrolling

Here is the entire souce code for the mobilewebform.aspx (without using code-behind)

&lt:%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %>
&lt:%@ Page language="c#" Inherits="System.Web.UI.MobileControls.MobilePage"%>
&lt:body>
&lt:mobile:Form id="Form1" runat="server" Paginate="True" PagerStyle-NextPageText="Next(Page {0})" PagerStyle-PageLabel="[{0} of {1}]" PagerStyle-PreviousPageText="Back(Page {0})">
&lt:mobile:Label id="Label1" runat="server">Registration Form&lt:/mobile:Label>
&lt:mobile:Label id="Label7" runat="server">First Name: &lt:/mobile:Label>
&lt:mobile:TextBox id="TextBox1" runat="server">&lt:/mobile:TextBox>
&lt:mobile:Label id="Label2" runat="server">Middle Name:&lt:/mobile:Label>
&lt:mobile:TextBox id="TextBox2" runat="server">&lt:/mobile:TextBox>
&lt:mobile:Label id="Label3" runat="server">Last Name:&lt:/mobile:Label>
&lt:mobile:TextBox id="TextBox3" runat="server">&lt:/mobile:TextBox>
&lt:mobile:Label id="Label4" runat="server">Email&lt:/mobile:Label>
&lt:mobile:TextBox id="TextBox4" runat="server">&lt:/mobile:TextBox>
&lt:mobile:Label id="Label5" runat="server">Confirm Email&lt:/mobile:Label>
&lt:mobile:TextBox id="TextBox5" runat="server">&lt:/mobile:TextBox>
&lt:mobile:Label id="Label6" runat="server">Password&lt:/mobile:Label>
&lt:mobile:TextBox id="TextBox6" runat="server" Password="True">&lt:/mobile:TextBox>
&lt:mobile:Command id="Command1" runat="server">Submit&lt:/mobile:Command>
&lt:/mobile:Form>
&lt:/body>

Code Listing : Complete web form testpage.aspx

Conclusion : Mobile Web Forms provide a convenient mechanism to limit the size of Web forms on the mobile devices and customize the appearance of the paging labels.

Click here to sign up for FREE B2B newsletters from Murdok!

Dipal Choksi is a Bachelor of Engineering (Computer Science). She has industry experience in team-effort projects and also as an individual contributor. She has worked on Visual Basic, Visual C++, Java, Directory Services, ASP projects