Desenvolupant aplicacions per Ubuntu [QML]

Instal·lant Ubuntu SDK

Ubuntu SDK és un IDE que ens proporciona les eines que necessitem per desenvolupar una aplicació està basat en QTCreator.

sudo apt-get install ubuntu-sdk

Si un cop instal·lat l'obrim i ens apareixerà això:

Documentació

Podem trobar molta informació a la web de desenvolupadors d'Ubuntu, tutorials, api ...

Dins el mateix Ubuntu SDK podem trobar apartats dels quals podem aprendre, veure codi ... Les categories són Help, Wiki, Core Apps i API.

En API podem trobar tota la api de Ubuntu.Components 0.1 que són els components que farem servir per crear l'app.

En Core Apps ens mostra la web ubuntu-phone-coreapps de launchpad on podrem trobar el codi de diverses aplicacions. En Help podem veure alguns manuals que ens ajudaran a començar.

Web on podem trobar un tutorial per parsejar json amb QML i javascript.

Creant una aplicació (un Client)

Per veure un exemple crearem un client, de el qual ja parli una mica ací.

Vam crear un projecte nou: File -> New File or Project

I seleccionem Simple Touch UI. A hora que ja tenim creat el nostre projecte ens ha apareixerà estructurat, amb alguns fitxers i algunes carpetes, si executem ara ens sortirà una aplicació d'exemple, que no farem servir o farem servir parcialment com a punt base per crear la nostra.

 

Si ara hi afegim un ListView amb un model el qual agafi les dades JSON dels còmics com ara el títol tindrem:

Creem un fitxer anomenat data.js, per crear aquest fitxer click dret en el projecte Add new -> Qt -> JS file:

Podem veure com parseamos el json agafant només la matriu results on per a cada result obtindrem el seu títol.

console.log és com fer un print per a consola.

Per últim posem en marvel.qml dalt on es troben els imports

import "data.js" as Data

resultat:

Imaginem que volem donar-li un millor aspecte a la nostra aplicació, per exemple en veus de mostrar-sol el títol que mostri una imatge. i poder-les desplaçar horitzontalment, ja que anem a això:

Afegim la propietat orientation al listview

orientation: ListView.Horizontal

Tamen canviem el Text per una imatge:

Image {
width: 200; height: 150
fillMode: Image.PreserveAspectFit
source: thumbnail+".jpg"
}

I en el data.js afegim la miniatura

marvelModel.append({id: i.id, title: i.title, thumbnail: i.thumbnail.path});

Podem veure el resultat:

Bé ara podríem fer multitud de funcions perquè faci la nostra aplicació com que a l'fer clic a la imatge ens mostrés informació, un cercador de personatges ... Però deixarem aquí l'exemple.

Embalatge

Finalment només ens queda crear el nostre package, anem a Packaging:

Podem veure que hem d'omplir alguns camps. Com per exemple si fa ús d'internet ..., quan ho tinguem tot complet li donem a create package el qual ens creés un fitxer .click perquè puguem instal·lar l'aplicació.

Conclusió (GTK3 o QML)

En qüestió d'aspecte, personalment a mi m'agrada bastant gtk però el grau de «modificació» d'aquest deixa bastant que desitjar, en canvi amb QML pots personalitzar molt la UI a més també disposa de Components (Desktop Components) que deixen l'aparença com si fos gtk.