Mobile Web Development with Microsoft Visual Studio .NET

1
Mobile Web Development with Microsoft Visual
Studio .NET

• Malek Kemmou
• CEO Arrabeta
• kemmou_at_kemmou.com

2
xmlContainer.Render()

• ltSpeakergt
• ltBiogt
• ltPgt CEO Arrabeta (consulting firm based in
  Casablanca Morocco) ltBR/gt
• Newtelligence Alliance Partner lt/Pgt
• ltPgt Senior Consultant and Senior Trainer ltBR/gt
• Solutions Architecture, integration,
  interoperability lt/Pgt
• ltPgt Microsoft Regional Director for Middle East
  and Africa lt/Pgt
• ltPgt Ineta MEA Speaker Bureau lt/Pgt
• ltPgt Speaker at many conferences and events
  (TechEd, NDC, MDC, DevDays, DevEssentials ) lt/Pgt
• lt/Biogt
• lt/Speakergt

3
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)

4
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

5
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

6
Mobile Devices Today

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

7
.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
8
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 ?

9
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

10
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.

11
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

12
Demo

• Adaptive Rendering

13
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
• Customization
• Allows advanced presentation features of up-level
  browsers to be leveraged
• Gives a richer, clearer user interface
• Enhances usability for the application

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

• How a simple Mobile Web Form Works

16
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
17
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
18
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

19
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

20
Demo

• Containers

21
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

22
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

23
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

24
Demo

• Text and List Display

25
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

26
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

27
Adding an Unsupported Device
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
28
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

29
Customization Process
30
Demo

• Customizing Rendering

31
ASP.Net Mobilein 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

32
Summary

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

33
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

34
Questions

• I will post session content on