Blog

QML al rescate (I) – Extendiendo vDevelop y vClient

QML al rescate (I) - Extendiendo vDevelop y vClient 1

Continuamos explorando las posibilidades de extender Velneo usando tecnologías propias o de terceros. Ahora le toca el turno al lenguaje QML (Qt Meta Language) al que Velneo define como un lenguaje basado en JavaScript, creado para diseñar aplicaciones enfocadas a la interfaz de usuario.

Desde el punto de vista del programador Velneo, podemos destacar lo siguiente:

  • QML es un lenguaje declarativo que permite describir los componentes visuales del interface de usuario y la manera de interactuar entre sí. Por lo tanto los scripts QML se ejecutan siempre en 1P y asociados a los proyectos de aplicación.
  • QML usa javascript como un subconjunto del lenguaje destinado a aportar esa parte dinámica que necesitan nuestras aplicaciones. El comportamiento de los objetos QML se puede programar a través de javascript de la misma forma que lo hacemos con el API de Velneo.
  • Los objetos QML están basados en tipos proporcionados por los módulos que importamos desde Velneo. La declaración Import indica al motor qué módulos, recursos javascript y directorios de componentes se utilizan dentro de un script QML.

    Velneo incorpora un motor QML encargado de ejecutar los scripts QML del proyecto de aplicación. Los tipos soportados, junto con la versión de los módulos, se pueden consultar en la documentación. El lenguaje javascript del motor QML es compatible con EcmaScript 7.

  • El código QML se escribe usando un editor básico de vDevelop y se guarda en la pestaña de Scripts del proyecto. Los scripts de QML solo pueden ejecutarse a través de dos objetos visuales del proyecto, el Formulario QML y la Lista QML.

A lo largo de este artículo vamos a ver cómo incorporar QML para extender nuestras aplicaciones y resolver aquellas necesidades a las que no podemos llegar con el código nativo, ni siquiera usando el API de Velneo.

Veremos cómo integrar de una manera sencilla los scripts de código QML en nuestro interfaz y resolver la gestión de eventos entre los dos mundos, el de Velneo nativo y el del motor QML.

Pero QML no solo es útil para nuestras aplicaciones finales, también puede ayudarnos a extender componentes de la fase de diseño y desarrollo como vDevelop y vClient.

En vDevelop las Extensiones de vDevelop son un excelente componente desarrollado por Velneo que, gracias a la versatilidad de QML, permite escribir scripts y ejecutarlos dinámicamente y al mismo tiempo programar nuestras aplicaciones.

En vClient usamos QML para personalizar la ventana de conexión a vServer con el objeto de mejorar la experiencia de usuario en el momento de realizar el login al servidor.

Dedicaremos esta primera parte del artículo a mostrar ejemplos de cómo extender vDevelop y vClient, de tal manera que vayamos poco a poco viendo la potencia y versatilidad que puede aportar QML tanto en el desarrollo como en la ejecución de nuestras aplicaciones.

Si todavía no te has introducido en el lenguaje QML puedes acceder libremente a mis ejercicios en el cloud, donde podrás practicar con un editor y ejecutor en tiempo real.

Extendiendo vDevelop con QML

Velneo ha diseñado las Extensiones de vDevelop para permitir al programador incorporar nuevas funcionalidades al entorno de desarrollo.

Las características más importantes de las Extensiones de vDevelop son:

  • Las Extensiones se deben programar con QML, con la posibilidad de acceder al API de Velneo mediante la clase VExtension e incorporando el comando import vExtensions 2.0.
  • Hay un catálogo de Extensiones ya programadas y listas para usar que son accesibles dependiendo del nivel de suscripción. El catálogo está disponible desde la opción Ver del menú principal de vDevelop.

Las Extensiones disponibles en el momento de escribir este artículo son:

Extensión Nivel
Repositorios Velneo 4
Documentador 4
Monitor de vClient 4
Iconos Material Velneo 2
Pomodoro 2
Centro de soporte 2
Vídeos 1

Hay otras Extensiones QML como el Importador SQL y el Asistente de primeros pasos en el menu de Soluciones que ya vienen instaladas desde hace tiempo. En la versión 29 se incorporó la opción Cambiar estilos en el menú de Objetos.

  • Una vez instalada la Extensión de vDevelop, ésta es accesible a través de una opción de menú o de un botón de la Barra de herramientas, incluso puede tener asociado un atajo de tecla.

    Desde la opción de Extensiones podemos instalar, desinstalar y ver el código de cada extensión del catálogo, además de obtener información del uso y funcionalidad que tiene cada extensión.

Crear una nueva Extensión

Como programadores de Velneo podemos diseñar nuestras propias Extensiones.

Las Extensiones se crean en una subcarpeta de la ruta homePath:

theExtension.theApp().homePath() + "/Velneo/vdevelop/extensions/<nombre_extension>"

Hay que crear dos archivos:

  • manifest.json define en formato json las opciones de ejecución para la Extensión.
  • main.qml contiene el código QML principal que se ejecutará al invocar la Extensión.

Archivo manifest.json

Es un JSON con la siguiente estructura:

{
  "name": [{ "text": "nombre de la extensión", {"locale":"EN", "text": "..." }, ...],
  "description": "descripción de la extensión",
  "version": 1,
  "actions": [
    {
      "text": [{ "text": "nombre acción", {"locale":"EN", "text": "..." }, ...],
      "icon": "logo_accion.png",
      "function": "fun_accion",
      "shortcut": "Ctrl+...",
 	  "insert": [ 
		{"menu": ["opcion_menu_principal"], "beforeAction": "opcion_menu"},
		{"toolbar": "id_barra_herramientas", "beforeAction": "opcion_barra_herramientas"}
	  ]
    },
    {
       ...
    }
  ],
  "events": [
    {
      "event": "ini",
      "function": "onExtensionIni"
    }
  ]
}
  • name: es un array con los nombres de la Extensión (text) en el idioma por defecto y cada uno de los seleccionados (locale) en ISO 639-1. Se utilizará en el título de pestañas y en los menús y tooltip de los toolbars.
  • description: un resumen de la utilidad de la Extensión. No hay una función en la clase VExtension que nos devuelva este dato. Tenemos que leer el archivo manifest.json y parsear el string JSON para obtener el valor de oJSON.description.
  • version: dato numérico con la versión de la Extensión. Al igual que description no hay una función en la clase VExtension que nos devuelva este dato.
  • actions: contiene un array de Acciones que se incorporan al interface de Velneo vDevelop en el arranque. Las Acciones pueden ser opciones de Menú o un botón en una Barra de herramientas. Cada Acción se compone de los siguientes elementos:
    • Array (text) con los nombres de la acción (text) y los idiomas (locale).
    • El icono (icon) para identificar la Extensión en el menú o barra de herramientas.
    • La función javascript (function) que se ejecuta cuando la Acción es llamada.
    • La combinación de teclas (shortcut) para activar la Extensión.
    • Array (insert) con los menus (menu) y las barras de herramientas (toolbar) donde se mostrarán los accesos directos a la Acción.

    Podemos colocar el icono de la Extensión en cualquier Barra de herramientas de vDevelop. Para indicar el valor de la opción toolbar debemos seleccionar uno de estos nombres:
    TbarMain: principal, TbarProyectos: de proyectos, TbarEdit: de edición, TbarNewOb: de nuevos objetos, TbarGestOb: de gestión de objetos, TbarSearch: de búsqueda.

  • events: aparte de poder ejecutar la Extensión desde una Acción se puede definir un evento (event) de Velneo vDevelop. De momento solo existe el evento de inicio (ini), ejecutando además una determinada función (function) javascript del código QML.
  • clearComponentCache: define si se limpiará la caché de ficheros QML antes de ejecutar la extensión. Por defecto el valor es true por lo que se recargan los ficheros QML en cada ejecución de la Extensión.
  • files: array con los archivos (filename) que componen la Extensión y el path relativo (relativePath) de cada uno de ellos. Este array se usa para poder descargar la Extensión desde una ubicación remota.

El archivo manifest.json de todas las extensiones se lee en el arranque de vDevelop. Debe estar bien construido o de lo contrario nos saltará un error en el manifiesto de la extensión cuando se inicia vDevelop.

Archivo main.qml

El archivo main.qml será ejecutado por cada una de las Acciones definidas en el array actions del archivo manifest.json. Desde este main.qml podemos usar otros archivos qml y javascript.

Para programar nuevas Extensiones disponemos del objeto theExtension con el que accedemos a la información de la Solución activa y al Proyecto abierto en el momento de iniciar la Extensión.

Para tener acceso a las enumeraciones del API necesitamos usar import VExtensions 2.0 en la primera línea de main.qml.

A través de la función theExtension.theApp() obtenenos una referencia al objeto theApp con toda la funcionalidad relacionada con la edición de proyectos: funciones generales, proyectos, cursor, constantes, DOS: directorios, DOS: ficheros, info local actual, info local del sistema, impresoras, multimedia y la función sysInfo.

El objeto theExtension es una referencia estática que se crea con la Solución y Proyecto activos en el momento de iniciar la Extensión, es decir, tendremos que reiniciar la Extensión cuando cambiamos de Solución o de proyecto activo.

El objeto theExtension no es global a vDevelop, cada Extension iniciada tiene acceso a su propio objeto theExtension que se ha creado en la carga de main.qml.

Estas son algunas de las funciones más importantes del objeto global theExtension:

  • extensionDirPath() – Devuelve el path completo de donde se encuentra el archivo main.qml de la Extensión activa.
  • executeExtension(«carpeta_extension») – ejecuta la Extensión llamándola por el nombre del directorio que contiene el archivo main.qml de la Extensión. Es la forma de ejecutar la Extensión por código en lugar de hacerlo mediante una Acción de menú o barra de herramientas.
  • setAutoClose(boolean) – determina si la Extensión se cierra automáticamente cuando cambiamos de Proyecto activo en vDevelop. Por defecto la opción AutoClose es true.

El objeto theExtension no se sincroniza automáticamente si abrimos una nueva Solución y Proyecto desde vDevelop. Hacer uso de theExtensión después de cambiar de Proyecto activo sin haber reiniciado la Extensión puede provocar el cierre inesperado de vDevelop dejando los proyectos bloqueados y el enganche activo.

  • setDialog(boolean) – establece que la Extensión se ejecuta en una pestaña de vDevelop o en una ventana de diálogo Modal. Con esta función están relacionadas la funciones setFixedSize(boolean) para fijar el tamaño de la ventana, setWindowTypeFlags(flags) para determinar el aspecto de la ventana modal y close() para cerrar la ventana y la Extensión.

Para que funcione correctamente la función setDialog() debemos establecer las propiedades width y height del objeto qml principal, de lo contrario la ventana no será visible, dejando a vDevelop en un bucle infinito esperando a que se cierre la Extensión.

  • connectServer(VRL, usuario, contraseña) – establece una conexión o enganche con el servidor de Velneo. En caso de éxito devuelve un valor 0 (VExtension.OkVatp) y en caso de error el valor devuelto es el error de conexión. La función isConnected() nos indicará si estamos o no conectados. Disponemos también de la función connectServerDialog() que mostrará la ventana de diálogo estandar de vDevelop para conectar al Servidor. Devolverá true si la conexión ha tenido éxito.
  • openSolution(VRL) – Abre la Solución cuya VRL pasamos como parámetro. Disponemos también de la función openSolutionDialog() que mostrará la ventana de diálogo estandar de vDevelop para abrir la Solución.

La sintaxis de la VRL de acceso a la Solución tiene un formato concreto (con tres slash) que debemos respetar para que la función tenga éxito: vatp[s]://IP_SERVIDOR///NOMBRE_SOLUCION

  • currentSolutionInfo() – Devuelve la Solución activa como un objeto VSolutionInfo que nos dará acceso a las propiedades básicas como el nombre, versión, fecha de edición, carpeta local, …
  • runSolution() – Inicia la ejecución de la Solución activa. Debe tener instancias creadas previamente.
  • runInstallWizard(«path archivo vin») – Inicia el asistente de instalación de un fichero vin pasado como parámetro.
  • openProject(VProjectInfo) – Abre el proyecto en vDevelop pasando el objeto VProjectInfo, que corresponde a un proyecto de aplicación o de datos de la pestaña Proyectos cargados en el panel Explorador de proyectos.
  • projectInfo(VExtension.TypeApp, index) – devuelve un objeto de la clase VProjectInfo correspondiente al tipo de Proyecto (datos o aplicación) y a la posición de la lista de proyectos encontrados con la función projectCount.
  • projectCount(VExtension.TypeApp) – devuelve el número de proyectos de aplicación o de datos de la pestaña Proyectos cargados en el panel Explorador de proyectos.
  • currentProjectInfo() – Devuelve el objeto VProjectInfo del proyecto activo en vDevelop.
  • openObject(VObjectInfo) – Abre el objeto en el editor pasando la referencia VObjectInfo.
  • currentObjectInfo() – Permite acceder al objeto seleccionado en la lista de objetos del proyecto activo, retornando el correspondiente VObjectInfo con la información de la estructura de dicho objeto.
  • appInstances(VSolutionInfo) y datInstances(VSolutionInfo) – retorna un objeto VInstanceList que contiene la lista de Instancias de aplicación o datos de la Solución referenciada en VSolutionInfo.

Disponemos también del acceso a las clases siguientes: VDir para la gestión de directorios, VFile para los archivos de disco, VTextFile para archivos de texto, VSettings para la configuración del sistema, VSqlDataBase para acceso a bases de datos externas y XMLHttpRequest para el acceso a webservices con HTTP.

Nuestra primera Extensión para vDevelop

Normalmente trabajamos con un conjunto limitado de Soluciones y muchas veces queremos abrir vDevelop con un proyecto activo dispuesto para editar. Tenemos la opción de crear un acceso directo con vDevelop.exe y el acceso vatp de la Solución como parámetro, pero queremos extender estas posibilidades usando QML y el objeto theExtension.

Hagamos un ejercicio que consista en crear una Extensión que llamaremos Mi Extension con las siguientes características:

  • La Extensión ejecutará la función onExtensionIni de main.qml en el evento ini de vDevelop.
  • La función onExtensionIni establece conexión con vServer y a continuación abre la Solución que seleccionemos de una lista cargando el proyecto de aplicación correspondiente.
  • La Extensión tendrá asignadas dos Acciones con nombres Info Extension y Abrir Solución respectivamente.
  • La Acción Info Extension mostrará información sobre la Solución y el proyecto activo usando el objeto global theExtension.
  • La Acción Abrir Solución ejecuta la función seleSolucion de main.qml permitiendo seleccionar una Solución y abrir el proyecto de aplicación.

En la siguiente imagen vemos los principales componentes involucrados en el diseño de la Extensión.

 

QML al rescate (I) - Extendiendo vDevelop y vClient 2

Nuestro archivo manifest.json

{
  "name": [{ "text": "Mi Extension" }],
  "description": "Extendiendo vDevelop",
  "version": 1,
  "actions": [
    {
      "text": [{ "text": "Abrir Solución" }],
      "icon": "logo_sol.png",
      "function": "seleSolucion",
      "shortcut": "Ctrl+S",
 	  "insert": [ 
		{"menu": ["&Proyectos"], "beforeAction": "&Recalcular errores"},
		{"toolbar": "TbarMain", "beforeAction": "&Guardar todos"}
	  ]
    },
    {
      "text": [{ "text": "Info Extensión" }],
      "icon": "logo_me.png",
      "shortcut": "Ctrl+I",
 	  "insert": [ 
		{"menu": ["&Proyectos"], "beforeAction": "&Recalcular errores"},
		{"toolbar": "TbarMain", "beforeAction": "&Guardar todos"}
	  ]
    }
  ],
  "events": [
    {
      "event": "ini",
      "function": "onExtensionIni"
    }
  ]
}

Función onExtensionIni

La función onExtensionIni se ejecuta en el evento ini de vDevelop. Muestra una ventana Modal, usando el tipo QML Window, con la lista de Soluciones predeterminada.

De la lista con las Soluciones predeterminadas podemos seleccionar una de ellas y abrir el Proyecto de aplicación correspondiente.

QML al rescate (I) - Extendiendo vDevelop y vClient 3

Hay tres checkbox cuyos valores se toman de las opciones del registro:

  • Abrir siempre el proyecto. Activar esta opción para abrir automáticamente la solución y el proyecto seleccionado.
  • Abrir siempre última Solución abierta. Activar esta opción para abrir automáticamente la Solución que estaba abierta cuando se cerró vDevelop la última vez.
  • Cerrar pestaña Inicio. Activando esta opción conseguimos cerrar la pestaña Inicio cuando se abre un nuevo proyecto.

En QML disponemos del tipo Settings para guardar y recuperar opciones en el registro. Como alternativa podemos usar la función newSettings() de theExtension, con la que obtenemos el objeto VSettings de VExtension.

El código principal de main.qml mostrará información de la propia Extensión y de la Solución y Proyecto activos. Usa para ello el objeto theExtension y las funciones currentSolutionInfo y currentProjectInfo.

QML al rescate (I) - Extendiendo vDevelop y vClient 4

Desde la pantalla principal de la Extensión podemos acceder a otras cuatro Extensiones usando la función theExtension.executeExtension():

  • Iconos Material – Esta Extensión, que pertenece al catálogo de Extensiones de Velneo, descarga los iconos de la colección Material disponible en Internet.
  • Dibujos del proyecto – Muestra los Dibujos del proyecto activo.
  • Objetos del proyecto – Muestra los Objetos del proyecto activo.
  • Editor de javascript – Editor de javascript con la posibilidad de evaluar el código.

Mi Extensión Dibujos del proyecto

Esta Extensión obtiene la lista de Dibujos del proyecto y ejecuta búsquedas por trozos del ID o NOMBRE del objeto. Añade nuevas posibilidades a la opción Ver todos los dibujos del proyecto de vDevelop.

QML al rescate (I) - Extendiendo vDevelop y vClient 5

El objetivo de esta Extensión es localizar rápidamente un objeto de tipo Dibujo mediante las palabras clave que hayamos añadido a la propiedad Nombre. Necesitamos un motor de búsquedas por trozos de palabras y aunque en vDevelop no tenemos acceso a las tablas nativas de Velneo, sí disponemos en QML de la clase global LocalStorage para la creación y gestión de bases de datos SQLite. El objeto theExtension dispone también de la función newSqlDatabase para gestionar bases de datos externas.

La base de datos SQLite se creará en un archivo de disco dentro de la carpeta de datos del usuario:

theApp.getPaths(9)[0] + "/QML/OfflineStorage/Databases"

Usando el lenguaje SQL gestionamos una tabla sincronizada con todos los Dibujos del proyecto. El operador LIKE del comando SELECT emula las búsquedas por trozos en los campos ID o NOMBRE. La Lista mostrará los Dibujos que contienen cualquiera de los trozos introducidos en el campo Buscar.

Seleccionando un Dibujo de la lista se creará el objeto VObjectInfo del que obtenemos el tamaño para poder mostrarlo a diferentes escalas. También se puede abrir el Dibujo en el editor de vDevelop usando la función theExtension.openObject().

Mi Extensión Objetos del proyecto

Al igual que hacemos con los Dibujos podemos hacer lo mismo con los Objetos del proyecto activo. Con esta Extensión obtenemos las Tablas, Tablas estáticas, Formularios, Informes, Procesos, Funciones, Acciones, Menus y Toolbars del proyecto.

En este caso además podemos filtrar la lista por Tipo de Objeto para acotar todavía más la búsqueda. La búsqueda se realiza en los campos Id, Nombre y Comentarios.

QML al rescate (I) - Extendiendo vDevelop y vClient 6

A través del objeto VObjectInfo se accede a la información y a la estructura de subObjetos del objeto seleccionado.

QML al rescate (I) - Extendiendo vDevelop y vClient 7

Con el objeto VObjectInfo se puede construir un sencillo documentador del objeto seleccionado.

A partir de la lista de SubObjetos se construye el JSON con la estructura del objeto y este JSON alimenta la librería pure.js para renderizar el HTML en el visor QML WebEngineView. Desde el Visor HTML usaremos la función printToPdf para crear el archivo PDF con la documentación del objeto seleccionado.

QML al rescate (I) - Extendiendo vDevelop y vClient 8

Mi Extensión Editor de javascript

En esta Extensión usamos la librería ACE Editor para editar el código javascript y el motor QML para evaluarlo. Ahora ya podemos probar rápidamente pequeños trozos de código javascript que vayamoa a integrar en los scripts del proyecto.

QML al rescate (I) - Extendiendo vDevelop y vClient 9

La librería ACE Editor se ejecuta usando el tipo QML WebEngineView. Se han añadido cuatro botones: Ayuda de atajos de tecla, Formateo del código, Borrar el editor y el botón para Evaluar el código.

El Editor de código se ejecuta en una ventana flotante por encima de vDevelop, esta ventana se puede mover libremente para copiar y pegar código cómodamente.

El código javascript es evaluado por el motor de QML y por lo tanto disponemos de la versión ECMAScript 7 que pronto estará también disponible en el API de Velneo.

Extendiendo vClient con QML

El componente vClient necesita siempre ejecutar el proceso de Login al vServer y selección de la Instancia de aplicación. De forma nativa vClient presenta una ventana de conexión para realizar ambas operaciones.

Hay tres formas de personalizar la ventana de conexión de vClient: mediante claves de configuración en el registro del sistema, usando parámetros con el ejecutable de vClient y la que nos interesa ahora, usar QML para extender el interface gráfico con multitid de opciones.

Mediante un acceso directo en el escritorio es posible también realizar el Login y la selección de la Instancia con un solo click. Ver más detalles en la documentación.

Si vamos a usar QML necesitamos dos archivos, uno con el código para el Login y otro para la selección de la Instancia. Por defecto estos archivos deben tener el nombre de Login2.qml e Intances2.qml y se usarán automáticamente si se encuentran en la misma carpeta que el ejecutable de vClient.

También podemos personalizar el nombre y ubicación de estos dos archivos en sendas ramas del archivo de configuración del sistema operativo. Por ejemplo:

[HKEY_CURRENT_USER\SOFTWARE\Velneo\vClient\Login]
"QmlLogin2"="/MiLogin.qml"
"QmlInstances2"="/MiInstances.qml"

Para la programación QML disponemos de las clases VLogin y VInstances del API de Velneo que instancian los objetos theLogin y theInstances.

  • VLogin representa la conexión de Velneo vClient y dispone de las funciones necesarias para realizar dicha conexión.
  • VInstances representa la selección de Instancias de aplicación en vServer y dispone de las funciones necesarias para realizar la selección y ejecución de la aplicación seleccionada.

Archivo MiLogin.qml para la conexión a vServer

El objeto theLogin proporciona información de los últimos datos de la conexión.

  • user – nombre del último usuario usado para conectarse.
  • server – devuelve la última VRL usada para conectarse.
  • servers – modelo con el histórico de sendas VRL usadas para conectarse.

Los valores que devuelve theLogin para el último usuario y servidor conectados y el histórico de servidores, se obtienen de las claves del registro LastUser, LastServer y Servers. En QML podemos usar el tipo Settings para leer estos valores, aunque para el valor Servers solo es posible hacerlo mediante la clase VSettings del API de Velneo.

Para realizar la conexión el objeto theLogin necesita establecer el usuario, contraseña y VRL del servidor.

  • setServer – indica la VRL (dominio y puerto) del vServer al que nos conectaremos.
  • setUser, setPassword – establece el usuario y contraseña de la conexión.
  • accept – realiza la conexión una vez establecidos los parámetros de conexión VRL, usuario y contraseña.
  • rejectcancela la ventana de conexión y por tanto el proceso de conexión.
  • errorText – devuelve el mensaje de error en el caso de que falle la conexión.

Archivo MiInstances.qml para la selección de la Instacia

Una vez establecida la conexión con el servidor, el objeto theInstances proporciona el mecanismo de selección y ejecución de la Instancia de aplicación.

  • instancesModel – modelo con la lista de instancias a las que tiene acceso el usuario en el servidor.
  • setInstance – establece la instancia que será ejecutada.
  • acceptejecuta la instancia seleccionada.
  • rejectcancela la selección de instancia.

Nuestra ventana de conexión personalizada

Veamos algún ejemplo de cómo se puede mejorar mediante QML el aspecto de la ventana de conexión de vClient.

Lista con el histórico de VRL’s

Los valores necesarios para la conexión aparecerán vacíos la primera vez que nos conectamos. Después de la primera conexión exitosa quedarán guardados en el registro los valores de la VRL y el usuario.

QML al rescate (I) - Extendiendo vDevelop y vClient 10

El ComboBox muestra la lista de VRL’s que se han utilizado en anteriores conexiones. Esta lista es el resultado de la función theLogin.servers(). El servidor seleccionado por defecto es el último al que nos hemos conectado y se obtiene con la función theLogin.server(). El Usuario muestra el último con el que nos hemos conectado y también se obtiene con theLogin.user().

Lista editable de VRL’s

Otra posibilidad es tener nuestra propia lista prefijada de servidores con opciones para añadir y eliminar las VRL.

QML al rescate (I) - Extendiendo vDevelop y vClient 11

El ListView se alimenta de un modelo de datos que guardamos en una clave de registro en formato JSON. En la clave de registro guardamos junto a la VRL el nombre descriptivo para que la selección sea más amigable.

El usuario puede personalizar la lista de servidores añadiendo, modificando y eliminando elementos.

QML al rescate (I) - Extendiendo vDevelop y vClient 12

Selección de la Instancia de aplicación

Una vez que el archivo MiLogin.qml ha establecido conexión, se ejecuta MiInstances.qml para mostrar la lista de Instancias de aplicación a las que puede acceder el Usuario.

QML al rescate (I) - Extendiendo vDevelop y vClient 13

La función theInstances.instancesModel() devuelve un modelo de datos con la lista de Instancias desde vServer. Este modelo de datos no es un tipo ListModel de QML y no podemos filtrarla u ordenarla directamente. Usaremos un array auxiliar para realizar las operaciones de filtrado y ordenamiento antes de añadir las Instancias al ListView.

La última Instancia ejecutada se guarda en una clave de registro para mostrarla en el primer lugar de la lista de Instancias.

Cuando la lista de Instancias es grande podemos usar la función de búsqueda para filtrar dicha lista y mejorar la experiencia de usuario.

Conclusiones

Espero que los que no conozcan QML vayan empezando a percibir la potencia de esta nueva herramienta. Velneo nos ha dado la oportunidad a los desarrolladores de usar QML, no solo en tiempo de ejecución, sino también en tiempo de diseño creando el módulo Extensiones y en el momento de despliegue personalizando el proceso de Login y selección de Instancia.

En vDevelop, según tu nivel de suscripción, dispones de un catálogo de Extensiones oficiales de Velneo con muestras más o menos avanzadas de lo que se puede hacer con QML. Tendremos que acostumbrarnos a los interfaces de QML ya que serán los que se diseñen para los nuevos componentes de Velneo en su versión Web.

En este artículo os he presentado cuatro nuevas extensiones de vDevelop utilizando las funciones del objeto theExtension para obtener información de la Solución y Proyecto activos. Además hemos usado objetos QML avanzados como la Ventana Popup, el motor de base de datos SQLite, el visor HTML WebEngineWiew y hemos visto cómo documentar rápidamente el objeto seleccionado imprimiendo a PDF. Finalmente extendemos las posibilidades de vDevelop con un Editor extra de código javascript, con la posibilidad de evaluar dicho código en tiempo de diseño.

También QML nos ha ayudado en la creación de atractivas ventanas para el proceso de Login y selección de la Instancia de aplicación, extendiendo las opciones nativas de vClient.

Espero que con esta primera visión de las posibilidades de QML os animéis a usarlo en vuestras aplicaciones de Velneo. En el próximo artículo contaré mi experiencia en el desarrollo y implantación de algunos módulos QML destinados a mejorar la funcionalidad de las aplicaciones finales. Os espero.

3 thoughts on “QML al rescate (I) – Extendiendo vDevelop y vClient

Dejar un comentario