Desarrollando aplicaciones para Ubuntu [QML]

Instalando Ubuntu SDK

Ubuntu SDK es un IDE que nos proporciona las herramientas que necesitamos para desarrollar una aplicación esta basado en QTCreator.

sudo apt-get install ubuntu-sdk

Si una vez instalado lo abrimos y nos aparecerá esto:

Documentación

Podemos encontrar mucha información en la web de desarrolladores de Ubuntu,  tutoriales, api …

Dentro del mismo Ubuntu SDK podemos encontrar apartados de los cuales podemos aprender, ver código … Las categorías son Help, Wiki, Core Apps y API.

En API podemos encontrar toda la api de Ubuntu.Components 0.1 que son los componentes que usaremos para crear la app.

En Core Apps nos muestra la web ubuntu-phone-coreapps de launchpad donde podremos encontrar el código de varias aplicaciones. En Help podemos ver algunos  manuales que nos ayudaran a empezar.

Web donde podemos encontrar un tutorial para parsear json con qml y javascript.

Creando una aplicación (un Cliente)

Para ver un ejemplo crearemos un cliente, del cual ya hable un poco aquí.

Creamos un proyecto nuevo:  File -> New File or Project

Y seleccionamos Simple Touch UI. A hora que ya tenemos creado nuestro proyecto nos ha aparecerá estructurado, con algunos ficheros y algunas carpetas, si ejecutamos ahora nos saldrá una aplicación de ejemplo, que no usaremos o usaremos parcialmente como punto base para crear la nuestra.

 

Si ahora le añadimos un listView con un modelo el cual coja los datos Json de los cómics como por ejemplo el titulo tendremos:

Creamos un fichero llamado data.js, para crear dicho fichero click derecho en el proyecto Add new -> Qt -> JS file:

Podemos ver como parseamos el json cogiendo solo el array results donde para cada result obtendremos su titulo.

console.log és como hacer un print para consola.

Por ultimo ponemos en marvel.qml arriba donde se encuentran los imports

import "data.js" as Data

Resultado:

Imaginemos que queremos darle un mejor aspecto a nuestra aplicación, por ejemplo en ves de mostrarse solo el titulo que muestre una imagen. y poderlas desplazar horizontalmente, pues vamos a ello:

Añadimos la propiedad orientation en el listview

orientation: ListView.Horizontal

Tamén canviamos el Text por una imagen:

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

Y en el data.js añadimos el thumbnail

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

Podemos ver el resultado:

Bien ahora podríamos hacer multitud de funciones para que haga nuestra aplicación como que al hacer click a la imagen nos mostrara información, un buscador de personajes … Pero dejaremos aquí el ejemplo.

Packaging

Finalmente solo nos queda crear nuestro package, vamos a Packaging:

Podemos ver que tenemos que rellenar algunos campos. Como por ejemplo si hace uso de internet … , cuando lo tengamos todo completo le damos a create package el cual nos creara un fichero .click para que podamos instalar la aplicación.

Conclución (GTK3 o QML)

En cuestión de aspecto, personalmente a mi me gusta bastante gtk pero el grado de «modificación» de este deja bastante que desear, en cambio con qml puedes personalizar mucho la UI a demás también dispone de Componentes (Desktop Components) que dejan la apariencia como si fuera gtk.