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

MBL 390:

Developing Mobile Web Application with ASP.NET Mobile ControlsGö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





Getting Started

Mobile Web Applications

Types of ApplicationsAccess 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

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 combinationExtend 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 devicesSupport 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 frameworkAdd new controls and devicesSupport for new devices with out having to rewrite or recompile your application

Adaptive RenderingAdaptive Rendering

Calendar Control Render to multiple Calendar Control Render to multiple devicesdevices

Agenda

Mobile Development Situation Extending .NET Framework



Getting Started


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

Base Data Debug …

Web Forms

MobileWeb Forms

Web Services

<%@ Page language=“VB" Inherits="System.Web.UI.MobileControls.MobilePage" %>

<%@ Register TagPrefix=“mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile"%> <mobile:Form runat="server">

<mobile:Label runat=“server">Hello, Mobile World

</mobile:Label></mobile:Form>

<%@ Page language=“VB" Inherits="System.Web.UI.MobileControls.MobilePage" %>

<%@ Register TagPrefix=“mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile"%> <mobile:Form runat="server">

<mobile:Label runat=“server">Hello, Mobile World

</mobile:Label></mobile:Form>

Hello, Mobile World

Hello Mobile WorldHello Mobile World

Agenda


Extending .NET Framework ASP.NET Mobile Control Object Model


Getting Started

ASP.NET Mobile Controls OMMobileControlMobileControlMobileControlMobileControl

StyleSheetStyleSheetStyleSheetStyleSheet

TextControlTextControlTextControlTextControl

TextViewTextViewTextViewTextView

ValidationSummaryValidationSummaryValidationSummaryValidationSummary

AdRotatorAdRotatorAdRotatorAdRotator

CalendarCalendarCalendarCalendar

PagedControlPagedControlPagedControlPagedControl

SelectionListSelectionListSelectionListSelectionList

PanelPanelPanelPanel

ImageImageImageImage

LinkLinkLinkLink

LabelLabelLabelLabel

CommandCommandCommandCommand

PhoneCallPhoneCallPhoneCallPhoneCall

BaseValidatorBaseValidatorBaseValidatorBaseValidator

FormFormFormForm

ObjectListObjectListObjectListObjectList

ListListListList

TextBoxTextBoxTextBoxTextBox

RequiredFieldRequiredFieldValidatorValidator


RegularExpressionRegularExpressionValidatorValidator


RangeValidatorRangeValidatorRangeValidatorRangeValidator

CustomValidatorCustomValidatorCustomValidatorCustomValidator

CompareValidatorCompareValidatorCompareValidatorCompareValidator






AdRotatorAdRotatorAdRotatorAdRotator



SelectionListSelectionListSelectionListSelectionList



LinkLinkLinkLink





FormFormFormForm


ListListListList









ContainersContainers

Container Controls Form Control

Multiple forms per page Multiple forms per page Separately addressable set of Separately addressable set of

controls that can be navigatedcontrols that can be navigated Container for other controlsContainer for other controls Rendered as one or more Rendered as one or more

“screens” based on target device“screens” based on target device Only one active form at a timeOnly one active form at a time By default – first form activeBy default – first form active

when page accessedwhen page accessed Set via ActiveFormSet via ActiveForm

Container ControlsPanel 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 Northwind Phone BookBook

Create the main screen for the Create the main screen for the navigation by using the container navigation by using the container controlscontrols






Ad RotatorAd RotatorAd RotatorAd Rotator



Selection ListSelection ListSelection ListSelection List



LinkLinkLinkLink





FormFormFormForm


ListListListList









TextText DisplayDisplay

Text Display Controls

Label ControlSmall amount of content – read only text

TextBox ControlSingle-line input text boxes

TextView ControlExclusive to MMIT

Large fields of text

Small set of mark-up: bold, italics, page break, paragraph, anchor tag

Support pagination


Create the about us sectionCreate the about us section












LinkLinkLinkLink



CallCallCallCall


FormFormFormForm


ListListListList









List and SelectionList and Selection

List And SelectionList 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


Connect to the Database to display the Connect to the Database to display the exiting employeesexiting employees












LinkLinkLinkLink





FormFormFormForm


ListListListList









Control TransferControl Transfer

Control Transfer ControlsLink Control

Text-based hyperlink to another form on the mobile page or any URL

Softkey Property

Similar HyperLink Control in ASP.NET

PhoneCall ControlExclusive 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 PropertySpecify text for Softkey on supporting mobile phones


Creating navigation screen Creating navigation screen

Improve existing AboutUs sectionImprove existing AboutUs section












LinkLinkLinkLink





FormFormFormForm


ListListListList









Image DisplayImage 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 ControlDisplays random ad

Requires XML file

Similar to AdRotator control in ASP.NET












LinkLinkLinkLink





FormFormFormForm


ListListListList









ValidationValidation

Validation Controls

CompareValidator Control

CustomValidator Control

RangeValidator Control

RegularExpressionValidator Control

RequiredFIeldValidator Control

ValidationSummary Control












LinkLinkLinkLink





FormFormFormForm


ListListListList









CalendarCalendar

Calendar Control

Supplies date-picking functionality

Device-specific rendering of control

Similar to Calendar control in ASP.NET

Agenda



ASP.NET Mobile Control Object Model Customization and Extensibility

Getting Started

Rendering CustomizationWhy do it?

Improve Look and fell of a site

Ability to override default behavior

Control the exact display

Optimize rendering

CustomizationHow does it work?

StyleSheet Group style information

Specify Control behavior/renderingProperty Override

Generic template (e.g. ObjectList item)


Providing an image to the siteProviding an image to the site

Image overrideImage override

Extensibility

Mobile Server ControlEncapsulate or reuse application functionality

Extend existing control or create controls

Create a consistent site appearance

Add device supportASP.NET Mobile Controls supports 200+ devices

Support new device

Customize the output generated by a Mobile Control

Agenda




Customization and Extensibility Getting Started

Getting Started

Download .NET Framework 1.1ASP.NET controls are part of the redist

http://www.asp.net/download-1.1.aspx?tabindex=0&tabid=1

Read the QuickStart Tutorialhttp://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 answeredParticipate in Peer to peer forums

http://www.asp.net/Forums/default.aspx?tabindex=1&tabid=39

Apply the latest device supportDownload the latest Device Update

http://www.asp.net/mobile/deviceupdate.aspx?tabindex=6

Let us know what you thinkSend Feedback to: [email protected]

http://www.asp.net/download-1.1.aspx?tabindex=0&tabid=1

http://samples.gotdotnet.com/mobilequickstart/Samples

http://www.asp.net/Default.aspx?tabindex=9&tabid=47

http://www.asp.net/Forums/default.aspx?tabindex=1&tabid=39

http://www.asp.net/mobile/deviceupdate.aspx?tabindex=6

mailto:[email protected]

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 3rd party extensible

Questions?Questions?

Community Resources

Community Resourceshttp://www.microsoft.com/communities/default.mspx

Most Valuable Professional (MVP)http://www.mvp.support.microsoft.com/

NewsgroupsConverse online with Microsoft Newsgroups, including Worldwidehttp://www.microsoft.com/communities/newsgroups/default.mspx

User GroupsMeet and learn with your peershttp://www.microsoft.com/communities/usergroups/default.mspx

http://www.microsoft.com/communities/default.mspx

http://www.mvp.support.microsoft.com/

http://www.mvp.support.microsoft.com/

http://www.microsoft.com/communities/newsgroups/default.mspx

http://www.microsoft.com/communities/usergroups/default.mspx

http://www.microsoft.com/communities/usergroups/default.mspx

evaluationsevaluations

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

Documents

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