30
QML: tutor 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

1
///////////////////////////////////////////////////////////////////////////////////////////////////
2
//
3
// TUTORIAL VELNEO V7 INTEGRADO EN QML - PASO 1
4
//
5
// QML sencillo donde se declararan los elementos mínimos para integrar Velneo V7 en un script QML.
6
//
7
8
import QtQuick 2.6
9
10
///////////////////////////////////////////////////////////////////////////////////////////////////
11
// Es necesario definir un rectángulo que será el marco de la aplicación.
12
// Las dimensiones del marco se comportarán como tamaño mínimo del objeto QML en V7.
13
//
14
Rectangle
15
{
16
id: marco
17
width: 300; height: 200
18
focus: true
19
20
////////////////////////////////////////////////////////////////////////////////////////////// /////
21
// Utilizamos un elemento gridview para construir un casillero dentro del marco.
22
// Es obligatorio incluir el objectName: "theListView" para que V7 alimente el modelo de QML.
23
// Hay que declarar la señal selectionChanged(int index) para que V7 reciba la señal de cambio de elemento seleccionado.
24
// Esta señal debe dispararse cuando en QML cambie el elemento en curso onCurrentIndexChanged.
25
//
26
GridView
27
{
28
id: casillero
29
30
objectName: "theListView"
31
signal selectionChanged(int index)
32
33
onCurrentIndexChanged:
34
{
35
casillero.selectionChanged( casillero.currentIndex )
36
}
37
38
cellHeight: 100; cellWidth: 120
39
anchors.fill: parent
40
focus: true
41
42
///////////////////////////////////////////////////////////////////////////////////////////////////
43
// Es obligatorio declarar el modelo con el nombre theListModel.
44
//
45
model: theListModel
46
47
delegate:
48
49
Column
50
{
51
width: casillero.cellWidth
52
height: casillero.cellHeight
53
54
///////////////////////////////////////////////////////////////////////////////////////////////////
55
// Se declara un elemento Image con el source: decoration para incluir la imagen de la propiedad "URL imagen" del objeto QML de V7.
56
//
57
Image
58
{
59
source: decoration
60
width: 100; height: 80
61
anchors.horizontalCenter: parent.horizontalCenter
62
}
63
64
///////////////////////////////////////////////////////////////////////////////////////////////////
65
// Se declara un elemento Text con el source: display para incluir el texto de la propiedad "Contenido" del objeto QML de V7.
66
//
67
Text
68
{
69
text: display + '<b></b>'
70
width: 110
71
clip: true; elide: Text.ElideRight
72
anchors.horizontalCenter: parent.horizontalCenter; horizontalAlignment: Text.AlignHCenter
73
}
74
75
///////////////////////////////////////////////////////////////////////////////////////////////////
76
// En MouseArea declaramos los botones que tendrán funcionalidad y que al hacer clic cambie el elemento seleccionado.
77
//
78
MouseArea
79
{
80
anchors.fill: parent
81
acceptedButtons: Qt.LeftButton | Qt.RightButton
82
onClicked: { casillero.currentIndex = index }
83
}
84
85
}
86
87
///////////////////////////////////////////////////////////////////////////////////////////////////
88
// Se declara un componente para marcar visualmente el elemento seleccionado (highlight)
89
//
90
Component
91
{
92
id: sombra
93
Rectangle
94
{
95
color: "#CCCCCC"
96
}
97
}
98
99
highlight: sombra
100
}
101
}
Copied!
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:
Ddibujo: "image://velneo/D/ALIASPRO/IDOBJETO"
I – Icono de tabla estática: "image://velneo/I/ALIASPRO/IDTABLAEST/Campo"
CCampo 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

1
///////////////////////////////////////////////////////////////////////////////////////////////////
2
//
3
// TUTORIAL VELNEO INTEGRADO EN QML - PASO 2
4
//
5
// 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.
6
//
7
// Sólo se incluyen comentarios en aquellas secciones donde hay cambios respecto al paso anterior del tutorial.
8
//
9
10
import QtQuick 1.0
11
12
Rectangle
13
{
14
id: marco
15
width: 240; height: 200
16
focus: true
17
18
GridView
19
{
20
id: casillero
21
22
objectName: "theListView"
23
signal selectionChanged(int index)
24
25
///////////////////////////////////////////////////////////////////////////////////////////////////
26
// Se debe declarar la señal itemActivated(int index) para poder mostrar el formulario de edición del elemento seleccionado.
27
//
28
signal itemActivated(int index)
29
30
onCurrentIndexChanged:
31
{
32
casillero.selectionChanged( casillero.currentIndex )
33
}
34
35
cellHeight: 100; cellWidth: 120
36
anchors.fill: parent
37
focus: true
38
39
model: theListModel
40
41
delegate:
42
Column
43
{
44
width: casillero.cellWidth
45
height: casillero.cellHeight
46
47
Image
48
{
49
source: decoration
50
width: 100; height: 80
51
anchors.horizontalCenter: parent.horizontalCenter
52
}
53
54
Text
55
{
56
text: display
57
width: 110
58
clip: true; elide: Text.ElideRight
59
anchors.horizontalCenter: parent.horizontalCenter; horizontalAlignment: Text.AlignHCenter
60
}
61
62
MouseArea
63
{
64
anchors.fill: parent
65
acceptedButtons: Qt.LeftButton | Qt.RightButton
66
onClicked: { casillero.currentIndex = index }
67
68
///////////////////////////////////////////////////////////////////////////////////////////////////
69
// Se atrapa el doble clic, se cambia el elemento seleccionado y se dispara la señal itemActivated sobre el elemento seleccionado
70
// lo que provoca que se muestre el formulario de modificación declarado en el objeto QML de Velneo.
71
//
72
onDoubleClicked:
73
{
74
casillero.currentIndex = index
75
casillero.itemActivated(index)
76
}
77
}
78
79
}
80
81
Component
82
{
83
id: seleccionado
84
Rectangle
85
{
86
color: "#CCCCCC"
87
}
88
}
89
90
highlight: seleccionado
91
}
92
}
Copied!
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:
Ddibujo: "image://velneo/D/ALIASPRO/IDOBJETO"
I – Icono de tabla estática: "image://velneo/I/ALIASPRO/IDTABLAEST/Campo"
CCampo 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:
1
onDoubleClicked:
2
{
3
casillero.currentIndex = index
4
casillero.itemActivated(index)
5
}
Copied!
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.
Última actualización 1yr ago
Copiar enlace