Mobile Web Development with Thom Robbins Microsoft Corporation

Mobile application scenarios Mobile application approaches Building mobile Web applications ASP.NET Class Libraries Customization & Extensibility Agenda

Mobile Application Approaches Overview XML Web services

Multi-device applications too difficult Different form factors Different form factors Different device capabilities Different device capabilities Different Web standards Different Web standards Local Code Mobile Web Pages Mobile Application Approaches Traditional Challenges Device Operating System Mobile Web Browser Very little skill reuse Different platforms Different platforms Different APIs Different APIs Different languages Different languages

Mobile Application Approaches Architectural Advantages Offline functionality Local execution Local data Rich user experience Multimedia Elaborate UI Integration with assets on the device Credit card readers Barcode scanners GPS receivers Telephony/messaging Adaptive rendering Dynamic support for many device/browser combinations Support for low-end browser devices Single code base Simplified maintenance Natural extension to existing Web sites Server-side execution No client deployment No client execution Advantages of mobile Web apps Advantages of smart device apps

Mobile Application Approaches Microsoft Mobile Development Local Code Mobile Web Pages Device Operating System Mobile Web Browser ASP.NET Mobile Controls.NET Compact Framework Smart Device Programmability

ASP.NET Mobile Controls Integrates with Visual Studio.NET for ease of use.NET Framework Services Framework ASP.NET Common Language Runtime System Services Windows Forms &.NET Compact Framework BaseDataDebug … Web Forms Mobile Web Forms Web Services Extends ASP.NET for mobile Web applications Targets multiple devices and mark- up languages

Building Mobile Web Applications Visual Studio and ASP.NET Mobile Controls Common Language Runtime Base Class Libraries ADO.NET and XML ASP.NET Web Forms WebServicesWindowsForms Visual Basic C++C#J#… Visual Studio.NET Mobile Web Programmability Integrated IDE Integrated IDE Visual design and debugging Visual design and debugging Simple integration with data and XML Simple integration with data and XML ASP.NET Mobile Controls Feature of ASP.NET Feature of ASP.NET Adaptive rendering for device properties Adaptive rendering for device properties Uses full.NET Framework Uses full.NET Framework

Device Support – 200+ Devices ACCESS Compact: NetFront 2.0, Fujitsu F503i, Mitsubishi D502i, Mitsubishi D503i, NEC N210i, NEC N502i, Sony SO503i Ericsson 2.0: Ericsson R380, Ericsson R320, Ericsson R520m, Ericsson T20s GoAmerica 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 H3670 Nokia: Nokia 3330, Nokia 6210, Nokia 7110, Nokia 9110i Openwave 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 3000 Openwave 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 SL45 Miscellaneous Browsers: Handspring Visor Platinum (Qualcomm Eudora Internet Suite 2.1; Blazer 1.0 and Omnisky ), 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 and Omnisky ), 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),

NameSpaceSystem.Web.UI.MobileControls NameSpaceSystem.Web.UI PageSystem.Web.UI.Page Namespace Hierarchy Web Forms Mobile Web Forms Desktop Server Controls ControlSystem.Web.UI.Control Mobile Page System.Web.UI.MobileControls.MobilePage Mobile Server Controls Mobile Control System.Web.UI.MobileControls.MobileControl

Mobile Web Form Hello, Mobile World </mobile:Label></mobile:Form> Hello, World </Form> Web Form

Key Concepts Adaptive rendering Mobile controls and device adapters automatically generate an appropriate rendering for each device Customization Programmatic model to customize the rendering for a particular device Control extensibility Ability to create new mobile controls, user controls, inheritance controls, composite controls, and direct control

Building Mobile Web Applications The Adaptive Rendering Process 1. HTTP request 2. ASP.NET processing 3. ASP.NET result 4. Adaptive response Returned as proper browser protocol HTML HTML cHTML cHTML WML WML XHTML XHTML Render ASPX page Process page Process page Each control builds its own layout Each control builds its own layout Discover device capabilities Height and width Height and width Color Color Images Images Phone call ability Phone call ability

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

Container Controls 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 Controls Mobile Control Style Sheet TextControl TextView ValidationSummary Ad Rotator Calendar PagedControl Selection List Panel Image Link Label Command Call BaseValidator Form ObjectList List TextBox RequiredFieldValidator RegularExpressionValidator RangeValidator CustomValidator CompareValidator Text display

Text Display Controls Label control Small amount of content – read only text TextBox control Single-line input text boxes TextView control Exclusive to MMIT Large fields of text Small set of mark-up: Bold, italics, page break, paragraph, anchor tag Support pagination

ASP.NET Mobile Controls MobileControl StyleSheet TextControl TextView ValidationSummary Ad Rotator Calendar PagedControl Selection List Panel Image Link Label Command Call BaseValidator Form ObjectList List TextBox RequiredFieldValidator RegularExpressionValidator RangeValidator CustomValidator CompareValidator List and selection

List And Selection List ListSelectionListObjectList DataboundOptional Required PaginationYesNoYes DecorationNone, Bulleted, Numbered Dropdown, ListBox, Radio Button, CheckBox, MultiSelect Only with Customization InteractiveOptionalYesOptional Similar ASP.NET Control DatalistListBox, CheckBox, CheckBoxList, RadioButton, RadioButtonList, & DropDownList Datagrid

ASP.NET Mobile Controls MobileControl StyleSheet TextControl TextView ValidationSummary Ad Rotator Calendar PagedControl Selection List Panel Image Link Label Command PhoneCall BaseValidator Form ObjectList List TextBox RequiredFieldValidator RegularExpressionValidator RangeValidator CustomValidator CompareValidator Control transfer

Control 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 control Exclusive to MMIT Generates mark-up for automatically calling or displaying phone numbers <mobile:Link id="lnkfrmResults" runat="server" NavigateUrl="#frmResults">Go to Results NavigateUrl="#frmResults">Go to Results

Control Transfer Controls Command control 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 <mobile:Command id="cmdSelectProduct" runat="server“ softkeylabel=“Next”>Select Product softkeylabel=“Next”>Select Product

ASP.NET Mobile Controls MobileControl StyleSheet TextControl TextView ValidationSummary Ad Rotator Calendar PagedControl Selection List Panel Image Link Label Command PhoneCall BaseValidator Form ObjectList List TextBox RequiredFieldValidator RegularExpressionValidator RangeValidator CustomValidator CompareValidator Image display

ASP.NET Mobile Controls MobileControl StyleSheet TextControl TextView ValidationSummary Ad Rotator Calendar PagedControl Selection List Panel Image Link Label Command PhoneCall BaseValidator Form ObjectList List TextBox RequiredFieldValidator RegularExpressionValidator RangeValidator CustomValidator CompareValidator Calendar

ASP.NET Mobile Controls MobileControl StyleSheet TextControl TextView ValidationSummary Ad Rotator Calendar PagedControl Selection List Panel Image Link Label Command PhoneCall BaseValidator Form ObjectList List TextBox RequiredFieldValidator RegularExpressionValidator RangeValidator CustomValidator CompareValidator Validation

IIS.NET Framework Mobile Internet Toolkit Development Environment Production Create mobile Web Form Integrate Business Logic MobilePresentation Layer (controls) Layer (controls) Test Target Devices Post to Web Servers HTTPRequestDeviceCapabilities Mobile Controls and Device Adapters generate display Add Device Adapters Update Device Capabilities HTTPResponse Mobile.aspxPages Device Extensibility

Reasons To Customize Optimize the generated rendering Per device or class of device Used on a per application basis Control the exact display Ability to override default behavior

Customization Development ChallengeSolutions Consistent appearance for the application Style Sheet Optimize the Rendering or behavior of a control for a device class Mobile Capabilities and Property Overrides Change the default rendering behavior for a device class Templates and adapter extensibility

How To Customize Use a StyleSheet Define a filter Specify control behavior/rendering Property Override Generic template (e.g., ObjectList item)

Customization Device specific templates - ObjectList ObjectList Control HeaderTemplate Item Template AlternateItemTemplate FooterTemplate SeparatorTemplate Pocket PC Customization Cell Phone Limited Customization ItemDetailsTemplate

Control 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 types User control Reuse common User Interface functionality across an application Declarative Custom controls Inheritance 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 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