1 / 32

Mobile Web Development with

Mobile Web Development with. Thom Robbins Microsoft Corporation. Agenda. Mobile application scenarios Mobile application approaches Building mobile Web applications ASP.NET Class Libraries Customization & Extensibility. XML Web services. Mobile Application Approaches Overview.

ann-house
Download Presentation

Mobile Web Development with

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mobile Web Development with Thom RobbinsMicrosoft Corporation

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

  3. XML Web services Mobile Application ApproachesOverview

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

  5. 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 Mobile Application ApproachesArchitectural Advantages Advantages of mobile Web apps Advantages of smart device apps

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

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

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

  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. Mobile Page System.Web.UI.MobileControls.MobilePage Control System.Web.UI.Control Mobile Control System.Web.UI.MobileControls.MobileControl Desktop Server Controls Mobile Server Controls Namespace Hierarchy Web Forms Mobile Web Forms NameSpace System.Web.UI NameSpace System.Web.UI.MobileControls Page System.Web.UI.Page

  11. Mobile Web Form Mobile Web Form Web Form <Form runat="server"> <asp:Label runat=“server"> Hello, World </asp:Label> </Form> <mobile:Form runat="server"> <mobile:Label runat=“server"> Hello, Mobile World </mobile:Label> </mobile: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. Discover device • capabilities • Height and width • Color • Images • Phone call ability • Render ASPX page • Process page • Each control builds its own layout • Returned as proper browser protocol • HTML • cHTML • WML • XHTML Building Mobile Web ApplicationsThe Adaptive Rendering Process 2. ASP.NET processing 1. HTTP request 4. Adaptive response 3. ASP.NET result

  14. ASP.NET Mobile Controls MobileControl Containers 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. 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 Container Controls

  16. ASP.NET Mobile Controls Mobile Control Text display Ad Rotator Calendar Image CompareValidator List ObjectList PagedControl CustomValidator Form Panel RangeValidator BaseValidator Selection List RegularExpression Validator Call Style Sheet RequiredField Validator Command TextControl Label TextView Link ValidationSummary TextBox

  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 List and selection Ad Rotator Calendar Image CompareValidator List ObjectList PagedControl CustomValidator Form Panel RangeValidator BaseValidator Selection List RegularExpression Validator Call StyleSheet RequiredField Validator Command TextControl Label TextView Link ValidationSummary TextBox

  19. List And Selection List

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

  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</mobile:Link>

  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</mobile:Command>

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

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

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

  26. Device Extensibility IIS .NET Framework Mobile Internet Toolkit Create mobile Web Form Device Capabilities HTTP Request Update Device Capabilities Mobile Presentation Layer (controls) Mobile.aspx Pages Integrate Business Logic Mobile Controls and Device Adapters generate display Test Target Devices HTTP Response Post to Web Servers Add Device Adapters Development Environment Production

  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. How To Customize • Use a StyleSheet • Define a filter • Specify control behavior/rendering • Property Override • Generic template (e.g., ObjectList item)

  29. CustomizationDevice specific templates - ObjectList ObjectList Control Header Template Item Template AlternateItem Template Separator Template Footer Template Cell Phone Limited Customization ItemDetails Template Pocket PC Customization

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

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

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

More Related