Introducere în dezvoltarea SDK pentru webOS

Această serie de tutori vă va ghida în procesul de dezvoltare a aplicațiilor webOS. În acest tutorial, veți învăța cum să instalați mediul de dezvoltare webOS și să creați o aplicație simplă. În părțile ulterioare ale acestei serii, vom crea o aplicație utilizabilă care vă permite să navigați și să afișați cele mai recente articole din rețeaua tuts +.

Despre webOS

Astăzi, aplicațiile web sunt frecvente datorită progreselor înregistrate în browserele web moderne. Cu toate acestea, pe dispozitive mobile, majoritatea aplicațiilor rulează local și sunt construite cu un limbaj de programare compilat, cum ar fi Obiectiv-C sau Java. Deoarece sunt construite pentru un anumit dispozitiv mobil, acestea sunt foarte dificil de portat pe un site web sau pe o altă platformă mobilă.

Sistemul de operare Palm pentru dispozitive mobile (de exemplu, Palm Pre și Pixi) este numit în mod corespunzător webOS. Una dintre caracteristicile deosebite ale webOS este faptul că face ca toate aplicațiile de aplicații web să fie create cu HTML, CSS și Javascript, utilizând Mojo Javascript Framework. Chiar și aplicațiile Palm native de pe dispozitiv sunt aplicații web. Cu ajutorul HTML5, aplicațiile webOS pot stoca date la nivel local, pot desena grafică 2D și pot face tranziții / animații CSS. De asemenea, pot apela servicii web prin intermediul AJAX pentru a accesa datele de la distanță sau locale.

Mojo Javascript Framework respectă modelul Model-View-Controller (MVC). Viziunile sunt scrise în HTML și CSS, în timp ce controlorii care controlează logica aplicațiilor sunt scrise în Javascript. Mojo include, de asemenea, un set de elemente UI comune, cum ar fi Liste, Butoane, Containere, Dialoguri, Indicatori și Pickers. Pentru a accesa straturile inferioare ale sistemului de operare, Mojo vine cu un set de API-uri Javascript pentru a interfața cu serviciile dispozitivului (de exemplu, Alarme, Contacte, Calendare, Fotografii) sau componente hardware (de exemplu GPS, Display, Camera,.

Pe scurt, dacă știți HTML, CSS și Javascript, puteți crea cu ușurință aplicații pentru webOS!

Noțiuni de bază

Pentru a începe să construiți aplicații pentru webOS, va trebui să descărcați și să instalați PalmOS Software Development Kit. SDOS-ul webOS este disponibil pentru OS X, Linux și Windows. Va trebui să urmați cele mai recente instrucțiuni de la Palm pentru a vă configura mediul de dezvoltare webOS.

După ce ați instalat SDK-ul, puteți utiliza orice editor de text sau IDE pentru a crea fișierele cu cod sursă. Există un plugin de dezvoltare webOS disponibil pentru Eclipse, dar personal prefer să utilizez excelentul ActiveState's Komodo Edit cu un plugin de third party pentru dezvoltarea webOS. În acest tutorial, vom folosi metoda liniei de comandă.

Crearea primei aplicații webOS

Pentru a începe cu o aplicație de salut lume, tastați următoarele din linia de comandă / terminal:

 palm-genera helloWorld

Această comandă va crea un director numit "helloWorld" care va include structura de directoare necesară pentru aplicația noastră.

Haideți să aruncăm o privire asupra acestei structuri pentru un moment:

• aplicaţia: Conține asistenții și vizualizările aplicației dvs. Mai multe despre acestea mai târziu.
• imagini: Conține imagini utilizate în aplicația dvs..
• stylesheets: Conține foaia de stil css pentru aplicația dvs..
• appinfo.json: Conține informații despre aplicație.
• framework_config.json: Conține informații despre configurația cadru.
• index.html: Fișier principal / de pornire.
• sources.json: Conține o listă de fișiere sursă pentru fiecare scenă
• icon.png: Pictograma care reprezintă aplicația dvs. în lansator și catalogul de aplicații

Acum, să aruncăm o privire mai atentă la appinfo.json. Deschideți fișierul în editorul dvs. de text preferat:

"id": "com.yourdomain.helloworld", "versiune": "1.0.0", "furnizor": "Compania mea", "tip": "web", "main": "index.html" "titlu": "helloWorld", "icon": "icon.png"

Parametrii cei mai importanți din acest fișier sunt:

• "Id": Acesta este ID-ul aplicației dvs. și trebuie să fie unic pentru toate aplicațiile disponibile. Este recomandat să utilizați propriul nume de domeniu (dacă dețineți unul).
• „Vânzător“: Utilizați numele companiei dvs. (dacă aveți unul) sau propriul nume.

Apoi, aruncați o privire la index.html. Este un fișier HTML standard și stabilește scenariul pentru aplicația dvs., făcând lucruri precum încărcarea cadrului mojo și a foii de stil principale.

Pentru a testa aplicația noastră, vom folosi emulatorul webOS pe o platformă x86 a webOS care rulează cu VirtualBox. Nu toate caracteristicile hardware sunt acceptate pe emulator. Indisponibilitatea atât a aparatului foto cât și a capacității multitouch a ecranului sunt exemple de limitări ale simulatorului, însă comenzi speciale ne ajută să depășim aceste limitări. De exemplu, este posibil să emiteți o comandă pentru a simula un apel sau un mesaj text.

Următoarele comenzi ale sistemului de operare vor porni emulatorul webOS:

• Linux: Introduceți "emulator de palmă" în promptul de comandă
• Mac OS X: În dosarul Aplicații, faceți dublu clic pe pictograma Emulator Palm
• ferestre: Start> Toate programele> Palm> SDK> Emulator Palm

Mergeți și executați o instanță a emulatorului. Redați-vă puțin funcționalitatea.

Pentru a împacheta aplicația noastră astfel încât să poată fi rulat pe webOS, tastați următoarele în linia de comandă din directorul care deține folderul "helloWorld":

 palm-pachetul helloWorld

Rezultatul este fișierul nostru pachet instalabil: com.yourdomain.helloworld_1.0.0_all.ipk. Rețineți că numele fișierului conține id-ul și versiunea din fișierul appinfo.json.

Acum, instalați aplicația cu următoarea comandă:

 palm-install com.yourdomain.helloworld_1.0.0_all.ipk

Lansați aplicația în emulator:

Extindeți aplicația

Acum avem prima cerere de alergare, dar nu este foarte interesantă. Să adăugăm conținut suplimentar.

Pentru a umple etapa noastră cu viață, mergem înainte și creăm prima scenă. Scenele sunt aceleași cu diferitele pagini de pe un site web. Scene pot fi împinse pe scenă, au ieșit din scenă sau au fost schimbate cu altă scenă.

 palm-generate -t ​​new_scene -p "nume = primul" helloWorld

Aceasta creează două fișiere: vizualizarea în app / views / first / first-scene.html și asistentul pentru scenă la app / assistants / first-assistant.js.

Deschideți first-scene.html și editați-l pentru a conține următoarele:

 
 
Prima scenă
 
Bun venit in lumea mea
 

Observați numele de clasă care încep cu "palmierul"; aceste stiluri sunt incluse în Cadrul Mojo, dar pot fi extinse sau modificate în foaia de stil proprie.

Acum, editează stage-assistant.js pentru a afișa noua scenă când începe aplicația:

 funcția () / * aceasta este funcția creatoare a obiectului asistentului de scenă * / StageAssistant.prototype.setup = function () / * această funcție este pentru sarcinile de configurare care trebuie să se întâmple când scena este creată inițial * / Mojo.Controller.stageController.pushScene ( "primul"); ;

pachet aplicația și reinstalați-o. Iată rezultatul:

Să adăugăm încă o scenă și să sunăm atunci când utilizatorul apasă un buton în prima scenă:

 palm-generate -t ​​new_scene -p "nume = al doilea" helloWorld

Acum trebuie să adăugăm un buton la prima scenă. Modificați first-scene.html la următoarele:

 
 
Prima scenă
 
Bun venit in lumea mea
 
 

Pentru a vedea efectiv acel buton, trebuie să setăm widget-ul butonului din codul de instalare al asistentului primei scene. Să editați primul asistent.js pentru a face acest lucru:

 FirstAssistant.prototype.setup = function () / * această funcție este pentru sarcinile de configurare care trebuie să se întâmple când scena este creată inițial * / / * utilizați Mojo.View.render pentru a reda șabloanele de vizualizare și a le adăuga la scenă, dacă Necesar. * / / * widget-uri de configurare aici * / / * adăugați agenți de gestionare a evenimentelor pentru a asculta evenimente din widgeturi * / this.controller.setupWidget ("button1", this.attributes = , this.model = label: dezactivat: false); this.handleButton1 = this.handleButtonPress1.bindAsEventListener (aceasta); Mojo.Event.listen (acest.controller.get ("butonul1"), Mojo.Event.tap, this.handleButton1); 

Rețineți că trimitem butonul prin id-ul său: "button1". De asemenea, am adăugat funcționalitatea pentru a face ceva când apăsăm butonul. Pentru aceasta, vom crea mai întâi un handler de evenimente, this.handleButton1. Vom crea funcția necesară handleButtonPress1 următor. Următoarea linie, Mojo.Event.listen, stabilește butonul în sus pentru a asculta robinetele și pentru a apela dispozitivul de tratare a evenimentului dacă este primit un robinet.

Să creați un handler de evenimente care să se ocupe de apăsarea butoanelor. Manipulatorul evenimentului nostru doar împinge a doua scenă la scenă:

 FirstAssistant.prototype.handleButtonPress1 = funcție (eveniment) Mojo.Controller.stageController.pushScene ("second"); 

În cele din urmă, vom edita a doua scenă.html pentru a conține ceva util:

 
 
A doua scenă
 
Aceasta este a doua scenă
 

Bine, acum să pregătim pachetul și să îl reinstalam. Acesta ar trebui să fie rezultatul final:

Învelire

Tocmai v-ati dat un tur tur al dezvoltarii aplicatiilor pentru webOS. În următoarea parte a acestei serii, vom construi o aplicație care să afișeze și să citească cele mai recente articole din rețeaua tuts +. Lăsați comentarii și feedback de mai jos pentru a ne spune ce credeți despre această serie!