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.

Comparte para difundir

Si te ha gustado nuestro contenido ahora puedes ayudar a difundirlo en las redes sociales de manera sencilla usando los siguientes botones:

Envía
Pinea
Print

2 comentarios

  1.   r@y dijo

    Solo una aclaracion, Ubuntu SDK NO es un IDE ni esta basado el QtCreator, es como su nombre lo indica un Kit de desarrollo que se puede integrar al QtCreator.

  2.   Cuelebre dijo

    Me he puesto hoy a seguir este y los otros tres tutoriales, pero cuando trato de darle un run al proyecto se me sale de la aplicación, ¿Podrias decirme si existe algún tipo de problema?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.