Kontrolki mobilne w ASP.NET

Prezentacja na temat: "Kontrolki mobilne w ASP.NET"— Zapis prezentacji:

1 Kontrolki mobilne w ASP.NET
Krzysztof Gawęda ORHMET

2 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

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

4 Mobile Web - wyzwania Web Site

5 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

6 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 ), 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 and Omnisky ), 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),

7 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>

8 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

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

10 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

11 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

12 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

13 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

14 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

15 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

16 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

17 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

18 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>

19 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>

20 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

21 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

22 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

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

24 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

25 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

26 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>

27 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

28 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>

29 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.

30 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=" /> <Choice Filter="isHTML32" NavigateUrl=" /> </DeviceSpecific> </mobile:Link> </mobile:Form>

31 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)

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

33 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

34 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

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

36 „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

37 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

38 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

39 Zaczynamy … Narzędzia Przykłady i opracowania
Visual Studio .NET Mobile Internet Toolkit Visual Studio .NET 2003 Web Matrix Przykłady i opracowania HOL-04: Mobile Mortgage Calculator

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