Creating Mobile Web Applications
These days more and more people have handheld computers, cellular phones with Internet browsers, or messaging devices of some sort? Mobile computing is becoming more and more popular. Mobile users these days can even purchase goods, pay bills from their mobile phones. Asp.net allows you to create web applications that can run on mobile devices such as handhelp pc, smart phones.
Introduction to Mobile Web Application
You can start creating mobile web application by creating a new ASP.NET Web application using your prefered programming language. Creating mobile web application is similar to creating normal web application except that in mobile web applcation you create Mobile forms rather than web forms. Mobile web application is an ASP.NET web site that contains mobile web forms. Create a standard web project on visual studio, delete the default.aspx file, add new mobile forms as per your needs.
Most of the code behind features of ASP.NET, such as tracing and debugging, are all available in a mobile Web application. The main difference in mobile Web applications is that the display of UI. Since each mobile has different display capabilites, mobile web forms has capability to recognize the capability and render the user interface.
Basic steps to create Mobile Web Application
1.Create an ASP.NET Web site using your preferred programming language.
2.Remove the Default.aspx page that is added by the Web site template.
3.Add one or more mobile Web forms to the project.
4.On each mobile Web form, add the desired mobile controls.
5.Add code to the code-behind pages that executes in response to events that are raised by the mobile controls.
Testing Mobile Web Applications
Internet Explorer can also be used to view a mobile Web form. User can change the default browser by selecting File | Browse With and choosing the desired browser. In addition to the browser settings that are listed, device emulators can also be added. Many of the mobile device manufacturers provide emulators, that can be used to test and view mobile Web applications. Emulators can display the mobile Web application as it would appear on the hardware device. Developer can test the web application on different kind of devices using these emulators without purchasing the acutal device. If an emulator is set to be the default browser, it is displayed when pressing F5 to debug the mobile application. One of the common cell phone emulator providers is OpenWave. You can download the latest phone emulators from openwave website.
Understanding Mobile Web Forms
Mobile Web form is an .aspx file similar to Standard Web from. You can access the mobile form by typing a URL on the address bar. The mobile Web forms inherits from the System.Web.UI.MobileControls.MobilePage class. The mobile Web form can contain many mobile:Form controls as compared to web form which contains only one form control. By default, the first mobile:Form control on the page is visible. You can switch from one mobile:Form to another by setting the ActiveForm property of the mobile Web form.
Maintaining Session on Mobile Web Forms
Many mobile devices, such as cell phones, don’t accept cookies, which cause problems with maintaining session state. The solution is to enable cookieless sessions. This can be accomplished by adding the following element to the Web.config file inside the system.web element: <sessionState cookieless=”true” />. With cookieless sessions, the session ID value is placed into the URL for the Web site instead of a cookie. You should plan on implementing cookieless sessions on all mobile applications to assure that your mobile Web site is compatible with the majority of mobile devices.
Implementing Device-Specific Rendering
Device-specific rendering is the ability to specify rendering for a control based on a device type. You can check the request browsers properties with Request.Browser and render the control differently for each browser. TO check the Deveice-specific rendering crate a mobile Label Control and add a code on the code behind to display different message if the request is from mobile device. Request.Browser.IsMobileDevice properly allows you to find if the request is from the Mobile device or not.
‘VB
Partial Class LabelTest Inherits System.Web.UI.MobileControls.MobilePage End Sub End Class Protected Sub Form1_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Form1.Load if (Request.Browser.IsMobileDevice) then Label1.Text = "Request from mobile device" else Label1.Text = "Request from PC" end if
//C#
using System;
public partial class LabelTest : System.Web.UI.MobileControls.MobilePage
{ protected void Page_Load(object sender, EventArgs e) {
if (Request.Browser.IsMobileDevice)
{
Label1.Text = "Reqeust from mobile device";
}
else
{
Label1.Text = "Request from PC";
}}}
You can also use DeviceSpecific control for device-specific rendering. A single DeviceSpecific control can be nested inside any mobile control or in the mobile:Form to provide custom behavior based on a filter. The DeviceSpecific control can be explicitly dragged and dropped into the Source View of a mobile control.
How to create filter based device-specific rendering
On the web.config file create the following entries for filters.
<deviceFilters> <filter name="IsIE" compare="Browser" argument="IE" /> <filter name="IsMobile" compare="IsMobileDevice" argument="true" /> </deviceFilters>
Two filters are configured on the web.config file . One for if browser is IE and one for if device is Mobile device.
Add the DeviceSpecific Property on the Mobile Label control and configure it.
<mobile:Form ID="Form1" Runat="server"> <mobile:Label ID="Label1" Runat="server"> <DeviceSpecific><Choice Filter="IsMobile" Font-Italic="True" /><Choice Filter="IsIE" Font-Name="Arial Black" Font-Size="Large" /> </DeviceSpecific> </mobile:Label> </mobile:Form>
Here for Mobile device the Font-Italic=”True” is defined to make the label itallic.
And For IE browsers font-size is large and font-name is arial black.
Each property of any control can be customized for each filter using DeviceSpecific Property.
