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…
- 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 );
- 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>
- 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);
}
- 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
