Queremos que el Calendario seleccionado en el Casillero se muestre en el Visor HTML de Velneo para disponer de interactividad mediante HTML5, SVG y JavaScript.

Primero construimos el código HTML con el Calendario y el código necesario para editarlo. El Visor HTML mostrará el Calendario mediante el motor Webkit y tendremos que diseñar un sistema de lectura de la información introducida por el Usuario.

El proceso es el siguiente:

•Obtenemos el Calendario seleccionado en el Casillero para guardar los valores del Año y Mes.

El manejador CALENDARIO_VER devuelve el código para el Visor HTML.

El campo SEL de la tabla temporal se pone a 1 en el registro seleccionado y nos sirve para mostrar el fondo amarillo que resalta el Calendario en el Casillero.

El proceso PRO_CAL_VER carga la plantilla con el código HTML e inserta en ella el objeto JSON con los datos de las Citas desde la tabla SVG_CAL_CITAS.

•Una vez tenemos el código HTML del Calendario lo inyectamos en el Visor HTML mediante el manejador ACTUALIZAR_VISOR_JS.

Usamos la función setSourceCode() para evitar problemas de refresco en el Visor HTML.

var oForm = theRoot.dataView();


// Obtenemos el control Visor HTML

var oVisorHTML = oForm.control("CTR_VISOR_HTML");


// Fijamos el código HTML del control

// Establecemos también el Path Base para los URL's relativos

oVisorHTML.setSourceCode(theRoot.varToString("CHTML"),theRoot.varToString("CPATH_BASE"));


// Tenemos que delegar los clicks siempre después de fijar el código HTML, de lo contrario no funciona

oVisorHTML.setLinkDelegationPolicy(VCWebView.DelegateAllLinks);


La función setLinkDelegationPolicy() nos permite capturar los eventos Click que el Usuario haga en los enlaces dentro del código HTML. En este caso vamos a generar los Click de forma automática y de esta forma podemos controlar cualquier evento programado mediante código JavaScript en el Calendario.

•El usuario puede cambiar el estado de ocupación de las Citas en el Calendario haciendo click en la casilla correspondiente. Ese click es gestionado por el código JavaScript del Visor HTML y mediante un String JSON pasamos la información en el atributo href de un objeto creado para este cometido.

El evento Link clicked del Visor HTML es gestionado por el Manejador de evento CLICK_HTML:


Manejador CLICK_HTML

En la variable local EVENT_PARAMS[1] tenemos el String JSON generado en el Visor HTML. Obtenemos la información contenida en el String JSON y ejecutamos el proceso PRO_CAL_EDITAR en segundo plano para no bloquear el Visor HTML.


Proceso PRO_CAL_EDITAR

Primero actualizamos la tabla en disco con los datos pasados en el String JSON y después volvemos a generar el código svg de la tabla temporal SVG_CAL_MESES para el calendario seleccionado en el Casillero. El refresco secundario de Velneo mostrará el Calendario actualizado en el Casillero.

•Con este código conseguimos refrescar los Calendarios del Casillero desde el Visor HTML.

En Cloud el Casillero no es precisamente un control optimizado. En la primera carga tiene que construir el código svg para cada mes seleccionado y aunque se ejecuta en 3P tiene que devolver ese código al 1P. Por lo tanto es preciso optimizar el código svg al máximo para que la carga inicial sea lo más rápida posible.









Created with the Personal Edition of HelpNDoc: Easy to use tool to create HTML Help files and Help web sites