Jeśli chcemy tworzyć oprogramowanie na wiele różnych platform, jest to trudne. Potrzebujemy znać dobrze każdą z nich, związane z nią języki, API. Każda ma jakieś swoje unikalne właściwości, zachowania, user experience. Powstaje jednak pytanie czy w przypadkach prostszych aplikacji na więcej niż dwie platformy, gdzie look & feel jest mniej ważny, nie potrzebujemy skomplikowanego UI czy zaawansowanych możliwości API danej platformy, wydajność nie jest najbardziej kluczowa, jednak lepszym rozwiązaniem nie byłaby jakaś uniwersalna technologia, w której możnaby raz napisać aplikację z myślą o różnych środowiskach. W dzisiejszych czasach takim wspólnym mianownikiem staje się HTML5 i JavaScript. W najbliższej serii postów chciałbym trochę przyjrzeć się frameworkowi PhoneGap, który właśnie próbuje sprostać temu wyzwaniu. BTW inna sprawa że Windows 8, a także z pewnością także Windows Phone 8 za pomocą WinRT też stwarzają/stworzą możliwość pisania natywnych aplikacji w HTML5, przy jednoczesnym łatwym reużytkowaniu kodu w innych językach i wygodnym wysokopoziomowym API o możliwościach C# (a czasami nawet nieco większymi), przy czym jest to rozwiązanie w ramach jednej platformy. Jeśli przy PhoneGap narzuci mi się jakieś porównania do WinRT czy WinJS, to z pewnością podzielę się swoimi spostrzeżeniami.
Dziś pierwsza część o PhoneGap - wprowadzenie i zagadnienia z UI.
Wprowadzenie
Platformy
- Windows Phone
- iOS
- Android
- Blackberry
- Symbian
- Bada
- WebOS
2 elementy
- aplikacja HTML
- dostęp do hardware’u urządzeń i ich API
- akcelerometr
- kompas
- geolokalizacja
- natywny storage
- kamera
- połączenia sieciowe
- zdarzenia
- media - odtwarzanie i nagrywanie
- kontakty
- natywny system plików
- notyfikacje
- …
Opcje developmentu
- PhoneGap Build
- budowanie na jednej platformie
- przeniesienie na PhoneGap Build
- testowanie na innych platformach
- debugowanie z PhoneGap Build
- Budowanie lokalne
- budowanie na jednej lub więcej platform
- budowanie lokalne
- deploying i testowanie lokalne
Dla każdej z platform organizacja środowiska wygląda inaczej. W przypadku Windows Phone operujemy odpowiednimi szablonami w Visual Studio.
Projekt aplikacji Silverlight z
- GapLib
- Plugins
- www // elementy przenośne
- index.html
- master.css
- phonegap-x.x.x.js
- GapSourceDictionary.xaml
- MainPage.xaml
- ManifestProcessor.js
- …
index.html
- HTML5
- viewport
- …
Odpowiednie capabilities
Referencja WP7GapClassLib
MainPage.xaml: <my:PGView …/>
Możliwość oglądania strony HTML w zwykłej desktopowej przeglądarce, ale wtedy nie będzie wołane zdarzenie deviceready.
Trzeba je emulować za pomocą stopgap.
Mobilne UI
Popularne frameworki
- jQuery Mobile - wygląd charakterystyczny dla siebie samego
- Sencha Touch
- jqTouch - emulacja look & feel urządzenia
- Kendo UI
Możemy np. dołączyć jQuery i jQuery Mobile do projektu aplikacji w PhoneGap.
jQuery Mobile
<div id=”home” data-role=”page”>
<div data-role=”header”>
…
</div>
<div data-role=”content”>
…
<a href=”#newpage” data-role=”button”></a> //link do następnej strony w postaci przycisku
<ul data-role=”listview” data-theme=”g” data-filter=”true”> //lista z filtrowaniem
<li><a href=””>1</a></li>
<li><a href=””>2</a></li>
<li><a href=””>3</a></li>
<li><a href=””>4</a></li>
</ul>
</div>
<div data-role=”footer” data-position=”fixed”> //na dole
…
<a href=”#dialogpage” data-rel=”dialog” data-icon=”plus”>Add</a> //otwarcie strony jako okna dialogowego
</div>
</div>
<div id=”newpage” data-role=”page”>
<div data-role=”header”>
<a href=”#home” data-icon=”delete”>Cancel</a> //toolbar
…
</div>
<div data-role=”content”>
<label for=”name”>Name: </label>
<input type=”text” name=”name” id=”name” value=”” />
</div>
<div data-role=”footer” data-position=”fixed”> //na dole
…
</div>
</div>
<div id=”dialogpage” data-role=”page”>
<div data-role=”content”>
</div>
</div>
$(‘#newpage’).live(‘pageshow’, function() {
var name = window.localstorage.getItem(“name”);
…
});
Ciekawostka
https://github.com/davejohnson/phonegap-windows - przystosowanie PhoneGap do wykonywania w postaci desktopowej aplikacji!
Brak komentarzy:
Prześlij komentarz