Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

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

Podobne prezentacje


Prezentacja na temat: "Kontrolki mobilne w ASP.NET Krzysztof Gawęda ORHMET."— Zapis prezentacji:

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

2 Mobile Web i Smart Client Mobile Web Mobile Web Wiele urządzeń Wiele urządzeń Wyłącznie online Wyłącznie online Logika serwera Logika serwera UI - przeglądarka UI - przeglądarka Brak instalacji Brak instalacji Cienki klient Cienki klient ASP.NET ASP.NET Mobile smart client Mobile smart client Gruby klient Gruby klient Offline lub online Offline lub online Logika i dane u klienta Logika i dane u klienta Rozbudowany UI Rozbudowany UI Instalacja u klienta Instalacja u klienta.NET Compact Framework.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 - przegląd Kontrolki mobilne ASP.NET - model Kontrolki mobilne ASP.NET - model Customization Customization Od projektu do produkcji Od projektu do produkcji Zasoby Zasoby

4 Mobile Web - wyzwania Web Site

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

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 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 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, 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 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 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 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 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 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), 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 Mobile Web Form Hello, Mobile World Hello, World Web Form

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

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

10 NameSpaceSystem.Web.UI.MobileControls NameSpaceSystem.Web.UI PageSystem.Web.UI.Page Hierarchia przestrzeni nazw Web Forms Mobile Web Forms Desktop Server Controls ControlSystem.Web.UI.Control Mobile Page System.Web.UI.MobileControls.MobilePage Mobile Server Controls Mobile Control System.Web.UI.MobileControls.MobileControl

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

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

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

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

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

16 Listy ListSelectionListObjectList DaneOpcjonalnieOpcjonalnieZawsze StronicowanieTakNieTak Wygląd Prosty, Punktowany, Numerowany Dropdown, ListBox, Radio Button, CheckBox, MultiSelect WyłącznieCustomizatio n InteraktywneOpcjonalnieTakOpcjonalnie Podobne kontrolki w ASP.NETDatalist ListBox, CheckBox, CheckBoxList, RadioButton, RadioButtonList, & DropDownList Datagrid

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

18 Kontrolki Command Transfer Link Link Tekstowy hyperlink do innej formy na stronie lub dowolnego URL Tekstowy hyperlink do innej formy na stronie lub dowolnego URL Softkey Softkey Podobny do kontrolki HyperLink w ASP.NET Podobny do kontrolki HyperLink w ASP.NET PhoneCall PhoneCall Pozwala na automatyczne wybieranie i pokazywanie numerów telefonicznych Pozwala na automatyczne wybieranie i pokazywanie numerów telefonicznych Go to Results NavigateUrl="#frmResults">Go to Results

19 Kontrolki Command Transfer Command Command Podobna do kontrolki Button w ASP.NET Podobna do kontrolki Button w ASP.NET Sposób na wywoływanie obsługi zdarzeń z poziomu elementów UI 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ą SoftkeyLabel – tekst dla Softkey na urządzeniach, które go obsługują

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

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

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

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

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

25 Co chcemy osiągnąć ? Co ?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 Mobile StyleSheet Informacje o stylach w jednym miejscu Informacje o stylach w jednym miejscu Używane do kontrolek i form Używane do kontrolek i form Jeśli urządzenie czegoś nie obsługuje, to to coś jest ignorowane Jeśli urządzenie czegoś nie obsługuje, to to coś jest ignorowane Mogą być współdzielone Mogą być współdzielone Mogą zawierać DeviceSpecific i/lub MobileCapabilities Mogą zawierać DeviceSpecific i/lub MobileCapabilities

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

28 Mobile Capabilities Definicja urządzenia 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"

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

30 Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls"Assembly="System.Web.Mobile"%> Override the Property

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

32 Wzorce (Templates) HeaderTemplate Item Template Alternate Item Template FooterTemplate SeparatorTemplate Pocket PC Customization Cell Phone

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

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

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

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

37 IIS.NET Framework TWORZENIEAPLIKACACJI Etap produkcji Stworzenie Mobile Web Form Logika biznesowa Warstwaprezentacji(kontrolki) Testowanieurządzeń Publikacja na serwerach HTTPRequestDefinicjeurządzeń Kontrolki mobilne UI generowane dla urządzenia Nowe urządzenia Zmiana definicji urządzeń HTTPResponse Mobile.aspx(strony) Od projektu do produkcji WAPWAPWAPWAP

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

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

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


Pobierz ppt "Kontrolki mobilne w ASP.NET Krzysztof Gawęda ORHMET."

Podobne prezentacje


Reklamy Google