Developing Mobile Web Applications With ASP.NET Mobile Controls Malek Kemmou

On the Agenda Devices today Mobile Internet Challenges .Net approach to devices 265 devices (Device Update 4) Object Model and built-in controls Extending to non supported devices ASP.Net mobile Controls Single code base Targeting specific devices

Mobile Devices Today 100s of phones Multiple PDA/XDA devices Tablets, Mini-Tablets …etc.

.Net for devices overview Development Platform Visual Studio .NET .NET Framework KEY MESSAGE: There are two types of mobile software, and .NET supports both. SLIDE BUILDS: 0 SLIDE SCRIPT: Visual Studio .NET supports two types of mobile development: server-side Web applications and client-side rich applications. These can be paralleled with desktop development between ASP.NET Web applications and Windows Forms-based rich client applications. In fact, the similarity is more than coincidental—the mobile development platform is actually derived from the same desktop development platform. SLIDE TRANSITION: Developing server-side web applications Server-side Web Apps Local Code Client-side Rich Apps Remote Web Pages Mobile Web Browser .NET Compact Framework

Challenges How many code bases do I have to maintain ? Form factors Rendering Markups : WML1.1, 1.2, 2.0 cHTML XHTML HTML 3.2 / 4.0 Capabilities Back buttons ? Cookies ? Scripts ? …etc. How do I add support for new devices ?

Traditional Techniques Reading the Request Headers What markup What capabilities What Gateway capabilities Fan out to separate code Maybe componentize code for some reuse Maybe code some template based rendering

The Solution: ASP.NET Mobile Controls Adaptively render to devices based on browser, device and gateway combination Extend ASP.NET to empower web developers to build mobile web applications Integrates with the Visual Studio .NET development environment for ease of use. Formerly known as Microsoft Mobile Internet Toolkit.

The Solution: ASP.NET Mobile Controls Single mobile Web page that adapts to multiple devices Support multiple mark-up languages WML1.1 (WAP), cHTML 1.0, xHTML Mobile and Basic profile, HTML 3.2 … Support for a variety of devices Web enabled Cell Phones, PDAs, and Pagers Customizable and extensible framework Add new controls and devices Support for new devices without having to rewrite or recompile your application

Adaptive Rendering

Mobile Web Controls Out of the box, ASP.NET Mobile Controls Works with 265+ different mobile devices (Device Update 4) Easily extensible to support additional devices Uses basic style properties (Font, font-size, forecolor) Used only if supported by requesting device Ignored for down-level browsers Gives acceptable presentation across wide range of devices Customization Allows advanced presentation features of up-level browsers to be leveraged Gives a richer, clearer user interface Enhances usability for the application

Mobile Internet Toolkit How MWC Work… IIS .NET Framework Mobile Internet Toolkit Create ASP.NET Pages Detect Device Capabilities HTTP Request Add User Interface Element ASP.NET Mobile control Load and execute ASP.NET Pages Integrate Business Logic Wire-up events Generate output (markup language) Based on device, browser and gateway combination HTTP Response Post/Save to Web Servers Development Environment Production Environment

How it works

ASP.NET Mobile Controls Object Model AdRotator Calendar Image List CompareValidator PagedControl ObjectList CustomValidator Panel Form RangeValidator BaseValidator SelectionList RegularExpression Validator PhoneCall StyleSheet Command RequiredField Validator TextControl Label TextView Link ValidationSummary TextBox

ASP.NET Mobile Controls Containers AdRotator Calendar Image List CompareValidator PagedControl ObjectList CustomValidator Panel Form RangeValidator BaseValidator SelectionList RegularExpression Validator PhoneCall StyleSheet Command RequiredField Validator TextControl Label TextView Link ValidationSummary TextBox

ASP.NET Mobile Controls Forms Multiple forms per page Separately addressable set of controls that can be navigated Container for other controls Rendered as one or more “screens” based on target device Only one active form at a time By default – first form active when page accessed Set via ActiveForm

ASP.NET Mobile Controls Panels Provides grouping for multiple controls Single control for displaying, hiding enabling or disabling a set of controls Applying styles to panel that are inherited by child controls Empty panel placeholder container for dynamically created controls

ASP.NET Mobile Controls Text Display Label Control Small amount of content – read only text TextBox Control Single-line input text boxes TextView Control Exclusive to Mobile Web Controls Large fields of text Small set of mark-up: bold, italics, page break, paragraph, anchor tag Support pagination

ASP.NET Mobile Controls Lists Declared or databound list of items Decorations: None | Bulleted | Numbered Items can be set to act as links Static or interactive mode Support pagination Similar to DataList control in ASP.NET

ASP.NET Mobile Controls ObjectList Strictly databound Use to show list or table of data objects Can view multiple fields for each data object Can associate multiple commands with each object Support pagination Similar to DataGrid in ASP.NET

ASP.NET Mobile Controls Control Transfer Link Control Text-based hyperlink to another form on the mobile page or any URL Softkey Property Similar HyperLink Control in ASP.NET PhoneCall Control Exclusive to MWC Generates mark-up for automatically calling or displaying phone numbers

ASP.NET Mobile Controls Control Transfer Like Button Control in ASP.NET Way to invoke ASP.NET event handlers from UI elements SoftkeyLabel Property Specify text for Softkey on supporting mobile phones

ASP.NET Mobile Controls Adding new Devices <browserCaps> <use var="HTTP_USER_AGENT" /> <filter> <case match=".*Windows CE.*"> match="Mozilla/.* \(compatible; MSIE 3.02; Windows CE; (?'deviceID' \w*;)* (?'screenWidth'\d*)x(?'screenHeight'\d*)\)"> match=" Smartphone;" with="${deviceID}"> canInitiateVoiceCall = "true" inputType = "telephoneKeypad" isColor = "true" maximumRenderedPageSize = "300000" preferredImageMime = "image/jpeg" screenCharactersHeight = "13" screenCharactersWidth = "28" </case> </filter>

ASP.NET Mobile Web Controls Customization Example WML 1.1, Monochrome, WBMP graphics HTML 4.01, XHTML-Basic, CSS1, Jscript, Full color, JPG, GIF, PNG graphics Enhances presentation, and retains same functionality across all devices

ASP.NET Mobile Web Controls Customization Process Step 1: Select device for customization Pre-defined Filters Mobile Capabilities Step 2: Create DeviceSpecific construct In a Custom Control Directly in mobile.aspx Step 3: Apply customization Directly to control Using a StyleSheet

Customize Rendering

Summary Connected environment Out of the box support for 265+ devices Auto detection, adaptive rendering Customizable Extensible

Call to Action There are 100s of millions devices out there Great opportunities Start using the ASP.Net Mobile Controls to target as well low end & high end devices Start extending Web Solutions for mobile users Explore possibilities for disconnected applications as well