Documentación de Velneo
25
25
  • Introducción
  • Velneo
    • ¿Qué es velneo?
    • Requerimientos de Velneo
    • Notas de la versión
    • Funcionalidades comunes a los componentes de Velneo
      • Instalación
      • Conexión con Velneo vServer
      • Cambiar el estilo de visualización
      • Ver u ocultar barras de herramientas
      • Mensajería interna entre usuarios
      • Soporte de alta resolución (HighDPI)
      • Carpetas de trabajo de los componentes de Velneo
      • Numeración de versiones de Velneo
      • Certificado de firma digital para componentes de Windows
    • Tipos de archivo generados por Velneo
  • Velneo vDevelop
    • ¿Qué es Velneo vDevelop?
    • Interfaz de Velneo vDevelop
    • Lista de teclas aceleradoras de Velneo vDevelop
    • Soluciones y proyectos
    • Control y edición de proyectos
    • Herencia
    • Inspectores
    • Proyectos objetos y editores
      • Objeto
      • De proyecto de datos
        • Indice complejo
        • Tabla
          • Actualización
          • Campo
          • Enlace
          • Indice
          • Plural
          • Traspaso de campo
          • Trigger
        • Tabla estática
        • Variable
      • De proyecto de aplicación
        • Acción
        • Alternador de lista
        • Arbol visor de tablas
        • Bloc de formularios
        • Casillero
        • Cesta
        • ComboView
        • Control SVG
        • Dispositivo serie
        • Formulario
          • Controles de visualización
            • Texto estático
            • Nombre de campo
            • Visor HTML
            • Dibujo
            • Imagen SVG
            • Caja de grupo
            • Menú arbolado
            • Barra de progreso
            • Reloj
            • Manómetro
            • Termómetro
          • Controles de edición
            • Caja de texto
            • Caja de texto enriquecido
            • Data catcher edit
            • Edición alfabética
            • Edición fecha
            • Edición fecha/hora
            • Edición fórmula
            • Edición hora
            • Edición numérica
            • Edición senda fichero
            • Edición senda directorio
            • Objeto dibujo
          • Controles de entrada
            • Botón
            • Botón de check
            • Botón de radio
            • Calendario
            • ComboBox
            • Deslizador
            • Dial
            • ListBox
            • Rueda
          • Contenedores
            • Área de scroll
            • Caja de formularios
            • Pila de formularios
            • Separador de formularios
            • Splitter
            • Vista de datos
          • Layout
          • Tree widget
          • Controles SVG
          • Fichas de extensión
        • Formulario QML
        • Gráfico
        • Imagen SVG
        • Impresora lógica
        • Informe
          • Editor de informes
          • Agrupamiento
          • Sección
          • Cálculo
        • Informe personalizable
          • Diseñando un informe personalizable básico
          • Diseño avanzado
          • Diseñando un informe personalizable
          • Añadiendo orígenes de datos
          • Añadiendo elementos al informe
          • Características avanzadas
          • Etiquetas
          • Asistente de scripts
          • Impresión de gráficos
          • Opciones html
        • ListView
        • Lista QML
        • Localizador
        • Marco
        • Menú
        • Multivista
        • Protocolo TCP-IP
        • Rejilla
          • Propiedades de columna
        • Rejilla avanzada
        • Toolbar
        • ViewFlow
        • Sub-objetos de vistas de datos
          • Conexión de evento
          • Drop
          • Inserción
          • Manejador de evento
      • Comunes a proyecto de datos y de aplicación
        • Búsqueda
        • Cola
        • Constante
        • Dibujo
        • Esquema de tablas
        • Fichero adjunto
        • Función
        • Librería externa
        • Lupa
        • Proceso
          • Comandos de base de datos
            • API
            • Bases de datos externas
            • Búsquedas
            • Campos (grupo de comandos)
            • Cestas
            • Fichas
            • Fichas seleccionadas
            • Listas
            • Tablas
            • Tubos
          • Básicos
            • Controles de flujo
            • Debug
            • Ejecución
            • Salida/retornos
            • Scripts (grupo de comandos)
            • Transacciones (comandos)
            • Variables
          • Comunicación
            • Internet
            • Protocolo TCP
            • Puerto serie
            • SDV
          • Interfaz
            • Acciones (comandos)
            • Control
            • Diálogos
            • Formularios - comandos
            • Localizadores
            • Objeto - grupo de comandos
            • Ventana principal
            • Vista de datos - comandos
          • Sistema
            • Comandos de Sistema
            • Configuración
            • Directorios
            • Ficheros
        • Tubo de ficha
        • Tubo de lista
        • Variable local
      • Editores
        • Asistente de fórmulas
          • Operadores
          • Funciones estándar
            • Funciones API
            • Funciones básicas
            • Funciones de cadenas
              • Expresiones regulares
            • Funciones científicas
            • Funciones de Cliente-servidor
            • Funciones de color
            • Funciones de códigos
            • Funciones de directorios
            • Funciones de fechas
            • Funciones de ficha en curso
            • Funciones de horas
            • Funciones de Internet
            • Funciones de juegos de caracteres
              • Codecs
            • Funciones numéricas
            • Funciones de sistema
            • Funciones de tiempo
            • Funciones trigonométricas
          • Funciones de dll
          • Funciones de proceso
          • Funciones de campo
          • Campos
          • Constantes
          • Variables globales
          • Variables locales
          • Variables del sistema
          • Verificador de fórmulas
          • Conversión automática de datos
          • Introducción de datos literales
          • Secuencias de escape en cadenas de caracteres
          • Composición de sendas en fórmulas
        • Editor de imágenes
        • Selector de fuentes
    • Scripts
      • Lenguajes
        • JavaScript
          • Procesos JavaScript
          • Fórmulas JavaScript
          • Clases
            • Funciones globales
            • Objetos
            • VAbstractBrowser
            • VAbstractDataView
            • VAbstractListDataView
            • VAdvandedGridListDataView
            • VAlternatorListDataView
            • VApp
            • VBoundFieldComboBox
            • VBoundFieldEdit
            • VBoundFieldEditBrowser
            • VBoundFieldListBox
            • VByteArray
            • VCheckBox
            • VClipboard
            • VClockWidget
            • VComboBox
            • VComboListDataView
            • VCoverFlowListDataView
            • VCWebView
            • VDataCatcherEdit
            • VDataCatcherEditBrowser
            • VDataViewDialog
            • VDateEdit
            • VDateEditBrowser
            • VDateTimeEdit
            • VDateTimeEditBrowser
            • VDial
            • VDir
            • VExtension
            • VFile
            • VFileInfo
            • VFilePathEditBrowser
            • VFinder
            • VFont
            • VFormBlockListDataView
            • VFormDataView
            • VFormulaEditBrowser
            • VGaugeWidget
            • VGridListDataView
            • VGroupBox
            • VImage
            • VImageEdit
            • VImageWidget
            • VInstancesList
            • VInstance
            • VInstances
            • VItemRegisterPattern
            • VLabel
            • VLineEdit
            • VLineEditBrowser
            • VListBox
            • VListDataView
            • VLogin
            • VMainWindow
            • VMdiView
            • VMimeData
            • VMultiDataView
            • VNumberSpinBox
            • VNumberSpinBoxBrowser
            • VObjectInfo
            • VObjectInstance
            • VProcess
            • VProgressBar
            • VProjectInfo
            • VPushButton
            • VQmlFormDataView
            • VQmlListDataView
            • VQmlListModel
            • VQuery
            • VRadioButton
            • VRegister
            • VRegisterList
            • VReportListDataView
            • VRequest
            • VResponse
            • VRoot
            • VScreen
            • VScrollArea
            • VServerAdmin
            • VSettings
            • VSlider
            • VSlotListDataView
            • VSolutionInfo
            • VSplitter
            • VSqlDatabase
            • VSSLCertificate
            • VSSLInfo
            • VSSLSessionCipher
            • VStackedWidget
            • VSvgButton
            • VSvgSlideSwitch
            • VSvgToggleSwitch
            • VSvgWidget
            • VSysInfo
            • VTableInfo
            • VTabWidget
            • VTextEdit
            • VTextFile
            • VThermometerWidget
            • VThumbWheel
            • VTimeEdit
            • VTimeEditBrowser
            • VToolBox
            • VTreeItem
            • VTreeItemRegister
            • VTreeListDataView
            • VTreeMenu
            • VTreeMultiTableListDataView
            • VTreeWidget
            • VUser
            • VUserGroup
            • VUserGroupList
            • VUserList
            • VXmlReader
            • VXmlWriter
            • Widget
            • XMLHttpRequest
        • QML
          • Tipos QML
          • Funciones específicas de QML
    • Depuración
      • Depuración de procesos de Velneo
      • Depuración de procesos JavaScript
      • Monitor de vClient
    • Extensiones de Velneo vDevelop
    • Acceso directo a una solución desde vDevelop
    • Buenas prácticas
      • Buenas prácticas de organización
        • Proyectos
        • Organización de carpetas
        • Proyecto de datos
        • Proyecto de aplicación
      • Buenas prácticas de codificación
        • Identificadores
        • Teclas aceleradoras
        • Documenta
        • Diseña los formularios como si no existiesen los layouts
      • Buenas prácticas de rendimiento
        • Arquitectura
          • Listas de registros
          • Lista de resultados de una búsqueda
          • Las cestas
          • Las variables globales
          • La caché de fichas
          • Programa en cloud
        • Base de datos
          • Campos
          • Indices
          • Actualizaciones
          • Eventos de tabla o triggers
          • Variables globales y constantes
          • Tablas en memoria vs tablas en disco
          • Optimizar migraciones de datos
          • Búsquedas en el servidor ¿Cuándo y Cómo?
          • Campos fórmula vs campos en disco
          • Indices condicionados vs búsquedas complejas
          • ¿Cuándo usar tablas de extensión?
          • Indices de trozos y palabras
          • ¿Cuándo usar cada tipo de campo alfa?
        • Formularios
          • Condiciones de visible y activo
          • Carga de subformularios en pestaña, caja o pila
        • Procesos y funciones y eventos
          • 1º, 2º, 3º y 4º plano ¿Cuándo usar cada uno?
          • Bloqueo blando vs bloqueo duro
          • Pasar información del cliente al servidor
          • ¿Cómo optimizar transacciones grandes?
          • ¿Cómo gestionar las transacciones?
          • Grabaciones optimizadas para el usuario
        • Carga de registros en objetos de lista
          • Rejillas
            • Campos punteros a singular
            • Totales
            • Condiciones de activo, visible y color en columna
            • Campos de tipo objeto
        • Conoce los límites
      • Imágenes
      • Buenas prácticas para el desarrollo en equipo
    • Análisis de bases de datos para aplicaciones de Velneo
      • Un centro de enseñanza
      • Facturas de un cliente
      • Repartos de obras de teatro
      • Galería de arte
      • Gestión de un colegio
      • Instalación de lunas para vehículos
      • Libros y autores
      • Tienda de discos
      • Últimos pedidos de un proveedor
      • Existencias por almacén y precios por cliente
      • Generación de tickets para un quiosco
      • Navegación por facturas
  • Velneo vAdmin
    • ¿Qué es Velneo vAdmin?
    • Gestión de usuarios
    • Gestión de aplicaciones
      • Soluciones
      • Instancias
      • Disco
    • Monitorización
      • Lista de comandos
    • Tareas
    • Acceso directo
  • Velneo vClient
    • ¿Qué es Velneo vClient?
    • Movilidad
    • Funcionalidades de Velneo vClient
      • Accesos directos y VRL
      • Cambiar idioma
      • Panel de procesos en 2º plano
      • Manejo de rejillas
      • Uso de la rejilla avanzada
      • Manejo de cestas
      • Refrescos
      • Caché local
      • Edición de campos enlazados a maestro
      • Edición de campos de tipo fecha
      • Capturar imagen desde una cámara
      • Asignar impresoras lógicas
      • Actualización automática
      • Personalización de la ventana de conexión de Velneo vClient
      • Instalador personalizado de Velneo vClient
      • Ordenación de listas
  • Velneo vServer
    • ¿Qué es Velneo vServer?
    • Instalación y configuración
      • Activación de la licencia
      • Línea de comandos de Velneo vServer
      • Parámetros configurables de Velneo vServer
      • Estructura de directorios
    • Iniciar Velneo vServer
    • Funcionalidades
      • Protocolo VATP
      • Protocolo VATPS
      • Multi-hilo
      • Integridad referencial
      • Refrescos terciarios
      • Sistema transaccional
      • Sistema de bloqueos
      • Tecnología bigkey
      • Hilo de control
    • vPacker
  • Velneo vInstallBuilder
    • ¿Qué es Velneo vInstallBuilder?
    • Configurar una instalación
    • Probar una instalación
    • Crear el instalable
    • Accesos directos
  • Velneo vModApache
    • ¿Qué es Velneo vModApache?
    • Instalación y configuración
    • Nomenclatura de objetos en urls
    • Uso de ficheros adjuntos
    • Caché local de Velneo vModApache
  • Velneo vDataClient
    • ¿Qué es Velneo vDataClient?
    • Iniciar Velneo vDataClient
    • Interfaz de Velneo vDataClient
    • Procesos
    • Utilidades
    • Acceso directo a una instancia de datos
  • Velneo vTranslator
    • ¿Qué es Velneo vTranslator?
    • Importación y exportación basada en XLIFF
    • Acceso directo a una solución
  • Velneo ODBC Driver
    • ¿Qué es velneo ODBC Driver?
    • Referencia de comandos SQL
  • Velneo vVersion
    • ¿Qué es Velneo vVersion?
  • Velneo vERP
    • ¿Qué es Velneo vERP?
    • Manual del programador
    • Documentación del ApiRest
    • Novedades de la versión
  • Velneo vTutor
    • ¿Qué es vTutor?
    • Tutores de objetos básicos
      • Tutor de árboles visores de tablas arboladas
      • Tutor de búsquedas
      • Tutor de cestas
      • Tutor de formularios
      • Tutor de informes
      • Tutor de localizador básico
      • Tutor de marcos
      • Tutor de rejillas
      • Tutor de rejillas avanzadas
    • Tutores de objetos avanzados
      • Tutor de alternadores de lista
      • Tutor de comboview
      • Tutor de drag and drop
      • Tutor de eventos
      • Tutor de grabación de fichas
      • Tutor de gráficos
      • Tutor de impresión de informes
      • Tutor de lupas
      • Tutor de protocolo TCP/IP
    • Tutores de controles
      • Tutor de botones de menú
      • Tutor de controles SVG
      • Tutor de edición numérica
      • Tutor de visor html dinámico
      • Tutor de vistas de datos de lista
    • Tutores de procesos y manejadores de evento avanzados
      • Tutor de comandos de interfaz y acciones
      • Tutor de importación y exportación de ficheros ASCII
      • Tutor de portapapeles
      • Tutor de procesos
      • Tutor de SDV
    • Tutores de scripts
      • QML: hola mundo
      • QML: tutor básico
      • QML: tutor de vistas
      • Tutor de XMLHttpRequest (webServices)
  • Velneo cloud
    • ¿Qué es Velneo Cloud?
    • Panel de control vServer cloud
      • URC
      • vServer
      • Apache
      • SFTP
      • Usuarios
    • Copias de seguridad
    • Velneo cloud API
      • Uso de Velneo cloud API
    • Explorador de archivos cloud sFTP
    • TCP en Velneo cloud
    • Velneo vModApache en cloud
    • SLA
    • Hora de los servidores en el cloud de Velneo
    • ¿Qué puedo hacer si tengo una incidencia en mi servidor cloud?
Con tecnología de GitBook
En esta página
  • ListView
  • GridView

¿Te fue útil?

  1. Velneo vTutor
  2. Tutores de scripts

QML: tutor de vistas

EL objetivo de estos tutoriales es familiarizarse con la integración de objetos Lista QML en nuestras aplicaciones.

Todos los objetos de ambos ejemplos de este tutor los encontraremos en la carpeta tutores/qml/qml vistas del proyecto de aplicación de vTutor.

En este tutorial veremos las tres vistas básicas para mostrar elementos de un modelo, integrado con la base de datos de Velneo. Las vistas nos permiten posicionar y definir cómo se mostrarán los elementos de un modelo, en este caso registros provenientes de la base de datos de Velneo.

ListView GridView

ListView

El componente ListView de QML nos permite mostrar en una vista en forma de lista los elementos de un modelo. Se trata de un posicionador para elementos de un modelo, define cómo se pintan éstos.

En este ejemplo, el modelo lo proporciona Velneo a partir de una tabla ART_M y se mostrará por cada elemento cierta información y una imagen.

El objeto QML permite definir dos elementos estándar para mostrar la información en QML, Contenido y URL imagen, que en el código QML se indican con las etiquetas display y decoration respectivamente.

Para incluir más información hacemos uso de los UserRoles, que permiten definir tantas etiquetas como queramos, y que se definen como una fórmula que puede hacer uso de campos, funciones, etc. En este caso, y sólo como ejemplo, hemos creado dos, fecha y hora que mostrarán el dato actual haciendo uso de las funciones correspondientes.

Comenzamos con la declaración de la importación de QtQuick 1.0, ya que usaremos sus componentes.

import QtQuick 2.6

Definimos el rectángulo que contendrá el interfaz QML.

Rectangle {

        width: parent.width;

        height: parent.height

A continuación definimos un componente Component. Esto permite definir un componente propio que puede ser reutilizado. Muchas veces se definirá en un fichero aparte, con el fin de poder ser usado desde múltiples ficheros QML.

En este caso creamos un componente que denominamos delegado que nos permitirá pintar cada elemento que esté en la lista del modelo. Los delegados son un elemento del ListView y otras vistas que definen cómo se muestran elementos que contienen.

En el componente usamos los componentes posicionadores Column y Row. Se denominan posicionadores porque permiten definir cómo se van a colocar los elementos que contienen.

Component {

 id: delegado

 Item {

                 id: item

     width: parent.width; height: 90



     Row {

                         id: row

                         width: parent.width



                         anchors.margins: 10

                         spacing: 5



                         Image {

                                source: decoration; width: 160; height: 90

                                asynchronous: true

                         }

Un detalle importante: si queremos mejorar la usabilidad de nuestras aplicaciones debemos aprovechar todas las posibilidades que nos brinda QML para optimizar. En este caso usamos la propiedad asynchronous: true, para hacer que la carga de las imágenes sea en diferido, es decir, que se muestre el interfaz tan pronto como se cree y que las imágenes se vayan cargando en segundo plano, a fin de no paralizar el interfaz al usuario final.

Column {

                width: parent.width - 260

                Text {

                                       text: display;

                                       color: item.ListView.isCurrentItem ? "red" : "black"

                                       font.bold: true

                        }

                Text { 

                                       width: parent.width

                                       text: "<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing <b>elit</b>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

                                       wrapMode: Text.Wrap 

                                       color: item.ListView.isCurrentItem ? "red" : "black"

                        }                         

        }



       Column {

                width: 100

                Text {

                                       text: fecha;

                                       color: "black"

                                       font.bold: item.ListView.isCurrentItem ? true : false

                        }

                Text {

                                       text: hora;

                                       color: "black"

                                       font.bold: item.ListView.isCurrentItem ? true : false

                        }                

       }



}

El componente MouseArea no permiten definir un área en el que el usuario podrá interaccionar. En este caso, cuando el usuario haga clic sobre el elemento llevaremos haremos que se seleccione.

Si el usuario hace doble clic, en ese caso no sólo llevamos la selección si no que emitimos una señal de activado. Veremos en la vista ListView como la señal de activado se envía para que la detecte Velneo y muestre un formulario correspondiente al registro seleccionado.

MouseArea {

                   id: mouseArea

          anchors.fill: parent

          focus: true

          onClicked: {

              listView.currentIndex = index

          }

                      onDoubleClicked: {

              listView.currentIndex = index

                              listView.itemActivated(index)

          }

      }



    }

}

Creamos otro componente que será el que usemos para la selección (highlight). Es el que define cómo se pinta la selección de un elemento de la vista ListView. Además, le incluimos una animación.

Component {

        id: seleccion

        Rectangle {

                width: parent.width; height: 90

                color: "lightsteelblue"; radius: 5

                y: listView.currentItem.y

                Behavior on y {

                        SpringAnimation {

                                spring: 3

                                damping: 0.2

                        }

                }

        }

}

Por último definimos la vista ListView que definimos por medio de los componentes que hemos ido creando.

ListView {         

           id: listView

           anchors.fill: parent

           model: theListModel

           objectName: "theListView"

Para que la vista se alimente del origen que viene de Velneo (la lista de registros de entrada), definimos el modelo theListModel como aquél que alimenta la vista usando el elemento model.

Además, para que esta lista pueda ser gestionada también desde Velneo la definiremos como un objeto y le daremos el nombre theListView: objectName: “theListView”. En un objeto QML podemos tener muchas vistas, pero ésta será la que se gestione desde Velneo.

Para que las señales de Activado y Cambio de selección se envíen a Velneo, además de asignarles el nombre de objeto debemos definirlas en la vista que queremos que las dispare. Podemos gestionar desde Velneo el cambio de selección con la señal correspondiente y lanzar un evento. La señal de activado permite mostrar el formulario correspondiente al registro en curso que esté definido en el objeto QML.

signal itemActivated(int index)

signal selectionChanged(int index)

Tendremos que gestionar qué registro es el seleccionado y lanzar la señal correspondiente. Por ejemplo, en este caso, queremos que cada vez que se cambie la selección en el interfaz, este cambio de selección quede reflejado en la vista. Para ello usamos la señal de QML onCurrentIndexChanged que se dispara cuando hay un cambio para lanzar hacia Velneo la señal selectionChanged.

onCurrentIndexChanged:

{ 
        listView.selectionChanged( listView.currentIndex )                        
}

El delegado, como habíamos comentado antes, permite definir la forma en que se mostrará cada elemento de la lista. En este caso hacemos uso de un componente previamente definido. Podríamos programarlo aquí, pero es aconsejable encapsular el código y dividirlo para que sea más sencillo y reutilizable.

delegate: delegado

De igual forma hemos hecho la definición de la selección (highlight), en la que indicamos que hacemos uso del componente creado anteriormente.

               highlight: seleccion

               highlightFollowsCurrentItem: false

               focus: true


    }

}

GridView

Esta vista funciona de igual modo que ListView, pero posiciona los elementos en un casillero, del que podemos gestionar orientación, etc.

A efectos prácticos, podemos sustituir uno por otro y configurar las características propias de de cada vista, sin necesitar realizar más cambios ver la misma lista de otra forma.

Por tanto, para aprovechar mejor el ejemplo, hemos incluido la sincronización de un GridView con un ListView que usaremos para mostrar un único elemento de la lista, haciendo una transición animada desde el GridView al elemento seleccionado que será visible en el ListView.

import QtQuick 2.6

Rectangle {

id:root

        width: parent.width

        height: parent.height

color: "black"

Aquí definimos el delegado, es decir, cómo se pintará cada elemento de la lista en el GridView.

Usaremos componentes Item, Row, Column, etc., para definir y posicionar los distintos elementos dentro de la celda.

Component {

    id: delegado

    Item {

        width: 100

        height: 100

        Image {

            source: decoration

            width: parent.width

            height: parent.height

            fillMode: "Stretch"

            opacity: 0.5

                        asynchronous: true

        }

                Text{ text: display; color: "white" }

        MouseArea {

            anchors.fill: parent

            focus: true

            onClicked: {

                                detalle.currentIndex = index

                root.state = "vistaDetalle"

            }

        }

    }

}

Aquí definimos el delegado del detalle, es decir, cómo se pintará cada elemento de la lista en el ListView. En realidad, únicamente se mostrará en pantalla uno de los elementos.

Usaremos componentes Grid (no debemos confundir GridView que gestiona una lista de registros, frente a Grid que gestiona una serie de elementos), Row, Column, etc., para definir y posicionar los distintos elementos dentro de la lista.

Component {

    id: detalleDelegado



    Grid {

                     id: detalleDelegadoGrid

                rows: 3

        spacing: 20

                width: 500

        Row {



            Image {

                                     source: decoration

                                     asynchronous: true

                                     width: 320

                                     fillMode: Image.PreserveAspectFit

                                     smooth: true



                                     MouseArea {

                                             id: mouseAreaImage

                                             anchors.fill: parent

                                             focus: true

                                             onClicked: {

                                                     listaGrid.currentIndex = index

                                                     listaGrid.itemActivated(index)        

                                             }

                                     }

            }

            Column {

                Text {

                    text: display

                    font.pointSize: 24

                                        color: "white"

                }

                Text {

                    text: fecha

                    font.pointSize: 18

                                        color: "white"

                }

                Text {

                    text: hora

                    font.pointSize: 14

                                        color: "white"

                }

            }

        }

        Row {

            Text {

                text: display

                font.pointSize: 8

                wrapMode: "Wrap"

                                color: "white"

            }

        }

En la última fila incluimos dos componentes que definimos como un rectángulo con un texto. Estos componentes los usaremos como botones que nos permitirán volver a la vista anterior o ver el registro en un formulario.

Row {          

                width: 300

                anchors.bottom: parent.bottom



                Rectangle {

                             id: rectangle1

                             width: 80

                             height: 25

                             color: "black"

                             border.color: "white"

                             border.width: 2

                             radius: 10



                             anchors.left: parent.left





                        Text {

                                id: text1

                                text: "Volver"



                                anchors.horizontalCenter: parent.horizontalCenter

                                anchors.verticalCenter: parent.verticalCenter



                                font.pointSize: 10

                                font.bold: true

                                color: "white"

                        }

Para cambiar qué visualización usaremos, el casillero GridView o la lista de un único elemento con ListView, usaremos state que nos permiten configurar estados para un elemento. Por medio de un elemento MouseArea definimos que si el usuario hace clic sobre un elemento del GridView, deje de estar en el estado Detalle que, como veremos más adelante, define que se vea en el ListView.

MouseArea {

                anchors.fill: parent

                focus: true

                onClicked:

                             {

                                     root.state = "";                                  

                             }

        }



}



Rectangle {                          

             id: rectangle2

             width: 80

             height: 25

             color: "black"

             border.color: "white"

             border.width: 2

             radius: 10

             anchors.right: parent.right



              Text {

                     id: text2



                     text: "Ver"



                     anchors.horizontalCenter: parent.horizontalCenter

                 anchors.verticalCenter: parent.verticalCenter



                     font.pointSize: 10

                     font.bold: true

                     color: "white"



             }

}

Y por medio de otro MouseArea definimos que el usuario vea el formulario del registro correspondiente, usando la señal de Activado.

MouseArea {

                                      id: mouseAreaText

                                      anchors.fill: parent

                                      focus: true

                                      onClicked: {

                                              listaGrid.currentIndex = index

                                              listaGrid.itemActivated(index)                                        

                 }

                              }

                      }

     }

 }



}

Una vez definido el delegado, vamos a definir cómo se muestra la vista GridView.

GridView {



             id: listaGrid

             model: theListModel

             delegate: delegado

Definimos además el modelo, theListModel para que se alimente a partir del proceso de carga en Velneo, además de indicar que el delegado para pintar cada elemento es el que hemos definido anteriormente: delegado.

width: root.width

height: root.height

cellWidth:110

cellHeight: 110

Definimos el tamaño de las celdas y además configuramos la propiedad objectName y la emisión de las señales para esta vista, que será la que muestre el formulario.

             objectName: "theListView"          



             signal itemActivated(int index)

             signal selectionChanged(int index)



             highlightFollowsCurrentItem: false

             onCurrentIndexChanged:

                     {

                             listaGrid.selectionChanged( listaGrid.currentIndex )

                     }          

}

A continuación definimos la vista ListView que nos permitirá mostrar el elemento seleccionado. También se carga con el modelo de origen del objeto QML theListModel, pero en este caso se pinta con el delegado correspondiente detalleDelegado, que mostrará en pantalla únicamente el registro seleccionado.

ListView{

        id: detalle

             model: theListModel

             delegate: detalleDelegado

             opacity: 0



     }

Ahora definimos los estados. En estado vistaDetalle pasaremos de ver la vista GridView al ListView con un único elemento. Si pasamos al estado anterior “”, entonces volveremos a ver la vista GridView.

states: [

    State {

        name: "vistaDetalle"

        PropertyChanges {

            target: listaGrid

            x: -root.width

        }

    }

]

Aprovechamos para añadir un efecto por medio de la propiedad transitions que nos permite configurar la forma en que se pasa de una vista a otra, aprovechando para ello la diversidad de efectos de que nos dota QML.

transitions: [

       Transition {

           from: ""

           to: "vistaDetalle"

           NumberAnimation {

               properties: "x"

               easing.type: "OutBounce"

           }

           PropertyAnimation {

               target: detalle

               property: "opacity"

               to: 1

           }

       },

       Transition {

           from: "vistaDetalle"

           to: ""

           NumberAnimation {

               properties: "x"

               easing.type: "OutSine"

               duration: 250

           }

           PropertyAnimation {

               target: detalle

               property: "opacity"

               to: 0

           }

       }

   ]

}

Última actualización hace 4 años

¿Te fue útil?