Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00083 005112 20935644 na godz. na dobę w sumie
wyszukaj dokładnie | pobierz wtyczkę
ASP.NET MVC 4. Programowanie - książka
ASP.NET MVC 4. Programowanie - książka
Autor: , , Liczba stron: 464
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-6644-7 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> programowanie >> .net - programowanie
Porównaj ceny (książka, ebook (-70%), audiobook).
Czytaj online.
Komentuj

Wykorzystaj potencjał ASP.NET!

Platforma ASP.NET to główny konkurent języka Java w zakresie tworzenia aplikacji internetowych oraz zaawansowanych stron internetowych. Jej autorzy zadbali o to, aby każda kolejna wersja ułatwiała pracę programistom w coraz szerszym zakresie. Programiści to doceniają i ASP.NET znajduje się wśród języków najczęściej wybieranych przy tworzeniu zaawansowanych projektów.

Jeżeli chcesz w pełni wykorzystać potencjał ASP.NET MVC 4, przyda Ci się wyjątkowa książka. Ta, którą trzymasz w rękach, bez wątpienia taka jest! W trakcie lektury poznasz niuanse architektury MVC oraz dowiesz się, jak tworzyć sieciowe API. Ponadto wykorzystasz Entity Framework do wydajnego korzystania z baz danych oraz zaznajomisz się ze sposobami na równoległe przetwarzanie żądań. Szczególną uwagę powinieneś zwrócić na rozdział poświęcony zapewnieniu jakości - wykorzystanie testów automatycznych znacząco ułatwi Ci życie! Książka ta powinna trafić na podręczną półkę każdego programisty ASP.NET!

Sięgnij po tę książkę i:

Poznaj i wykorzystaj możliwości ASP.NET w Twoim projekcie!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: ASP.NET MVC 4. Programowanie Tłumaczenie: Robert Górczyński ISBN: 978-83-246-6644-7 © 2013 Helion S.A. Authorized Polish translation of the English edition Programming ASP.NET MVC 4, ISBN 9781449320317 © 2012 Jess Chadwick, Todd Snyder, Hrusikesh Panda This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Wydawnictwo HELION dołożyło wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie bierze jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Wydawnictwo HELION nie ponosi również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/aspm4p Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treļci Wprowadzenie ........................................................................................................................11 Czýļë I. Rozkrýcamy siý .......................................................................................................... 15 Opracowane przez Microsoft platformy tworzenia aplikacji sieciowych Model Widok Kontroler Active Server Pages (ASP) ASP.NET Web Forms ASP.NET MVC Architektura MVC Co nowego w ASP.NET MVC 4? Wprowadzenie do aplikacji EBuy Instalacja ASP.NET MVC Tworzenie aplikacji ASP.NET MVC Rozdziaĥ 1. Podstawy ASP.NET MVC .......................................................................................17 17 18 18 18 19 20 20 20 20 22 23 23 23 27 28 28 29 31 32 32 33 36 36 37 38 39 40 41 43 45 46 Szablony projektów Konwencja przed konfiguracjñ Uruchamianie aplikacji Routing Konfiguracja tras Kontrolery Akcje kontrolera Obiekt ActionResult Parametry akcji Filtry akcji Widoki Wyszukiwanie widoków Poznaj Razor OdróĔnianie kodu od znaczników Ukäady graficzne Widoki czöĈciowe WyĈwietlanie danych Metody pomocnicze HTML i URL Modele 3 Poleć książkęKup książkę Zebranie wszystkich komponentów w caäoĈè Trasa Kontroler Widok Uwierzytelnianie AccountController Podsumowanie 47 47 47 49 52 54 55 Wszystko kröci siö wokóä ASP.NET Narzödzia, jözyki i API Moduäy i procedury obsäugi HTTP Zarzñdzanie stanem WdraĔanie i Ĉrodowisko uruchomieniowe Rozdziaĥ 2. ASP.NET MVC dla programistów formularzy sieciowych .................................57 57 58 58 58 59 59 60 60 61 62 66 66 67 Oddzielanie logiki aplikacji od logiki widoku Adresy URL i routing Zarzñdzanie stanem Generowanie kodu HTML Tworzenie widoku ASP.NET MVC za pomocñ skäadni Web Forms Säowo ostrzeĔenia Podsumowanie Wiöcej róĔnic niĔ podobieþstw Rozdziaĥ 3. Praca z danymi ....................................................................................................69 69 71 71 72 Tworzenie formularza Obsäuga akcji POST formularza Zapis danych w bazie danych Technika Code First — zasada „konwencja przed konfiguracjñ” Tworzenie warstwy dostöpu do danych z uĔyciem techniki Code First w Entity Framework Weryfikacja danych OkreĈlanie reguä biznesowych za pomocñ adnotacji danych WyĈwietlanie komunikatów o bäödach z procesu weryfikacji danych Podsumowanie 72 73 74 77 80 Rozdziaĥ 4. Programowanie po stronie klienta .................................................................... 81 81 83 86 88 89 91 95 Praca z jözykiem JavaScript Selektory Udzielanie odpowiedzi na zdarzenia Manipulacje modelem DOM AJAX Weryfikacja danych po stronie klienta Podsumowanie 4 _ Spis treļci Poleć książkęKup książkę Czýļë II. Kolejny poziom .........................................................................................................97 Wzorzec MVC Architektura aplikacji sieciowej Zasada separacji zadaþ MVC i platformy sieciowe Rozdziaĥ 5. Architektura aplikacji sieciowej .........................................................................99 99 99 100 102 102 102 104 105 105 106 107 108 109 114 121 122 Architektura logiczna Architektura logiczna aplikacji sieciowej ASP.NET MVC Najlepsze praktyki w zakresie architektury logicznej Architektura fizyczna Przestrzeþ nazw projektu i nazwy podzespoäów Opcje wdroĔenia Najlepsze praktyki w zakresie architektury fizycznej SOLID Odwracanie sterowania Reguäy dotyczñce architektury aplikacji Nie powtarzaj siö Podsumowanie CzöĈciowe generowanie strony Generowanie widoków czöĈciowych Ponowne uĔywanie tej samej logiki zarówno w Ĕñdaniach AJAX, jak i pozostaäych Wygenerowanie kodu JavaScript Wygenerowanie danych JSON ēñdanie danych JSON Szablony po stronie klienta Rozdziaĥ 6. Usprawnianie witryny poprzez uŜycie technologii AJAX ............................... 123 123 124 129 129 131 131 134 135 136 137 138 140 141 143 144 144 147 148 Udzielanie odpowiedzi na Ĕñdania AJAX Udzielanie odpowiedzi na Ĕñdania JSON Zastosowanie tej samej logiki w wielu akcjach kontrolera Przekazywanie skomplikowanych obiektów JSON Wybór äñcznika modelu Efektywne wysyäanie i odbieranie danych JSON JSONP Wäñczanie Cross-Origin Resource Sharing Wykonywanie Ĕñdaþ AJAX miödzy domenami Wysyäanie danych do serwera Podsumowanie Rozdziaĥ 7. Platforma Web API ASP.NET ............................................................................. 149 149 151 151 152 153 Tworzenie usäugi danych Rejestracja tras Web API Wykorzystanie techniki „konwencja przed konfiguracjñ” Nadpisanie konwencji UĔycie API Spis treļci _ 5 Poleć książkęKup książkę Stronicowanie i pobieranie danych Obsäuga wyjñtków Media Podsumowanie 155 156 158 161 Wzorce dostöpu do danych Ogólny opis Entity Framework Klasy POCO UĔywanie wzorca repozytorium Mapowanie obiektowo-relacyjne Rozdziaĥ 8. Zaawansowane dane ....................................................................................... 163 163 163 164 166 168 169 169 171 171 173 176 178 183 Tworzenie warstwy dostöpu do danych PodejĈcie Entity Framework Code First Model domeny biznesowej aplikacji EBuy Praca z kontekstem danych Sortowanie, filtrowanie i stronicowanie danych Podsumowanie Wybór podejĈcia w zakresie dostöpu do danych WspóäbieĔnoĈè w bazie danych Tworzenie bezpiecznej aplikacji sieciowej Obrona Nigdy nie ufaj danym wejĈciowym Wymuszanie stosowania reguäy najmniejszych uprawnieþ Przyjmuj zaäoĔenie, Ĕe zewnötrzne systemy sñ niebezpieczne Ogranicz moĔliwoĈci ataku Wyäñcz niepotrzebne funkcje Rozdziaĥ 9. Zapewnianie bezpieczeħstwa .......................................................................... 185 185 185 186 186 186 186 187 187 188 193 200 201 206 207 209 SQL Injection Cross-Site Scripting Cross-Site Request Forgery Zabezpieczanie aplikacji intranetowej Uwierzytelnianie formularzy Zabezpieczanie aplikacji Ochrona przed atakami Podsumowanie Funkcje mobilne platformy ASP.NET MVC 4 Wiöksza przyjaznoĈè aplikacji mobilnej Rozdziaĥ 10. Programowanie na platformy mobilne ...........................................................211 211 213 214 215 218 223 224 Tworzenie widoku mobilnego dla aukcji Rozpoczöcie pracy z jQuery Mobile Usprawnianie widoku za pomocñ jQuery Mobile Unikanie widoków biurkowych w witrynie mobilnej Usprawnianie wersji mobilnej witryny 6 _ Spis treļci Poleć książkęKup książkę Technika Adaptive Rendering Znacznik viewport Wykrywanie funkcji mobilnych Zapytania mediów CSS Widoki dla konkretnych przeglñdarek internetowych Tworzenie nowej aplikacji mobilnej zupeänie od poczñtku Platforma jQuery Mobile Szablon aplikacji mobilnej w ASP.NET MVC 4 UĔywanie szablonu aplikacji mobilnej w ASP.NET MVC 4 Podsumowanie 225 225 226 228 229 231 232 232 233 236 Czýļë III. Zagadnienia zaawansowane ...............................................................................237 Rozdziaĥ 11. Operacje na danych przeprowadzane równolegle, Kontroler asynchroniczny Asynchroniczna komunikacja w czasie rzeczywistym Tworzenie kontrolera asynchronicznego Kiedy uĔywaè kontrolera asynchronicznego? asynchronicznie i w czasie rzeczywistym .......................................................239 239 240 242 242 242 243 244 245 246 247 250 252 Porównanie modeli aplikacji Model HTTP polling Model HTTP long polling Zdarzenia wysyäane przez serwer WebSocket Usprawnianie komunikacji w czasie rzeczywistym Konfiguracja i dostrajanie Podsumowanie Rodzaje buforowania Techniki buforowania po stronie serwera Buforowanie po stronie serwera Buforowanie po stronie klienta Rozdziaĥ 12. Buforowanie ....................................................................................................253 253 253 254 254 254 255 256 256 258 261 263 264 269 269 271 273 274 Buforowanie o zasiögu Ĕñdania Buforowanie o zasiögu uĔytkownika Buforowanie o zasiögu aplikacji Bufor ASP.NET Bufor danych wyjĈciowych Buforowanie donut caching Buforowanie donut hole caching Buforowanie rozproszone Dziaäanie bufora przeglñdarki internetowej AppCache Local Storage Podsumowanie Techniki buforowania po stronie klienta Spis treļci _ 7 Poleć książkęKup książkę Anatomia strony Najlepsze praktyki Anatomia HttpRequest Rozdziaĥ 13. Techniki optymalizacji po stronie klienta .......................................................275 275 276 277 278 278 280 282 283 283 285 286 286 287 289 289 290 293 294 297 Wykonuj mniejszñ liczbö Ĕñdaþ HTTP UĔywaj CDN Dodawaj nagäówek Expires lub Cache-Control Komponenty skompresowane w formacie GZip Umieszczaj arkusze stylów na poczñtku pliku Umieszczaj skrypty na koþcu dokumentu Korzystaj z zewnötrznych skryptów i arkuszy stylów Zmniejszanie liczby zapytaþ DNS Minimalizacja plików JavaScript i CSS Unikaj przekierowaþ Usuniöcie powielajñcych siö skryptów Konfiguracja nagäówka ETag Pomiar wydajnoĈci po stronie klienta Wykorzystanie platformy ASP.NET MVC do pracy Tworzenie paczek i minimalizacja Podsumowanie Wayfinding Adresy URL i techniki SEO Tworzenie tras DomyĈlne parametry i opcjonalne trasy Priorytet i kolejnoĈè tras Routing do istniejñcych plików Ignorowanie tras Trasy typu Catch-All Rozdziaĥ 14. Zaawansowany routing ..................................................................................299 299 301 302 303 305 305 305 306 307 309 310 313 314 318 Routing oparty na atrybutach Rozszerzanie routingu Mechanizm routingu Narzödzie Glimpse i trasy Ograniczenia trasy Podsumowanie Co platforma ASP.NET MVC oferuje standardowo? Widoki czöĈciowe Metody rozszerzajñce HtmlHelper czy wäasne metody? Szablony Display i Editor Html.RenderAction() Rozdziaĥ 15. Ponownie uŜywane komponenty interfejsu uŜytkownika ........................... 319 319 319 319 320 320 321 321 323 327 Razor Single File Generator Tworzenie wielokrotnie wykorzystywanych widoków ASP.NET MVC Tworzenie wielokrotnie uĔywanych metod pomocniczych ASP.NET MVC PrzejĈcie o krok dalej 8 _ Spis treļci Poleć książkęKup książkę Testy jednostkowe dla widoków Razor Podsumowanie 328 330 Czýļë IV. Kontrola jakoļci .................................................................................................... 331 Obsäuga bäödów na platformie ASP.NET MVC Wäñczanie wäasnych bäödów Obsäuga bäödów w akcjach kontrolerów Definiowanie globalnych procedur obsäugi bäödów Rozdziaĥ 16. Rejestrowanie informacji ................................................................................333 333 334 335 335 337 337 340 342 Rejestrowanie informacji i Ĉledzenie Rejestrowanie informacji o bäödach Monitorowanie stanu ASP.NET Podsumowanie Semantyka testowania Poziomy zautomatyzowanego testowania Röczne testowanie Zautomatyzowane testowanie Testy jednostkowe SzybkoĈè (ang. fast) Testy integracyjne Testy akceptacyjne Rozdziaĥ 17. Zautomatyzowane testowanie .......................................................................343 343 344 345 345 345 347 348 349 350 350 351 354 354 357 358 360 363 364 368 370 372 372 374 Co to jest projekt zautomatyzowanych testów? Tworzenie projektu testowego w Visual Studio Tworzenie i przeprowadzanie testu jednostkowego Testowanie aplikacji ASP.NET MVC Testowanie modelu Test-Driven Development Tworzenie przejrzystych, zautomatyzowanych testów Testowanie kontrolerów Refaktoring testów jednostkowych Symulacja speänienia zaleĔnoĈci Testowanie widoków Tworzenie kodu äatwego do testowania Podsumowanie Test pokrycia Mit 100 wyniku testu pokrycia Tworzenie skryptów kompilacji Rozdziaĥ 18. Automatyzacja kompilacji ..............................................................................375 376 376 376 377 378 Projekty Visual Studio sñ skryptami kompilacji! Dodanie prostego zadania kompilacji Przeprowadzanie kompilacji MoĔliwoĈci sñ nieograniczone! Spis treļci _ 9 Poleć książkęKup książkę Automatyzacja kompilacji Rodzaje zautomatyzowanej kompilacji Definiowanie zautomatyzowanej kompilacji Ciñgäa integracja Wykrywanie problemów Reguäy ciñgäej integracji Podsumowanie 378 379 380 383 383 384 388 Czýļë V. Umieszczanie aplikacji sieciowej w internecie .....................................................389 Co trzeba wdroĔyè? Podstawowe pliki witryny internetowej TreĈè statyczna Czego nie trzeba wdraĔaè? Bazy danych oraz inne zewnötrzne zaleĔnoĈci Jakie sñ wymagania aplikacji EBuy? Rozdziaĥ 19. WdraŜanie ....................................................................................................... 391 391 391 394 394 395 396 396 397 397 399 403 403 404 404 406 Tworzenie konta Windows Azure Tworzenie nowej witryny internetowej Windows Azure Publikacja witryny internetowej Windows Azure poprzez system kontroli wersji WdraĔanie na serwerze Internet Information Server Przygotowania Tworzenie i konfiguracja witryny internetowej na serwerze IIS Publikowanie witryny z poziomu Visual Studio WdraĔanie za poĈrednictwem Windows Azure Podsumowanie Dodatki .................................................................................................................................407 Dodatek A. Integracja platform ASP.NET MVC i Web Forms ..............................................409 Dodatek B. Wykorzystanie NuGet jako platformy .............................................................. 417 Dodatek C. Najlepsze praktyki .............................................................................................435 Dodatek D. Odniesienia — tematy, funkcje i scenariusze ................................................. 449 Skorowidz...................................................................................................................453 10 _ Spis treļci Poleć książkęKup książkę ROZDZIAĤ 10. Programowanie na platformy mobilne Sieè mobilna to oferujñce bardzo duĔe moĔliwoĈci medium dostarczania treĈci wiökszej grupie uĔytkowników. Wraz ze zwiökszajñcñ siö liczbñ uĔywanych smartfonów i rozwojem sieci mobilnej uwzglödnienie urzñdzeþ mobilnych podczas przygotowywania projektów staje siö coraz waĔniejsze. Najwiökszy problem podczas przygotowywania aplikacji do jej uĔywania w sieci mobilnej polega na tym, Ĕe nie wszystkie urzñdzenia mobilne sñ tworzone w taki sam sposób. Poszcze- gólne urzñdzenia majñ róĔne moĔliwoĈci sprzötowe i zainstalowane przeglñdarki internetowe, a takĔe odmienne funkcje, np. w zakresie dotykowej obsäugi urzñdzenia itd. Przystosowanie witryny internetowej do prawidäowego i spójnego dziaäania w róĔnych urzñdzeniach mobilnych nie jest äatwym zadaniem. W tym rozdziale dowiesz siö, jak uĔywaè funkcji oferowanych przez platformö ASP.NET MVC — w szczególnoĈci nowych funkcji, które pojawiäy siö w wersji 4. platformy — w celu zapewnienia prawidäowego i spójnego dziaäania witryny internetowej na maksymalnej liczbie urzñdzeþ mobilnych. Przekonasz siö równieĔ, co zrobiè w sytuacji, gdy dla danego urzñdzenia mobilnego nie moĔna zaoferowaè prawidäowej obsäugi witryny internetowej, którñ tworzysz. Funkcje mobilne platformy ASP.NET MVC 4 Poczñwszy od wersji 3., platforma ASP.NET MVC oferuje zestaw funkcji uäatwiajñcych tworze- nie mobilnych wersji witryn internetowych. Funkcje te zostaäy usprawnione w wersji 4. plat- formy. PoniĔsza lista przedstawia krótki opis funkcji pomagajñcych w tworzeniu wersji mobilnej aplikacji sieciowej, wprowadzonych w ASP.NET MVC 4. W pozostaäej czöĈci rozdziaäu przeko- nasz siö, jak wykorzystaè te funkcje w tworzonej aplikacji sieciowej. Szablon aplikacji mobilnej w ASP.NET MVC 4 JeĔeli juĔ od samego poczñtku chcesz utworzyè jedynie mobilnñ wersjö aplikacji siecio- wej, platforma ASP.NET MVC 4 oferuje szablon Mobile Application, który pozwala na natychmiastowe przystñpienie do tworzenia wersji mobilnej aplikacji sieciowej. Podobnie jak w przypadku szablonów zwykäych aplikacji MVC, w szablonie mobilnym platforma umieszcza juĔ pewien kod odpowiedzialny za wygenerowanie widoków dla urzñdzeþ mobilnych, przeprowadza konfiguracjö pakietów jQuery Mobile MVC NuGet oraz tworzy szkielet aplikacji. Dokäadne omówienie szablonu aplikacji mobilnej znajdziesz w dalszej czöĈci rozdziaäu, w podrozdziale zatytuäowanym „Szablon aplikacji mobilnej w ASP.NET MVC 4”. 211 Poleć książkęKup książkę Tryby wyĈwietlania Aby moĔna byäo jeszcze äatwiej dostosowaè aplikacjö sieciowñ do róĔnych urzñdzeþ, platfor- ma ASP.NET MVC 4 oferuje tak zwane tryby wyĈwietlania — to funkcja odpowiedzialna za wykrycie i przygotowanie odpowiedniego widoku dla poszczególnych urzñdzeþ. Poszczególne urzñdzenia mobilne majñ róĔne rozdzielczoĈci ekranu, inne zachowanie przeglñdarek internetowych, a nawet odmienne funkcje, które mogñ byè wykorzystane przez aplikacje sieciowe. Zamiast próbowaè dopasowaè dany widok do maksymalnej licz- by róĔnych urzñdzeþ, lepszym rozwiñzaniem jest umieszczenie poszczególnych zachowaþ i funkcji w oddzielnych widokach przeznaczonych dla konkretnych urzñdzeþ. ZaäóĔmy, Ĕe masz przygotowany widok o nazwie Index.cshtml, przeznaczony dla zwy- käych urzñdzeþ biurkowych. Otrzymujesz zadanie przygotowania mobilnej wersji tego widoku przeznaczonej do wyĈwietlania na smartfonach i tabletach. Dziöki uĔyciu trybów wyĈwietlania moĔesz przygotowaè odpowiednie wersje widoku dla róĔnych urzñdzeþ, np. Index.iPhone.cshtml i Index.iPad.cshtml, a nastöpnie podczas uruchamiania aplikacji za- rejestrowaè je za pomocñ dostawcy widoku na platformie ASP.NET MVC 4. Opierajñc siö na kryteriach filtrowania, platforma ASP.NET MVC 4 moĔe automatycznie wyszukaè widok zawierajñcy odpowiedni przyrostek (iPhone lub iPad) i wyĈwietliè ten widok za- miast standardowego, przeznaczonego dla urzñdzeþ biurkowych. (Zwróè uwagö, jak dla widoków alternatywnych platforma ASP.NET MVC stosuje prostñ konwencjö nadawania nazw plikom w postaci nazwa_widoku.urzñdzenie.rozszerzenie). W znajdujñcym siö w dalszej czöĈci rozdziaäu podrozdziale zatytuäowanym „Widoki dla konkretnych przeglñdarek internetowych” przekonasz siö, jak uĔyè tej funkcji w celu zapewnienia obsäugi róĔnych urzñdzeþ. Nadpisanie zwykäych widoków ich wersjami mobilnymi Platforma ASP.NET MVC 4 wprowadziäa prosty mechanizm pozwalajñcy na nadpisanie dowolnego widoku (wäñczajñc w to ukäady graficzne i widoki czöĈciowe) dla poszcze- gólnych przeglñdarek internetowych, w tym takĔe dla przeglñdarek internetowych uĔy- wanych w urzñdzeniach mobilnych. Aby dostarczyè widok przeznaczony dla urzñdzenia mobilnego, konieczne jest utworzenie pliku widoku zawierajñcego w nazwie czäon .Mobile. Na przykäad przygotowanie mobilnej wersji widoku Index wymaga utworzenia jego ko- pii wraz z wymienionym wczeĈniej czäonem w nazwie (ViewsHomeIndex.Mobile.cshtml); platforma ASP.NET automatycznie wygeneruje ten (zamiast biurkowego) widok w mobilnej wersji przeglñdarki internetowej. Warto dodaè, Ĕe wprawdzie funkcja trybów wyĈwietlania pozwala na wskazanie widoku dla konkretnej przeglñdarki internetowej w urzñdzeniu mobilnym, ale odbywa siö to na ogólniejszym poziomie. Takie rozwiñzanie bödzie uĔyteczne, jeĈli widoki sñ wystarczajñco ogólne, aby mogäy byè prawidäowo wyĈwietlane w róĔnych mobilnych wersjach przeglñdarek internetowych. Tö funkcjö moĔesz równieĔ stosowaè, jeĈli uĔywasz platformy takiej jak jQuery Mobile, która zapewnia spójne dziaäanie aplikacji na wiökszoĈci platform mobilnych. Platforma jQuery Mobile Platforma jQuery Mobile przynosi aplikacjom sieciowym caäe bogactwo i uĔytecznoĈè bi- bliotek jQuery oraz jQuery UI. Zamiast zmagaè siö z niespójnoĈciami dziaäania przeglñ- darek internetowych w róĔnych urzñdzeniach mobilnych, moĔesz po prostu utworzyè jednñ aplikacjö sieciowñ, która bödzie dziaäaè we wszystkich urzñdzeniach mobilnych. Platforma ta oferuje korzyĈci wynikajñce z moĔliwoĈci stosowania technik progresyw- nych usprawnieþ i zapewnia elastyczny projekt, dziöki któremu starsze urzñdzenia nadal 212 _ Rozdziaĥ 10. Programowanie na platformy mobilne Poleć książkęKup książkę otrzymujñ funkcjonalnñ (choè niekoniecznie äadnñ i bogatñ w funkcje) aplikacjö, podczas gdy nowe urzñdzenia korzystajñ z peäni moĔliwoĈci dostarczanych przez funkcje jözyka HTML5. Platforma jQuery Mobile doskonale obsäuguje motywy, co pozwala na utworze- nie niepowtarzalnej witryny bez koniecznoĈci rezygnowania z zalet wynikajñcych z pro- gresywnych uaktualnieþ. W rozdziale tym przekonasz siö, jak dziöki platformie jQuery Mobile moĔna przenieĈè aplikacjö na kolejny poziom. Wiýksza przyjaznoļë aplikacji mobilnej Tematyka zwiñzana z programowaniem na platformy mobilne jest obszerna i obejmuje wiele aspektów, które twórca witryny internetowej musi uwzglödniè, aby utworzyè tego rodzaju witrynö. Prawdopodobnie najwaĔniejszym aspektem jest najlepszy sposób dostarczenia in- formacji uĔytkownikom oraz interakcja z uĔytkownikami. WeĒ pod uwagö aplikacjö sieciowñ dla urzñdzenia biurkowego, w którym okno przeglñdarki internetowej jest wyĈwietlone na duĔym ekranie, a uĔytkownik ma do dyspozycji szybkie i nie- zawodne poäñczenie internetowe, natomiast interakcjö z aplikacjñ sieciowñ prowadzi za po- mocñ klawiatury i myszy. Z kolei aplikacje mobilne z reguäy sñ wyĈwietlane na niewielkich ekranach, internet nie zawsze jest szybki i niezawodny, natomiast do wprowadzania danych säuĔy najczöĈciej piórko bñdĒ kilka palców. Wymienione ograniczenia niewñtpliwie prowadzñ do zmniejszenia iloĈci dostarczanej treĈci oraz liczby oferowanych funkcji w porównaniu z aplikacjami sieciowymi przeznaczonymi dla przeglñdarek internetowych dziaäajñcych w urzñdzeniach biurkowych. Jednak aplikacje mobilne dostarczajñ pewnych moĔliwoĈci, które zazwyczaj nie istniejñ w tradycyjnych aplika- cjach sieciowych; sñ to np. obsäuga danych dotyczñcych geograficznego poäoĔenia urzñdzenia mobilnego, wiöksze moĔliwoĈci komunikacji, obsäuga komunikacji audio i wideo itd. Trafne okreĈlenie wymagaþ uĔytkowników aplikacji to pierwszy krok podczas przygotowy- wania strategii tworzenia aplikacji mobilnej. Przeanalizuj przedstawione poniĔej przykäady sposobów wykorzystania urzñdzeþ mobilnych. x Spacer po ulicy i jednoczesne sprawdzanie poczty e-mail (od czasu do czasu podnoszenie przy tym gäowy, aby nie uderzyè w latarniö). x PodróĔ komunikacjñ miejskñ i jednoczesne czytanie najnowszych wiadomoĈci. x Popijanie kawy w kawiarni — uĔytkownik jednñ rökñ trzyma filiĔankö z kawñ, natomiast drugñ urzñdzenie mobilne, w którym sprawdza wysokoĈè salda na koncie. Sytuacje te majñ jednñ wspólnñ cechö — uĔytkownik dzieli swojñ uwagö, próbujñc jak naj- szybciej wykonaè pewne zadania i przejĈè do kolejnych w dniu wypeänionym po brzegi róĔ- nymi zajöciami. Dla twórcy witryny internetowej oznacza to, Ĕe powinna ona koncentrowaè siö na dostarcza- niu uĔytkownikowi treĈci w Ĕñdany przez niego sposób, szybko, zrozumiale i odpowiednio do wykonywanego zadania. Wiýksza przyjaznoļë aplikacji mobilnej _ 213 Poleć książkęKup książkę Tworzenie widoku mobilnego dla aukcji Podczas tworzenia mobilnej aplikacji sieciowej pracö rozpoczynasz od dodania do istniejñcej aplikacji widoków przeznaczonych dla urzñdzeþ mobilnych lub od utworzenia zupeänie od poczñtku nowej aplikacji mobilnej. Ten wybór zaleĔy od wielu czynników; oba podejĈcia majñ swoje wady i zalety. Jak siö przekonasz, platforma ASP.NET MVC oferuje narzödzia pomagajñce w pracy w obu przypadkach. Skoncentrujemy siö teraz na dodaniu widoku mobilnego do istniejñcego widoku dla urzñ- dzenia biurkowego, a nastöpnie bödziemy powoli usprawniaè widok mobilny kolejnymi funkcjami oferowanymi przez platformö ASP.NET MVC 4. Rozpoczynamy pracö od utworzenia kopii widoku Auctions.cshtml i nadajemy jej nazwö Auc- tions.Mobile.cshtml, co wskazuje, Ĕe widok jest przeznaczony dla urzñdzenia mobilnego. Aby zróĔnicowaè generowane widoki, zmieniamy takĔe nagäówek h1 w widoku mobilnym na Aukcje mobilne. Utworzenie widoku mobilnego moĔna potwierdziè poprzez uruchomienie aplikacji sieciowej i wyĈwietlenie strony aukcji w przeglñdarce internetowej dla urzñdzenia mobilnego. Wynik tej operacji pokazano na rysunku 10.1. Rysunek 10.1. Platforma ASP.NET MVC potrafi wykryè i automatycznie wygenerowaè widok dla urzñdzenia mobilnego 214 _ Rozdziaĥ 10. Programowanie na platformy mobilne Poleć książkęKup książkę Jak moĔesz zobaczyè na rysunku, nagäówek Aukcje mobilne potwierdza wyĈwietlenie widoku mobilnego (przejĈcie na stronö aukcji w biurkowej wersji przeglñdarki internetowej powoduje wyĈwietlenie zwykäego widoku wraz z nagäówkiem Aukcje). Tryby wyĈwietlania to funkcja platformy pozwalajñca na wykrycie przeglñdarki internetowej uĔywanej przez klienta i wyge- nerowanie dla niej odpowiedniego widoku. Kiedy Ĕñdanie przychodzi z urzñdzenia mobilnego, platforma ASP.NET MVC 4 nie ogranicza siö jedynie do automatycznego wczytania widoku mobilnego. W rzeczywistoĈci wczytuje takĔe mobilne wersje ukäadów graficznych i widoków czöĈciowych — pakiet jQuery.Mobile.MVC jest wykorzystywany do utworzenia opartego na jQuery Mobile ukäadu graficznego zoptymalizo- wanego dla urzñdzeþ mobilnych. Rozpoczýcie pracy z jQuery Mobile jQuery Mobile pozwala na szybkie usprawnienie istniejñcego widoku i utworzenie na jego podstawie widoku dla urzñdzeþ mobilnych, który bödzie miaä rodzimy dla nich wyglñd i ro- dzime zachowanie. MoĔliwe jest takĔe uĔycie motywu w aplikacji; technika uaktualnieþ pro- gresywnych powoduje, Ĕe starsze wersje przeglñdarek internetowych otrzymujñ nieco zre- dukowanñ (niezbyt atrakcyjnñ wizualnie), ale funkcjonujñcñ i uĔytecznñ stronö. Aby móc uĔywaè jQuery Mobile, konieczne jest zainstalowanie pakietu jQuery.Mobile.MVC z galerii pakietów NuGet (rysunek 10.2). Rysunek 10.2. Dodanie platformy jQuery Mobile za pomocñ NuGet Wiýksza przyjaznoļë aplikacji mobilnej _ 215 Poleć książkęKup książkę Pakiet ten powoduje dodanie nastöpujñcych plików: jQuery Mobile Framework Zestaw plików JavaScript (jQuery.mobile-1.1.0.js) i CSS (jQuery.mobile-1.1.0.css) wraz z ich zminimalizowanymi wersjami oraz obrazami pomocniczymi. /Content/Site.Mobile.css Nowy arkusz stylów przeznaczony dla urzñdzeþ mobilnych. Views/Shared/_Layout.Mobile.cshtml Ukäad graficzny zoptymalizowany dla urzñdzeþ mobilnych i odwoäujñcy siö do plików plat- formy jQuery Mobile (JavaScript i CSS). Platforma ASP.NET MVC bödzie automatycznie wczytywaäa ten ukäad dla widoków mobilnych. Komponent przeäñczania widoku Skäada siö z widoku czöĈciowego Views/Shared/_ViewSwitcher.cshtml oraz kontrolera ViewSwitcherController.cs. Ten komponent powoduje wyĈwietlenie w mobilnej przeglñdarce internetowej äñcza pozwalajñcego uĔytkownikowi na przejĈcie do strony w wersji dla urzñ- dzenia biurkowego. Sposób dziaäania tego komponentu zostanie omówiony w dalszej czöĈci tego rozdziaäu, w podrozdziale „Przeäñczanie pomiödzy widokami mobilnym i zwykäym”. Platforma jQuery Mobile nadal jest w fazie opracowywania, wiöc po jej zainstalowaniu moĔe siö okazaè, Ĕe jej pliki sñ w nowszych wersjach niĔ wymienione w ksiñĔce. Aby umoĔliwiè platformie jQuery Mobile nadanie stronie odpowiedniego stylu, przejdĒ do pliku Views/Shared/_Layout.Mobile.cshtml i zmodyfikuj jego treĈè w taki sposób, aby odpowiadaäa poniĔszemu fragmentowi kodu: body div data-role= page data-theme= b header data-role= header h1 @Html.ActionLink( EBuy: Witryna demonstracyjna ASP.NET MVC , Index , Home ) /h1 /header div id= body data-role= content @RenderBody() /div /div /body Nastöpnie zmodyfikuj plik Auctions.Mobile.cshtml i zoptymalizuj go dla ukäadu graficznego przeznaczonego dla urzñdzeþ mobilnych: @model IEnumerable AuctionViewModel link href= @Url.Content( ~/Content/product.css ) rel= stylesheet type= text/css / @{ ViewBag.Title = Auctions ; } header h3 Aukcje mobilne /h3 /header ul id= auctions 216 _ Rozdziaĥ 10. Programowanie na platformy mobilne Poleć książkęKup książkę @foreach (var auction in Model) { li @Html.Partial( _AuctionTile , auction); /li } /ul Po wprowadzeniu wymienionych zmian skompiluj i uruchom aplikacjö, a nastöpnie wyĈwietl stronö gäównñ aplikacji w mobilnej wersji przeglñdarki internetowej. Zwróè uwagö na zmiany w stosunku do wersji biurkowej. Na ekranie powinieneĈ zobaczyè stronö podobnñ do pokaza- nej na rysunku 10.3. Rysunek 10.3. Aplikacja EBuy zoptymalizowana dla ukäadu graficznego przeznaczonego dla urzñdzeþ mobilnych MoĔesz zobaczyè, jak widok Auctions zostaä zmieniony w celu jego dostosowania do przeglñ- darki internetowej urzñdzenia mobilnego. Wprawdzie wyglñd strony nie jest perfekcyjny, ale pakiet jQuery Mobile dostarcza podstaw, na bazie których moĔesz szybko i äatwo tworzyè widoki mobilne. Wiýksza przyjaznoļë aplikacji mobilnej _ 217 Poleć książkęKup książkę Usprawnianie widoku za pomocé jQuery Mobile Pakiet jQuery.Mobile.MVC wykonuje wiökszñ czöĈè pracy za programistö, ale interfejs uĔytkowni- ka witryny internetowej nadal nie przypomina rodzimej aplikacji dla urzñdzenia mobilnego. Na szczöĈcie platforma jQuery Mobile dostarcza wielu komponentów i stylów, dziöki którym aplikacja otrzyma widok naprawdö przypominajñcy aplikacjö mobilnñ. Usprawnianie listy aukcji za pomocé komponentu listview platformy jQuery Mobile Pracö rozpoczynamy od usprawnienia listy aukcji poprzez uĔycie komponentu listview plat- formy jQuery Mobile. W celu przeprowadzenia wiökszoĈci transformacji mobilnych platforma jQuery Mobile operuje na atrybutach data-role. Aby zatem wygenerowaè listö aukcji jako listview, koniecznie naleĔy dodaè atrybut data-role= listview do znacznika ul aukcji: ul id= auctions data-role= listview @foreach (var auction in Model.Auctions) { li @Html.Partial( _AuctionTileMobile , auction); /li } /ul oraz w nastöpujñcy sposób zmodyfikowaè widok czöĈciowy _AuctionTileMobile: @model AuctionViewModel @{ var auctionUrl = Url.Auction(Model); } a href= @auctionUrl @Html.Thumbnail(Model.Image, Model.Title) h3 @Model.Title /h3 p span Koniec aukcji za: /span span class= time-remaining title= @Model.EndTimeDisplay Ҋ @Model.RemainingTimeDisplay /span /p p strong Aktualna cena: /strong span class= current-bid-amount @Model.CurrentPrice /span span class= current-bidder @Model.WinningBidUsername /span /p /a Po wyĈwietleniu widoku Auctions w mobilnej wersji przeglñdarki internetowej otrzymasz teraz znacznie äadniejszñ listö aukcji (rysunek 10.4). Biorñc pod uwagö to, Ĕe element ul to w rzeczywistoĈci lista, moĔesz uznaè za zbyteczne dodawanie roli listview. Element ul wyĈwietla listö, ale obszar äñcza bödzie zbyt maäy, aby moĔna byäo kliknñè go w urzñdzeniu mobilnym wyposaĔonym w niewielki ekran. Zadaniem atrybutu data-role= listview jest umoĔliwienie powiökszania obszaru äñcza i uäatwienie uĔytkownikom naciskania elementów listy. 218 _ Rozdziaĥ 10. Programowanie na platformy mobilne Poleć książkęKup książkę Rysunek 10.4. ZawartoĈè znacznika ul wygenerowana przez platformö jQuery Mobile jako listview UmoŜliwianie przeszukiwania listy aukcji dziýki komponentowi „data filter” platformy jQuery Mobile Kolejnym krokiem jest zwiökszenie przyjaznoĈci widoku poprzez dodanie uĔytecznego pola wyszukiwania, pozwalajñcego uĔytkownikowi na szybkie filtrowanie listy aukcji. Dziöki plat- formie jQuery Mobile to zadanie jest bardzo äatwe — znacznikowi ul listy aukcji wystarczy nadaè atrybut data-filter= true : ul id= auctions data-role= listview data-filter= true @foreach (var auction in Model.Auctions) { li class= listitem @Html.Partial( _AuctionTileMobile , auction); /li } /ul Po odĈwieĔeniu strony w mobilnej wersji przeglñdarki internetowej powinieneĈ zobaczyè na górze strony pole wyszukiwania (rysunek 10.5). Wiýksza przyjaznoļë aplikacji mobilnej _ 219 Poleć książkęKup książkę Rysunek 10.5. Dziöki platformie jQuery Mobile listö aukcji moĔna przeszukiwaè WprowadĒ tekst w polu wyszukiwania i zobacz, jak platforma jQuery Mobile automatycznie filtruje listö, wyĈwietlajñc jedynie te aukcje, które zostaäy dopasowane do wprowadzonego przez Ciebie tekstu (rysunek 10.6). PrzekonaäeĈ siö, jak platforma jQuery Mobile uäatwia transformacjö dowolnej strony, aby wy- Ĉwietlona w urzñdzeniu docelowym miaäa dla niego rodzimy wyglñd i sposób dziaäania. Oprócz wymienionych funkcji jQuery Mobile oferuje takĔe wiele innych uĔytecznych kom- ponentów, które moĔesz wykorzystaè w widokach witryny internetowej, czyniñc je tym samym bardziej dostosowanymi dla uĔytkowników urzñdzeþ mobilnych. Peänñ listö odpowiednich atrybutów znajdziesz na stronie dokumentacji API platformy jQuery Mobile pod adresem http://jquerymobile.com/test/docs/api/data-attributes.html. Przeĥéczanie pomiýdzy widokami mobilnym i zwykĥym Kiedykolwiek dostarczasz wersjö mobilnñ witryny internetowej, ogólnie rzecz biorñc, dobrym rozwiñzaniem jest automatyczne przekierowanie uĔytkowników urzñdzeþ mobilnych do od- powiedniej wersji witryny. Warto jednak zapewniè im moĔliwoĈè przejĈcia do peänej wersji witryny internetowej przeznaczonej dla urzñdzeþ biurkowych. 220 _ Rozdziaĥ 10. Programowanie na platformy mobilne Poleć książkęKup książkę Rysunek 10.6. Platforma jQuery Mobile automatycznie filtruje listö aukcji na podstawie tekstu wprowadzonego w polu wyszukiwania Zwróè uwagö, Ĕe na górze widoku mobilnego standardowo dostarczanego przez szablon aplikacji mobilnej ASP.NET MVC znajduje siö äñcze pozwalajñce uĔytkownikom na przejĈcie do „widoku zwykäego”. To jest widget ViewSwitcher zainstalowany jako czöĈè pakietu NuGet jQuery.Mobile.MVC. Aby dowiedzieè siö, jaki jest sposób dziaäania tego widgetu, konieczne bödzie zagäöbienie siö w komponenty platformy jQuery Mobile. Spójrz na nowy widok czöĈciowy o nazwie _ViewSwitcher.cshtml, w którym znajdziesz nastö- pujñcy kod znaczników: @if (Request.Browser.IsMobileDevice Request.HttpMethod == GET ) { div class= view-switcher ui-bar-a @if (ViewContext.HttpContext.GetOverriddenBrowser().IsMobileDevice) { @: WyĂwietlenie widoku mobilnego. @Html.ActionLink( Widok zwykïy , SwitchView , ViewSwitcher , new { mobile = false, returnUrl = Request.Url.PathAndQuery }, new { rel = external }) } else { Wiýksza przyjaznoļë aplikacji mobilnej _ 221 Poleć książkęKup książkę @: WyĂwietlenie widoku zwykïego. @Html.ActionLink( Widok mobilny , SwitchView , ViewSwitcher , new { mobile = true, returnUrl = Request.Url.PathAndQuery }, new { rel = external }) } /div } WartoĈciñ zwrotnñ metody GetOverridenBrowser() jest obiekt HttpBrowserCapabilities zawiera- jñcy moĔliwoĈci oferowane przez nadpisywanñ przeglñdarkö internetowñ lub aktualnie uĔywanñ, jeĈli nie jest nadpisywana. W ten sposób moĔesz sprawdziè, czy urzñdzenie, które wykonaäo Ĕñdanie, jest urzñdzeniem mobilnym. Nastöpnie widget okreĈla widok, który powinien zostaè wygenerowany, oraz tworzy odpowiednie äñcza pozwalajñce na przeäñczanie pomiödzy wi- dokami mobilnym i zwykäym. Bonusem jest ustawienie wäaĈciwoĈci mobile w säowniku RouteValue, wskazujñcej aktualnie aktywny widok. Spójrz teraz na klasö ViewSwitcherController zawierajñcñ logikö odpowiedzialnñ za przeäñczanie widoków: public class ViewSwitcherController : Controller { public RedirectResult SwitchView(bool mobile, string returnUrl) { if (Request.Browser.IsMobileDevice == mobile) { HttpContext.ClearOverriddenBrowser(); } else { HttpContext.SetOverriddenBrowser(mobile ? BrowserOverride.Mobile : BrowserOverride.Desktop); } return Redirect(returnUrl); } } W zaleĔnoĈci od tego, czy Ĕñdanie pochodzi z urzñdzenia mobilnego (na co wskazuje wartoĈè wäaĈciwoĈci Request.Browser.IsMobileDevice), kontroler uĔywa metod ClearOverriddenBrowser() i SetOverriddenBrowser() w celu poinformowania platformy ASP.NET MVC o sposobie trak- towania Ĕñdania. Nastöpnie platforma wyĈwietla odpowiedniñ wersjö witryny, mobilnñ dla urzñdzenia mobilnego lub peänñ dla urzñdzenia biurkowego. Przedstawiony poniĔej fragment kodu umieĈè przez zamykajñcym znacznikiem body w pliku Layout.Mobile.cshtml w celu wygenerowania widoku czöĈciowego ViewSwitcher jako stopki (ry- sunek 10.7): div data-role= footer @Html.Partial( _ViewSwitcher ) /div 222 _ Rozdziaĥ 10. Programowanie na platformy mobilne Poleć książkęKup książkę Rysunek 10.7. Przeäñcznik widoku wyĈwietlony w stopce strony Po klikniöciu äñcza Widok zwykäy nastñpi wyĈwietlenie zwykäej wersji widoku Auctions. Zwróè jednak uwagö, Ĕe widok zwykäy nie zawiera äñcza pozwalajñcego na przejĈcie do widoku mobilnego. Aby to naprawiè, przejdĒ do widoku wspóädzielonego _Layout.cshtml i umieĈè w nim poniĔszy wiersz kodu: @Html.Partial( _ViewSwitcher ) Uruchom aplikacjö; w mobilnej wersji przeglñdarki internetowej przejdĒ do dowolnej strony. Przekonasz siö, Ĕe przeäñcznik widoków generuje äñcza pozwalajñce na przeäñczanie pomiö- dzy widokami zwykäym i mobilnym (rysunek 10.8). Unikanie widoków biurkowych w witrynie mobilnej Na pewno zauwaĔysz, Ĕe w przypadku braku mobilnej wersji widoku platforma ASP.NET MVC powoduje wygenerowanie wersji biurkowej widoku w mobilnym ukäadzie graficznym strony. Trzymanie siö standardów podczas tworzenia kodu znaczników pomaga w wyĈwietlaniu w miarö uĔytecznego widoku, ale mogñ zdarzaè siö sytuacje, w których po prostu bödziesz wolaä uniknñè takiego zachowania platformy. Wiýksza przyjaznoļë aplikacji mobilnej _ 223 Poleć książkęKup książkę Rysunek 10.8. Przeäñcznik widoków wyĈwietlony w widoku biurkowym strony W tym celu naleĔy przypisaè wartoĈè true wäaĈciwoĈci RequireConsistentDisplayMode: @{ Layout = ~/Views/Shared/_Layout.cshtml ; DisplayModeProvider.Instance.RequireConsistentDisplayMode = true; } Po wprowadzeniu powyĔszej zmiany Ĕaden widok domyĈlny (to znaczy niemobilny) nie zo- stanie wygenerowany w mobilnym ukäadzie graficznym strony. Ustawienie moĔesz wpro- wadziè takĔe globalnie dla wszystkich widoków poprzez przypisanie wartoĈci true wymienio- nej wäaĈciwoĈci w pliku /Views/_ViewStart.cshtml. Usprawnianie wersji mobilnej witryny Mobilne wersje przeglñdarek internetowych majñ moĔliwoĈè wyĈwietlania stron HTML, przynajmniej do pewnego stopnia. Jednak poleganie w caäoĈci na przeglñdarce internetowej podczas wyĈwietlania strony wcale nie gwarantuje uzyskania najlepszych wyników. Wynika to z faktu, Ĕe przeglñdarki internetowe majñ jedynie ograniczone moĔliwoĈci w zakresie zmiany wielkoĈci strony i obrazów. Tylko autor moĔe zadecydowaè, które elementy sñ najwaĔ- niejsze i tym samym powinny byè wyróĔnione na maäym ekranie oraz które sñ mniej waĔne, przez co moĔna je po prostu pominñè. Dlatego teĔ Twoim obowiñzkiem jest zapewnienie wi- trynie äadnego wyglñdu i umoĔliwienie jej funkcjonalnego dziaäania w róĔnych przeglñdarkach internetowych. Na szczöĈcie moĔesz wykorzystaè techniki Adaptive Rendering i usprawnienia progresywne w celu poprawienia sposobu wyĈwietlania witryny. Dziöki platformom ASP.NET MVC 4 i jQuery Mobile jest to doĈè äatwe zadanie, o czym siö przekonasz w poniĔszych podrozdziaäach. 224 _ Rozdziaĥ 10. Programowanie na platformy mobilne Poleć książkęKup książkę Technika Adaptive Rendering Adaptive Rendering to technika pozwalajñca widokowi na „zaadaptowanie” moĔliwoĈci ofe- rowanych przez przeglñdarkö internetowñ. Przyjmujemy zaäoĔenie, Ĕe na stronie znajduje siö mnóstwo kart, a klikniöta karta powoduje wykonanie Ĕñdania AJAX w celu pobrania treĈci i jej wyĈwietlenia. W przypadku wyäñczonej obsäugi jözyka JavaScript karta nie bödzie w stanie wyĈwietliè treĈci Ĕñdanej przez uĔytkownika. Jednak gdy bödzie stosowana technika Adaptive Rendering, karta bödzie po prostu zawieraäa adres URL prowadzñcy do zasobu z treĈciñ, a tym samym uĔytkownik uzyska dostöp do Ĕñdanej treĈci. Innym przykäadem moĔe byè pasek nawigacyjny zawierajñcy poziomñ listö äñczy. Wprawdzie przedstawia siö on dobrze w urzñdzeniu biurkowym, ale na maäym ekranie urzñdzenia mobilne- go moĔe byè przytäaczajñcy. Dziöki technice Adaptive Rendering pasek nawigacyjny bödzie mógä zostaè wyĈwietlony jako rozwijane menu, co oznacza dostosowanie jego funkcjonalnoĈci do urzñdzenia o mniejszym ekranie. Zaletñ omawianej techniki jest moĔliwoĈè wyĈwietlenia „funkcjonalnej” lub inaczej „uĔytecznej” wersji witryny w róĔnych przeglñdarkach internetowych i urzñdzeniach. Sam poziom usäugi moĔe byè zaleĔny od moĔliwoĈci oferowanych przez poszczególne urzñdzenia, ale witryna mimo wszystko nadal pozostanie uĔyteczna. JeĔeli chcesz, aby uĔytkownicy nieustannie powracali na Twojñ witrynö, musisz zagwaran- towaè im przyjemnoĈè z korzystania z niej niezaleĔnie od tego, jakich uĔywajñ urzñdzeþ. Platforma ASP.NET MVC 4 zapewnia techniki adaptacyjne poprzez jQuery Mobile. Znacznik viewport W grafice komputerowej pojöcie viewport oznacza wyĈwietlany prostokñtny obszar. W przypadku przeglñdarki internetowej jest to jej okno, w którym nastöpuje wyĈwietlanie dokumentu HTML. Innymi säowy, to wyimaginowana konstrukcja zawierajñca znacznik html , który z kolei jest elementem gäównym dla caäego kodu znaczników strony. Co siö dzieje w przypadku powiökszania lub pomniejszania (zmiana stopnia przybliĔenia) okna przeglñdarki internetowej? A co siö stanie po zmianie orientacji urzñdzenia? Czy viewport równieĔ ulegnie zmianie? W Ĉwiecie urzñdzeþ mobilnych udzielenie odpowiedzi na powyĔsze pytania jest nieco utrud- nione, poniewaĔ w rzeczywistoĈci nie istnieje jeden, ale sñ dwa viewporty — jeden dla „ukäadu graficznego” oraz jeden „wizualny”. Viewport ukäadu graficznego nigdy nie ulega zmianie — to jest wyimaginowana konstrukcja stanowiñca ogranicznik dla znacznika html strony. Podczas zmiany poziomu przybliĔenia strony lub orientacji urzñdzenia zmienia siö viewport wizualny, co wpäywa na elementy wy- Ĉwietlane na ekranie urzñdzenia. Rolö viewportu powinieneĈ postrzegaè jako sposób zapewnienia uĔytkownikom funkcjonalnej i uĔytecznej witryny internetowej. Kiedy strona jest generowana w urzñdzeniu mobilnym, jej szerokoĈè nie powinna byè ani zbyt duĔa, ani zbyt maäa — powinna byè idealnie dopasowana do ekranu. Ponadto strona dopasowana do szerokoĈci ekranu nie powinna byè wyĈwietlana jako mikroskopijna, zmniejszona wersja peänej strony; powinna to byè wersja odpowiednio dostosowana, czytelna. Technika Adaptive Rendering _ 225 Poleć książkęKup książkę W nowoczesnych przeglñdarkach internetowych to nie CSS, ale znacznik meta name= viewport pozwala na zdefiniowanie wymiarów wizualnego viewportu: meta name= viewport content= width=device-width / UĔyta w powyĔszym kodzie wartoĈè width=device-width jest wartoĈciñ specjalnñ i oznacza, Ĕe szerokoĈè viewportu odpowiada rzeczywistej szerokoĈci ekranu urzñdzenia. To najbardziej elastyczna i najczöĈciej uĔywana wartoĈè. WäaĈciwoĈci content moĔna przypisaè konkretnñ wartoĈè liczbowñ, o ile treĈè bödzie zaadapto- wana w ten sposób: meta name= viewport content= width=320px / Po uĔyciu powyĔszego kodu niezaleĔnie od szerokoĈci ekranu urzñdzenia treĈè zawsze bödzie miaäa szerokoĈè 320 pikseli. Oznacza to, Ĕe uĔytkownicy wiökszych ekranów bödñ musieli jñ powiökszaè, natomiast mniejszych — zmniejszaè. Znacznik meta name= viewport jest standardem przemysäowym, ale w rzeczywisto- Ĉci nie jest czöĈciñ standardu W3C. Wymieniona funkcja zostaäa po raz pierwszy zaimplementowana w przeglñdarce in- ternetowej iPhone’a i bardzo szybko — ze wzglödu na duĔñ popularnoĈè tego smartfona — zaczöäa byè obsäugiwana takĔe przez innych producentów urzñdzeþ mobilnych. Wykrywanie funkcji mobilnych PoniewaĔ kaĔde urzñdzenie mobilne obsäuguje odmienny zestaw funkcji, nigdy nie moĔesz przyjmowaè zaäoĔenia, Ĕe konkretna funkcja bödzie dostöpna w kaĔdej przeglñdarce inter- netowej. Przyjmujemy zaäoĔenie, Ĕe aplikacja uĔywa funkcji Web Storage HTML5 obsäugiwanej wpraw- dzie przez wiele smartfonów (np. iPhone, Android, Blackberry i Windows Phone), ale jedno- czeĈnie nieobsäugiwanej przez pozostaäe. ProgramiĈci stosowali zazwyczaj takie techniki jak wykrywanie rodzaju przeglñdarki inter- netowej, aby sprawdziè, czy aplikacja moĔe byè uruchomiona w danej przeglñdarce. Zamiast wiöc sprawdzaè, czy funkcja Web Storage jest obsäugiwana, w podejĈciu klasycznym sprawdza siö, czy uĔywanñ przeglñdarkñ internetowñ jest Opera Mini. Tego rodzaju podejĈcie wiñĔe siö jednak z pewnymi wadami; niektóre z nich podano poniĔej. x Potencjalne wykluczenie przeglñdarek internetowych, które nie zostaäy wykluczone wy- raĒnie, ale obsäugujñ danñ funkcjö. x Niebezpieczeþstwo nieprawidäowego dziaäania witryny internetowej, jeĈli uĔytkownik wyĈwietli jñ z poziomu innego urzñdzenia. Oto przykäad omówionego podejĈcia. // OstrzeĪenie: nie stosuj takiego kodu! if (document.all) { // Internet Explorer 4+ document.write( link rel= stylesheet type= text/css src= style-ie.css ); } 226 _ Rozdziaĥ 10. Programowanie na platformy mobilne Poleć książkęKup książkę else if (document.layers) { // Navigator 4 document.write( link rel= stylesheet type= text/css src= style-nn.css ); } Zwróè uwagö, Ĕe powyĔszy fragment kodu dostarcza arkusze stylów jedynie dla przeglñda- rek Internet Explorer i Netscape Navigator 4 pomimo tego, Ĕe przeglñdarka internetowa mu- si mieè wäñczonñ obsäugö JavaScript. Oznacza to, Ĕe w innych przeglñdarkach internetowych, takich jak Netscape 6, Netscape 7, CompuServe 7, Mozilla i Opera, dana witryna internetowa moĔe nie byè wyĈwietlona prawidäowo. Nawet jeĈli zapewnisz wyraĒnñ obsäugö wiökszoĈci przeglñdarek internetowych, nadal mo- Ĕesz pominñè nowe wersje przeglñdarek zawierajñce juĔ obsäugö funkcji wymaganych do prawidäowego dziaäania witryny. Inny potencjalny problem wiñĔe siö z bäödnñ identyfikacjñ przeglñdarki internetowej. PoniewaĔ mechanizm wykrywania przeglñdarki internetowej w duĔej mierze opiera siö na zgadywaniu na podstawie ciñgu tekstowego okreĈlajñcego agenta uĔytkownika i na pewnych wäaĈciwoĈciach, to istnieje niebezpieczeþstwo bäödnej identyfikacji pewnych przeglñdarek internetowych. // OstrzeĪenie: nie uĪywaj tego kodu! if (document.all) { // Internet Explorer 4+ elm = document.all[ menu ]; } else { // Przyjmujemy zaáoĪenie, Īe przeglądarka to Navigator 4. elm = document.layers[ menu ]; } Zwróè uwagö na stosowany przez powyĔszy kod podziaä przeglñdarek internetowych. JeĈli przeglñdarka nie zostanie rozpoznana jako Internet Explorer, to kod uznaje jñ za przeglñdar- kö Netscape Navigator 4 i nastöpuje próba uĔycia warstw. To czösto spotykane Ēródäo problemów podczas uĔywania przeglñdarek Opera i przeglñda- rek opartych na silniku Gecko. Wynika z tego, Ĕe najlepszym rozwiñzaniem jest wyraĒne sprawdzenie istnienia danej funkcji zamiast przyjmowanie zaäoĔenia o jej obsäudze bñdĒ braku obsäugi przez konkretne wersje poszczególnych przeglñdarek. PoniĔej przedstawiono wczeĈniejszy fragment kodu, ale zmodyfikowany w celu wykrywania obsäugi konkretnych funkcji zamiast przeglñdarek. // JeĪeli obsáugiwana jest funkcja localStorage, naleĪy jej uĪyü. if (( localStorage in window) window.localStorage !== null) { // àatwa w uĪyciu wáaĞciwoĞü obiektu. localStorage.wishlist = [ Unicorn , Narwhal , Deathbear ] ; } else { // W przypadku braku sessionStorage konieczne jest uĪycie pliku cookie // za pomocą API document.cookie. var date = new Date(); date.setTime(date.getTime()+(365*24*60*60*1000)); var expires = date.toGMTString(); var cookiestr = wishlist=[ Unicorn , Narwhal , Deathbear ]; + expires= +expires+ ; path=/ ; document.cookie = cookiestr; } Technika Adaptive Rendering _ 227 Poleć książkęKup książkę PowyĔszy fragment kodu nie tylko jest znacznie bardziej niezawodny, ale równieĔ bödzie doskonale odgrywaä swojñ rolö w przyszäoĈci — kaĔda przeglñdarka, w której zostanie do- dana obsäuga funkcji Web Storage, otrzyma dostöp do nowych funkcji aplikacji. Zapytania mediów CSS Zapytania CSS media to technika usprawnieþ progresywnych, która pozwala na zaadapto- wanie i wyĈwietlanie alternatywnych stylów w zaleĔnoĈci od przeglñdarki internetowej. Wersja druga specyfikacji CSS (znana jako „CSS2”) pozwala na wskazanie stylu na podstawie medium, np. screen lub print. Z kolei wersja trzecia specyfikacji CSS (znana jako „CSS3”) wprowadza koncepcjö tak zwa- nych zapytaþ mediów, czyli technikö rozszerzajñcñ koncepcjö pomagajñcñ wykrywaè w stan- dardowy sposób funkcje oferowane przez przeglñdarki internetowe. Niestety, specyfikacja CSS3 nadal pozostaje w fazie „rekomendacji”, co oznacza, Ĕe zapytania mediów — oraz oczywiĈcie inne nowe funkcje wprowadzone w specyfi- kacji CSS3 — niekoniecznie sñ doskonale obsäugiwane przez wszystkie przeglñdarki internetowe. Dlatego teĔ bardzo waĔne jest przygotowanie stylów domyĈlnych dostarczanych przeglñdarkom internetowym, które nie obsäugujñ nowych funkcji. WczeĈniej dowiedziaäeĈ siö, jak znacznik viewport pozwala na zdefiniowanie domyĈlnej sze- rokoĈci na podstawie ekranu urzñdzenia. Wprawdzie viewport powoduje, Ĕe strona wyglñda dobrze w standardowej wielkoĈci, ale nie bödzie pomocny, gdy uĔytkownik zechce powiök- szyè lub zmniejszyè stronö w urzñdzeniu. Wraz ze zmianñ ukäadu graficznego konieczne jest znalezienie sposobu na poinformowanie przeglñdarki internetowej, jak ograniczyè treĈè do konkretnej szerokoĈci, aby byäa wyĈwie- tlana poprawnie w kaĔdej sytuacji. Spójrz na prosty przykäad rozwiñzania opartego na zapytaniu mediów CSS: body {background-color:blue;} @media only screen and (max-width: 800px) { body {background-color:red;} } Reguäy CSS sñ wykonywane od poczñtku pliku do koþca, wiöc rozpoczynamy od umiesz- czenia ogólnej reguäy definiujñcej niebieski kolor täa strony. Nastöpnie znajduje siö reguäa przeznaczona dla konkretnego urzñdzenia — wykorzystane zostaje zapytanie mediów CSS. Reguäa powoduje zmianö koloru täa na czerwony w urzñdze- niach, których szerokoĈè ekranu nie przekracza 800 pikseli. W urzñdzeniach obsäugujñcych zapytania mediów CSS i posiadajñcych ekran o szerokoĈci poniĔej 800 pikseli täo bödzie wyĈwietlone w kolorze czerwonym. Natomiast w pozostaäych urzñdzeniach kolorem täa pozostaje niebieski. (ZauwaĔ, Ĕe zmiana koloru täa podczas zmiany wielkoĈci strony nie jest operacjñ wykonywanñ w rzeczywistych aplikacjach. Zamiast tego w omówionym przykäadzie koncentrujemy siö na pokazaniu sposobu uĔywania zapytania mediów w celu stosowania róĔnych stylów na podstawie okreĈlonych warunków). 228 _ Rozdziaĥ 10. Programowanie na platformy mobilne Poleć książkęKup książkę Bardzo waĔne jest umieszczenie ogólnej reguäy na poczñtku, a nastöpnie jej usprawnianie po- przez dodanie obsäugi zapytaþ mediów i wykrywania dostöpnoĈci poszczególnych funkcji. Dziöki temu witryna internetowa bödzie wyĈwietlana w peänej krasie w przeglñdarkach in- ternetowych oferujñcych obsäugö najnowszych funkcji i jednoczeĈnie bödzie wyĈwietlana po- prawnie (choè mniej atrakcyjnie pod wzglödem wizualnym) w starszych wersjach przeglñda- rek internetowych. Widoki dla konkretnych przeglédarek internetowych Nowa funkcja platformy ASP.NET MVC 4, jakñ jest tryb wyĈwietlania, pozwala na wczyty- wanie odmiennych widoków w zaleĔnoĈci od zdefiniowanych warunków. Przykäadem uĔy- cia tej funkcji moĔe byè utworzenie oddzielnych widoków przeznaczonych dla smartfonów (urzñdzeþ o maäych ekranach) i tabletów (urzñdzeþ o ekranach wiökszych niĔ w smartfonach, ale jednoczeĈnie mniejszych niĔ w urzñdzeniach biurkowych). Przygotowanie widoków dla tych klas urzñdzeþ pozwala na optymalne wykorzystanie dostöpnej powierzchni ekranu. Po- nadto stanowi przykäad dostarczenia efektywnej i uĔytecznej aplikacji przystosowanej do moĔliwoĈci oferowanych przez konkretne urzñdzenia. Pierwszym krokiem podczas realizacji wymienionego podejĈcia jest rejestracja trybów wy- Ĉwietlania przeprowadzana w trakcie uruchamiania aplikacji. using System.Web.WebPages; // Rejestracja widoku przeznaczonego dla iPhone’a. DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode( iPhone ) { ContextCondition = (ctx = ctx.Request.UserAgent.IndexOf( iPhone , StringComparison.OrdinalIgnoreCase) = 0) }); // Rejestracja widoku przeznaczonego dla Windows Phone. DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode( WindowsPhone ) { ContextCondition = (ctx = ctx.Request.UserAgent.IndexOf( Windows Phone , StringComparison.OrdinalIgnoreCase) = 0) }); Drugim krokiem jest przygotowanie odpowiednich widoków. Utwórz widok dla iPhone’a poprzez skopiowanie widoku Auctions.mobile.cshtml i zmianö jego nazwy na Auctions.iPhone.cshtml. Nastöpnie nagäówek w nowym widoku zmieþ na Aukcje iPhone’a, aby go odróĔniè od pozosta- äych. Aby zobaczyè tak przygotowanñ stronö w dziaäaniu (rysunek 10.9), uruchom aplikacjö za pomocñ emulatora przeglñdarki internetowej dla urzñdzenia mobilnego (pokazane tutaj przykäady uĔywajñ rozszerzenia User Agent Switcher dla przeglñdarki internetowej Firefox pozwalajñcego na emulacjö przeglñdarki internetowej w iPhonie). Aby przygotowaè wersjö widoku dla Windows Phone, utwórz kolejnñ kopiö Auctions.mobile.cshtml i zmieþ jego nazwö na Auctions.WindowsPhone.cshtml. Nastöpnie nagäówek w nowym widoku zmieþ na Aukcje Windows Phone, aby go odróĔniè od pozostaäych. Po uruchomieniu aplikacji w emulatorze przeglñdarki internetowej na urzñdzeniu mobilnym (rysunek 10.10) bödziesz mógä podziwiaè przygotowanñ stronö w dziaäaniu. Technika Adaptive Rendering _ 229 Poleć książkęKup książkę Rysunek 10.9. Widok utworzony dla iPhone’a Aby sprawdziè, czy Ĕñdanie pochodzi z urzñdzenia mobilnego, platforma ASP.NET analizuje je i porównuje z zestawem doskonale znanych definicji przeglñdarek inter- netowych dla urzñdzeþ mobilnych. Dziöki klasie HttpBrowserCapabilities (http://msdn.microsoft.com/en-us/library/system.web. httpbrowsercapabilities.aspx) platforma otrzymuje bardzo duĔñ iloĈè informacji dotyczñ- cych moĔliwoĈci danej przeglñdarki. Informacje te sñ dostöpne poprzez wäaĈciwoĈè Request.Browser. Ewentualnie zamiast polegaè na wbudowanych w platformö definicjach przeglñdarek, moĔesz skorzystaè z usäugi takiej jak 51Degrees.mobi (http://51degrees.mobi/Support/Blogs/ tabid/212/EntryId/26/51Degrees-mobi-and-MVC4.aspx), która oferuje znacznie bardziej aktualnñ bazö informacji o róĔnych urzñdzeniach mobilnych. 230 _ Rozdziaĥ 10. Programowanie na platformy mobilne Poleć książkęKup książkę Rysunek 10.10. Widok utworzony dla Windows Phone Tworzenie nowej aplikacji mobilnej zupeĥnie od poczétku Platforma ASP.NET MVC 4 bardzo uäatwia dodawanie widoków mobilnych do istniejñcych aplikacji. Równie äatwo moĔesz jednak zupeänie od poczñtku tworzyè aplikacje mobilne. To uĔy- teczne rozwiñzanie, jeĈli nie masz jeszcze aplikacji, którñ mógäbyĈ wykorzystaè jako punkt wyjĈcia, bñdĒ gdy z jakiegoĈ powodu nie chcesz äñczyè witryn w wersji zwykäej i mobilnej. Na platformie ASP.NET MVC 4 znajdziesz szablon Aplikacja dla urzñdzeþ przenoĈnych, dziöki któremu szybko bödziesz mógä rozpoczñè tworzenie aplikacji dla urzñdzeþ mobilnych. Szablon ten w duĔej mierze opiera siö na platformie jQuery Mobile. Aby zatem rozpoczñè tworzenie efektywnych aplikacji, w pierwszej kolejnoĈci musisz poznaè jQuery Mobile. Tworzenie nowej aplikacji mobilnej zupeĥnie od poczétku _ 231 Poleć książkęKup książkę Platforma jQuery Mobile Podczas pracy z jQuery Mobile bardzo istotne jest pojöcie strony. W tradycyjnym programo- waniu sieciowym strona oznacza dokument HTML, stronö .aspx w ASP.NET Web Forms lub widok .cshtml na platformie ASP.NET MVC. Pliki te zawierajñ kod znaczników oraz logikö pozwalajñce na wygenerowanie strony w przeglñdarce internetowej. Jednak na platformie jQuery Mobile jeden plik moĔe zawieraè wiele „stron” dla urzñdzeþ mobilnych. Z technicznego punktu widzenia strona jQuery Mobile to tak naprawdö znacznik div wraz z przypisanym mu atrybutem data-role= page . W jednym pliku widoku moĔesz umieĈciè dowolnñ liczbö takich znaczników, a jQuery zamieni je na wiele stron wyĈwietlanych jednoczeĈnie. PoniewaĔ na podstawie jednego widoku dla urzñdzenia biurkowego moĔe powstaè wiele mniejszych widoków dla urzñdzenia mobilnego (gäównie wskutek przeprojektowania strony, aby jej nawigacja lepiej odpowiadaäa ekranowi urzñdzenia mobilnego), takie podejĈcie po- maga w zmniejszeniu liczby plików; w przeciwnym razie pliki te trzeba by utworzyè. Szablon aplikacji mobilnej w ASP.NET MVC 4 Aby utworzyè nowñ aplikacjö mobilnñ, rozpoczynasz pracö dokäadnie tak samo jak w przy- padku zwykäej aplikacji sieciowej ASP.NET MVC — wybierz opcjö menu Plik/Nowy/Projekt…, a nastöpnie wybierz typ Aplikacja sieci Web platformy ASP.NET MVC 4 (rysunek 10.11). Rysunek 10.11. Tworzenie nowego projektu 232 _ Rozdziaĥ 10. Programowanie na platformy mobilne Poleć książkęKup książkę W kolejnym oknie dialogowym wybierz szablon Aplikacja dla urzñdzeþ przenoĈnych (rysunek 10.12). Rysunek 10.12. Wybór szablonu aplikacji dla urzñdzeþ przenoĈnych W ten sposób utworzysz nowñ aplikacjö ASP.NET MVC wraz z przykäadowymi kontrolerami i widokami zawierajñcymi oferowane przez platformö ASP.NET MVC funkcje obsäugi urzñ- dzeþ mobilnych. Szablon ten pozwoli Ci na szybkie rozpoczöcie pracy. Uruchom projekt, naciskajñc klawisz F5 bñdĒ wybierajñc z menu Debug/Start. Visual Studio rozpocznie kompilacjö rozwiñzania, a nastöpnie uruchomi przeglñdarkö internetowñ, w której zostanie wyĈwietlona strona gäówna witryny internetowej w wersji przystosowanej dla urzñ- dzeþ mobilnych (rysunek 10.13). UŜywanie szablonu aplikacji mobilnej w ASP.NET MVC 4 Jak moĔesz siö przekonaè, utworzony projekt aplikacji mobilnej standardowo zawiera duĔñ iloĈè przygotowanego kodu. Struktura projektu jest podobna do projektu zwykäej witryny internetowej, ale z dwoma zmianami. x Katalog Content zawiera arkusze stylów dla jQuery Mobile (rysunek 10.14): x jquery.mobile-1.1.0.css (i jego zminimalizowana wersja), x jquery.mobile.structure-1.1.0.css (i jego zminimalizowana wersja). Tworzenie nowej aplikacji mobilnej zupeĥnie od poczétku _ 233 Poleć książkęKup książkę Rysunek 10.13. DomyĈlna strona gäówna aplikacji mobilnej Rysunek 10.14. Nowa zawartoĈè katalogu Content projektu x Katalog Scripts zawiera dwa nowe pliki (rysunek 10.15): x jquery.mobile-1.1.0.js, x jquery.mobile.structure-1.1.0.js. Te nowe pliki stanowiñ czöĈè platformy jQuery Mobile, czyli platformy JavaScript dostarcza- jñcej urzñdzeniom mobilnym caäe dobrodziejstwo jQuery i jQueryUI. Teraz spójrz na zmodyfikowanñ wersjö pliku _Layout.cshtml, którego znacznik head zawiera kilka nowych wierszy. 234 _ Rozdziaĥ 10. Programowanie na platformy mobilne Poleć książkęKup książkę Rysunek 10.15. Nowa zawartoĈè katalogu Scripts projektu Znacznik meta name= viewport okreĈla wielkoĈè viewportu. To jest bardzo waĔne, poniewaĔ wiökszoĈè przeglñdarek w wersji dla urzñdzeþ mobilnych wprawdzie pozwala uĔytkowni- kom na zmniejszanie i powiökszanie strony wedle wäasnego uznania, ale lepsze wraĔenie wywoäa w uĔytkowniku ustawienie szerokoĈci poczñtkowej. Jak juĔ wczeĈniej powiedziano, wartoĈè width=device-width powoduje, Ĕe treĈci jest automatycznie przypisywana szerokoĈè odpowiadajñca szerokoĈci uĔywanego urzñdzenia: meta name= viewport content= width=device-width / Alternatywnym rozwiñzaniem jest zdefiniowanie konkretnej szerokoĈci dla viewportu po- przez podanie odpowiedniej wartoĈci wyraĔonej w pikselach. Na przykäad w poniĔszym poleceniu poczñtkowa szerokoĈè strony zostaäa okreĈlona na 320 pikseli: meta name= viewport content= width=320px / Przedstawiony poniĔej znacznik powoduje dodanie do strony stylów jQuery Mobile. Ponadto pozwala na konfiguracjö motywów za pomocñ jQuery Theming (http://jquerymobile.com/demos/ 1.0/docs/api/themes.html): link rel= stylesheet a href= @Url.Content( ~/Content/jquery.mobile-1.0b2.min.css ) / Wreszcie poniĔszy znac
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

ASP.NET MVC 4. Programowanie
Autor: , ,
Sklep
Format
Cena
Helion.pl Helion.pl
książka
23,90 zł
Idź do sklepu »

Opinie na temat publikacji:

Inne popularne pozycje z tej kategorii:

Czytaj również:

Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: