jQuery Mobile – wprowadzenie

jQuery mobile

Poziom średnio-zaawansowany

Dziś chyba nikt nie ma wątpliwości jak ważną rolę odgrywają urządzenia mobilne. Mają coraz szersze zastosowanie, a kluczem są interfejsy graficzne. Do programistów różnych technologii należy zapewnienie, aby praca na ograniczonym sprzęcie, na małych ekranach dotykowych była jak najbardziej efektywna i wygodna. Ogromne znaczenie na tym polu mając aplikacje Web, a jednym z rozwiązań jest biblioteka jQuery Mobile, która rozszerza możliwości jQuery o tworzenie interfejsów dedykowanych do pracy na urządzeniach mobilnych.

jQuery Mobile

Mylne może być wrażenie, że chodzi tu o mobilną wersję jQuery, ponieważ jQuery Mobile to framework JavaScript, który rozszerza jQuery o dodatki przydatne a nawet potrzebne do tworzenia aplikacji WWW, działających z poziomu urządzeń mobilnych.

Co daje nam ten framework?

Przede wszystkim bardzo wysoką kompatybilność z urządzeniami / przeglądarkami. Większość przeglądarek na współczesnych urządzeniach może wykorzystywać wszystkie możliwości oferowane przez jQuery Mobile. Aktualne informacje o wsparciu przez przeglądarki podane są na podstronie Graded Browser Support.

Biblioteka mocno bazuje na HTML5, CSS3 i oczywiście JavaScript. Otrzymujemy gotowy zestaw elementów interfejsu użytkownika, który jest przystosowany dla urządzeń mobilnych, szczególnie z ekranem dotykowym.

Całość daje bardzo dobrze działający interface, który dostarcza także efektów animacji. Na szczególną uwagę zasługują „strony” i efekty przejścia między nimi. Wszystko to pozwala odnieść wrażenie, że pracujemy z natywną aplikacją mobilną a nie Web.

jQuery Mobile oferuje również obsługę zdarzeń (events), charakterystycznych dla aplikacji mobilnych (np. tap).

Przykład:

$('div').on('tap', function(event) {
    alert('You tapped DIV element');
});

Warto zapoznać się z możliwościami na stronach z przykładami:

http://jquerymobile.com/demos/

http://www.jqmgallery.com/

jQuery Mobile to znakomity wygląd elementów UI

Jednym z celów biblioteki, który został osiągnięty, jest możliwość nie tylko umieszczania w interfejsie bardzo dobrze wyglądających kontrolek, ale i łatwa wymiana stylów dla wszystkich tych elementów.

Dostępny jest kreator tematów graficznych ThemeRoller.

Start z jQuery Mobile

Nie potrzeba wiele. Tworzymy nowy dokument w HTML5 i dodajemy jQuery Mobile.

W naszym przykładzie dołączamy potrzebne pliki z CDN:

http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css

http://code.jquery.com/jquery-1.9.1.min.js

http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js

Gotowy szablon strony dostępny jest tutaj.

A tak wygląda przykład uruchomiony na Opera Mobile Emulator:

jQuery Mobile - szablon strony

jQuery Mobile – szablon strony

Pracując z jQuery Mobile możemy uzyskać zaskakująco dobre efekty w bardzo krótkim czasie, ponieważ to biblioteka zdejmuje z nas ogromną ilość pracy. Tworzenie stron jest stosunkowo proste – korzystamy z typowych elementów i atrybutów HTML5.

Bibliotece jQuery Mobile wytykane były (i nadal są) różne drobne wady, w tym problemy ze zgodnością w niektórych przeglądarkach. Jednak jest to dość młody projekt, który i tak do tej pory jest znakomicie rozwinięty. Poza tym jeśli ktoś chce, może wszystko pisać sam – „lepiej” …

Co z natywnymi aplikacjami mobilnymi?

jQuery Mobile oczywiście nie służy do tego celu, jednak może być użyte jako część takiej aplikacji. A to za sprawą technologii „opakowujących”, takich jak PhoneGap, które umożliwiają generowanie aplikacji natywnych na podstawie aplikacji WWW tworzonej w technologiach Web.


Podsumowanie

Jako osoba zafascynowana tematem technologii mobilnych bardzo pozytywnie odnoszę się do takich rozwiązań jak jQuery Mobile. Biblioteka ta oferuje wspaniałe możliwości.

Jest to poza tym świetne narzędzie do prototypowania. Dzięki jQuery Mobile możemy bardzo szybko stworzyć i przetestować UI projektu naszej aplikacji. Może to być zatem w przypadku projektów mobilnych rozwiązanie lepsze niż typowe narzędzia do tworzenia mockup’ów.

Na koniec dodam, że HTML5, programowanie gier oraz wszelkie aspekty programowania aplikacji mobilnych w technologiach WWW są filarem rozwoju tego bloga. Gorąco zatem zachęcam do śledzenia nowych wpisów.

Dziękuję za uwagę.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+2Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.