Mobile Web Development with Microsoft Visual Studio .

NET
Malek Kemmou CEO Arrabeta kemmou@kemmou.com

xmlContainer.Render()
<Speaker> <Bio>
<P> CEO Arrabeta (consulting firm based in Casablanca Morocco) <BR/> Newtelligence Alliance Partner </P> <P> Senior Consultant and Senior Trainer <BR/> Solutions Architecture, integration, interoperability </P> <P> Microsoft Regional Director for Middle East and Africa </P> <P> Ineta MEA Speaker Bureau </P> <P> Speaker at many conferences and events (TechEd, NDC, MDC, DevDays, DevEssentials ) </P>

</Bio>
</Speaker>

Microsoft Regional Directors

http://www.microsoft.com/rd ~140 experts from all around the world Speaking at PDC 2004 :
Clemens Vasters (Germany) Stephen Forte (New York) Farhan Mohammad (Minesota) Goksin Bakir (Turkey) Malek Kemmou (Morocco) Ahmad Badr (Egypt) Hossam Khalifa (Egypt)

Mobility Track
Mobile Web Development with Microsoft Visual Studio .NET Developing Compact Framework Applications for PocketPC and Smartphone Developing PocketPC Applications for a Semi-Connected Environment Building Localized/Globalized Applications for Windows Mobile Devices (Goksin Bakir) Developing Performing Mobile Applications with the .Net Compact Framework

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

Server-side Web Apps

Remote Web Pages

Local Code

Client-side Rich Apps

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 Back buttons ? Cookies ? Scripts ? etc.

Capabilities

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

Demo
Adaptive Rendering

Mobile Web Controls

Out of the box, ASP.NET Mobile Controls
Works with 265 different mobile devices out of the box (with Device Update 4) Is easily extensible to support additional devices Uses basic style properties (for example: Font, font-size, forecolor) that are advisory
Used only if supported by requesting device Ignored for down-level browsers

Gives acceptable presentation across wide range of devices for minimum development effort Allows advanced presentation features of up-level browsers to be leveraged Gives a richer, clearer user interface Enhances usability for the application

Customization

How MWC Work

Detect Device Capabilities Create ASP.NET Pages Add User Interface Element ASP.NET Mobile control Integrate Business Logic Wire-up events Post/Save to Web Servers Load and execute ASP.NET Pages Generate output (markup language) Based on device, browser and gateway combination HTTP Request

HTTP Response

Development Environment

IIS .NET Framework Mobile Internet Toolkit

Production Environment

Demo
How a simple Mobile Web Form Works

ASP.NET Mobile Controls Object Model

MobileControl AdRotator Calendar

Image
PagedControl Panel SelectionList

List ObjectList Form BaseValidator PhoneCall

CompareValidator CustomValidator RangeValidator RegularExpression Validator RequiredField Validator

StyleSheet
TextControl TextView ValidationSummary

Command Label Link

TextBox

ASP.NET Mobile Controls Containers

MobileControl AdRotator Calendar

Image
PagedControl Panel SelectionList

List ObjectList Form BaseValidator PhoneCall

CompareValidator CustomValidator RangeValidator RegularExpression Validator RequiredField Validator

StyleSheet
TextControl TextView ValidationSummary

Command Label Link

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

Demo
Containers

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

Demo
Text and List Display

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

Adding an Unsupported Device

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

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

Customization Process
Step 1: Select device for customization
Pre-defined Filters Mobile Capabilities

Step 2: Create DeviceSpecific construct

Directly in mobile.aspx In a Custom Control

Step 3: Apply customization

Directly to control Using a StyleSheet

Demo
Customizing Rendering

ASP.Net Mobile in ASP.Net 2.0

Not separate from regular ASP.Net
All ASP.Net Web Controls built for mobile device support Fully backward compatible
Mobile Web Control based code continues to run

Warning :
Doesnt make a case for one code base covering multi-device and regular Web
Form factors targets difficult to unify Maintenance load

Can permit reuse and unified UI Processing

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

Questions
I will post session content on