1. Mobile Web Development with Thom Robbins Microsoft Corporation

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

3. Mobile Application Approaches Overview XML Web services

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

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

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

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

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

9. 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 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),

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

31. Control Extensibility Encapsulate or reuse application functionality Create a consistent site appearance Extend existing control Create new control Similar to ASP.NET control extensibility

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

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