Documentación de Velneo
35
35
  • Introducción
  • 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
      • Cambiar el aspecto
      • 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 Web
      • Plataformas y navegador compatibles
      • Acceso a recursos del sistema
      • Siempre HTTPS
      • Funcionamiento de VATPS por websocket
      • CORS para llamadas XmlHttpRequest vía API o mediante el objeto Consumo servicio Web
  • Aplicación vLanzadera y login social
    • Configuración de vLanzadera en Apache en el Cloud de Velneo
    • Configuración de vLanzadera en Apache en servidores propietarios
  • Velneo vDevelop
    • ¿Qué es Velneo vDevelop?
    • Identificación de usuario
    • Interfaz de Velneo vDevelop
      • Dock de proyecto
      • Menú Soluciones
      • Menú Proyectos
      • Menú Objetos
      • Menú Scripts
      • Menú Edición
      • Menú Ver
      • Menú Componentes
      • Menú Ayuda
    • Lista de teclas aceleradoras de Velneo vDevelop
    • Soluciones y proyectos
    • Control y edición de proyectos
    • Herencia
    • Inspectores
    • Proyectos objetos y editores
      • Proyecto de datos
      • Proyecto de aplicación
        • Crear CSS para aplicar a objetos en edición
      • Objeto
        • Refactorización automátca
        • Exportación e importación de objetos
      • Objetos de proyecto de datos
        • Indice complejo
        • Tabla
          • Actualización
          • Campo
          • Enlace
          • Indice
          • Plural
          • Traspaso de campo
          • Trigger
        • Tabla estática
        • Variable
      • Objetos 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
          • Extensión de ficha
        • 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
        • Reemplazo
        • Rejilla
          • Columna de rejilla
        • Rejilla avanzada
          • Columna de rejilla avanzada
        • Toolbar
        • ViewFlow
        • Sub-objetos de vistas de datos
          • Conexión de evento
          • Drop
          • Inserción
          • Manejador de evento
          • Variables locales especiales
      • Objetos comunes a proyecto de datos y de aplicación
        • Búsqueda
        • Cola
        • Constante
        • Consumo servicio Web
          • Proceso de respuesta de consumo servicio Web
          • Códigos de error de consumo servicio Web
        • Dibujo
        • Esquema de tablas
        • Fichero adjunto
        • Función
        • Librería externa
        • Lupa
        • Proceso
          • Indice de comandos de instrucción de proceso
          • Comandos de base de datos
            • API
            • Bases de datos externas
            • Búsquedas
            • Campos (grupo de comandos)
            • Cestas
            • Fichas
              • Enum de errores de JSON/CSV
            • Fichas seleccionadas
            • Listas
            • Tablas
            • Tubos
          • Básicos
            • Controles de flujo
            • Debug
            • Ejecución
            • Salida/retornos
            • Scripts (grupo de comandos)
            • Transacciones (comandos)
            • Variables
          • Comunicación
            • GPS
            • Internet
            • Protocolo TCP
            • Puerto serie
            • SDV
          • Interfaz
            • Acciones (comandos)
            • Controles
              • Ejemplos de CSS
            • 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
              • Lista de codecs
            • Funciones de directorios
            • Funciones de fechas
            • Funciones de ficha en curso
            • Funciones de horas
            • Funciones JSON
            • 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 remotas
          • Funciones de campo
          • Campos
          • Constantes
          • Variables globales
          • Variables locales
          • Variables del sistema
          • Buscar/Reemplazar (Ctrl + F)
          • 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
          • Operar con datos de tipo fecha, hora y tiempo
        • Editor de imágenes
        • Selector de fuentes
    • Scripts
      • Lenguajes
        • JavaScript
          • Procesos JavaScript
          • Fórmulas JavaScript
          • Clases
            • Funciones globales
            • Objetos
            • FormData
            • VAbstractBrowser
            • VAbstractDataView
            • VAbstractListDataView
            • VAdvandedGridListDataView
            • VAlternatorListDataView
            • VApp
              • VApp: enumeraciones
              • VApp: ejemplos
            • VBoundFieldComboBox
            • VBoundFieldEdit
            • VBoundFieldEditBrowser
            • VBoundFieldListBox
            • VByteArray
            • VCheckBox
            • VClipboard
            • VClockWidget
            • VComboBox
            • VComboListDataView
            • VCoverFlowListDataView
            • VCWebView
            • VDataCatcherEdit
            • VDataCatcherEditBrowser
            • VDataView
            • VDataViewDialog
            • VDateEdit
            • VDateEditBrowser
            • VDateTimeEdit
            • VDateTimeEditBrowser
            • VDial
            • VDir
            • VExtension
              • VExtension: enumeraciones
            • VFile
              • VFile: enumeraciones
            • VFileInfo
            • VFilePathEditBrowser
            • VFinder
            • VFont
            • VFormBlockListDataView
            • VFormDataView
            • VFormulaEditBrowser
            • VGaugeWidget
            • VGPS
            • VGridListDataView
            • VGroupBox
            • VImage
            • VImageEdit
            • VImageWidget
            • VInstancesList
            • VInstance
            • VInstances
            • VItemRegisterPattern
            • VLabel
            • VLineEdit
            • VLineEditBrowser
            • VListBox
            • VListDataView
            • VLogin
            • VMainWindow
              • VMainWindow: enumeraciones
              • VMainWindow: ejemplos
            • VMdiView
            • VMimeData
            • VMultiDataView
            • VNumberSpinBox
            • VNumberSpinBoxBrowser
            • VObjectInfo
              • VObjectInfo: enumeraciones
            • 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
            • VSSLKey
            • VSSLInfo
            • VSSLSessionCipher
            • VStackedWidget
            • VSvgButton
            • VSvgSlideSwitch
            • VSvgToggleSwitch
            • VSvgWidget
            • VSysInfo
              • VSisInfo: enumeraciones
            • VTableInfo
              • VTableInfo: enumeraciones
            • 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
            • Documentación para migrar de QtQuick Controls 1.X a 2.X
          • Funciones específicas de QML
    • Depuración
      • Depuración de procesos de Velneo
      • 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
        • Formularios
          • Condiciones de visible y activo
          • Carga de subformularios en pestaña, caja o pila
        • 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?
        • 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
      • Modo mantenimiento
    • 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 vDevelop Web
  • Velneo vAdmin
    • ¿Qué es Velneo vAdmin?
    • Activación de licencias de Velneo vServer
    • Gestión de usuarios
    • Gestión de aplicaciones
      • Soluciones
      • Instancias
      • Disco
    • Monitorización
      • Lista de comandos
    • Tareas
    • Acceso directo
    • Velneo vAdmin Web
  • Velneo vClient
    • ¿Qué es Velneo vClient?
    • Movilidad
    • Funcionalidades de Velneo vClient
      • Accesos directos y VRL
      • Cambiar idioma
      • Panel de multitarea: procesos, colas y servicios
      • Manejo de rejillas
        • Submenú de filtros
      • Uso de la rejilla avanzada
      • Formularios: inducción automática del maestro en altas de registros de tablas plurales
      • 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
      • Listas virtuales
  • Velneo vClient Web
    • Cómo incrustar una aplicación de Velneo Web en un DIV de una página html
  • Velneo vServer
    • ¿Qué es Velneo vServer?
    • Instalación y configuración
      • Línea de comandos de Velneo vServer
      • Parámetros configurables de Velneo vServer
        • Componer certificado fullchain
        • Certificados TLS/SSL para intranets
      • Estructura de directorios
    • Iniciar y detener Velneo vServer
    • Funcionalidades
      • Protocolo VATPS
      • Protocolo VATP
      • Multi-hilo
      • Integridad referencial
      • Refrescos terciarios
      • Sistema transaccional
      • Sistema de bloqueos
      • Tecnología bigkey
      • Hilo de control
      • Colas de procesos en 4º plano
    • vPacker
      • Mensajes de log de sistema
  • 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
  • Optimización del consumo de memoria en Apache
  • Velneo vDataClient
    • ¿Qué es Velneo vDataClient?
    • Iniciar Velneo vDataClient
    • Interfaz de Velneo vDataClient
      • Panel de tablas
      • Panel de datos
    • Procesos
    • Utilidades
    • Acceso directo a una instancia de datos
    • Velneo vDataClient Web
  • 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 de la 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 tablas de extensión y extensiones de ficha
      • Tutor de tubos de ficha y de lista
      • Tutor de grabación de fichas
      • Tutor de gráficos
      • Tutor de impresión de informes
      • Tutor de lupas
      • Tutor de protocolo TCP/IP
      • Tutor de reemplazo
    • 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 cambio de marco
      • 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
    • Copias de seguridad automáticas
    • Velneo Cloud API
      • Uso de Velneo cloud API
    • Explorador de archivos cloud sFTP
    • TCP en Velneo cloud
    • Dominios de empresa y certificados
    • Velneo vModApache en cloud
    • SLA
    • Hora de los servidores en el cloud de Velneo
    • Arranque automático de un servidor tras una parada no controlada
    • ¿Qué puedo hacer si tengo una incidencia en mi servidor cloud?
Con tecnología de GitBook
En esta página
  • Pasos para la instalación
  • Ajustes del servidor web
  • Ajuste de rutas
  • Contenido de la página
  • Ajuste de parámetros

¿Te fue útil?

  1. Velneo vClient Web

Cómo incrustar una aplicación de Velneo Web en un DIV de una página html

¿Te fue útil?

En primer lugar, necesitamos los binarios de Velneo Web (si eres suscriptor, puedes solicitarlos a soporte de Velneo).

Si queremos tener una base para comenzar, si eres suscriptor, puedes solicitar a soporte Velneo los ficheros correspondientes.

No poner directamente en producción sin antes leer detenidamente esta documentación.

Pasos para la instalación

Ajustes del servidor web

El fichero con extensión wasm está en formato , así que hay que habilitar el soporte de dicho formato en nuestro servidor web.

Además, para la carga de Velneo Web es necesario tener ciertas cabeceras definidas en nuestro servidor Web.

En esta está el fichero vLanzadera.conf para configurarlo en Apache.

Ajuste de rutas

Suponiendo que nuestra página web esté en la ruta %site_root%/app, hay que descomprimir el fichero zip con los binarios en dicha ruta.

El árbol de directorios tiene que quedar similar a este:

Donde index.html es la página Web donde queremos incluir Velneo vClient Web.

Contenido de la página

El contenido del fichero index.html es nuestra propia página Web, eso sí, tenemos que añadir varios elementos esenciales para que funcione Velneo vClient Web. Aquí tienes una página con lo básico para ello:

<html>
	<head>
		<meta charset="utf-8">
		<script src="./js/qtloader.js"></script>
		<script src="./js/app.js"></script>
	</head>
	<body>
		<h3>Bienvenido a tu aplicación Web hecha con Velneo</h3>
		<span id="qtstatus"></span>
		<div id="screen"></div>
	</body>
</html>

Si quieres incluirlo en tu propia página debes:

  • incluir la carga de esos dos archivos js.

  • Declarar un elemento en el DOM para la salida de mensajes (en este caso es el span con el id qtstatus).

  • Declarar un div (debe ser un div) con el nombre "screen" (no puede cambiarse).

Ajuste de parámetros

Para el correcto funcionamiento de Velneo vClient Web hay que ajustar ciertos parámetros en el fichero app.js.

Varios de esos parámetros no deben ir directamente en el lado del clientes sino obtenerlos del lado del servidor (por ejemplo, si se usa PHP, durante la creación de la página).

En el ejemplo suministrado el usuario y la contraseña están definidas manualmente (líneas 3 y 4). En un entorno de producción, estos valores deberían ser recogidos por un formulario web.

/* Estos parámetros deben ser definidos en el lado del servidor. Nunca en la parte cliente */
var user = "miusuario";
var password = "mipass";
var vrl = 'vatps://${user}:${password}@midominio.com:wsPort/id_instancia'

También existe la posibilidad de enviar ciertos valores a la instancia que se carga, añadiendo a la variable argJs (línea 12), un nuevo elemento con el parámetro "/userParam". Lo que enviemos ahí, ya sea un JSON, un base64 o un token JWT. El valor llega a la instancia y puede ser procesada en el onInit. El uso de un token JWT como parámetro en web, permite gestionar la autenticación de usuarios, recibiendo la información de usuario en la aplicación podremos gestionarla lo que necesitemos para identificar al usuario en la aplicación.

En la variable vrl (línea 5), hay que indicar el dato wsPort, (puerto vatp + 9).

Y por último, en la línea 10, sustituir la versión por la correspondiente a los binarios descargados:

var fileWasm = './34.0/assets/vClient';

brotli
sección de la documentación de la vLanzadera