Add Mobile Controls to a Web Page

Mobile web controls differ from their traditional counterparts in many ways. The most important is that they are simplified greatly, to ensure that they can work in a low-memory environment. First lets consider how to set up a web page to use mobile controls on it!

Normal ASP.NET web pages inherit from System.Web.UI.Page. Mobile pages aren’t, you should change the inheritance to System.Web.UI.MobileControls.MobilePage. Then you should register the mobile control assembly in your page, with the following syntax:

<%@ Register Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" TagPrefix="mobile" %>

The last modification is to use a mobile form. This is easy if the registration of the control assembly was successful. Simply type the tagprefix you specified instead of the asp before the form control. That’s all, the page is set up to use mobile controls. It’s important to note here that mobile pages can have multiple forms (although you shouldn’t place too many of them on a single page), and all mobile controls must have a distinct ID if there is more than one of them in a page.

Let’s see the mobile web controls:

Label: just as the same as its normal counterpart. For longer texts, the TextView control is introduced.

TextBox: essentially the same as the normal one.

TextView: this control is used to display longer texts to the user. You can also use some HTML tags to format the output.

Command: the command control works like the Button. ItemCommand is usable, too.

Image: plays the exact same role as its normal counterpart. You should use choices and filters to render different images for different devices.

List: a bindable static list of items, works like the DropDownList. Exposes DataTextField and DataValueField, too. Posts back to the server when selected.

SelectionList: works as the same as the List control, the different is that it doesn’t post back,

ObjectList: the mobile grid. You can use it to display tabular data. Use the DataSource and DataMember properties to bind, the LabelField is used to set the primary key field. You should set up the connection programmatically.

Calendar: plays the same role as the classic Calendar control.

AdRotator: rotate ads specified in an XML file.

PhoneCall: you can use this control to enable the user calling a phone number (if the device supports it). It’s properties are similar to the image control.

The validation controls are exactly the same as in classic ASP.NET, and they work in the exact same way (without client-side validation, of course). When you are using session state, you should set cookiless to true, or UseUri, because most cell phones don’t support cookies. When you are using Forms Authentication, you should also add the following line to your web.config:

<mobileControls cookielessDataDictionaryType=”System.Web.Mobile.CookielessData” />

If these controls aren’t enough for you, you can create custom mobile controls, and even mobile user controls. The main difference with them is the inheritance.

Panels:

Panels play the same role in mobile applications as ASP.NET panels. You can create a group of controls by them, even use them as placeholders for dynamically generated controls. The runtime also tries to render the controls grouped in a panel on the same screen.

StyleSheets:

You can add StyleSheet controls to your pages, exactly one to a page. StyleSheet controls can have any number of Style controls nested within them. These controls must have different names, and can define a set of properties to change on controls. You can set up a control to reference on a Style with the control’s StyleReference property,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s