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

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

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

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

Mobile Web Challenges Web Site

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

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.

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

Adaptive Rendering Calendar Control Render to multiple devices

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…

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

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

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

Hello Mobile World

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

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

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

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

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

Northwind Phone Book Create the main screen for the navigation by using the container controls

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

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

Northwind Phone Book Create the about us section

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

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

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

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

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

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

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

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

Northwind Phone Book Creating navigation screen Improve existing AboutUs section

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

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

Northwind Phone Book Providing an image to the site Image override

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

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

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

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

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

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

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

Northwind Phone Book Providing an image to the site Image override

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

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

Download.NET Framework 1.1 ASP.NET controls are part of the redist Read the QuickStart Tutorial Review existing sample application 5 ASP.NET Starter Kits Available Get your question answered Participate in Peer to peer forums Apply the latest device support Download the latest Device Update Let us know what you think Send Feedback to:

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

Questions?

Community Resources Most Valuable Professional (MVP) Newsgroups Converse online with Microsoft Newsgroups, including Worldwide User Groups Meet and learn with your peers

evaluations evaluations

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