Upload
aubrey-carter
View
212
Download
0
Tags:
Embed Size (px)
Citation preview
Mobile Web Development Mobile Web Development withwith
Thom RobbinsThom RobbinsMicrosoft CorporationMicrosoft Corporation
Mobile application scenarios
Mobile application approaches
Building mobile Web applications
ASP.NET Class Libraries
Customization & Extensibility
AgendaAgenda
Mobile Application ApproachesMobile Application ApproachesOverviewOverview
XML Web servicesXML Web services
Multi-device applications too difficultMulti-device applications too difficult• Different form factorsDifferent form factors
• Different device capabilitiesDifferent device capabilities
• Different Web standardsDifferent Web standards
Local CodeLocal CodeMobile Web PagesMobile Web Pages
Mobile Application ApproachesMobile Application ApproachesTraditional ChallengesTraditional Challenges
Device Operating SystemDevice Operating System
Mobile Web Mobile Web BrowserBrowser
Very little skill reuseVery little skill reuse• Different platformsDifferent platforms
• Different APIsDifferent APIs
• Different languagesDifferent languages
Mobile Application ApproachesMobile Application Approaches Architectural AdvantagesArchitectural Advantages
Offline functionalityLocal execution
Local data
Rich user experienceMultimedia
Elaborate UI
Integration with assets on the device
Credit card readers
Barcode scanners
GPS receivers
Telephony/messaging
Adaptive renderingDynamic support for many device/browser combinations
Support for low-end browser devices
Single code baseSimplified maintenance
Natural extension to existing Web sites
Server-side executionNo client deployment
No client execution
Advantages of mobile Web appsAdvantages of mobile Web apps Advantages of smart device appsAdvantages of smart device apps
Mobile Application ApproachesMobile Application Approaches Microsoft Mobile DevelopmentMicrosoft Mobile Development
Local Local CodeCode
Mobile Web Mobile Web PagesPages
Device Operating SystemDevice Operating System
Mobile Web Mobile Web BrowserBrowser
ASP.NET Mobile ASP.NET Mobile ControlsControls
.NET Compact .NET Compact FrameworkFramework
Smart Device Smart Device ProgrammabilityProgrammability
ASP.NET Mobile ControlsASP.NET Mobile Controls
Integrates with Visual Studio .NETfor ease of use
.NET Framework
Services Framework
ASP.NET
Common Language Runtime
System Services
Windows Forms&
.NET Compact Framework
Base Data Debug …
Web Forms
MobileWeb
Forms
Web Services
Extends ASP.NET for mobile Web applications
Targets multiple devices and mark-up languages
Building Mobile Web ApplicationsBuilding Mobile Web ApplicationsVisual Studio and Visual Studio and ASP.NET Mobile ControlsASP.NET Mobile Controls
Common Language RuntimeCommon Language Runtime
Base Class LibrariesBase Class Libraries
ADO.NET and XMLADO.NET and XML
ASP.NETASP.NETWeb FormsWeb Forms
Web Web ServicesServices
WindowsWindowsFormsForms
VisualVisualBasicBasic C++C++ C#C# J#J# ……
Visu
al Stu
dio
.NE
TV
isual S
tud
io .N
ET
Mobile Web Mobile Web ProgrammabilityProgrammability
• Integrated IDEIntegrated IDE
• Visual design and Visual design and debuggingdebugging
• Simple integration Simple integration with data and XMLwith data and XML
ASP.NET Mobile ASP.NET Mobile Controls Controls
• Feature of ASP.NETFeature of ASP.NET
• Adaptive rendering Adaptive rendering for device propertiesfor device properties
• Uses full .NET Uses full .NET FrameworkFramework
Device Support – 200+ DevicesDevice Support – 200+ Devices
ACCESS Compact: NetFront 2.0, Fujitsu F503i, Mitsubishi D502i, Mitsubishi D503i, NEC N210i, NEC N502i, Sony SO503iEricsson 2.0: Ericsson R380, Ericsson R320, Ericsson R520m, Ericsson T20sGoAmerica 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 H3670Nokia: Nokia 3330, Nokia 6210, Nokia 7110, Nokia 9110iOpenwave 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 3000Openwave 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 SL45Miscellaneous 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),
NameSpaceNameSpaceSystem.Web.UI.MobileControlsSystem.Web.UI.MobileControls
NameSpaceNameSpaceSystem.Web.UISystem.Web.UI
PagePageSystem.Web.UI.PageSystem.Web.UI.Page
Namespace HierarchyNamespace HierarchyWeb FormsWeb Forms Mobile Web FormsMobile Web Forms
Desktop Server ControlsDesktop Server Controls
ControlControlSystem.Web.UI.ControlSystem.Web.UI.Control
Mobile PageMobile PageSystem.Web.UI.System.Web.UI.MobileControls.MobilePageMobileControls.MobilePage
Mobile Server ControlsMobile Server Controls
Mobile ControlMobile ControlSystem.Web.UI.MobileControls.MobileControlSystem.Web.UI.MobileControls.MobileControl
Mobile Web FormMobile Web Form
Mobile Web Form<mobile:Form runat="server"><mobile:Form runat="server">
<mobile:Label runat=“server"><mobile:Label runat=“server">Hello, Mobile WorldHello, Mobile World
</mobile:Label></mobile:Label></mobile:Form></mobile:Form>
<Form runat="server"><Form runat="server"><asp:Label runat=“server"><asp:Label runat=“server">
Hello, WorldHello, World </asp:Label></asp:Label></Form></Form>
Web FormWeb Form
Key ConceptsKey Concepts
Adaptive renderingMobile controls and device adapters automatically generate an appropriate rendering for each device
CustomizationProgrammatic model to customize the rendering for a particular device
Control extensibilityAbility to create new mobile controls, user controls, inheritance controls, composite controls, and direct control
Building Mobile Web ApplicationsBuilding Mobile Web ApplicationsThe Adaptive Rendering ProcessThe Adaptive Rendering Process
1. HTTP1. HTTPrequestrequest
2. ASP.NET 2. ASP.NET processingprocessing
3. ASP.NET result3. ASP.NET result4. Adaptive4. Adaptive
responseresponse
Returned as proper Returned as proper browser protocolbrowser protocol• HTMLHTML• cHTMLcHTML• WMLWML• XHTMLXHTML
Render ASPX pageRender ASPX page• Process pageProcess page• Each control builds Each control builds its own layoutits own layout
Discover device Discover device capabilitiescapabilities• Height and widthHeight and width• ColorColor• ImagesImages• Phone call abilityPhone call ability
ASP.NET Mobile ControlsASP.NET Mobile ControlsMobileControlMobileControl
StyleSheetStyleSheet
TextControlTextControl
TextViewTextView
ValidationSummaryValidationSummary
AdRotatorAdRotator
CalendarCalendar
PagedControlPagedControl
SelectionListSelectionList
PanelPanel
ImageImage
LinkLink
LabelLabel
CommandCommand
PhoneCallPhoneCall
BaseValidatorBaseValidator
FormForm
ObjectListObjectList
ListList
TextBoxTextBox
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidator
CustomValidatorCustomValidator
CompareValidatorCompareValidator
ContainersContainers
Container Container ControlsControls
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
ASP.NET Mobile ControlsASP.NET Mobile ControlsMobile ControlMobile Control
Style SheetStyle Sheet
TextControlTextControl
TextViewTextView
ValidationSummaryValidationSummary
Ad RotatorAd Rotator
CalendarCalendar
PagedControlPagedControl
Selection ListSelection List
PanelPanel
ImageImage
LinkLink
LabelLabel
CommandCommand
CallCall
BaseValidatorBaseValidator
FormForm
ObjectListObjectList
ListList
TextBoxTextBox
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidator
CustomValidatorCustomValidator
CompareValidatorCompareValidator
Text displayText display
Text Display ControlsText 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
ASP.NET Mobile ControlsASP.NET Mobile ControlsMobileControlMobileControl
StyleSheetStyleSheet
TextControlTextControl
TextViewTextView
ValidationSummaryValidationSummary
Ad RotatorAd Rotator
CalendarCalendar
PagedControlPagedControl
Selection ListSelection List
PanelPanel
ImageImage
LinkLink
LabelLabel
CommandCommand
CallCall
BaseValidatorBaseValidator
FormForm
ObjectListObjectList
ListList
TextBoxTextBox
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidator
CustomValidatorCustomValidator
CompareValidatorCompareValidator
List and selectionList and selection
List And Selection ListList And Selection List
List SelectionList ObjectList
Databound Optional Optional RequiredPagination Yes No YesDecoration None,
Bulleted, Numbered
Dropdown, ListBox, Radio Button, CheckBox, MultiSelect
Only with Customization
Interactive Optional Yes OptionalSimilar ASP.NET
Control
Datalist ListBox, CheckBox, CheckBoxList, RadioButton, RadioButtonList, & DropDownList
Datagrid
ASP.NET Mobile ControlsASP.NET Mobile ControlsMobileControlMobileControl
StyleSheetStyleSheet
TextControlTextControl
TextViewTextView
ValidationSummaryValidationSummary
Ad RotatorAd Rotator
CalendarCalendar
PagedControlPagedControl
Selection ListSelection List
PanelPanel
ImageImage
LinkLink
LabelLabel
CommandCommand
PhoneCallPhoneCall
BaseValidatorBaseValidator
FormForm
ObjectListObjectList
ListList
TextBoxTextBox
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidator
CustomValidatorCustomValidator
CompareValidatorCompareValidator
Control transferControl transfer
Control Transfer ControlsControl 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 controlExclusive to MMIT
Generates mark-up for automatically calling or displaying phone numbers
<mobile:Link id="lnkfrmResults" runat="server" <mobile:Link id="lnkfrmResults" runat="server" NavigateUrl="#frmResults">Go to Results</mobile:Link>NavigateUrl="#frmResults">Go to Results</mobile:Link>
Control Transfer Controls Control Transfer Controls
Command controlLike 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“ <mobile:Command id="cmdSelectProduct" runat="server“ softkeylabel=“Next”>Select Product</mobile:Command>softkeylabel=“Next”>Select Product</mobile:Command>
ASP.NET Mobile ControlsASP.NET Mobile ControlsMobileControlMobileControl
StyleSheetStyleSheet
TextControlTextControl
TextViewTextView
ValidationSummaryValidationSummary
Ad RotatorAd Rotator
CalendarCalendar
PagedControlPagedControl
Selection ListSelection List
PanelPanel
ImageImage
LinkLink
LabelLabel
CommandCommand
PhoneCallPhoneCall
BaseValidatorBaseValidator
FormForm
ObjectListObjectList
ListList
TextBoxTextBox
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidator
CustomValidatorCustomValidator
CompareValidatorCompareValidator
Image displayImage display
ASP.NET Mobile ControlsASP.NET Mobile ControlsMobileControlMobileControl
StyleSheetStyleSheet
TextControlTextControl
TextViewTextView
ValidationSummaryValidationSummary
Ad RotatorAd Rotator
CalendarCalendar
PagedControlPagedControl
Selection ListSelection List
PanelPanel
ImageImage
LinkLink
LabelLabel
CommandCommand
PhoneCallPhoneCall
BaseValidatorBaseValidator
FormForm
ObjectListObjectList
ListList
TextBoxTextBox
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidator
CustomValidatorCustomValidator
CompareValidatorCompareValidator
CalendarCalendar
ASP.NET Mobile ControlsASP.NET Mobile ControlsMobileControlMobileControl
StyleSheetStyleSheet
TextControlTextControl
TextViewTextView
ValidationSummaryValidationSummary
Ad RotatorAd Rotator
CalendarCalendar
PagedControlPagedControl
Selection ListSelection List
PanelPanel
ImageImage
LinkLink
LabelLabel
CommandCommand
PhoneCallPhoneCall
BaseValidatorBaseValidator
FormForm
ObjectListObjectList
ListList
TextBoxTextBox
RequiredFieldRequiredFieldValidatorValidator
RegularExpressionRegularExpressionValidatorValidator
RangeValidatorRangeValidator
CustomValidatorCustomValidator
CompareValidatorCompareValidator
ValidationValidation
IISIIS.NET Framework.NET Framework
Mobile Internet ToolkitMobile Internet ToolkitDevelopment Development EnvironmentEnvironment ProductionProduction
CreateCreate
mobile Web Formmobile Web Form
IntegrateIntegrateBusiness LogicBusiness Logic
Mobile Mobile PresentationPresentation
Layer (controls)Layer (controls)
Test Test Target DevicesTarget Devices
Post toPost toWeb ServersWeb Servers
HTTPHTTPRequestRequest
DeviceDeviceCapabilitiesCapabilities
Mobile Controls Mobile Controls andand
Device AdaptersDevice Adaptersgenerate displaygenerate display
AddAddDevice AdaptersDevice Adapters
Update DeviceUpdate DeviceCapabilitiesCapabilities
HTTPHTTPResponseResponse
Mobile.aspxMobile.aspxPagesPages
Device ExtensibilityDevice Extensibility
Reasons To CustomizeReasons To Customize
Optimize the generated renderingPer device or class of device
Used on a per application basis
Control the exact display
Ability to override default behavior
How To CustomizeHow To Customize
Use a StyleSheet
Define a filter
Specify control behavior/renderingProperty Override
Generic template (e.g., ObjectList item)
CustomizationCustomizationDevice specific templates - ObjectListDevice specific templates - ObjectList
ObjectList Control
Header Header TemplateTemplate
Item TemplateItem Template
AlternateItemAlternateItemTemplateTemplate
FooterFooterTemplateTemplate
SeparatorSeparatorTemplateTemplate
Pocket PC Customization
Cell Phone Limited Customization
ItemDetailsItemDetailsTemplateTemplate
Control ExtensibilityControl Extensibility
Encapsulate or reuse application functionality
Create a consistent site appearance
Extend existing control
Create new control
Similar to ASP.NET control extensibility
Extensibility Control typesExtensibility Control types
User controlReuse common User Interface functionality across an application
Declarative
Custom controlsInheritance 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