1. MBL 390: Developing Mobile Web Application with ASP.NET Mobile Controls Gökşin Bakir CSA Yage Ltd.

2. Agenda Mobile Development Situation Extending.NET Framework ASP.NET Mobile Control Object Model Customization and Extensibility Getting Started

3. Agenda Mobile Development Situation Extending.NET Framework ASP.NET Mobile Control Object Model Customization and Extensibility Getting Started

4. Mobile Web Applications Types of Applications Access legacy data (CRM, ERP, Sales, etc.) Mobile Commerce (tickets, flowers, travel) Mobile Content (sports, weather) Quick Access to information (phone book) Monitoring (servers, medical, distribution) Reach cell phones, PDAs and pagers

5. Mobile Web Challenges Web Site

6. Mobile Web Challenges Different Markup Languages Different Form Factors Different Device Capabilities New device support State management Content Management Custom Tools and Solutions Site Maintenance

7. The Solution: ASP.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.

8. The Solution: ASP.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, and 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 with out having to rewrite or recompile your application

9. Adaptive Rendering Calendar Control Render to multiple devices

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

11. Agenda Mobile Development Situation Extending.NET Framework ASP.NET Mobile Control Object Model Customization and Extensibility Getting Started

12. Extending.NET Framework Extends the ASP.NET Web Forms Page to add support for mobile devices ASP.NET Mobile Controls are Server side controls that encapsulate common functionality for mobile devices Programming Model Control/object/event model State management Desktop and mobile applications can share code Web Services Platform Services Framework ASP.NET Common Language Runtime System Services Win Forms BaseDataDebug … Web Forms Mobile Web Forms Web Services

13. <%@ Page language=“VB" Inherits="System.Web.UI.MobileControls.MobilePage" %> <%@ Register TagPrefix=“mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile"%> Hello, Mobile World <%@ Page language=“VB" Inherits="System.Web.UI.MobileControls.MobilePage" %> <%@ Register TagPrefix=“mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile"%> Hello, Mobile World Hello, Mobile World

14. Hello Mobile World

15. Agenda Mobile Development Situation Extending.NET Framework ASP.NET Mobile Control Object Model Customization and Extensibility Getting Started

16. ASP.NET Mobile Controls OM MobileControlMobileControl StyleSheetStyleSheet TextControlTextControl TextViewTextView ValidationSummaryValidationSummary AdRotatorAdRotator CalendarCalendar PagedControlPagedControl SelectionListSelectionList PanelPanel ImageImage LinkLink LabelLabel CommandCommand PhoneCallPhoneCall BaseValidatorBaseValidator FormForm ObjectListObjectList ListList TextBoxTextBox RequiredFieldValidatorRequiredFieldValidator RegularExpressionValidatorRegularExpressionValidator RangeValidatorRangeValidator CustomValidatorCustomValidator CompareValidatorCompareValidator

17. MobileControlMobileControl StyleSheetStyleSheet TextControlTextControl TextViewTextView ValidationSummaryValidationSummary AdRotatorAdRotator CalendarCalendar PagedControlPagedControl SelectionListSelectionList PanelPanel ImageImage LinkLink LabelLabel CommandCommand PhoneCallPhoneCall BaseValidatorBaseValidator FormForm ObjectListObjectList ListList TextBoxTextBox RequiredFieldValidatorRequiredFieldValidator RegularExpressionValidatorRegularExpressionValidator RangeValidatorRangeValidator CustomValidatorCustomValidator CompareValidatorCompareValidator Containers

18. Container Controls Form Control Multiple forms per page Multiple forms per page Separately addressable set of controls that can be navigated Separately addressable set of controls that can be navigated Container for other controls Container for other controls Rendered as one or more “screens” based on target device Rendered as one or more “screens” based on target device Only one active form at a time Only one active form at a time By default – first form active when page accessed By default – first form active when page accessed  Set via ActiveForm

19. Container Controls Panel Controls 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. Northwind Phone Book Create the main screen for the navigation by using the container controls

21. ASP.NET Mobile Controls OM MobileControlMobileControl StyleSheetStyleSheet TextControlTextControl TextViewTextView ValidationSummaryValidationSummary Ad Rotator CalendarCalendar PagedControlPagedControl Selection List PanelPanel ImageImage LinkLink LabelLabel CommandCommand PhoneCallPhoneCall BaseValidatorBaseValidator FormForm ObjectListObjectList ListList TextBoxTextBox RequiredFieldValidatorRequiredFieldValidator RegularExpressionValidatorRegularExpressionValidator RangeValidatorRangeValidator CustomValidatorCustomValidator CompareValidatorCompareValidator Text Display

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

23. Northwind Phone Book Create the about us section

24. ASP.NET Mobile Controls OM MobileControlMobileControl StyleSheetStyleSheet TextControlTextControl TextViewTextView ValidationSummaryValidationSummary Ad Rotator CalendarCalendar PagedControlPagedControl Selection List PanelPanel ImageImage LinkLink LabelLabel CommandCommand CallCall BaseValidatorBaseValidator FormForm ObjectListObjectList ListList TextBoxTextBox RequiredFieldValidatorRequiredFieldValidator RegularExpressionValidatorRegularExpressionValidator RangeValidatorRangeValidator CustomValidatorCustomValidator CompareValidatorCompareValidator List and Selection

25. List And Selection List Control 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

26. List Controls SelectionList Control Static or databound list Provides UI selection capability Can display in different modes: Dropdown | ListBox | Radio Button | CheckBox | MultiSelect List Selection doesn’t trigger server event – requires Command control to submit form Similar to ASP.NET Controls: ListBox, CheckBox, CheckBoxList, RadioButton, RadioButtonList, and DropDownList

27. List Controls ObjectList Control 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

28. Northwind Phone Book Connect to the Database to display the exiting employees

29. ASP.NET Mobile Controls OM MobileControlMobileControl StyleSheetStyleSheet TextControlTextControl TextViewTextView ValidationSummaryValidationSummary Ad Rotator CalendarCalendar PagedControlPagedControl Selection List PanelPanel ImageImage LinkLink LabelLabel CommandCommand PhoneCallPhoneCall BaseValidatorBaseValidator FormForm ObjectListObjectList ListList TextBoxTextBox RequiredFieldValidatorRequiredFieldValidator RegularExpressionValidatorRegularExpressionValidator RangeValidatorRangeValidator CustomValidatorCustomValidator CompareValidatorCompareValidator Control Transfer

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

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

32. Northwind Phone Book Creating navigation screen Improve existing AboutUs section

33. ASP.NET Mobile Controls OM MobileControlMobileControl StyleSheetStyleSheet TextControlTextControl TextViewTextView ValidationSummaryValidationSummary Ad Rotator CalendarCalendar PagedControlPagedControl Selection List PanelPanel ImageImage LinkLink LabelLabel CommandCommand PhoneCallPhoneCall BaseValidatorBaseValidator FormForm ObjectListObjectList ListList TextBoxTextBox RequiredFieldValidatorRequiredFieldValidator RegularExpressionValidatorRegularExpressionValidator RangeValidatorRangeValidator CustomValidatorCustomValidator CompareValidatorCompareValidator Image Display

34. Image Display Image Control Displays image file (i.e. winpro.gif) Can have associated URL If images are not supported on requesting device, the alternate text is shown AdRotator Control Displays random ad Requires XML file Similar to AdRotator control in ASP.NET

35. Northwind Phone Book Providing an image to the site Image override

36. ASP.NET Mobile Controls OM MobileControlMobileControl StyleSheetStyleSheet TextControlTextControl TextViewTextView ValidationSummaryValidationSummary Ad Rotator CalendarCalendar PagedControlPagedControl Selection List PanelPanel ImageImage LinkLink LabelLabel CommandCommand PhoneCallPhoneCall BaseValidatorBaseValidator FormForm ObjectListObjectList ListList TextBoxTextBox RequiredFieldValidatorRequiredFieldValidator RegularExpressionValidatorRegularExpressionValidator RangeValidatorRangeValidator CustomValidatorCustomValidator CompareValidatorCompareValidator Validation

37. Validation Controls CompareValidator Control CustomValidator Control RangeValidator Control RegularExpressionValidator Control RequiredFIeldValidator Control ValidationSummary Control

38. ASP.NET Mobile Controls OM MobileControlMobileControl StyleSheetStyleSheet TextControlTextControl TextViewTextView ValidationSummaryValidationSummary Ad Rotator CalendarCalendar PagedControlPagedControl Selection List PanelPanel ImageImage LinkLink LabelLabel CommandCommand PhoneCallPhoneCall BaseValidatorBaseValidator FormForm ObjectListObjectList ListList TextBoxTextBox RequiredFieldValidatorRequiredFieldValidator RegularExpressionValidatorRegularExpressionValidator RangeValidatorRangeValidator CustomValidatorCustomValidator CompareValidatorCompareValidator Calendar

39. Calendar Control Supplies date-picking functionality Device-specific rendering of control Similar to Calendar control in ASP.NET

40. Agenda Mobile Development Situation Extending.NET Framework ASP.NET Mobile Control Object Model Customization and Extensibility Getting Started

41. Rendering Customization Why do it? Improve Look and fell of a site Ability to override default behavior Control the exact display Optimize rendering

42. Customization How does it work? StyleSheet Group style information Specify Control behavior/rendering Property Override Generic template (e.g. ObjectList item)

43. Northwind Phone Book Providing an image to the site Image override

44. Extensibility Mobile Server Control Encapsulate or reuse application functionality Extend existing control or create controls Create a consistent site appearance Add device support ASP.NET Mobile Controls supports 200+ devices Support new device Customize the output generated by a Mobile Control

45. Agenda Mobile Development Situation Extending.NET Framework ASP.NET Mobile Control Object Model Customization and Extensibility Getting Started

46. Download.NET Framework 1.1 ASP.NET controls are part of the redist http://www.asp.net/download-1.1.aspx?tabindex=0&tabid=1 Read the QuickStart Tutorial http://samples.gotdotnet.com/mobilequickstart/Samples Review existing sample application 5 ASP.NET Starter Kits Available http://www.asp.net/Default.aspx?tabindex=9&tabid=47 Get your question answered Participate in Peer to peer forums http://www.asp.net/Forums/default.aspx?tabindex=1&tabid=39 Apply the latest device support Download the latest Device Update http://www.asp.net/mobile/deviceupdate.aspx?tabindex=6 Let us know what you think Send Feedback to: mitsup@Microsoft.commitsup@Microsoft.com

47. Summary The ASP.NET Mobile Controls… Makes it easy to build mobile web applications for cell phones, PDAs and pagers Leverage current investment in the.NET Framework and Visual Studio.NET Is 3 rd party extensible

48. Questions?

49. Community Resources http://www.microsoft.com/communities/default.mspx Most Valuable Professional (MVP) http://www.mvp.support.microsoft.com/ Newsgroups Converse online with Microsoft Newsgroups, including Worldwide http://www.microsoft.com/communities/newsgroups/default.mspx User Groups Meet and learn with your peers http://www.microsoft.com/communities/usergroups/default.mspx

50. evaluations evaluations

51. © 2003 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.