Check the new version here

Popular channels

Desarrollando una aplicación para Ubuntu Phone OS 1

El objetivo será desarrollar una aplicación similar a Equival, pero para Ubuntu Phone OS, y hacerlo de forma paralela a la aplicación que estamos desarrollando para Android, para aquellos que quieran seguir ambas guías puedan hacerse una idea de las bondades o dificultades de cada una de las plataformas a la hora de programar.



Empezando por lo básico
Este primer artículo está basado del excelente tutorial “Como crear un conversor de moneda“, desarrollado por David Planella, he realizado, inicialmente, algunos cambios (pocos) para que se adapte a la aplicación que queremos desarrollar. Sin embargo, en futuros artículos, calculo que el tercero, el aspecto será completamente distinto, pero es necesario empezar por una base común.

Instalar las herramientas necesarias
El primer paso será instalar las herramientas necesarias para empezar a desarrollar aplicaciones para Ubuntu Phone OS. Indicar, que actualmente estas herramientas están disponibles únicamente para Quantal Quetzal, no para Precise Pangolin.

Lo primero es añadir los repositorios desde donde instalaremos estas herramientas. Primero para instalar Qt 5, dado que las herramientas QML para Ubuntu están implementadas sobre la última versión de Qt. Para instalarlo, añadimos el siguiente repositorio, actualizamos e instalamos:

sudo add-apt-repository ppa:canonical-qt5-edgers/qt5-beta1
sudo apt-get update
sudo apt-get install qt5-meta-full
echo 'export PATH=/opt/qt5/bin:$PATH' >> ~/.bashrc


El siguiente paso es instalar las herramientas de desarrollo de Ubuntu QML. Para ello, añadimos el siguiente repositorio, actualizamos e instalamos:


sudo add-apt-repository ppa:ui-toolkit/ppa
sudo apt-get update
sudo apt-get install qt-components-ubuntu qt-components-ubuntu-demos qt-components-ubuntu-examples qt-components-ubuntu-doc notepad-qml


Por último tenemos que instalar la aplicación sobre la que desarrollaremos nuestras aplicaciones para Ubuntu Phone OS, Qt Creator. Este lo puedes instalar fácilmente con solo hacer clic en el siguiente enlace, Qt Creator, que iniciará el Centro de Software de Ubuntu, que te permitirá con un solo clic instalar este edito


Empezando a programar Equival para Ubuntu Phone OS
Ahora ya tenemos todas las herramientas necesarias para programar nuestra aplicación. Nos ponemos manos a la obra, e iniciamos Qt Creator, que nos mostrará una interfaz como la que puedes ver en la siguiente imagen:



El primer inconveniente con el que nos vamos a encontrar, respecto a la programación orientada a Android, que vimos en los artículos mencionados con anterioridad, es que mientras que Eclipse nos permite ver la interfaz gráfica que estamos desarrollando durante su desarrollo, valga la redundancia, con Qt Creator no podemos. Este inconveniente se ve soslayado claramente por la rapidez con la que se puede probar una aplicación en comparación con lo que se tarda en el emulador de Android.

Una vez iniciado Qt Creator, tenemos que crear un nuevo proyecto. Para ello, seleccionamos File > New File or Project… (o utilizamos el atajo de teclado Ctrl+N) que nos mostrará un cuadro de diálogo como el siguiente:



Seleccionamos la opción “Qt Client UI”, como ves en la imagen anterior, y pulsamos el botón “Choose…”, que nos mostrará otro cuadro de diálogo adicional, donde podemos definir el nombre de la aplicación y donde lo tenemos que guardar. Aquí, hacer una observación, y es que si te fijas en la siguiente imagen, verás que he definido donde tiene que crear el proyecto y además he creado el directorio del proyecto. Esto no es correcto, porque nos encontraemos con una estructura como “~/qtaplicacions/Equival/Equival/”, solo debes indicar la primera parte “~/qtapplications/”, y Qt Creator, ya se encarga de crear el directorio en cuestión.



Al hacer clic en “Next”, nos dirige a la configuración del control de versiones, en mi caso he seleccionado Baazar que es con la que trabajo habitualmente, pero puedes dejarlo sin seleccionar ninguna, por ahora. Y te digo por ahora, porque es recomendable, muy recomendable, utilizar un sistema de control de versiones, para llevar un buen control y desarrollo de tu aplicación. Aunque esto ya lo veremos mas adelante.



Desde lo básico…

Llegados a este punto, Qt Creator, te crea “Equival.qmlproject”, que define los parámetros de esta aplicación, y “Equival.qml”, con una sencilla estructura como la que sigue:

[color=#000000][color=#000000] // import QtQuick 1.0 // to target Maemo 5
import QtQuick 1.1

Rectangle {
    width: 360
    height: 360
    Text {
        anchors.centerIn: parent
        text: "Hello World"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
} [/color][/color]


Esto lo podemos borrar, y añadimos lo necesario para nuestra interfaz, donde solo incluiré el título de la aplicación, los botones para seleccionar la unidad “desde” y “hasta”, así como las cajas de textos que nos permitirán introducir los valores que queremos convertir

[color=#000000][color=#000000]
import QtQuick 2.0
import Ubuntu.Components 0.1
import Ubuntu.Components.ListItems 0.1
import Ubuntu.Components.Popups 0.1

Rectangle {
    id: root
    width: units.gu(60)
    height: units.gu(30)
    color: "lightgray"

    property real margins: units.gu(2)
    property real buttonWidth: units.gu(9)

    Label {
       id: title
       ItemStyle.class: "title"
       text: i18n.tr("Equival")
       height: contentHeight + root.margins
       anchors {
           left: parent.left
           right: parent.right
           top: parent.top
       }
    }
    Column {
        id: pageLayout

        anchors {
            fill: parent
            margins: root.margins
            topMargin: title.height
        }
        spacing: units.gu(1)

        Row {
            spacing: units.gu(1)

            Button {
                id: selectorFrom
                property int unitIndex: 0
                property TextField input: inputFrom
                text: theunits.getUnit(unitIndex)
            }

            TextField {
                id: inputFrom
                errorHighlight: false
                validator: DoubleValidator {notation: DoubleValidator.StandardNotation}
                width: pageLayout.width - 2 * root.margins - root.buttonWidth
                height: units.gu(4)
                font.pixelSize: FontUtils.sizeToPixels("medium")
                text: '0.0'
            }
        }

        Row {
            spacing: units.gu(1)
            Button {
                id: selectorTo
                property int unitIndex: 1
                property TextField input: inputTo
                text: theunits.getUnit(unitIndex)
            }

            TextField {
                id: inputTo
                errorHighlight: false
                validator: DoubleValidator {notation: DoubleValidator.StandardNotation}
                width: pageLayout.width - 2 * root.margins - root.buttonWidth
                height: units.gu(4)
                font.pixelSize: FontUtils.sizeToPixels("medium")
                text: '0.0'
            }
        }

        Button {
            text: i18n.tr("Clear")
            width: units.gu(12)
            onClicked: {
                inputTo.text = '0.0';
                inputFrom.text = '0.0';
            }
        }
    }
}
[/color][/color]


Para verlo en funcionamiento, necesitamos realizar una pequeña modificación en la configuración de Qt Creator, que consiste en indicar cual es el previsualizador a utilizar. Para ello seleccionas Tools > Options > Environment > External Tools. Seleccionas Qt Quick, y Preview (qmlviewer), tal y como puedes ver en la siguiente imagen, e indicas la dirección donde se encuentra el ejecutable:

[color=#000000][color=#000000]/opt/qt5/bin/qmlscene[/color][/color]

Ahora ya puedes ver el resultado de tu diseño preliminar, para ello seleccionas Tools > External > Qt Quick > Preview, y verás algo como esto:



Esto nos da el siguiente resultado cuando lo ponemos en marcha:



Más informaciónUbuntu, API



0
6
0
0
6Comments
      slaverer

      una pregunta que lenguaje estas usando para programar? a simple vista no lo reconsco

      0
      OrlSan

      Te sugiero usar code para introducir tu código fuente, para que la sangría se conserve y sea más legible. Por lo demás, te doy +5. Buen aporte.

      0
      GETH2358

      +10 te los merces.

      0
      The_usbac
      1. No puedo esperar Ubuntu Phone 🤤

      2. Muy bueno tu trabajo se ve interesante lo de desarrollar aplicaciones en esta plataforma. Salu2 😁

      0
      vamaradelli

      con que ganas espero ese OS...

      0
      jlauriente

      Ubuntu Phone OS 🤤

      0