sobota, 16 czerwca 2012

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

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: