应用微软工具开发手机网页

MicrosoftMobileInternetToolkit:HowtoUseIttoDevelopMobileASP.NETPages

JeremyBostron

BetaSupportEngineer

BetaTechnicalSupport

MicrosoftCorporation1AgendaMobiledevelopmentsituationSolution:MobileInternettoolkitExtendingMicrosoft®.NETFrameworkMobileInternetControlObjectModelIntegratingwithMicrosoftVisualStudio®.NETUsingadvancedfeaturesGettingstarted2AgendaMobiledevelopmentsituationSolution:MobileInternettoolkitExtending.NETFrameworkMobileInternetControlObjectModelIntegratingwithVisualStudio.NETUsingadvancedfeaturesGettingstarted3MobileWebDevelopment

Anytime,Anywhere,onAnyDeviceUtilizebrowserinterfaceReachbroadclientdevicesReachconnecteddevicesServer-sidebusinesslogicSimplifyoperationsNoclientinstallationsLowcosttoupgradeUseexistingdeveloperskillsetsLeveragedesktopWebinvestment4MobileWebChallengesFormfactorsanddevicecapabilitiesContentpaginationMultiplemarkuplanguagesBrowservariationsStatemanagementCookiesupportSessionDevelopmenttools5AgendaMobiledevelopmentsituationSolution:MobileInternettoolkitExtending.NETFrameworkMobileInternetControlObjectModelIntegratingwithVisualStudio.NETUsingadvancedfeaturesGettingstarted6TheSolution:MobileInternetToolkitAdaptivelyrendertodevicesbasedonbrowser,device,andgatewaycombinationExtendMicrosoftASP.NETtoempowerWebdeveloperstobuildmobileWebapplicationsIntegrateswiththeVisualStudio.NETdevelopmentenvironmentforeaseofuse7MobileInternetToolkitSinglemobileWebpagethatadaptstomultipledevicesSupportformultiplemarkuplanguagesWML1.1(WAP),cHTML1.0,andHTML3.2SupportforavarietyofdevicesCellphones(WAPandcHTML),PDAs,andpagersCustomizableandextensibleframeworkAddnewcontrolsSupportfornewdeviceswithouthavingtorewriteorrecompileyourapplication8MobileInternetToolkitMobileInternetControlsRuntimeIntelligentlyrenderscontentformobiledevicesMobileInternetDesignerIntegrateswithVisualStudio.NETIDEDevicecapabilitiesDeveloperresourcesDocumentationQuickStartTutorialDeviceadaptercode9IIS.NETFrameworkMobileInternetToolkitDevelopmentEnvironmentProductionEnvironmentCreate

mobileWebFormIntegrateBusinessLogicMobilePresentationLayer(controls)TestTargetDevicesPosttoWebServersHTTPRequestDeviceCapabilitiesMobileControls&DeviceAdapters(generatedisplay)HTTPResponseMobile.aspPagesHowMMITWorks…10DeviceSupport

ReleaseCandidateACESSCompactNetFront2x(DoCoMo):MitsubishiD502i,MitsubishiD503i,NECN210i,NECN502i,PanasonicP210i,FujitsuF503i,SonySO503iEricssonBrowsers:EricssonR380,EricssonR320,EricssonR520m,EricssonT20sGo.Web:RIMBlackberry857,PalmVx,RIMBlackberry950,RIMBlackberry957MicrosoftMobileExplorer:SonyCMD-z5,SonyJ5,BenefonQMicrosoftPocketInternetExplorer2000(4.x):CasioCassiopeiaE-125,CompaqiPAQH3630,CompaqiPAQH3650,HPJornada720,CompaqiPAQH3670NokiaBrowsers:Nokia6210,Nokia3330,Nokia7110,Nokia9110i,Nokia631011DeviceSupport(2)

ReleaseCandidateOpenwaveUP.Browser3.x:AudiovoxCDM-9000,AudiovoxCDM-9100,EricssonR280LX,HitachiC40xH,Kyocera3035,KyoceraQCP2035A,LGV111,MitsubishiT250,MotorolaP8767TimePort,MotorolaStarTAC7868W,SamsungSCH-6100,SamsungSCH-850,SamsungSCH-8500,SamsungUpRoarM100,SanyoC40xSA,SanyoSCP-4500,SanyoSCP-5000,SprintTouchpoint,SprintTouchpoint2200,SprintTP3000OpenwaveUP.Browser4.x:MotorolaP7389,Motorolav60c,SiemensSL45,SiemensS35i,Motorolai1000+,Motorolai2000+,AlcatelO.T.701,MotorolaP7382iTimePort,AudiovoxCDM-135,Motorolai50sx,Motorolai85s,Motorolav120c,Motorolav100,MotorolaT2288,Motorolav2288,SiemensC35iMiscellaneousBrowsers:Nokia9210,Palmm505;PalmVII,PanasonicP502i,SharpJ-SH04,SharpZaurusMI-E1,ToshibaJ-T0512AgendaMobiledevelopmentsituationSolution:MobileInternettoolkitExtending.NETFrameworkMobileInternetControlObjectModelIntegratingwithVisualStudio.NETUsingadvancedfeaturesGettingstarted13Extending.NETFrameworkMobileWebFormscontrolsareASP.NETcontrolsProgrammingmodelControl/object/eventmodelStatemanagementDesktopandmobileapplicationscansharecode.NETFrameworkServicesFrameworkASP.NETCommonLanguageRuntimeSystemServicesWinFormsBaseDataDebug…WebFormsMobileWebFormsWebServices14ExtendingASP.NETExtendstheASP.NETWebFormspagetoaddsupportformobiledevicesMobileWebFormpageSupportsmobiledevicesinthe.NETFrameworkExtendsMicrosoft’scurrenttoolsandapplicationmodeltomobiledevicesHostmobileWebFormcontrolsMobileWebFormcontrolsServer-sidecontrolsthatencapsulatecommonfunctionalityformobiledevices15HelloMobileWorld<%@Pagelanguage=“VB"Inherits=""%><%@RegisterTagPrefix=“mobile"Namespace=""

Assembly=""%>

<mobile:Formrunat="server"> <mobile:Labelrunat=“server"> Hello,MobileWorld </mobile:Label></mobile:Form>

16AgendaMobiledevelopmentsituationSolution:MobileInternettoolkitExtending.NETFrameworkMobileInternetControlObjectModelIntegratingwithVisualStudio.NETUsingadvancedfeaturesGettingstarted17NameSpace.NameSpacePageNamespaceHierarchyWebFormsMobileWebFormsServerControlsControlSystem.Web.UI.ControlMobilePageSystem.Web.UI.MobileControls.MobilePageMobileServerControlsMobileControlSystem.Web.UI.MobileControls18MobileWebFormsControlsMobileControlStyleSheetTextControlTextViewValidationSummaryAdRotatorCalendarPagedControlSelectionListPanelImageLinkLabelCommandPhoneCallBaseValidatorFormObjectListListTextBoxRequiredFieldValidatorRegularExpressionValidatorRangeValidatorCustomValidatorCompareValidator19ContainerControls

FormControlMultipleformsperpageSeparatelyaddressablesetofcontrolsthatcanbenavigatedContainerforothercontrolsRenderedasoneormore“screens〞basedontargetdeviceOnlyoneactiveformatatimeBydefault–firstform

activewhenpage

accessedSetviaActiveForm<mobile:Formid="Form1"runat="server">...</mobile:Form>20ContainerControls

PanelControlsProvidesgroupingformultiplecontrolsSinglecontrolfordisplaying,hiding,enabling,ordisablingasetofcontrolsApplyingstylestopanelthatareinheritedbychildcontrolsEmptypanelplaceholdercontainerfordynamicallycreatedcontrols<mobile:Panelid="Panel1"runat="server"><mobile:Labelid="Label1"runat="server">Text…

</mobile:Label></mobile:Panel>

21TextDisplayControlsLabelcontrolSmallamountofcontent–read-onlytextTextBoxcontrolSingle-lineinputtextboxesTextViewcontrolExclusivetoMMITLargefieldsoftextSmallsetofmarkup:bold,italics,pagebreak,paragraph,anchortagSupportpagination22ListandSelection

ListControlDeclaredordataboundlistofitemsDecorations:None|Bulleted|NumberedItemscanbesettoactaslinksStaticorinteractivemodeSupportpaginationSimilartoDataListcontrolinASP.NET<mobile:Listid="lstProduce"runat="server"Decoration="Bulleted"> <ItemValue="1"Text="Apple"></Item> <ItemValue="3"Text="Banana"></Item></mobile:List>23ListControls

SelectionListControlStaticordataboundlistProvidesUIselectioncapabilityCandisplayindifferentmodes:Dropdown|ListBox|RadioButton|CheckBox|MultiSelectListSelectiondoesn’ttriggerserverevent–requiresCommandcontroltosubmitform<mobile:SelectionListid="slstProduce"runat="server“SelectType="Radio"><ItemValue="1"Text="Onion"></Item><ItemValue="2"Text="Celery"></Item></mobile:SelectionList>SimilartoASP.NETControls:ListBox,CheckBox,CheckBoxList,RadioButton,RadioButtonList,andDropDownList24ListControls

ObjectListControlStrictlydataboundUsetoshowlistortableofdataobjectsCanviewmultiplefieldsforeachdataobjectCanassociatemultiplecommandswitheachobjectSupportpaginationSimilartoDataGridinASP.NET<mobile:ObjectListid="objlstProduce"runat="server"LabelField="ProductName"DataMember="Products"DataSource="<%#Products1%>"></mobile:ObjectList>25ControlTransferControlsLinkcontrol Text-basedhyperlinktoanotherformonthemobilepageoranyURLSoftkeypropertySimilarHyperLinkcontrolinASP.NETPhoneCallcontrolExclusivetoMMITGeneratesmarkupforautomaticallycallingordisplayingphonenumbers<mobile:Linkid="lnkfrmResults"runat="server"NavigateUrl="#frmResults">GotoResults</mobile:Link>26ControlTransferControls

CommandControlLikeButtoncontrolinASP.NETWaytoinvokeASP.NETeventhandlersfromUIelementsSoftkeyLabelpropertySpecifytextforSoftkeyonsupportingmobilephones<mobile:Commandid="cmdSelectProduct"runat="server“softkeylabel=“Next〞>SelectProduct</mobile:Command>27ImageDisplay

ImageControlDisplaysimagefile(i.e.Winpro.gif)CanhaveassociatedURLIfimagesarenotsupportedonrequestingdevice,thealternatetextisshown<mobile:Imageid="imgPic“runat="server“ImageUrl="winpro.gif“NavigateUrl="://microsoft"AlternateText="Windows2000"></mobile:Image>AdRotatorcontrolDisplaysrandomadRequiresXMLfileSimilartoAdRotatorcontrolinASP.NET28ValidationControlsCompareValidatorcontrolCustomValidatorcontrolRangeValidatorcontrolRegularExpressionValidatorcontrolRequiredFIeldValidatorcontrolValidationSummarycontrol29CalendarControlSuppliesdate-pickingfunctionalityDevice-specificrenderingofcontrolSimilartoCalendarcontrolinASP.NET30AgendaMobiledevelopmentsituationSolution:MobileInternettoolkitExtending.NETFrameworkMobileInternetControlObjectModelIntegratingwithVisualStudio.NETUsingadvancedfeaturesGettingstarted31MobileInternetDesignerUsesfamiliarVisualStudioAuthoringCreationofmobileWebsitesandapplicationsDraganddropMobileInternetcontrolsSetpropertiesandeventsIntegrateswithVisualStudio.NETCodedevelopmentDebuggingCodemanagementIntegrateddocumentationMobileInternetDesigner(2)MobileWebFormToolboxMultipleformsinthesamefileMobileProjectProperties&Events33AgendaMobiledevelopmentsituationSolution:MobileInternettoolkitExtending.NETFrameworkMobileInternetControlObjectModelIntegratingwithVisualStudio.NETUsingadvancedfeaturesGettingstarted34RenderingCustomization

WhyDoit?AbilitytooverridedefaultbehaviorControltheexactdisplayOptimizerendering35Customization

HowDoesitWork?StyleSheetDefineafilterSpecifycontrolbehavior/renderingPropertyoverrideGenerictemplate(e.g.ObjectListitem)Specifycontainerbehavior/renderingDeviceSpecificcontrolforformSelectdeviceorgroupofdevices36ExtensibilityMobileservercontrolEncapsulateorreuseapplicationfunction