View
215
Download
0
Category
Preview:
Citation preview
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
Mobile Development Situation
Extending .NET Framework
ASP.NET Mobile Control Object Model
Customization and Extensibility
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
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
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
Mobile Development Situation
Extending .NET Framework ASP.NET Mobile Control Object Model
Customization and Extensibility
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
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidatorRangeValidatorRangeValidator
CustomValidatorCustomValidatorCustomValidatorCustomValidator
CompareValidatorCompareValidatorCompareValidatorCompareValidator
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
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidatorRangeValidatorRangeValidator
CustomValidatorCustomValidatorCustomValidatorCustomValidator
CompareValidatorCompareValidatorCompareValidatorCompareValidator
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
ASP.NET Mobile Controls OMMobileControlMobileControlMobileControlMobileControl
StyleSheetStyleSheetStyleSheetStyleSheet
TextControlTextControlTextControlTextControl
TextViewTextViewTextViewTextView
ValidationSummaryValidationSummaryValidationSummaryValidationSummary
Ad RotatorAd RotatorAd RotatorAd Rotator
CalendarCalendarCalendarCalendar
PagedControlPagedControlPagedControlPagedControl
Selection ListSelection ListSelection ListSelection List
PanelPanelPanelPanel
ImageImageImageImage
LinkLinkLinkLink
LabelLabelLabelLabel
CommandCommandCommandCommand
PhoneCallPhoneCallPhoneCallPhoneCall
BaseValidatorBaseValidatorBaseValidatorBaseValidator
FormFormFormForm
ObjectListObjectListObjectListObjectList
ListListListList
TextBoxTextBoxTextBoxTextBox
RequiredFieldRequiredFieldValidatorValidator
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidatorRangeValidatorRangeValidator
CustomValidatorCustomValidatorCustomValidatorCustomValidator
CompareValidatorCompareValidatorCompareValidatorCompareValidator
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
Northwind Phone Northwind Phone BookBook
Create the about us sectionCreate the about us section
ASP.NET Mobile Controls OMMobileControlMobileControlMobileControlMobileControl
StyleSheetStyleSheetStyleSheetStyleSheet
TextControlTextControlTextControlTextControl
TextViewTextViewTextViewTextView
ValidationSummaryValidationSummaryValidationSummaryValidationSummary
Ad RotatorAd RotatorAd RotatorAd Rotator
CalendarCalendarCalendarCalendar
PagedControlPagedControlPagedControlPagedControl
Selection ListSelection ListSelection ListSelection List
PanelPanelPanelPanel
ImageImageImageImage
LinkLinkLinkLink
LabelLabelLabelLabel
CommandCommandCommandCommand
CallCallCallCall
BaseValidatorBaseValidatorBaseValidatorBaseValidator
FormFormFormForm
ObjectListObjectListObjectListObjectList
ListListListList
TextBoxTextBoxTextBoxTextBox
RequiredFieldRequiredFieldValidatorValidator
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidatorRangeValidatorRangeValidator
CustomValidatorCustomValidatorCustomValidatorCustomValidator
CompareValidatorCompareValidatorCompareValidatorCompareValidator
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
Northwind Phone Northwind Phone BookBook
Connect to the Database to display the Connect to the Database to display the exiting employeesexiting employees
ASP.NET Mobile Controls OMMobileControlMobileControlMobileControlMobileControl
StyleSheetStyleSheetStyleSheetStyleSheet
TextControlTextControlTextControlTextControl
TextViewTextViewTextViewTextView
ValidationSummaryValidationSummaryValidationSummaryValidationSummary
Ad RotatorAd RotatorAd RotatorAd Rotator
CalendarCalendarCalendarCalendar
PagedControlPagedControlPagedControlPagedControl
Selection ListSelection ListSelection ListSelection List
PanelPanelPanelPanel
ImageImageImageImage
LinkLinkLinkLink
LabelLabelLabelLabel
CommandCommandCommandCommand
PhoneCallPhoneCallPhoneCallPhoneCall
BaseValidatorBaseValidatorBaseValidatorBaseValidator
FormFormFormForm
ObjectListObjectListObjectListObjectList
ListListListList
TextBoxTextBoxTextBoxTextBox
RequiredFieldRequiredFieldValidatorValidator
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidatorRangeValidatorRangeValidator
CustomValidatorCustomValidatorCustomValidatorCustomValidator
CompareValidatorCompareValidatorCompareValidatorCompareValidator
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
Northwind Phone Northwind Phone BookBook
Creating navigation screen Creating navigation screen
Improve existing AboutUs sectionImprove existing AboutUs section
ASP.NET Mobile Controls OMMobileControlMobileControlMobileControlMobileControl
StyleSheetStyleSheetStyleSheetStyleSheet
TextControlTextControlTextControlTextControl
TextViewTextViewTextViewTextView
ValidationSummaryValidationSummaryValidationSummaryValidationSummary
Ad RotatorAd RotatorAd RotatorAd Rotator
CalendarCalendarCalendarCalendar
PagedControlPagedControlPagedControlPagedControl
Selection ListSelection ListSelection ListSelection List
PanelPanelPanelPanel
ImageImageImageImage
LinkLinkLinkLink
LabelLabelLabelLabel
CommandCommandCommandCommand
PhoneCallPhoneCallPhoneCallPhoneCall
BaseValidatorBaseValidatorBaseValidatorBaseValidator
FormFormFormForm
ObjectListObjectListObjectListObjectList
ListListListList
TextBoxTextBoxTextBoxTextBox
RequiredFieldRequiredFieldValidatorValidator
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidatorRangeValidatorRangeValidator
CustomValidatorCustomValidatorCustomValidatorCustomValidator
CompareValidatorCompareValidatorCompareValidatorCompareValidator
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
ASP.NET Mobile Controls OMMobileControlMobileControlMobileControlMobileControl
StyleSheetStyleSheetStyleSheetStyleSheet
TextControlTextControlTextControlTextControl
TextViewTextViewTextViewTextView
ValidationSummaryValidationSummaryValidationSummaryValidationSummary
Ad RotatorAd RotatorAd RotatorAd Rotator
CalendarCalendarCalendarCalendar
PagedControlPagedControlPagedControlPagedControl
Selection ListSelection ListSelection ListSelection List
PanelPanelPanelPanel
ImageImageImageImage
LinkLinkLinkLink
LabelLabelLabelLabel
CommandCommandCommandCommand
PhoneCallPhoneCallPhoneCallPhoneCall
BaseValidatorBaseValidatorBaseValidatorBaseValidator
FormFormFormForm
ObjectListObjectListObjectListObjectList
ListListListList
TextBoxTextBoxTextBoxTextBox
RequiredFieldRequiredFieldValidatorValidator
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidatorRangeValidatorRangeValidator
CustomValidatorCustomValidatorCustomValidatorCustomValidator
CompareValidatorCompareValidatorCompareValidatorCompareValidator
ValidationValidation
Validation Controls
CompareValidator Control
CustomValidator Control
RangeValidator Control
RegularExpressionValidator Control
RequiredFIeldValidator Control
ValidationSummary Control
ASP.NET Mobile Controls OMMobileControlMobileControlMobileControlMobileControl
StyleSheetStyleSheetStyleSheetStyleSheet
TextControlTextControlTextControlTextControl
TextViewTextViewTextViewTextView
ValidationSummaryValidationSummaryValidationSummaryValidationSummary
Ad RotatorAd RotatorAd RotatorAd Rotator
CalendarCalendarCalendarCalendar
PagedControlPagedControlPagedControlPagedControl
Selection ListSelection ListSelection ListSelection List
PanelPanelPanelPanel
ImageImageImageImage
LinkLinkLinkLink
LabelLabelLabelLabel
CommandCommandCommandCommand
PhoneCallPhoneCallPhoneCallPhoneCall
BaseValidatorBaseValidatorBaseValidatorBaseValidator
FormFormFormForm
ObjectListObjectListObjectListObjectList
ListListListList
TextBoxTextBoxTextBoxTextBox
RequiredFieldRequiredFieldValidatorValidator
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidatorRangeValidatorRangeValidator
CustomValidatorCustomValidatorCustomValidatorCustomValidator
CompareValidatorCompareValidatorCompareValidatorCompareValidator
CalendarCalendar
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 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)
Northwind Phone Northwind Phone BookBook
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
Mobile Development Situation
Extending .NET Framework
ASP.NET Mobile Control Object Model
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: mitsup@Microsoft.com
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
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.
Recommended