Styling of Controls Framework

Transcription

1 Styling of Controls Framework Degrees.mobi Limited. All rights reserved. The copyright in and title to the document Styling of Controls Framework belongs to 51Degrees.mobi Limited. No part of it whatsoever may be reproduced in any form without the prior authority of 51Degrees.mobi Limited and/or any original source as appropriate. Any agreed copy or extract must be marked with all proprietary notices which appear on the original and will be subject to the requirement that you will acknowledge on the face of each part of the reproduced material that it belongs to 51Degrees.mobi Limited

2 Contents Objectives...3 Prerequisites... 3 Introduction... 3 Step 1 - The Style Control... 3 Step 2 - Using Themes...6 Step 3 - Auto Size...7 Conclusion...9 Copyright 51degrees.mobi Limited Page 2 of 9

3 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 Complete Installation, Emulators and Mobile Profiles tutorials. 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" ImageUrl=" ImageUrl=" /> ImageUrl=" /> Copyright 51degrees.mobi Limited Page 3 of 9

4 ImageUrl=" /> ImageUrl=" /> ImageUrl=" /> ImageUrl=" /> ImageUrl=" /> </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. Copyright 51degrees.mobi Limited Page 4 of 9

5 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. Copyright 51degrees.mobi Limited Page 5 of 9

6 Property Description Property The name of the Request.Browser property or WURFL capability to use when evaluating the filter. Method Value The method to use to evaluate the filter. 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" ImageUrl=" Copyright 51degrees.mobi Limited Page 6 of 9

7 ImageUrl=" /> ImageUrl=" /> ImageUrl=" /> ImageUrl=" /> ImageUrl=" /> ImageUrl=" /> ImageUrl=" /> </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. Copyright 51degrees.mobi Limited Page 7 of 9

8 Opening the same page on the Nokia S40 emulator will produce the following screen. Copyright 51degrees.mobi Limited Page 8 of 9

9 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. Copyright 51degrees.mobi Limited Page 9 of 9