Enlazar Velneo con HTML


([N1] Mario) #1

Voy a explicar como enlazar los eventos producidos en un HTML de un visor HTML con las conexiones de evento de un formulario.

Al final se puede ver que es muy sencillo, pero al principio puede parecer un poco enrevesado…

  1. En el form donde tenemos el visor HTML, le indicamos que seremos nosotros quienes capturaremos la pulsación de los links de ese visor HTML
//Obtenemos el control del visor HTML
var html = theRoot.dataView().control( "HTML" );
//Le indicamos que seremos nosotros quienes controlaremos las pulsaciones de los links
html.setLinkDelegationPolicy( VCWebView.DelegateAllLinks );
  1. En el HTML que mostraremos en el visor HTML, al final pondremos un div de contenedor y un link que usaremos para capturar la señal de link pulsado al existir un evento en javascript
<div id='contenedorV7'></div>
<a id="external" href="#">Link para simular click</a>
</body>
</html>
  1. En el HTML, dentro del evento que queramos capturar desde velneo, haremos 2 cosas. La primera será, meter dentro del contenedor div que usaremos de intercambio los valores que leeremos desde velneo y nos servirán para indicar que se está haciendo. Por ejemplo una estructura json con valores indicativos de la acción que se está realizando (Alta, modificación, baja, desplazamiento del registro en el tiempo, ampliación de duración, etc…) y los valores necesarios para tratarlo (código del registro en nuestra tabla de velneo, fecha de inicio, de fin, etc…)
    Luego, haremos la pulsación virtual del link que hemos creado en el paso 2 y así capturarlo desde velneo.
dp.onEventClicked = function(args) {
        document.getElementById('contenedorV7').innerHTML= '{"Accion": 1, "Codigo":' + args.e.id() + '}';
        simulateClick('external')
    };

Para que esto funcione, debemos de utilizar la siguiente función javascript

function simulateClick(id) {
  var evt = document.createEvent('MouseEvents');
  evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0,
  false, false, false, false, 0, null);
  var cb = document.getElementById(id);
  cb.dispatchEvent(evt);
}
  1. En el formulario de velneo, crearemos una conexión de evento asociada al visor HTML y que se disparará en el “Link clicked”. Esa conexión ejecutará un evento javascript en el que extraeremos los datos del div que utilizamos de contenedor y en consecuencia con esos datos recibidos haremos lo que necesitemos a nivel de usabilidad (mostrar formulario, modificar datos de forma trans patente, etc…)
//Obtenemos el control HTML
var html = theRoot.dataView().control( "HTML" );
//Leemos el código fuente del objeto HTML donde tenemos la etiqueta DIV que usamos de contenedor para enlazar HTML y V7
var codigo = html.sourceCode();
//Sacamos el contenido de la etiquet DIV que usamos como contenedor
var contenido = codigo.match(/<div id="contenedorV7">([\s\S]*)<\/div>/)[1]
//Parseamos el retorno
objetoJSON = JSON.parse(contenido);
//Si Accion es abrir  formulario
if (objetoJSON.Accion == 1){
	theApp.setGlobalVar("49lc09kz.vcd/REG", objetoJSON.Codigo);
	theRoot.runProcess("49lc09lq.vca/VER_RESERVA");
}

Ahora solo queda alimentar el HTML con los datos que queramos mostrar para poder interactuar con ellos de la forma que más nos guste.

Espero que haya quedado lo más claro posible.

Un pequeño ejemplo de lo que hace:
http://www.youtube.com/watch?v=r6ukpLJGzjE&feature=youtu.be

Saludos


([N4] velavisual) #2

@Mario

Muchas gracias por el aporte Mario


([N3] blavan) #3

Muchas gracias, otra puerta que se abre.


([N1] roberto) #4

Hola chicos, el hilo es muy interesante y lo necesito. ¿Tenéis algún tutor o ejemplo para verlo ?

Me pierdo un poco en donde poner cada parte de codigo

Hracias


([N3] veldevelop) #5

+1000 Genial por fin me entero de como se hace esto pero al igual que [N1] roberto no me entero de donde y como enlazan los js con el control html.

Gracias por el aporte. Estas son las cosas que realmente le dan valor añadido a @Velneo.


([N1] Mario) #6

A ver si consigo que lo veáis paso a paso:

Paso 1: Formulario con objeto HTML que tiene como identificador “HTML”
Ese formulario ha de tener un evento post-inicializado con el siguiente código:

//Obtenemos el control del visor HTML
var html = theRoot.dataView().control( "HTML" );
//Le indicamos que seremos nosotros quienes controlaremos las pulsaciones de los links
html.setLinkDelegationPolicy( VCWebView.DelegateAllLinks );

En este código le diremos que nosotros controlaremos los eventos que se produzcan al interactuar con el

Paso 2: En el visor de HTML debemos de tener el siguiente código para que cuando se haga algo sobre ese html, este llame a velneo y nosotros nos enteremos de lo que se está haciendo. Para ello hay que hacer varias cosas

2.a Una etiqueta donde dejaremos en el HTML la información que leeremos desde velneo

<div id='contenedorV7'></div>

2.b Una función que al llamarla desde dentro del HTML, simulamos un click del ratón sobre un link y así podemos capturarlo con el evento link clicked de velneo

function simulateClick(id) {
  var evt = document.createEvent('MouseEvents');
  evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0,
  false, false, false, false, 0, null);
  var cb = document.getElementById(id);
  cb.dispatchEvent(evt);
}

2.c “La conexión de evento” de nuestro HTML para que velneo se entere de lo que estamos haciendo. Es un código javascript que en este caso se usa en un componente de calendarios

dp.onTimeRangeSelected = function (args) {
        //Guardamos dentro del contenedor 2.a creado anteriormente lo que queremos pasar a velneo para trabajar con ello. En este caso pasamos un JSON con la informacíón de la acción a realizar, donde y la hora de inicio
        document.getElementById('contenedorV7').innerHTML= '{"Accion": 2, "Inicio":"' + args.start + '", "Pista": '+ args.resource +'}';
        //Llamamos a la función 2.b para que el HTML simula un click y velneo se entere de que tengo que leer el contenido de la etiqueta 2.a y así saber que debo de hacer
        simulateClick('external')
    };

Paso 3: Ahora desde velneo, debemos de leer esa etiqueta 2.a (por que se va a disparar el evento de forma automática al interactuar en el HTML)para extraer el JSON con el que operaremos y sabremos que hacer. Para ello en el formulario tendremos una conexión de evento click linked que llamará a un evento con el siguiente código y permitirá hacer las operaciones que necesitemos en velneo para interactuar con el HTML

//Obtenemos el control HTML
var html = theRoot.dataView().control( "HTML" );
//Leemos el código fuente del objeto HTML donde tenemos la etiqueta DIV que usamos de contenedor para enlazar HTML y V7
var codigo = html.sourceCode();
//Sacamos el contenido de la etiquet DIV que usamos como contenedor
var contenido = codigo.match(/<div id="contenedorV7">([\s\S]*)<\/div>/)[1]
//Parseamos el retorno
objetoJSON = JSON.parse(contenido);
//Si Accion es abrir  formulario
if(objetoJSON.Accion == 2){
	//Nueva reserva
	//Mostramos el formulario de edición 
	var formulario = new VDataViewDialog(theRoot);
	formulario.setDataView(VObjectInfo.TypeForm, "app/NOR_RES")
	formulario.setVar("ALTA", 1);
        //Dentro del JSON tenemos las "variables" que queremos pasar desde el HTML a velneo
	formulario.setVar("INI", objetoJSON.Inicio);
	formulario.setVar("PIS", objetoJSON.Pista);
	//Mostramos el formulario
	formulario.exec();
}



([N3] Juanjo) #7

Gracias Mario.


([N1] roberto) #8

Gracias Mario


([N3] veldevelop) #9

Mario así es un lujo leer los post en el foro. GRACIAS, GRACIAS Y MUCHAS + GRACIAS
Estas son de las cosas que me quejo en @velneo, la falta de ejemplos de como hacer ciertas cosas.
El trastear con googleMaps, el interactuar con HTML,Generación de gráficos,etc… son cosas que no hay “Documentación para torpes”
Al tratarse de una plataforma empresarial todos estos detalles debieran de estar documentados y con ejemplos para aburrir como ocurren en otros entornos de desarrollo.


([N2] Omar Hernandez) #10

Buenos días.
Muchísimas gracias por el ejemplo.
Apoyo 100% el comentario de veldevelop, se hacen necesarios más ejemplos de cosas concretas, es cierto que a nivel de usabilidad de la plataforma hay muchos videos, pero creo que estamos en un punto en donde una parte de Velneo, puede dedicarse a hacer tutoriales de uso práctico, o de aplicación real de la teoría y del alcance de los objetos.

Saludos.


([N4] carlitos) #11

Hola mario
estoy implementando el ejemplo html, pero me encuentro parado en el paso 2b.
¿cómo creo una función en javascript?

NO tengo claros los pasos 2a, 2b y 2c.
Esto del javascript todavía me cae grande, pero estoy en ello
gracias


([N1] aztecmexico) #12

Pregunta de novato en estas cosas, ¿el siguiente código donde va?

dp.onEventClicked = function(args) {
        document.getElementById('contenedorV7').innerHTML= '{"Accion": 1, "Codigo":' + args.e.id() + '}';
        simulateClick('external')
    };

En qué parte del HTML se inserta, y que significa “dp”, tambien la parte de “args” se escribe tal cual?, y en args.e.id() qué significa?

Perdón por tanta pregunta en apariencia absurda, pero apenas estoy mascando esto de interactuar con las acciones html.

Saludos.


([N3] pacosatu) #13

Hola aztecmexico.

El JavaScript dentro del HTML gestiona los objetos del propio DOM del explorador y aquellos objetos que haya aportado el API con el que estamos trabajando. En este caso Mario usa un API para la gestión de un Hotel.
Además de los objetos, javascript gestiona los Eventos que se producen por la acción del Usuario u otros agentes.

Entonces con la expresión dp.onEventClicked estamos declarando que cuando se produzca el evento Click sobre el objeto dp se ejecute la función descrita, la cual recibe un objeto args con los argumentos necesarios para gestionar el evento.

El identificativo dp es un objeto perteneciente al API de la gestión del Hotel, seguramente es la agenda con la ocupación de las habitaciones. Haciendo click en la agenda, el API del Hotel nos indica qué barra azul hemos pulsado.

En la documentación del API es donde obtenemos información del objeto args que recibe la función.
En este caso args.e.id() devuelve el id asignado al objeto sobre el que hemos hecho click, pasado como e.

Con la informaciòn del objeto sobre el que se ha hecho click (Codigo:Id), montamos una cadena JSON para que pueda ser recibida en Velneo como un String y parseada correctamente.

Lo más correcto es que pongas la declaración dp.onEventClicked después de cargar el API del Hotel y de pintar la agenda.

Suerte con el apredizaje porque es un tema muy duro y de mucho prueba y error ante la falta de buenas herramientas en Velneo para que esto sea life is soft.

Saludos
Paco Satué


([N2] Mgalvezh) #14

Gracias por las explicaciones, se necesita un ‘tutor integración con HTML’ como el comer, una pregunta ¿será el visor HTML compatible con una buena cantidad de APIs y componentes javasript HTML ?


([N1] aztecmexico) #15

Gracias Paco,

Ya tuve oportunidad de platicarlo tambien con Mario, quien me orientó sobre las principales dudas al respecto.

Mgalvezh, como bien indicas, hace falta un tutor que nos indique los aspectos generales de ese tipo de integraciones del visor HTML, por lo que yo he visto y he estado probando, si las APIS van en Javascript y manejan eventos si es compatible con la mayoría, solo es cuestión de estudiar cada API a fondo y, como en mi caso, aprender o aprender javascript puro y vjavascript de velneo.

Saludos.


([N1] aztecmexico) #16

Bueno, pues como alguna vez dijiste Paco,

La primera en la frente

Aún con tu advertencia

Suerte con el apredizaje porque es un tema muy duro y de mucho prueba y error ante la falta de buenas herramientas en Velneo para que esto sea life is soft.

Jajajaja, pues no me queda más que reir, sobre todo porque despues de mucho, mucho prueba y error, al fín se consiguio el objetivo, y pues ya andado el caminito una vez, lo demás se hace polvo.

Simplemente agradecer a todos quienes no tienen empacho en compartir sus conocimientos ya que, ¿qué seriamos algunos sin ustedes?, en este caso el invaluable apoyo de Mario Valdés y, como no habría de serlo, de Paco, sin olvidar a muchos, muchos otros que en otros posts del foro tambien me sirvieron para consultar algunas otras dudas que iban saliendo.

Saludos y ya me voy a dormir, para digerir un poco lo aprendido hoy.

Hasta pronto.

Martin Ibarra.


([N1] cristianvg2003) #17

Les aporto mi granito de arena:

Al igual que con QML para sacarle jugo al visor HTML si o si hay que manejarse con HTML, CSS y Javascript pero es una inversión mucho más rentable que QML pues en este entorno te encontraras con un sin fin de librerías y alternativas para solucionar problemas de UI que con Velneo o no se puede o llevaría una cantidad enorme de trabajo.

Después de gastarme unos meses desarrollando un proyecto para un cliente quedé gratamente sorprendido por las capacidades actuales del componente HTML el renderizado de verdad es muy bueno y puede usar casi todas las capacidades CSS3, por lo que usar librerias como bootstrap, fundation, material, etc es igual de simple que con un browser normal.

Por mi parte desarrolle el parte del front-end de la aplicación usando Ember.js + Bootstrap + JQuery y la verdad la experiencia fue muy buena, literalmente el mismo interface que sirve Cirrus.js puede ser renderizado usando el componente html de Velneo, parte de esta experiencia me obligo a llevar a Cirrus.js a nuevas fronteras con lo que trabajar usando framerwork de front-end (Angular, Emeber, Backbone, etc) + una API desarrollada en Cirrus.js o vModApache es e verdad muy práctico.

Solo encontré 2 problemas:

  1. No es posible usar algunas iconos tipo fuente como fontAwesome que es tan popular, al parecer no se las lleva bien con este tipo de iconos.

  2. yo particularmente uso herramientas como grunt o gulp para compilar los js para que al momento de incluirlos en el proyecto v7 solo sea un par de archivos y listo, pero en algunos casos específicos es necesario tomar ciertas librerías por aparte, cosas de prueba y error.

Un saludo,




([N1] OscarBarea) #18

Muy buenas las pantallas que presentas, muy trabajadas.
No habría ninguna posibilidad que alguien compartiera algún ejemplo físico (.vin) de como hacer este tipo de implementaciones. Son puntos que los clientes piden, pero si no estás muy ducho en java, etc… no llegas.
Gracias
Oscar B.


([N1] vgegeo) #19

Buenas

Estoy probando a montar un visor HTML y operar con él, pero me encuentro que no recibo el valor en V7.
He seguido el ejemplo de Mario:

Tengo al final del HTML:

<div id=\ccontenedorV7\c></div>
<a href=\c#\c>Link para simular click</a>
</body>
</html>

Y he añadido una funcion para enviar el valor de dicho contenedor:

function mensaje(){
  document.getElementById('contenedorV7').innerHTML = '{\cAccion\c: 1, \cCodigo\c:200}';
        simulateClick('external')
};

Cuando hago clic en algun link con dicha funcion no llega a V7 el contenedorV7 con el valor asignado.
<a href=\c#\c on click = \c mensaje() \c></a>

El resto de componentes explicados en el hilo, los tengo correctamente, pero no me llega el valor del contenedorV7 al proceso

¿Alguna idea?


([N1] vgegeo) #20

Solucionado,
Por lo visto era un problema del refresco continuo que tiene el visor HTML.

Parece ser que el orden de ejecucion era asi:
-Hacía clic en enlace
-Script del HTML actualizaba el contenido del DIV
-Reload del visor HTML (aqui al refrescar, el DIV volvia a su estado original, vacio)
-Ya en manejador, no llega la informacion.

La solucion la aportaba Paco en este otro hilo, evitando el refresco continuo del visor HTML.
Enlace al hilo: Como evitar el continuo reload en el visor HTML

Gracias, saludos