PhoneGap - odc. 1

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!