Kontrolki mobilne w ASP.NET Krzysztof Gawęda ORHMET

Mobile Web i Smart Client Wiele urządzeń Wyłącznie online Logika serwera UI - przeglądarka Brak instalacji „Cienki” klient ASP.NET Mobile smart client „Gruby” klient Offline lub online Logika i dane u klienta Rozbudowany UI Instalacja u klienta .NET Compact Framework XML Web Services i dostęp do danych Visual Studio .NET 2003

Agenda Kontrolki mobilne ASP.NET - przegląd Kontrolki mobilne ASP.NET - model Customization Od projektu do produkcji Zasoby

Mobile Web - wyzwania Web Site

Kontrolki mobilne ASP.NET Rozszerzenie ASP.NET dla mobilnych aplikacji Web .NET Framework Services Framework ASP.NET Common Language Runtime System Services Windows Forms & .NET Compact Framework Base Data Debug … Web Forms Mobile Web Services Mobile Web Form Zintegrowane z VS .NET 2003 Dostępne dla wielu urządzeń i języków

Obsługiwane urządzenia – przykłady (200) ACCESS Compact: NetFront 2.0, Fujitsu F503i, Mitsubishi D502i, Mitsubishi D503i, NEC N210i, NEC N502i, Sony SO503i Ericsson 2.0: Ericsson R380, Ericsson R320, Ericsson R520m, Ericsson T20s GoAmerica 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 H3670 Nokia: Nokia 3330, Nokia 6210, Nokia 7110, Nokia 9110i Openwave 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 3000 Openwave 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 SL45 Miscellaneous 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),

Web Form i Mobile Web Form <Form runat="server"> <asp:Label runat=“server"> Hello, World </asp:Label> </Form> Mobile Web Form <mobile:Form runat="server"> <mobile:Label runat=“server"> Hello, Mobile World </mobile:Label> </mobile:Form>

Adaptive Control Model Przykład: kontrolka PhoneCall ASP.NET i IIS Return WML with the WTAI tag Mobile Capabilities WML Get Browser and Device Get Device Adapter Select Device Adapter WAP HTTP Request Page instantiates control Get Device Adapter PhoneCall cHTML HTML Return HTML with alternative text Mobile.ASPX

Agenda Kontrolki mobilne ASP.NET - przegląd Kontrolki mobilne ASP.NET - model Customization Od projektu do produkcji Zasoby

Hierarchia przestrzeni nazw Web Forms Mobile Web Forms NameSpace System.Web.UI NameSpace System.Web.UI.MobileControls Page System.Web.UI.Page Mobile Page System.Web.UI.MobileControls.MobilePage Desktop Server Controls Control System.Web.UI.Control Mobile Server Controls Mobile Control System.Web.UI.MobileControls.MobileControl

Kontrolki mobilne ASP.NET MobileControl Containers AdRotator Calendar Image List CompareValidator PagedControl ObjectList CustomValidator Form Panel RangeValidator BaseValidator SelectionList RegularExpression Validator PhoneCall StyleSheet Command RequiredField Validator TextControl Label TextView Link ValidationSummary TextBox

Kontrolki typu Container Form Podstawowa kontrolka definiująca ekran interfejsu użytkownika Wiele form na stronie Renderowana jako jedna lub wiele stron w zależności od urządzenia Jedna aktywna forma w danym czasie (domyślnie pierwsza lub ustawiona przez Active Form) Panel Grupowanie kontrolek Jeden panel pozwala na pokazanie/ukrycie bądź zablokowanie/odblokowanie zestawu kontrolek Style dla panelu i zawartości Może być użyty jako „trzymacz” miejsca dla kontrolek dynamicznych

Kontrolki mobilne ASP.NET Mobile Control Tekst Ad Rotator Calendar Image List CompareValidator PagedControl ObjectList CustomValidator Form Panel RangeValidator BaseValidator SelectionList RegularExpression Validator Call Style Sheet Command RequiredField Validator TextControl Label TextView Link ValidationSummary TextBox

Kontrolki tekstowe Label TextBox TextView Krótki tekst, tylko do pokazywania TextBox Jedna edytowalna linijka TextView Długie teksty Pewne możliwości formatowania: Bold, italics, podział stron, akapity Pozwala na stronicowanie tekstu

Kontrolki mobilne ASP.NET MobileControl Listy Ad Rotator Calendar Image List CompareValidator PagedControl ObjectList CustomValidator Form Panel RangeValidator BaseValidator Selection List RegularExpression Validator Call StyleSheet Command RequiredField Validator TextControl Label TextView Link ValidationSummary TextBox

Listy List SelectionList ObjectList Dane Opcjonalnie Zawsze Stronicowanie Tak Nie Wygląd Prosty, Punktowany, Numerowany Dropdown, ListBox, Radio Button, CheckBox, MultiSelect Wyłącznie „Customization” Interaktywne Podobne kontrolki w ASP.NET Datalist ListBox, CheckBox, CheckBoxList, RadioButton, RadioButtonList, & DropDownList Datagrid

Kontrolki mobilne ASP.NET MobileControl Command transfer Ad Rotator Calendar Image List CompareValidator PagedControl ObjectList CustomValidator Form Panel RangeValidator BaseValidator SelectionList RegularExpression Validator PhoneCall StyleSheet Command RequiredField Validator TextControl Label TextView Link ValidationSummary TextBox

Kontrolki Command Transfer Link Tekstowy „hyperlink” do innej formy na stronie lub dowolnego URL Softkey Podobny do kontrolki HyperLink w ASP.NET PhoneCall Pozwala na automatyczne wybieranie i pokazywanie numerów telefonicznych <mobile:Link id="lnkfrmResults" runat="server" NavigateUrl="#frmResults">Go to Results</mobile:Link>

Kontrolki Command Transfer Podobna do kontrolki Button w ASP.NET Sposób na wywoływanie obsługi zdarzeń z poziomu elementów UI SoftkeyLabel – tekst dla Softkey na urządzeniach, które go obsługują <mobile:Command id="cmdSelectProduct" runat="server“ softkeylabel=“Next”>Select Product</mobile:Command>

Kontrolki mobilne ASP.NET MobileControl Obrazki Ad Rotator Calendar Image List CompareValidator PagedControl ObjectList CustomValidator Form Panel RangeValidator BaseValidator SelectionList RegularExpression Validator PhoneCall StyleSheet Command RequiredField Validator TextControl Label TextView Link ValidationSummary TextBox

Kontrolki mobilne ASP.NET MobileControl Kalendarz Ad Rotator Calendar Image List CompareValidator PagedControl ObjectList CustomValidator Form Panel RangeValidator BaseValidator Selection List RegularExpression Validator PhoneCall StyleSheet Command RequiredField Validator TextControl Label TextView Link ValidationSummary TextBox

Kontrolki mobilne ASP.NET MobileControl Poprawność Ad Rotator Calendar Image List CompareValidator PagedControl ObjectList CustomValidator Form Panel RangeValidator BaseValidator SelectionList RegularExpression Validator PhoneCall StyleSheet Command RequiredField Validator TextControl Label TextView Link ValidationSummary TextBox

Agenda Kontrolki mobilne ASP.NET - przegląd Kontrolki mobilne ASP.NET - model Customization Od projektu do produkcji Zasoby

Dlaczego warto ? Optymalizacja wyglądu Dla konkretnego urządzenia lub grupy urządzeń Dla aplikacji Pełna kontrola nad wyświetlaniem Możliwość zmiany domyślnego „zachowania się” kontrolek

Co chcemy osiągnąć ? Zapewnić jednolity wygląd aplikacji StyleSheet Jak ? Zapewnić jednolity wygląd aplikacji StyleSheet Zmienić domyślne „zachowanie się” kontrolek w zależności od urządzenia Mobile Capabilities i Property Overrides Zmienić wygląd kontrolki Template

StyleSheet Mobile StyleSheet Informacje o stylach w jednym miejscu Używane do kontrolek i form Jeśli urządzenie czegoś nie obsługuje, to to „coś” jest ignorowane Mogą być współdzielone Mogą zawierać DeviceSpecific i/lub MobileCapabilities <mobile:StyleSheet id="StyleSheet1" runat="server"> <mobile:Style Font-Size="Large" Font-Bold="True" Name="Header“/> <mobile:PagerStyle Font-Name="Verdana" Name="Form" BackColor="#C0FFFF“/> </mobile:StyleSheet>

MobileCapabilites Class Mobile Capabilities Informacje o urządzeniach Pliki konfiguracyjne Machine.config Informacje o urządzeniach i przeglądarkach Do wykorzystania w ramach całego site-u. Web.config Informacje przeznaczone wyłącznie do aplikacji do której należy Web.config Klasa MobileCapabilities Udostępnia aplikacji informacje o urządzeniu i przeglądarce The Runtime Mobile Web Forms Mobile Capabilities Device Adapters MobileCapabilites Class Configuration Files machine.config web.config

Mobile Capabilities Definicja urządzenia <!-- Ericsson --> <case match="R380 (?'browserMajorVersion'\w*)(?'browserMinorVersion'\.\w*) WAP1\.1"> IsMobileDevice= True browser = "Ericsson" type = "Ericsson R380" version = ${browserMajorVersion}.${browserMinorVersion} majorVersion = ${browserMajorVersion} minorVersion = ${browserMinorVersion} preferredRenderingType = "wml11" preferredRenderingMime = "text/vnd.wap.wml" preferredImageMime = "image/vnd.wap.wbmp" inputType = "virtualKeyboard" canInitiateVoiceCall = "true" mobileDeviceManufacturer = "Ericsson" mobileDeviceModel = "R380" screenPixelsWidth = "310" screenPixelsHeight = "100" screenCharactersHeight = "7" screenBitDepth = "1" isColor = "false" maximumRenderedPageSize = "3000" </case>

Filtry (Filters) Wygląd specyficzny dla urządzenia W czasie tworzenia Używamy filtra do wybrania urządzenia Create Filter Pre-defined Filter Używamy DeviceSpecific dla kontrolki Property Override Template W czasie pracy Identyfikujemy urządzenie na podstawie filtra Używamy wzorca (template) do przygotowania odpowiedzi.

Override the Property <%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile"%> <%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %> <mobile:Form id="Form1" runat="server"> <mobile:Link id="Link1" runat="server" text="Go to MSN"> <DeviceSpecific> <Choice Filter="isWML11" NavigateUrl="http://mobile.msn.com” /> <Choice Filter="isHTML32" NavigateUrl="http://www.msn.com” /> </DeviceSpecific> </mobile:Link> </mobile:Form>

Wzorce (Templates) Mechanizm do parametryzowania sekcji kontrolki Każda sekcja może mieć własny wzorzec Kontrolki z wzorcami Form HeaderTemplate FooterTemplate ScriptTemplate Panel ContentTemplate List and ObjectList FooterTemplates ItemTemplate AlternatingItemTemplates SeparatorTemplate ItemDetailsTemplate (ObjectList)

Wzorce (Templates) Cell Phone Header Template Item Template Alternate Item Template Separator Template Footer Template Pocket PC Customization Cell Phone

Dla urządzenia Krok 1: Wybieramy/identyfikujemy urządzenie Mobile Capabilities Pre-definiowane filtry Filtry użtytkownika Krok 2: DeviceSpecific Wybieramy kontrolkę Krok 3: Przygotowujemy odpowiedź Property Overrides Templates

Jak to działa ? Mobile.ASPX <DeviceSpecific> Apply Filter Return adaptive WML rendering Capabilities and Filters Mobile Capabilities WML cHTML HTML Test Filter and Select Device Adapter WAP HTTP Request Get Device Adapter Test Filter and Select DeviceSpefic code Get Browser and Device Get Device Specific Page instantiates control <DeviceSpecific> Apply Filter Insert code HTTP Request Return DeviceSpecific HTML rendering Mobile.ASPX ASP.NET and IIS

Agenda Kontrolki mobilne ASP.NET - przegląd Kontrolki mobilne ASP.NET - model Customization Od projektu do produkcji Zasoby

„Mobilizing Desktop Apps” Warstwa prezentacji URL Redirection Desktop Art Desktop UI Mobile UI Mobile Art Warstwa logiki biznesowej Business Objects Business Objects Data Objects Data Objects Warstwa danych Data Access Objects Data Access Objects SQL Data SQL Data

Od projektu do produkcji IIS .NET Framework Stworzenie Mobile Web Form Definicje urządzeń Zmiana definicji urządzeń HTTP Request Warstwa prezentacji (kontrolki) Mobile.aspx (strony) Logika biznesowa WAP Kontrolki mobilne UI generowane dla urządzenia Testowanie urządzeń HTTP Response Publikacja na serwerach Nowe urządzenia TWORZENIE APLIKACACJI Etap produkcji

Podsumowanie Kontrolki mobilne w ASP.NET … Łatwość budowania mobilnych aplikacji Web dla telefonów komórkowych, urządzeń PDA, pagerów Zintegrowane z Visual Studio .NET 2003 oraz .NET Framework (ASP.NET) Każdy może dodać nową kontrolkę lub urządzenie

Zaczynamy … Narzędzia Przykłady i opracowania Visual Studio .NET 2002 + Mobile Internet Toolkit Visual Studio .NET 2003 Web Matrix Przykłady i opracowania HOL-04: Mobile Mortgage Calculator www.asp.net/mobile www.learnmobile.net www.asp.net/starterkits

Zasoby Najnowsze wieści dla programistów o Microsoft Pocket PC i Smartphone: www.microsoft.com/mobile/developer Informacje o .NET Compact Framework oraz Visual Studio .NET: mobility.microsoftdev.com Dużo szczegółów o kontrolkach mobilnych w ASP.NET: www.asp.net/mobile Jak „to” robić najszybciej www.microsoft.com/mobile/mobile2market Informacje i serwis techniczny: msdn.microsoft.com Grupa dyskusyjna microsoft.public.dotnet.framework.aspnet.mobile ASP.NET „Starter Kits”: www.asp.net/starterkits „QuickStart”: www.gotdotnet.com