Developing Mobile Web Applications With ASP'NET Mobile Controls

1
Developing Mobile Web Applications With ASP.NET
Mobile Controls

• Malek Kemmou
• kemmou_at_kemmou.com

2
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

3
Mobile Devices Today

• 100s of phones
• Multiple PDA/XDA devices
• Tablets, Mini-Tablets
• etc.

4
.Net for devices overview Development Platform
Visual Studio .NET
.NET Framework
Server-side Web Apps
Client-sideRich Apps
Local Code
Remote Web Pages
Mobile Web Browser
.NET CompactFramework
5
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 ?

6
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

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

8
The SolutionASP.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

9
Adaptive Rendering
10
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

11
How MWC Work
IIS .NET Framework Mobile Internet Toolkit
Create ASP.NET Pages
HTTP Request
Detect Device Capabilities
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
12
How it works
13
ASP.NET Mobile ControlsObject Model
MobileControl
AdRotator
Calendar
Image
CompareValidator
List
ObjectList
PagedControl
CustomValidator
Form
Panel
RangeValidator
BaseValidator
SelectionList
RegularExpression Validator
PhoneCall
StyleSheet
RequiredField Validator
Command
TextControl
Label
TextView
Link
ValidationSummary
TextBox
14
ASP.NET Mobile ControlsContainers
MobileControl
AdRotator
Calendar
Image
CompareValidator
List
ObjectList
PagedControl
CustomValidator
Form
Panel
RangeValidator
BaseValidator
SelectionList
RegularExpression Validator
PhoneCall
StyleSheet
RequiredField Validator
Command
TextControl
Label
TextView
Link
ValidationSummary
TextBox
15
ASP.NET Mobile ControlsForms

• 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 activewhen page accessed
• Set via ActiveForm

16
ASP.NET Mobile ControlsPanels

• 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

17
ASP.NET Mobile ControlsText 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

18
ASP.NET Mobile ControlsLists

• 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

19
ASP.NET Mobile ControlsObjectList

• 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

20
ASP.NET Mobile ControlsControl 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

21
ASP.NET Mobile ControlsControl 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

22
ASP.NET Mobile ControlsAdding new Devices
ltbrowserCapsgt ltuse var"HTTP_USER_AGENT" /gt
ltfiltergt ltcase match".Windows CE."gt
ltfiltergt ltcase
match"Mozilla/. \(compatible MSIE 3.02
Windows CE (?'deviceID' \w)
(?'screenWidth'\d)x(?'screenHeight'\d)\)"gt
ltfiltergt ltcase
match" Smartphone"
with"deviceID"gt
canInitiateVoiceCall "true"
inputType "telephoneKeypad"
isColor "true"
maximumRenderedPageSize "300000"
preferredImageMime "image/jpeg"
screenCharactersHeight "13"
screenCharactersWidth "28"
lt/casegt lt/filtergt lt/casegt
23
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

24
ASP.NET Mobile Web Controls Customization Process
25
Customize Rendering
26
Summary

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

27
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