kolmapäev, 23. september 2009

Kuidas luua iPhone veebiaplikatsioone

Kuigi iPhone puhul on rohkem tuntud App Store kaudu laetavad aplikatsioonid (Eestis toodab selliseid näiteks Indilo), siis tegelikult võimaldab ka telefoni brauser aplikatsioonilaadseid asju jooksutada.

Nimelt on võimalik veebilehe HTML koodis telefonile teada anda, et seda lehte tuleks kasutada kui aplikatsiooni. See tähendab, et lehte vaadates eemaldatakse brauseri kasutajaliides (aadressiriba ja olekuriba) ning kogu ekraanipind eraldatakse veebilehele.

Kuna brauser võimaldab salvestada veebilinkide otseteid (koos sobiva ikooniga, mille saab samuti veebilehe poolt ette anda) telefoni töölauale, saavutamegi väga lihtsate vahenditega efekti, nagu oleks tegu tavalise aplikatsiooniga.

Taoline veebiaplikatsioon saab ka määrata "startup" pildi, mida näidatakse kasutajale lehe laadimisel peale telefoni töölaual oleva aplikatsiooni otsetee avamist.

Aga nüüd kõigest lähemalt.

Esiteks oleks vaja veebilehes anda brauserile märku, et tegu on aplikatsiooniga, selle jaoks saab HTML lehe päisesse seada mõned meta-sildid.

<meta content="yes" name="apple-mobile-web-app-capable"></meta>
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"></meta>
<meta content="telephone=no" name="format-detection"></meta>
<link href="startup.png" rel="apple-touch-startup-image"></link>
<link href="icon.png" rel="apple-touch-icon"></link>
<meta name = "viewport" content = "width = device-width,maximum-scale=1.0,minimum-scale=1.0, initial-scale = 1.0, user-scalable = no"></meta> 

Esimene rida - apple-mobile-web-app-capable annab teada, et veebilehte tuleks käsitleda aplikatsioonina ning brauser peaks oma kasutajaliidese elemendid ära peitma. Aplikatsiooni staatust arvestatakse ainult siis, kui leht avatakse telefoni töölaual oleva otsetee kaudu, mitte brauseriga otse aplikatsiooni aadressile minnes.

Teine rida - apple-mobile-web-app-status-bar-style seab ainsa säilinud kasutajaliidese elemendi stiili - telefoni ülemine kitsas riba, mis näitab levi tugevust, kellaaega ja aku täituvust.

Kolmas rida format-detection keelab telefonil konverteerida lehel asuvaid numbreid klikitavateks telefoninumbriteks.

Neljas rida - apple-touch-startup-image määrab ära pildi (320x480 px, portrait), mida näidatakse lehe laadimisel.

Viies rida - apple-touch-icon määrab ära otsetee ikooni (57x57 px). Ikoon peaks olema tavaline png fail - telefon ise muudab selle nurgad ümaraks ja lisab kerge peegelduse.

Kuues rida - viewport määrab ära mitmed vajalikud seaded (need töötavad ka otse veebi kaudu lehe avades, mitte ainult otseteed kasutades), näiteks selle et kasutaja ei saa lehte ise suurendada ega vähendada.

CSS

Peamised kaks CSS definitsiooni mida kasutada, oleks body[orient="landscape"] {} ja body[orient="portrait"]{}, need nimelt võimaldavad määrata lehele eri stiile vastavalt telefoni orientatsioonile. Lisaks antud definitsioonidele on võimalik veel kasutada mitmeid -webkit algusega eristiile, mis töötavad ka tavalises Safari brauseris.

JavaScript

Lisaks tuttavale käsustikule lisab iPhone JavaScripti window objektile paar uut meetodit ja omadust, mis on siis seotud ekraani orientatsiooniga.

1. window.orientation - omadus, mis sisaldab endas hetke ekraani orientatsiooni. Väärtuseks on üks järgmisest massiivist [0, 90, -90]. Kui omaduse väärtus on 90, siis "Home" nupp jääb ekraanist paremale.

2. window.onorientationchange - sündmus, mis rakendub kui kasutaja keerab telefoni, nii et ekraani orientatsioon muutub.

Näitena, et kuidas kõike seda kokku panna valmistasin lihtsa veebilehe, mis käitub täpselt vastavalt kirjeldatule. Täiendavalt saab aplikatsioon aru, et kas seda vaadatakse veebivaades või aplikatsioonivaates ning käitub vastavalt (veebivaates näitab juhendit, kuidas aplikatsiooni "installida").

Näite leiab siit (ava iPhone või iPod touch brauseris, lähtekoodi võid vaadata suvalise brauseriga).




Kommentaare ei ole: