Introduzione allo sviluppo SDK webOS

Questa serie di tutorial ti guiderà attraverso il processo di iniziare con lo sviluppo di app webOS. In questo tutorial, imparerai come installare l'ambiente di sviluppo webOS e creare una semplice applicazione. Nelle parti successive di questa serie, creeremo un'applicazione utilizzabile che consente di sfogliare e visualizzare gli ultimi articoli sulla rete tuts +.

Informazioni su webOS

Oggi, le applicazioni web sono comuni grazie ai progressi dei moderni browser web. Sui dispositivi mobili, tuttavia, la maggior parte delle applicazioni vengono eseguite localmente e sono costruite con un linguaggio di programmazione compilato come Objective-C o Java. Poiché sono costruiti per uno specifico dispositivo mobile, sono molto difficili da trasferire su un sito Web o su un'altra piattaforma mobile.

Il sistema operativo di Palm per dispositivi mobili (ad es. Palm Pre e Pixi) è opportunamente chiamato webOS. Una delle caratteristiche distintive di webOS è che rende tutte le applicazioni Web per dispositivi create con HTML, CSS e Javascript utilizzando il framework Javascript Mojo. Anche le app native Palm sul dispositivo sono applicazioni web. Con l'aiuto di HTML5, le app webOS possono memorizzare dati localmente, disegnare grafica 2D e transizioni / animazioni CSS. Possono anche chiamare i servizi Web tramite AJAX per accedere a dati locali o remoti.

Mojo Javascript Framework segue vagamente lo schema Model-View-Controller (MVC). Le viste sono scritte in HTML e CSS, mentre i controller che controllano la logica dell'applicazione sono scritti in Javascript. Mojo include anche una serie di elementi dell'interfaccia utente comuni, come elenchi, pulsanti, contenitori, finestre di dialogo, indicatori e selettori. Per accedere ai livelli inferiori del sistema operativo, Mojo viene fornito con un set di API Javascript per interfacciarsi con i servizi del dispositivo (ad esempio allarmi, contatti, calendari, foto) o componenti hardware (ad esempio GPS, display, fotocamera, alimentatore).

In breve, se conosci HTML, CSS e Javascript, puoi facilmente creare applicazioni per webOS!

Iniziare

Per iniziare a creare app per webOS, è necessario scaricare e installare il kit di sviluppo software Palm webOS. L'SDK webOS è disponibile per OS X, Linux e Windows. Dovrai seguire le ultime istruzioni di Palm per configurare il tuo ambiente di sviluppo webOS.

Dopo aver installato l'SDK, puoi utilizzare qualsiasi editor di testo o IDE per creare i tuoi file di codice sorgente. È disponibile un plug-in di sviluppo WebOS per Eclipse, ma personalmente preferisco utilizzare l'eccellente Komodo Edit di ActiveState con un plug-in di terze parti per lo sviluppo webOS. In questo tutorial, utilizzeremo il metodo della riga di comando.

Creazione della prima applicazione webOS

Per iniziare con un'app ciao mondo, digita quanto segue dalla tua riga di comando / terminale:

 palm-generate helloWorld

Questo comando creerà una directory denominata "helloWorld" che includerà la struttura di directory necessaria per la nostra app.

Diamo un'occhiata a quella struttura per un momento:

• App: Contiene gli assistenti e le viste della tua applicazione. Maggiori informazioni su questi più tardi.
• immagini: Contiene le immagini utilizzate nella tua applicazione.
• fogli di stile: Contiene il foglio di stile CSS per la tua applicazione.
• appinfo.json: Contiene informazioni sull'applicazione.
• framework_config.json: Contiene informazioni sulla configurazione del framework.
• index.html: File principale / iniziale.
• sources.json: Contiene un elenco di file sorgente per ogni scena
• icon.png: L'icona che rappresenta la tua applicazione nel launcher e nel catalogo di app

Ora diamo un'occhiata più da vicino a appinfo.json. Apri il file nel tuo editor di testo preferito:

"id": "com.yourdomain.helloworld", "version": "1.0.0", "fornitore": "My Company", "tipo": "web", "main": "index.html", "title": "helloWorld", "icon": "icon.png"

I parametri più importanti in questo file sono:

• "Id": Questo è l'ID della tua applicazione e deve essere unico per tutte le applicazioni disponibili. Si consiglia di utilizzare il proprio nome di dominio (se ne possiedi uno).
• "Venditore": Usa il nome della tua azienda (se ne hai uno) o il tuo nome.

Diamo uno sguardo a index.html. È un file HTML standard e imposta le basi per la tua applicazione, facendo cose come caricare il framework mojo e il foglio di stile principale.

Per testare la nostra applicazione useremo l'emulatore webOS su una versione x86 di webOS in esecuzione con VirtualBox. Sull'emulatore non sono supportate tutte le funzionalità hardware. L'indisponibilità sia della fotocamera del dispositivo che della funzionalità multitouch dello schermo sono esempi di limitazioni del simulatore, ma i comandi speciali possono aiutarci a superare questi limiti. Ad esempio, è possibile emettere un comando per simulare una chiamata o un messaggio di testo in entrata.

I seguenti comandi del sistema operativo avvieranno l'emulatore webOS:

• Linux: Digitare "palm-emulator" nel prompt dei comandi
• Mac OS X: Nella cartella Applicazioni, fare doppio clic sull'icona Palm Emulator
• finestre: Start> Tutti i programmi> Palm> SDK> Palm Emulator

Vai avanti ed esegui un'istanza dell'emulatore. Gioca un po 'con la funzionalità.

Per preparare la nostra applicazione in modo che possa essere eseguita su webOS, digitare quanto segue nella riga di comando dalla directory che contiene la cartella "helloWorld":

 palm-package helloWorld

Il risultato è il nostro file di pacchetto installabile: com.yourdomain.helloworld_1.0.0_all.ipk. Si noti che il nome file contiene l'id e la versione dal file appinfo.json.

Ora, installa l'applicazione con il seguente comando:

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

Avvia l'applicazione nell'emulatore:

Estendi l'applicazione

Ora abbiamo la nostra prima applicazione su un runnning, ma non è molto eccitante. Aggiungiamo un po 'più di contenuto.

Per riempire il nostro palco con la vita andiamo avanti e creiamo la prima scena. Le scene sono le stesse di diverse pagine su un sito web. Le scene possono essere spinte sul palco, spuntate dal palco o scambiate con un'altra scena.

 palm-generate -t ​​new_scene -p "name = first" helloWorld

Questo crea due file: la vista in app / views / first / first-scene.html e l'assistente per la scena in app / assistants / first-assistant.js.

Apri first-scene.html e modificalo per contenere quanto segue:

 
 
Prima scena
 
Benvenuto nel mio mondo
 

Si noti i nomi di classe che iniziano con "palm-"; questi stili sono inclusi in Mojo Framework, ma possono essere espansi o modificati nel proprio foglio di stile.

Ora modifichiamo stage-assistant.js per mostrare la nostra nuova scena all'avvio dell'applicazione:

 function StageAssistant () / * questa è la funzione creator per il tuo oggetto stage assistant * / StageAssistant.prototype.setup = function () / * questa funzione è per le attività di configurazione che devono verificarsi quando lo stage viene creato per la prima volta * / Mojo.Controller.stageController.pushScene ( "prima"); ;

impacchetta l'applicazione e reinstallala. Ecco il risultato:

Aggiungiamo un'altra scena e la chiamiamo quando l'utente preme un pulsante sulla prima scena:

 palm-generate -t ​​new_scene -p "name = second" helloWorld

Ora dobbiamo aggiungere un pulsante alla prima scena. Cambia first-scene.html nel modo seguente:

 
 
Prima scena
 
Benvenuto nel mio mondo
 
 

Per vedere effettivamente quel pulsante, abbiamo bisogno di impostare il widget del pulsante nel codice di setup dell'assistente della prima scena. Modifichiamo first-assistant.js per farlo:

 FirstAssistant.prototype.setup = function () / * questa funzione è per le attività di configurazione che devono verificarsi quando la scena viene creata per la prima volta * / / * usa Mojo.View.render per rendere i modelli di visualizzazione e aggiungerli alla scena, se necessario. * / / * widget di installazione qui * / / * aggiungi gestori di eventi per ascoltare eventi dai widget * / this.controller.setupWidget ("button1", this.attributes = , this.model = label: "OK", disabilitato: falso); this.handleButton1 = this.handleButtonPress1.bindAsEventListener (questo); Mojo.Event.listen (this.controller.get ("button1"), Mojo.Event.tap, this.handleButton1); 

Si noti che facciamo riferimento al pulsante tramite il suo id: "button1". Abbiamo anche aggiunto funzionalità per fare realmente qualcosa quando premiamo il pulsante. Per questo, prima creiamo un gestore di eventi, this.handleButton1. Successivamente creeremo la funzione necessaria handleButtonPress1. La riga successiva, Mojo.Event.listen, imposta il pulsante in alto per ascoltare i tocchi e chiama il nostro gestore di eventi se viene ricevuto un tocco.

Creiamo il nostro gestore di eventi che gestisce le pressioni dei pulsanti. Il nostro gestore di eventi spinge la nostra seconda scena sul palco:

 FirstAssistant.prototype.handleButtonPress1 = function (event) Mojo.Controller.stageController.pushScene ("second"); 

Infine, modifichiamo second-scene.html per contenere qualcosa di utile:

 
 
Seconda scena
 
Questa è la seconda scena
 

Ok, ora imballiamo e reinstalliamo. Questo dovrebbe essere il risultato finale:

Incartare

Ti è appena stato fatto un giro vorticoso sullo sviluppo di applicazioni per webOS. Nella prossima parte di questa serie, costruiremo un'app per visualizzare e leggere gli ultimi articoli della rete tuts +. Lascia commenti e commenti qui sotto per farci sapere cosa ne pensi di questa serie!