QML: tutorial básico

EL objetivo de estos tutoriales es familiarizarse con la integración de objetos Lista QML en nuestras aplicaciones. Por ese motivo se incluyen 2 objetos Lista QML que utilizan dos ficheros de Script QML muy sencillos y que incluyen comentarios explicando las palabras clave y las señales a definir y gestionar en el QML.

Ambos ejemplos se basan en la tabla de artículos del tutor (ART_M) e incluyen información en las propiedades:

Contenido: texto a incluir en la variable display del QML.

URL imagen: imagen para visualizar en la variable decoration del QML.

Primer ejemplo

Muestra cómo debemos configurar el Script de QML para que Velneo sea capaz de integrar el modelo de datos para visualizar información de la base de datos en el objeto QML.

Segundo ejemplo

Parte del primer ejemplo y añade a éste la posibilidad de interactuar objetos de Velneo con el QML. Se incluye el código necesario para poder mostrar el formulario de modificación al hacer doble clic sobre un ítem. Todos los objetos de ambos ejemplos de este tutor los encontraremos en la carpeta tutores/qml/qml básico del proyecto de aplicación de vTutor.

Los dos script del ejemplo los encontraremos en la carpeta qml/tutorialBasico del inspector de scripts en el proyecto de aplicación de vTutor.

Aunque en los propios scripts encontraremos la explicación detallada de las palabras clave y las señales a definir y gestionar en el QML, los incluiremos aquí también.

Ejemplo 1

///////////////////////////////////////////////////////////////////////////////////////////////////
//
// TUTORIAL VELNEO V7 INTEGRADO EN QML - PASO 1
//
//  QML sencillo donde se declararan los elementos mínimos para integrar Velneo V7 en un script QML.
//

import QtQuick 2.6

///////////////////////////////////////////////////////////////////////////////////////////////////
// Es necesario definir un rectángulo que será el marco de la aplicación.
// Las dimensiones del marco se comportarán como tamaño mínimo del objeto QML en V7.
//
Rectangle
{
    id: marco
    width: 300; height: 200
    focus: true

    ////////////////////////////////////////////////////////////////////////////////////////////// /////
    // Utilizamos un elemento gridview para construir un casillero dentro del marco.
    // Es obligatorio incluir el objectName: "theListView" para que V7 alimente el modelo de QML.
    // Hay que declarar la señal selectionChanged(int index) para que V7 reciba la señal de cambio de elemento seleccionado.
    // Esta señal debe dispararse cuando en QML cambie el elemento en curso onCurrentIndexChanged.
    //
    GridView
    {        
        id: casillero

        objectName: "theListView"
        signal selectionChanged(int index)        

        onCurrentIndexChanged:
        {
            casillero.selectionChanged( casillero.currentIndex )
        }

        cellHeight: 100; cellWidth: 120
        anchors.fill: parent
        focus: true

        ///////////////////////////////////////////////////////////////////////////////////////////////////
        // Es obligatorio declarar el modelo con el nombre theListModel.
        //
        model: theListModel

        delegate:

            Column
            {
                width: casillero.cellWidth
                height: casillero.cellHeight

                ///////////////////////////////////////////////////////////////////////////////////////////////////
                // Se declara un elemento Image con el source: decoration para incluir la imagen de la propiedad "URL imagen" del objeto QML de V7.
                //
                Image
                {
                    source: decoration
                    width: 100; height: 80
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                ///////////////////////////////////////////////////////////////////////////////////////////////////
                // Se declara un elemento Text con el source: display para incluir el texto de la propiedad "Contenido" del objeto QML de V7.
                //
                Text
                {
                    text: display + '<b></b>'
                    width: 110
                    clip: true; elide: Text.ElideRight        
                    anchors.horizontalCenter: parent.horizontalCenter; horizontalAlignment: Text.AlignHCenter
                }

                ///////////////////////////////////////////////////////////////////////////////////////////////////
                // En MouseArea declaramos los botones que tendrán funcionalidad y que al hacer clic cambie el elemento seleccionado.
                //
                MouseArea
                {
                    anchors.fill: parent
                    acceptedButtons: Qt.LeftButton | Qt.RightButton
                    onClicked: { casillero.currentIndex = index }
                }

            }

        ///////////////////////////////////////////////////////////////////////////////////////////////////
        // Se declara un componente para marcar visualmente el elemento seleccionado (highlight)
        //    
        Component
        {
            id: sombra
            Rectangle
            {
                color: "#CCCCCC"
            }
        }

        highlight: sombra
    }
}

A continuación veremos cómo “pintamos” este objeto QML en Velneo.

En el proyecto de aplicación de vTutor se ha creado un objeto de tipo lista QML, con las siguientes propiedades asignada:

Identifiacdor: TUT_QML_BAS_1

Nombre:QML: tutorial básico 1

Tabla asociada: ART_M ya que lo que queremos mostrar es información de la tabla de artículos.

Fichero script: (CurrentProject)/qml/tutorialBasico/tutorialBasicoPaso1.qml.

Redimensionamiento: en esta propiedad especificaremos el modo en el que será redimensionado el contenido del objeto en función del espacio disponible en la pantalla. En este caso hemos seleccionado el valor expandir/contraer, de este modo el contenido del control donde se use este objeto se expandirá/contraerá según el espacio disponible.

Contenido: en este parámetro, mediante una fórmula especificaremos la cadena de texto a presentar por cada elemento del modelo principal (theListModel), que en el código qml estará declarado con la etiqueta display. En este caso usaremos el campo #NAME del artículo. Para mostrar el nombre, en el código QML Se ha declarado un elemento Text con el source: display para incluir el texto especificado en esta propiedad.

Url imagen: en este parámetro, mediante una fórmula se ha de componer la url de la imagen a presentar por cada elemento del modelo principal, junto con el texto, que en el código qml estará declarado con la etiqueta decoration.

En el objeto Lista QML, en las fórmulas de url imagen, referenciaremos las imágenes siguiendo la estructura siguiente:

"image://velneo/?/ALIAS_PROJECT/IDOBJETO/[DATO]"

El carácter marcado con ? puede ser:

D – dibujo: "image://velneo/D/ALIASPRO/IDOBJETO"

I – Icono de tabla estática: "image://velneo/I/ALIASPRO/IDTABLAEST/Campo"

C – Campo objeto dibujo: "image://velneo/C/ALIASPRO/IDTABLA/Campo"

En este caso hemos establecido la siguiente fórmula:

choose(#IMG:isEmpty() , "image://velneo/D/IMG_ICO", "image://velneo/C/velneo_vtutor_dat/ART_M/" + #IMG )

Es decir, si el artículo tiene vacío el campo objeto dibujo, se mostrará un dibujo estático del proyecto llamado IMG_ICO, si la tiene, se mostrará la imagen contenida en el campo.

En el código qml se ha declarado un elemento Image con el source: decoration para incluir la imagen de esta propiedad del objeto Lista QML de.

El resto de las propiedades no las hemos modificado.

En este punto ya tenemos creado el script con el código qml que construye un objeto de lista que muestra el nombre del artículo y su foto y un objeto qml de lista que nos permite enviar la información de la tabla de Velneo al objeto qml que hemos programado.

Se trata de un objeto de lista, como lo puede ser también una rejilla, así que lo que hemos hecho para mostrarlo ha sido crear un formulario sin origen, llamado TUT_QML_BAS_1 en el que hemos incrustado un control de tipo vista de datos alimentado por un grupo de artículos.

Ejemplo 2

///////////////////////////////////////////////////////////////////////////////////////////////////
//
// TUTORIAL VELNEO INTEGRADO EN QML - PASO 2
//
//  En este QML se añade la funcionalidad: se atrapa el doble clic de ratón para abrir el formulario de edición de Velneo.
//
// Sólo se incluyen comentarios en aquellas secciones donde hay cambios respecto al paso anterior del tutorial.
//

import QtQuick 1.0

Rectangle 
{
    id: marco
    width: 240; height: 200
    focus: true

    GridView 
    {
        id: casillero

        objectName: "theListView"
        signal selectionChanged(int index)

        ///////////////////////////////////////////////////////////////////////////////////////////////////
        // Se debe declarar la señal itemActivated(int index) para poder mostrar el formulario de edición del elemento seleccionado.
        //
        signal itemActivated(int index)

        onCurrentIndexChanged:
        {
            casillero.selectionChanged( casillero.currentIndex )
        }

        cellHeight: 100; cellWidth: 120
        anchors.fill: parent
        focus: true

        model: theListModel

        delegate:
            Column
            {
                width: casillero.cellWidth
                height: casillero.cellHeight

                Image
                {
                    source: decoration
                    width: 100; height: 80
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                Text
                { 
                    text: display
                    width: 110
                    clip: true; elide: Text.ElideRight
                    anchors.horizontalCenter: parent.horizontalCenter; horizontalAlignment: Text.AlignHCenter
                }

                MouseArea
                {
                    anchors.fill: parent
                    acceptedButtons: Qt.LeftButton | Qt.RightButton
                    onClicked: { casillero.currentIndex = index }

                    ///////////////////////////////////////////////////////////////////////////////////////////////////
                    // Se atrapa el doble clic, se cambia el elemento seleccionado y se dispara la señal itemActivated sobre el elemento seleccionado
                    // lo que provoca que se muestre el formulario de modificación declarado en el objeto QML de Velneo.
                    //
                    onDoubleClicked:
                    {
                        casillero.currentIndex = index
                        casillero.itemActivated(index)
                    }
                }

            }

        Component
        {
            id: seleccionado
            Rectangle
            {
                color: "#CCCCCC"
            }
        }

        highlight: seleccionado 
    }
}

A continuación veremos cómo “pintamos” este objeto QML en Velneo.

En el proyecto de aplicación de vTutor se ha creado un objeto de tipo lista QML, con las siguientes propiedades asignada:

Identificador: TUT_QML_BAS_2

Nombre:QML: tutorial básico 2

Tabla asociada: ART_M ya que lo que queremos mostrar es información de la tabla de artículos.

Fichero script: (CurrentProject)/qml/tutorialBasico/tutorialBasicoPaso2.qml.

Redimensionamiento: en esta propiedad especificaremos el modo en el que será redimensionado el contenido del objeto en función del espacio disponible en la pantalla. En este caso hemos seleccionado el valor expandir/contraer, de este modo el contenido del control donde se use este objeto se expandirá/contraerá según el espacio disponible.

Contenido: en este parámetro, mediante una fórmula especificaremos la cadena de texto a presentar por cada elemento del modelo principal (theListModel), que en el código qml estará declarado con la etiqueta display. En este caso usaremos el campo #NAME del artículo. Para mostrar el nombre, en el código QML Se ha declarado un elemento Text con el source: display para incluir el texto especificado en esta propiedad.

Url imagen: en este parámetro, mediante una fórmula se ha de componer la url de la imagen a presentar por cada elemento del modelo principal, junto con el texto, que en el código qml estará declarado con la etiqueta decoration.

En el objeto Lista QML, en las fórmulas de url imagen, referenciaremos las imágenes siguiendo la estructura siguiente:

"image://velneo/?/ALIAS_PROJECT/IDOBJETO/[DATO]"

El carácter marcado con ? puede ser:

D – dibujo: "image://velneo/D/ALIASPRO/IDOBJETO"

I – Icono de tabla estática: "image://velneo/I/ALIASPRO/IDTABLAEST/Campo"

C – Campo objeto dibujo: "image://velneo/C/ALIASPRO/IDTABLA/Campo"

En este caso hemos establecido la siguiente fórmula:

choose(#IMG:isEmpty() , "image://velneo/D/IMG_ICO", "image://velneo/C/velneo_vtutor_dat/ART_M/" + #IMG )

Es decir, si el artículo tiene vacío el campo objeto dibujo, se mostrará un dibujo estático del proyecto llamado IMG_ICO, si la tiene, se mostrará la imagen contenida en el campo.

En el código qml se ha declarado un elemento Image con el source: decoration para incluir la imagen de esta propiedad del objeto Lista QML de Velneo.

Y le hemos asociado el formulario ART_M como formulario modificación. Para poder disparar este formulario de modificación desde el qml, en el código debemos hacer dos cosas:

Declarar la señal itemActivated(int index) para poder mostrar el formulario de edición del elemento seleccionado.

Atrapar el doble clic, cambiar el elemento seleccionado y dispara la señal itemActivated sobre el elemento seleccionado, lo que provocará que se muestre el formulario de modificación declarado en el objeto QML de Velneo:

onDoubleClicked:
{
    casillero.currentIndex = index
    casillero.itemActivated(index)
}

En este punto ya tenemos creado el script con el código qml que construye un objeto de lista que muestra el nombre del artículo y su foto y un objeto qml de lista que nos permite enviar la información de la tabla de Velneo al objeto qml que hemos programado.

Hemos creado un multivista que tendrá como primer objeto el QML de lista y como segundo objeto el formulario del artículo (ART_M). De este modo, cuando seleccionemos un ítem en el qml de lista, se mostrará el formulario del artículo seleccionado.

Este multivista lo hemos incrustado en el formulario sin origen llamado TUT_QML_BAS_2.