|  Register

Instructions

Objectives

  • Understand the major differences between ASP.NET Web Forms development and 51Degrees.mobi.
  • Add a Label control to an ASP.NET page.

Prerequisites

Step 1 - Hello World

Place the following ASP code between the form tags of the Default web form.

<mob:Panel runat="server" ID="PanelHelloWorld" HorizontalAlign="Center">
    <mob:Label runat="server" ID="LabelHelloWorld" Text="Hello World" />
</mob:Panel>

When the page is viewed in Internet Explorer the words Hello World appear centred on the page. So what's different to normal ASP.NET?


The code above used the namespace mob rather than asp. This subtle but important change uses 51Degrees.mobi implementations of common ASP.NET controls. These implementations are interface compatible with the standard ASP.NET equivalent controls but are optimised for mobile devices. Many controls will also include a number of additional properties and methods to implement mobile specific functionality.

Step 2 - Under the Covers

This step is not essential reading. It provides a brief overview of the changes 51Degrees.mobi makes to the markup and performance of a web page compared to ASP.NET.

Right click the page in Internet Explorer and select
View page source. Text similar to the following will be displayed.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1"><title></title><link href="I.axd?6AQINAA==" type="text/css" rel="stylesheet"/></head><body><form name="Form1" method="post" action="Default.aspx" id="Form1"><div><input type="hidden" name="__VIEWSTATE" /></div><input name="__id" type="hidden" id="__id" value="EKPCDCTETB" /><div id="G"><span id="H">Hello World</span></div><div><span id="A">Trial License: 32 Days Remaining</span></div><div><input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgL+raDpAgK+lNklmRkloMH7sQW349MwsV1KEviNqjA=" /></div></form></body></html>

The following key points should be considered:
  • DocType - All pages generated using the Mobile Web Form template will use the DocType strict instead of transitional/quirks mode. Our research indicates mobile web browsers implement CSS more consistently in strict mode than other modes.
  • CSS Include - Notice the I.axd css include. This include has been dynamically generated by the .Net Mobile Framework and contains style information that would normally be included within the markup. Providing style information as includes reduces the size of the HTML and enables common style information to be cached improving performance. This is particularly noticeable when styling pages using ASP.NET style attributes.
  • ViewState - The value attribute of the __VIEWSTATE hidden field has been removed. This is because ViewState is not held within the page but within a server side database called Mobile Profile. Unfortunately there is no method to remove the __VIEWSTATE hidden field. The hidden field __id contains an encoded reference to the associated record in the Mobile Profile database.
  • Element Ids - The controls were given IDs PanelHelloWorld and LabelHelloWorld. However these ids do not appear in the markup. They've been replaced with single letters. All .Net Mobile Framework controls will use the shortest possible unique alpha in the generated markup to reduce the size of the overall page.

Conclusion

We've reviewed just a small number of the changes 51Degrees.mobi makes to a page to improve performance without the developer needing to write any additional code. Read the full User Guide to find out more about these enhancements.

Tutorials

NumberSorted By Number In Ascending OrderTutorialSummary
1InstallationInstall 51Degrees - .Net Mobile Framework and confirm the installation is successful.
2EmulatorsConfigure IIS to work with mobile device emulators improving development productivity.
3Hello WorldAdd a mobile label control to a mobile page and understand major differences compared to standard ASP.NET.
4Mobile ProfileUse a simple database to gain additional insight into the mobile device performance, optimise view state and persist data.
5Clever ImagesOptimise images to consume the bare minimum amount of data for the display on the requesting mobile device without compromising image quality.
6Entering TextMake it easier for your users to enter text by remembering previous values and providing common options.
7DatesCaptures dates quickly and easily using all the capabilities of the requesting mobile device.
8LocationFind out where the requesting mobile device is or get location information from users.
9MapsDisplay maps from Google or Bing, move around and show multiple markers.
10Data Lists and PagersDisplay lists of items and page between them.
11Styling Mobile ControlsStyle mobile web applications using different common characteristics of mobile devices such as screen size or input method.
12DeploymentDeploy the Framework onto a production server and configure IIS and SQL.