Mobile Web Development with Thom Robbins Microsoft Corporation

Mobile Web Development Mobile Web Development withwith

Thom RobbinsThom RobbinsMicrosoft CorporationMicrosoft Corporation

Mobile application scenarios

Mobile application approaches

Building mobile Web applications

ASP.NET Class Libraries

Customization & Extensibility

AgendaAgenda

Mobile Application ApproachesMobile Application ApproachesOverviewOverview

XML Web servicesXML Web services

Multi-device applications too difficultMulti-device applications too difficult• Different form factorsDifferent form factors

• Different device capabilitiesDifferent device capabilities

• Different Web standardsDifferent Web standards

Local CodeLocal CodeMobile Web PagesMobile Web Pages

Mobile Application ApproachesMobile Application ApproachesTraditional ChallengesTraditional Challenges

Device Operating SystemDevice Operating System

Mobile Web Mobile Web BrowserBrowser

Very little skill reuseVery little skill reuse• Different platformsDifferent platforms

• Different APIsDifferent APIs

• Different languagesDifferent languages

Mobile Application ApproachesMobile Application Approaches Architectural AdvantagesArchitectural Advantages

Offline functionalityLocal execution

Local data

Rich user experienceMultimedia

Elaborate UI

Integration with assets on the device

Credit card readers

Barcode scanners

GPS receivers

Telephony/messaging

Adaptive renderingDynamic support for many device/browser combinations

Support for low-end browser devices

Single code baseSimplified maintenance

Natural extension to existing Web sites

Server-side executionNo client deployment

No client execution

Advantages of mobile Web appsAdvantages of mobile Web apps Advantages of smart device appsAdvantages of smart device apps

Mobile Application ApproachesMobile Application Approaches Microsoft Mobile DevelopmentMicrosoft Mobile Development

Local Local CodeCode

Mobile Web Mobile Web PagesPages

Device Operating SystemDevice Operating System

Mobile Web Mobile Web BrowserBrowser

ASP.NET Mobile ASP.NET Mobile ControlsControls

.NET Compact .NET Compact FrameworkFramework

Smart Device Smart Device ProgrammabilityProgrammability

ASP.NET Mobile ControlsASP.NET Mobile Controls

Integrates with Visual Studio .NETfor ease of use

.NET Framework

Services Framework

ASP.NET

Common Language Runtime

System Services

Windows Forms&

.NET Compact Framework

Base Data Debug …

Web Forms

MobileWeb

Forms

Web Services

Extends ASP.NET for mobile Web applications

Targets multiple devices and mark-up languages

Building Mobile Web ApplicationsBuilding Mobile Web ApplicationsVisual Studio and Visual Studio and ASP.NET Mobile ControlsASP.NET Mobile Controls

Common Language RuntimeCommon Language Runtime

Base Class LibrariesBase Class Libraries

ADO.NET and XMLADO.NET and XML

ASP.NETASP.NETWeb FormsWeb Forms

Web Web ServicesServices

WindowsWindowsFormsForms

VisualVisualBasicBasic C++C++ C#C# J#J# ……

Visu

al Stu

dio

.NE

TV

isual S

tud

io .N

ET

Mobile Web Mobile Web ProgrammabilityProgrammability

• Integrated IDEIntegrated IDE

• Visual design and Visual design and debuggingdebugging

• Simple integration Simple integration with data and XMLwith data and XML

ASP.NET Mobile ASP.NET Mobile Controls Controls

• Feature of ASP.NETFeature of ASP.NET

• Adaptive rendering Adaptive rendering for device propertiesfor device properties

• Uses full .NET Uses full .NET FrameworkFramework

Device Support – 200+ DevicesDevice Support – 200+ Devices

ACCESS Compact: NetFront 2.0, Fujitsu F503i, Mitsubishi D502i, Mitsubishi D503i, NEC N210i, NEC N502i, Sony SO503iEricsson 2.0: Ericsson R380, Ericsson R320, Ericsson R520m, Ericsson T20sGoAmerica Go.Web: Compaq iPAQ H3650, Palm Vx, RIM Blackberry 857, RIM Blackberry 950, RIM Blackberry 957, Microsoft Mobile Explorer: Sony CMD-Z5, Sony CMD-J5, Benefon Q, Microsoft Pocket Internet Explorer: Casio Cassiopeia E-125, Compaq iPAQ H3630, Compaq iPAQ H3650, HP Jornada 720, Compaq iPAQ H3670Nokia: Nokia 3330, Nokia 6210, Nokia 7110, Nokia 9110iOpenwave UP.Browser 3.x: Audiovox CDM-9000, Ericsson R280LX, Hitachi C407H, Kyocera QCP 2035A, Kyocera QCP 3035, LG V111, Mitsubishi T250, Motorola StarTAC 7868W, Motorola TimePort P8767, Samsung SCH-6100, Samsung SCH-850, Samsung SCH-8500, Samsung UpRoar M100, Sanyo C401SA, Sanyo SCP-4500, Sanyo SCP-5000, Sprint Touchpoint, Sprint Touchpoint 2200, Sprint Touchpoint 3000Openwave UP.Browser 4.x: Alcatel One Touch 701, Audiovox CDM-135, Audiovox CDM-9100, Motorola i1000plus, Motorola i2000plus, Motorola i50sx, Motorola i85s, Motorola T2288, Motorola TimePort P7382i, Motorola TimePort P7389, Motorola V100, Motorola V120c, Motorola V2288, Motorola V60c, Siemens C35i, Siemens S35i, Siemens SL45Miscellaneous Browsers: Handspring Visor Platinum (Qualcomm Eudora Internet Suite 2.1; Blazer 1.0 and Omnisky 2.1.0.15), IBM WorkPad c505 (ilinx Xiino 1.01J), Kyocera QCP 6035 (Qualcomm Eudora 2.0), Nokia 9210 (Symbian Crystal 6.0), Palm VII (MyPalm 1.0), Palm Vx (AU-Systems 2.12181.1 and Omnisky 2.0.04), Palm m505 (MyPalm 1.1), Panasonic P210i, Panasonic P502i, Sharp J-SH04 (Original Equipment Manufacturer's Version 3.0), Sharp Zaurus MI-E1 (Original Equipment Manufacturer's Version 6.1), Sony CLIE PEG-N700C (ilinz Palmscape 4.0SJ), Toshiba J-T05 (Original Equipment Manufacturer's Version 3.0),

NameSpaceNameSpaceSystem.Web.UI.MobileControlsSystem.Web.UI.MobileControls

NameSpaceNameSpaceSystem.Web.UISystem.Web.UI

PagePageSystem.Web.UI.PageSystem.Web.UI.Page

Namespace HierarchyNamespace HierarchyWeb FormsWeb Forms Mobile Web FormsMobile Web Forms

Desktop Server ControlsDesktop Server Controls

ControlControlSystem.Web.UI.ControlSystem.Web.UI.Control

Mobile PageMobile PageSystem.Web.UI.System.Web.UI.MobileControls.MobilePageMobileControls.MobilePage

Mobile Server ControlsMobile Server Controls

Mobile ControlMobile ControlSystem.Web.UI.MobileControls.MobileControlSystem.Web.UI.MobileControls.MobileControl

Mobile Web FormMobile Web Form

Mobile Web Form<mobile:Form runat="server"><mobile:Form runat="server">

<mobile:Label runat=“server"><mobile:Label runat=“server">Hello, Mobile WorldHello, Mobile World

</mobile:Label></mobile:Label></mobile:Form></mobile:Form>

<Form runat="server"><Form runat="server"><asp:Label runat=“server"><asp:Label runat=“server">

Hello, WorldHello, World </asp:Label></asp:Label></Form></Form>

Web FormWeb Form

Key ConceptsKey Concepts

Adaptive renderingMobile controls and device adapters automatically generate an appropriate rendering for each device

CustomizationProgrammatic model to customize the rendering for a particular device

Control extensibilityAbility to create new mobile controls, user controls, inheritance controls, composite controls, and direct control

Building Mobile Web ApplicationsBuilding Mobile Web ApplicationsThe Adaptive Rendering ProcessThe Adaptive Rendering Process

1. HTTP1. HTTPrequestrequest

2. ASP.NET 2. ASP.NET processingprocessing

3. ASP.NET result3. ASP.NET result4. Adaptive4. Adaptive

responseresponse

Returned as proper Returned as proper browser protocolbrowser protocol• HTMLHTML• cHTMLcHTML• WMLWML• XHTMLXHTML

Render ASPX pageRender ASPX page• Process pageProcess page• Each control builds Each control builds its own layoutits own layout

Discover device Discover device capabilitiescapabilities• Height and widthHeight and width• ColorColor• ImagesImages• Phone call abilityPhone call ability

ASP.NET Mobile ControlsASP.NET Mobile ControlsMobileControlMobileControl

StyleSheetStyleSheet

TextControlTextControl

TextViewTextView

ValidationSummaryValidationSummary

AdRotatorAdRotator

CalendarCalendar

PagedControlPagedControl

SelectionListSelectionList

PanelPanel

ImageImage

LinkLink

LabelLabel

CommandCommand

PhoneCallPhoneCall

BaseValidatorBaseValidator

FormForm

ObjectListObjectList

ListList

TextBoxTextBox

RequiredFieldRequiredFieldValidatorValidator

RegularExpressionRegularExpressionValidatorValidator

RangeValidatorRangeValidator

CustomValidatorCustomValidator

CompareValidatorCompareValidator

ContainersContainers

Container Container ControlsControls

Form control Separately addressable container for controls that can be navigated

Multiple forms per page

Rendered as one or more “screens” based on target device

Only one active form at a time (default first form or set via Active Form)

Panel control 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

Can be placeholder for dynamically created controls

ASP.NET Mobile ControlsASP.NET Mobile ControlsMobile ControlMobile Control

Style SheetStyle Sheet


TextViewTextView


Ad RotatorAd Rotator

CalendarCalendar


Selection ListSelection List

PanelPanel

ImageImage

LinkLink

LabelLabel

CommandCommand

CallCall


FormForm


ListList

TextBoxTextBox






Text displayText display

Text Display ControlsText Display Controls

Label controlSmall amount of content – read only text

TextBox controlSingle-line input text boxes

TextView controlExclusive to MMIT

Large fields of text

Small set of mark-up: Bold, italics, page break, paragraph, anchor tag

Support pagination




TextViewTextView



CalendarCalendar



PanelPanel

ImageImage

LinkLink

LabelLabel

CommandCommand

CallCall


FormForm


ListList

TextBoxTextBox






List and selectionList and selection

List And Selection ListList And Selection List

List SelectionList ObjectList

Databound Optional Optional RequiredPagination Yes No YesDecoration None,

Bulleted, Numbered

Dropdown, ListBox, Radio Button, CheckBox, MultiSelect

Only with Customization

Interactive Optional Yes OptionalSimilar ASP.NET

Control

Datalist ListBox, CheckBox, CheckBoxList, RadioButton, RadioButtonList, & DropDownList

Datagrid




TextViewTextView



CalendarCalendar



PanelPanel

ImageImage

LinkLink

LabelLabel

CommandCommand

PhoneCallPhoneCall


FormForm


ListList

TextBoxTextBox






Control transferControl transfer

Control Transfer ControlsControl Transfer Controls

Link control Text-based hyperlink to another form on the mobile page or any URL

Softkey Property

Similar HyperLink Control in ASP.NET

PhoneCall controlExclusive to MMIT

Generates mark-up for automatically calling or displaying phone numbers

<mobile:Link id="lnkfrmResults" runat="server" <mobile:Link id="lnkfrmResults" runat="server" NavigateUrl="#frmResults">Go to Results</mobile:Link>NavigateUrl="#frmResults">Go to Results</mobile:Link>

Control Transfer Controls Control Transfer Controls

Command controlLike 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

<mobile:Command id="cmdSelectProduct" runat="server“ <mobile:Command id="cmdSelectProduct" runat="server“ softkeylabel=“Next”>Select Product</mobile:Command>softkeylabel=“Next”>Select Product</mobile:Command>




TextViewTextView



CalendarCalendar



PanelPanel

ImageImage

LinkLink

LabelLabel

CommandCommand

PhoneCallPhoneCall


FormForm


ListList

TextBoxTextBox






Image displayImage display




TextViewTextView



CalendarCalendar



PanelPanel

ImageImage

LinkLink

LabelLabel

CommandCommand

PhoneCallPhoneCall


FormForm


ListList

TextBoxTextBox






CalendarCalendar




TextViewTextView



CalendarCalendar



PanelPanel

ImageImage

LinkLink

LabelLabel

CommandCommand

PhoneCallPhoneCall


FormForm


ListList

TextBoxTextBox






ValidationValidation

IISIIS.NET Framework.NET Framework

Mobile Internet ToolkitMobile Internet ToolkitDevelopment Development EnvironmentEnvironment ProductionProduction

CreateCreate

mobile Web Formmobile Web Form

IntegrateIntegrateBusiness LogicBusiness Logic

Mobile Mobile PresentationPresentation

Layer (controls)Layer (controls)

Test Test Target DevicesTarget Devices

Post toPost toWeb ServersWeb Servers

HTTPHTTPRequestRequest

DeviceDeviceCapabilitiesCapabilities

Mobile Controls Mobile Controls andand

Device AdaptersDevice Adaptersgenerate displaygenerate display

AddAddDevice AdaptersDevice Adapters

Update DeviceUpdate DeviceCapabilitiesCapabilities

HTTPHTTPResponseResponse

Mobile.aspxMobile.aspxPagesPages

Device ExtensibilityDevice Extensibility

Reasons To CustomizeReasons To Customize

Optimize the generated renderingPer device or class of device

Used on a per application basis

Control the exact display

Ability to override default behavior

How To CustomizeHow To Customize

Use a StyleSheet

Define a filter

Specify control behavior/renderingProperty Override

Generic template (e.g., ObjectList item)

CustomizationCustomizationDevice specific templates - ObjectListDevice specific templates - ObjectList

ObjectList Control

Header Header TemplateTemplate

Item TemplateItem Template

AlternateItemAlternateItemTemplateTemplate

FooterFooterTemplateTemplate

SeparatorSeparatorTemplateTemplate

Pocket PC Customization

Cell Phone Limited Customization

ItemDetailsItemDetailsTemplateTemplate

Control ExtensibilityControl Extensibility

Encapsulate or reuse application functionality

Create a consistent site appearance

Extend existing control

Create new control

Similar to ASP.NET control extensibility

Extensibility Control typesExtensibility Control types

User controlReuse common User Interface functionality across an application

Declarative

Custom controlsInheritance control

Extends existing mobile Web Form controls

Composite control

Group multiple mobile controls

Direct control

Create new mobile control in an assembly

Adapter for this control is required

Summary Summary

The ASP.NET Mobile Controls…

Makes it easy to build mobile Web applications for cell phones, PDAs, and pagers

Integrate with Visual Studio .NET and the .NET Framework (ASP.NET)

Anyone can add new controls or new device support

Documents

Mobile Web Development with Thom Robbins Microsoft Corporation