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.
<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.