|  Register
Instructions

Objectives

  • Apply different styles to controls depending on mobile device characteristics.
  • Use ASP.NET themes and skins to style controls.
  • Setting the AutoSize property to improve the user experience.

Prerequisites

Introduction

One of the reasons we decided to create 51Degrees.mobi was to address common problems associated with developing mobile web applications for many different devices. One of the most common problems is the sheer variety of different input methods, screen sizes and technologies that need to be supported. Whilst it would be entirely possible to create unique user interfaces for every type of device this simply isn't practical for those without big budgets. In this tutorial we'll show how a single mobile web application can be adapted to support different mobile devices.

Step 1 - The Style Control

Consider a situation where you wish to display a single image and some text. Where the physical width of the mobile device's screen is greater than 30mm the image should  be 50% of the screen width and text should flow around it. If the screen width is narrower then the image should be centred above the text. A third scenario may involve display on desktop browsers where the image should be 20% of the current browser width with text flowing around it. The new Style control combined with the StyleID added to every mobile control provides a simple way to implement this scenario.

Create a new mobile web form and place the following ASP.NET code between the form elements. We'll come back to the Style control properties after we've checked the results.

<mob:Style ID="Style1" runat="server">
    <mob:Filter Property="IsMobileDevice" Method="Equals" Value="False"
        Width="20%" Style="float: left" />
    <mob:Filter Property="IsMobileDevice" Method="Equals" Value="True">           
        <mob:Filter Property="physical_screen_width" Method="LessThanOrEqual" Value="30" Style="display: block; margin: 0px auto;" Width="128px" />
        <mob:Filter Property="physical_screen_width" Method="GreaterThan" Value="30" Style="float: left" Width="50%" />
    </mob:Filter>
</mob:Style>
<mob:Image ID="Image1" runat="server" StyleID="Style1" CalculateSizeMode="ClientWidth"
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/16x16_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/24x24_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/32x32_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/48x48_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/64x64_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/72x72_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/128x128_wizard.png" />
</mob:Image>
<mob:Panel ID="Panel1" runat="server">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</mob:Panel>

First open the newly created page on a emulator that will be detected as a device with a screen size greater than 30mm. Most of the default Android 2.X configurations will meet this requirement. A screen similar to the following should be displayed.



The image is displayed to the left of the text.

Now open the same page on a Nokia S40 emulator which will be detected as using a narrower screen. A screen similar to the one below should be displayed.



The image is centred above the text.

Finally view the same page on a desktop web browser to see a smaller image, 20% of the current browser width, displayed with text wrapping around it.



Most mobile controls will include the additional property StyleID. The value of this property is compared to the ID of Style controls on the page. If a match is found then that Style control will be used to set the style values of the mobile control. Both style related properties such as BorderWidth or BorderStyle, as well as CSS Style values can be set using the Style control. The Style control will not override explicit style values assigned to the mobile control.

The Style control uses nested mob:filter elements to detect the capability of the requesting device. The filters are evaluated during the PreRender event of the page and if a match occurs the filter will be used to style the control. 3 properties used with every filter element are described in the following table.

Property Description 
Property  The name of the Request.Browser property or WURFL capability to use when evaluating the filter. 
Method  The method to use to evaluate the filter. 
Value  The value to compare the current Property value to. 

The remaining properties of the mob:filter element control the styling information that will be applied if the filter evaluates to true.

If more than one filter exists they're each evaluated in the order that they appear with the first one that results in a match being used. Filters can be nested with children only being evaluated if the parent matches.

Step 2 - Using Themes

The Style control isn't the only way to change the formatting of controls. Application Themes introduced in ASP.NET v2 provide a solution to consistently style controls across the entire application using the SkinID property. 

ASP.NET Themes are set for the entire application in the web.config or in the page header. 51Degrees - .Net Mobile Framework extends Themes to enable the active theme to be selected dynamically based on rules identifical to those defined for the Style control. Paste the following XML into the web.config into the fiftyOne element.

<themes>
  <theme property="physical_screen_width" method="LessThanOrEqual" value="30" applyTheme="Narrow"/>
  <theme property="physical_screen_width" method="GreaterThan" value="30" applyTheme="Wide" isDefault="True"/>
</themes>

The themes element added to the web.config file will be used at the start of page processing to determine the theme that should be applied to the page. In this example we've two possible themes defined, Narrow and Wide. These themes need to be added to the application.

Add a new Skin file to the project called Narrow and paste the following ASP.NET code into the file. You may be asked to confirm the creation of an App_Themes folder when adding the Skin file.

<mob:Image runat="server" SkinID="MainImage" Style="display: block; margin: 0px auto;" Width="128px" CalculateSizeMode="Server" />

Add a second new Skin file to the project called Wide and paste the following ASP.NET code into the file.

<mob:Image runat="server" SkinID="MainImage" Style="float: left" Width="50%" CalculateSizeMode="ClientWidth" />

The SkinID property in the new Skin files can be referenced by WebControls. Properties defined in the Skin file will be applied to the WebControl. To complete the code changes we need to modify the ASP.NET code we created in Step1. Remove the Style control from the page, the StyleID property of the Image control. Also remove the CalculateSizeMode property because we're now controlling this in to the Skin file. Set the SkinID property to the value MainImage. The revised ASP.NET code in your web form should look similar to the following.

<mob:Image ID="Image1" runat="server" SkinID="MainImage"
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/16x16_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/24x24_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/32x32_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/48x48_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/64x64_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/72x72_wizard.png" />
    <mob:AltImage ImageUrl="http://demos.51degrees.mobi/images/128x128_wizard.png" />
</mob:Image>
<mob:Panel ID="Panel1" runat="server">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</mob:Panel>

When the page is opened on Android and Nokia S40 emulators the same results as those found in Step 1 should be experienced.

Because the Skin file will be available across the application the SkinID can be used to set consistent style information for many controls.

Themes also support the inclusion of CSS files which can be used with the CssClass property of Controls, Skin files and Style controls to apply styling.

Step 3 - Auto Size

Ensuring page elements that can be selected by the user are correctly sized for the mobile device is a common problem across any mobile web application. Recognising this 51Degrees.mobi have enhanced every mobile control that can be selected to include the property AutoSize. When AutoSize is set to True and no size information in the form of font size, width or height has been set then these dimensions will automatically be adjusted to an appropriately for the requesting device. Typically controls displayed on touch screen devices will need to be larger than those with joystick or clickwheel input methods.

Add the following ASP.NET code to the bottom of the web form created in Step 2.

<mob:HyperLink runat="server" ID="HyperLink1" AutoSize="true" NavigateUrl="Default.aspx" Text="Select Me" />

Open the page on the Android emulator and you should see a screen similar to the following.



Opening the same page on the Nokia S40 emulator will produce the following screen.



The height of the hyperlink varies on the two devices based on the AutoSize property to ensure it is easily selectable on touch screen devices such as Android. The AutoSize property defaults to true and will need to be turned off by setting it to false or by providing explicit height, width or font size properties.

Conclusion

The Style control is a good solution to apply device specific formatting to a control on a page. Themes can offer a wider and more consistent solution across many controls. Skins can be used to set different style properties for Mobile Controls. For example; the PageSize and ButtonCount properties of the DataList and Pager control cover in the DataList and Pager tutorial. Finally the AutoSize property provides a simple way of ensuring selectable controls are appropriately sized for the input method.
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.