La tua prima app per Ubuntu Touch

transcript

Credits image: http://mycolorscreen.com/2013/10/20/a-touch-of-ubuntu/

Autore: Flavius Florin Harabor e-mail: ffinformaticus@gmail.com

Si inizia

Che cosa ti serve?

Come sempre se vuoi sviluppare qualcosa hai bisogno di tutta una serie di strumenti

A te in questo caso ti basterà avere una distro Ubuntu e Ubuntu SDK e il gioco è fatto.

Che cos'è Ubuntu SDK?L'ambiente Ubuntu SDK o meglio il nuovo Software Developer Kit di Ubuntu, è un ambiente di sviluppo completo di IDE e supporto per l'esecuzione di app sia dal lato client desktop, ma anche dal lato dei device mobile come smartphone e tablet, con Ubuntu.

Grazie al Ubuntu SDK si ha la possibilità di scrivere app con diversi framework come:

● QML, è un framework basato sul progetto Qt➔ HTML5➔ Scoper, è il framework che da la possibilità di creare e presentare il contenuto nella

Dash di Ubuntu➔ OpenGL.

La guida per installare Ubuntu SDK la trovi qui => http://goo.gl/DViheL

Dopo aver scoperto cosa ci serve e di che cosa si tratta andiamo insieme a vedere che cosa dobbiamo fare e come sviluppare la nostra prima applicazione per Ubuntu Touch, che gira anche sulla nostra versione desktop di Ubuntu.

Questo è Ubuntu SDK

Si inizia

Una volta avviato Ubuntu SDK andare su File => New File or Project

Si continua con il passo due

Nella nuova schermata selezionate nella colonna di sinistra la voce Ubuntu e poi subito nella colonna centrale selezionate la voce Simple UI poi continuate.

Si continua con il passo tre

In questa schermata selezionate lo spazio dove salvare le sorgenti della vostra applicazione e anche il nome. Nel nostro caso si chiamerà HelloWorld.

Si continua con il passo quattro

In questa schermata andate su Bazzare, questa funzione vi da la possibilità di creare le versioni della vostra app in modo automatico, potete anche lasciala come nello screen. Alla fine di tutto cliccate su Finish.

Si continua con il passo quinto

Ecco questa è la base della nostra applicazione. Il nostro IDE andrà a generare in automatico il codice base da cui partire nello sviluppo di una prima applicazione per Ubuntu Touch.

Si continua con il passo quinto bis

Se cliccate sul tasto a forma di punta di freccia ( quello verde, in basso a sinistra ) dovreste avere questo primo risultato.

Si continua con il passo sesto

Cliccando sul tasto Design ( quarto tasto dal panello a sinistra ) potete organizzare il design della vostra applicazione aggiungendo nuove funzioni grafiche, che poi andrete ad implementare, per far si che esse funzionino e rendano la vostra applicazione attiva e funzionante secondo i vostri gusti e idee.

Adesso che si fa?!?

Bene adesso andiamo a vedere che cosa si può fare e come si può modificare questo codice.

Analizziamo e modifichiamo il codice

Questa sarà la nostra prima app Hello World, che abbiamo modificato e resa più nostra. Quindi andiamo ad analizzare il codice sorgente, che sta dietro alla nostra prima applicazione base per Ubuntu Touch e Ubuntu Desktop.

Nel nostro file principale del progetto, cioè HelloWorld.gml troviamo tutta la serie di parametri che implementano l'interfaccia della nostra applicazione.

Ognuno di questi parametri è annidato con le parentesi graffe {}.

Il container (contenitore) principale è il MainView, al suo interno troviamo poi Page, che al suo interno contiene Column, HelloComponent e Button.

HelloComponent è definito fuori dalla nostra libreria e si trova nella cartella components.

Va detto e precisato sin da subito, che è necessario usare lo stesso nome per il file del componente.

Questo metodo di includere così le varie componenti di un'applicazione, ci consente di condividere il codice tra le varie applicazioni che andrete ad implementare e sviluppare in futuro, ma anche di riutilizzarlo all'interno dello stesso progetto. Vedremo più avanti che cosa contiene questo file.

Visto che questa è una tipica abitudine della programmazione a oggetti, colgo l'occasione di rimandarvi a un ripasso veloce in queste pagine(clicca qui).

Ritorniamo al nostro file principale del progetto.

Quindi, come dicevo prima, all'interno del nostro componente HelloComponent abbiamo dichiarato l'id, la sua posizione all'interno della finestra della nostra applicazione, la sua grandezza, il suo objectName, il colore e per finire il testo e la sua dimensione.

Come anticipato prima, esiste anche il componente Button, altro non è che un componente tipico da Ubuntu e vi darà la possibilità di implementare e visualizzare i vari pulsanti. Nella nostra applicazione Hello World, ha lo scopo di cambiare il testo all'interno del componente HelloComponent.

All'interno del componente Button abbiamo dichiarato la sua posizione sull'asse x e asse y, la sua dimensione, il suo objectName, il suo colore, il testo e la sua dimensione e per finire l'azione che deve svolgere una volta azionato.

Cioè una volta cliccato, andrà a cambiare il testo all'interno del HelloComponent.

Nota Importante

All'interno del codice, della nostra applicazione, compare frequentemente la dichiarazione text: i18n.tr() oppure title: i18n.tr().

Questa particolare dichiarazione ha lo scopo di rendere più facile l'interpretazione e la traduzione da parte della funzione gettext.

Questa è una funzionalità principale e chiave del tool kit di Ubuntu User Interface, è la capacità di scalare a tutti i form factor possibili definiti dagli utenti.

Tutto ciò, ha portato il team di sviluppo nell'implementare e definire una nuova unità di misura, cioè grid unit.

Una volta dichiarate e implementate le grid unit o gu, esse vengono tradotte in pixel in funzione al tipo di schermo e del device sul quale l'applicazione gira.

Esempio:1 gu = 8 pixel => sullo schermo di un portatile1 gu = 16 pixel => sullo schermo di un portatile retina1 gu = 8 pixel => sullo schermo di uno smartphone

Quindi all'interno della nostra applicazione abbiamo implementato 1 gu per lo spacing, e 2 gu per il margin.

Continuando l'analisi del nostro codice sorgente, della nostra Hello World e spostandoci nel container principale MainView, possiamo trovare l'implementazione che decide la dimensione della nostra applicazione, con altezza e larghezza.

Di default la nostra app viene generata con width: units.gu(100) e height: units.gu(75) avendo per risultato questo:

Invece io per comodità ho utilizzato questa implementazione: width: 500 e height: 400, avendo per risultato questo:

Cioè mi trovo ad avere una schermata della mia applicazione più piccola e non direttamente proporzionale al mio schermo. La chiave della dimensione dell'applicazione sta nell'unità di misura GU, come detto precedentemente.Va detto che è importante lavorare sulle dimensioni in base all'implementazione imposta dal tool kit di Ubuntu.

Visto che prima abbiamo parlato del HelloComponent.qml, andiamo a prendere in considerazione anche questo file del nostro progetto e vediamo che cosa fa di preciso.

Al suo interno troviamo il compomente UbuntuShape, che è quello che genera il rettangolo arrotondato, poi all'interno del componente UbuntuShape troviamo anche Lable.

Label ha al suo interno l'id myText e il parametro che indica il testo centrato.

Label ha una priorità text che può essere utilizzata per impostare il testo della lable, in più questa funzione può essere utile ad impostare il suo valore anche al di fuori del HelloComponent e negli altri file sorgenti della nostra applicazione.

Per questo motivo viene definita prima la funzione property alias text : myText.text. Questa riga di codice non fa altro che creare un alias per la priorità di myText.text e lo rende disponibile a tutti i componenti con alias text.

Altre app per Ubuntu Touch

Questo è uno dei due o tre appuntamenti dedicati a questo argomento, nel mentre vi lascio un link che vi mostra come installare e testare sulla vostra distro Ubuntu, dalla 12.04 LTS fino alla 14.04 LTS, tutte le varie app per Ubuntu Touch che in questo periodo sono state sviluppate da altre persone:

http://goo.gl/6QCaCl

Nota:Voi che avete installato già Ubuntu SDK, l'ultimo comando che dovete dare, è il seguente =>> $ sudo apt-get install touch-coreapps

Si inizia

Fonte img: http://www.unapsicologaroma.it/2013/03/20/quando-si-dice-unilluminazione/

Link >>> Fonti >>> Note

Note:➔ Questo è solo una parte riassuntiva di quello che è il mondo

Android e il suo cuore pulsante, non è una vera guida per iniziare a sviluppare le tue applicazioni.

➔ Tutte le foto/immagini, presenti all'interno di queste slide sono reperibili in rete e appartengono ai legittimi proprietari.

➔ Ricordo inoltre, che queste slide e questo lavoro sono coperte dalla CC v.4.

➔ Grazie a Benedetto Nespoli Bloggh Idee e Massimiliano Vigliotta, per le correzioni e le mie piccole sviste

➔ https://wiki.ubuntu.com/Touch/Install➔

➔ http://developer.ubuntu.com/➔

➔ http://developer.ubuntu.com/web/tutorial/➔

➔ https://plus.google.com/u/0/communities/111350780270925540549➔

➔ http://askubuntu.com/questions/tagged/application-development➔

➔ http://developer.ubuntu.com/api/qml/sdk-1.0/➔

➔ https://wiki.ubuntu.com/Touch/Devices/➔

➔ http://askubuntu.com/questions/235763/why-ubuntu-components-0-1-missing-from-qtcreator

CODICE SORGENTE Clicca Qui

USA LA FANTASIA

Accendi il cervello

La tua prima app per Ubuntu Touch

Mobile