ZK Binding Tracker - Una extensión para Google Chrome.

Introducción

Al interactuar con una página ZUL construida en el enfoque MVVM, ZK hace un montón de cosas detrás de las escenas de acuerdo con las expresiones de enlace. Si usted quiere saber lo que hace en detalle, la práctica general es que se puede activar la impresión de la información de depuración descrito en ZK_Developer's_Reference/MVVM/Configuration. Sin embargo, esta configuración imprimirá mensajes en la consola del servidor, y es el sistema, lo que significa que la información de depuración de todas las páginas se imprimirán y se hará difícil de leer.

Por lo tanto, se desarrolló la herramienta: ZK BindingTracker que es una extensión de Chrome que se puede instalar en su navegador Chrome. Puede mostrar la información de depuración para la página ZUL actual en formato enriquecido.

Imagen 1 ZK Binding Tracker

Características

Chequeo de Anotaciones Desconocidas

Si la página ZUL visitados contiene anotaciones que no sean de tipo ZK-bind, se le recordará con un mensaje de advertencia.

Formato de impresión enriquecido.

El tracker puede imprimir los registros en formato enriquecido con iconos y textos de estilo que son fáciles de leer. Veamos algunos registros de las impresiones del tracker.

Después de cargar una página ZUL, el tracker muestra los registros add-bingding. Los registros anteriores muestran que ZK añade un enlace para salvar y cargar, mientras que las flechas señalan la dirección del flujo de datos. El enlace de Cargar, se encarga de la carga los datos de la propiedad de ViewModel (vm.element.name) a atributos de un componente (value. Su ZUL fuente podría ser así:

1	<textbox value="@bind(vm.element.name)" />

Los registros anteriores muestran que ZK añade varios enlaces para guardar o cargar con la condición de comandos y un comando vinculante. Su ZUL fuente podría ser así:

<textbox value="@save(vm.element.name, before={'cmd1','cmd2'})" />

<label value="@load(vm.element.name, after='cmd1')" />

<button label="save1" onClick="@command('cmd1')" />

Al interactuar con la página ZUL, por ejemplo, haga clic en un botón, el tracker imprimirá lo que ZK ejecuta para realizar la vinculación de los datos. Si tenemos una página ZUL con un validador que a continuación mostramos:

<textbox value="@save(vm.element.name, before='cmd1') @validator(vm.validator1)"/>

<label value="@load(vm.element.name, after='cmd1')" />

<button label="save1" onClick="@command('cmd1')" />

Los registros anteriores muestran un caso de error de validación. Podemos ver que en un botón se hace clic, el comando cmd1 se dispara y vm.validator1 realiza la validación.

Los registros anteriores muestran un caso de éxito de la validación, con el paso de las validaciones, y los datos se guardan al ViewModel y el comando es ejecutado.

Registros relacionados con Highlight

Cuando se selecciona una fila de registro (la fila fondo rojo), también se resaltan todos los registros relacionados con el mismo componente (en este caso, la línea seleccionada está relacionado con un cuadro de texto) y también están resaltadas (filas fondo azul).

Enlazando componentes remarcados.

Si hace clic en el enlace en un registro, el tracker le localizara el componente al que se une la expresión de enlace en la que ha hecho clic.

Clic en un textBox

La página muestra un mensaje para señalar el cuadro de texto.

Instalación y Configuración.

1. Descarga el ZK Binding Tracker aquí y extrae el fichero descargado (zkbind-debugger-bin-0.8.0.zip)


2. Copie el jar del debugger (/dist/lib/zkbind-debugger.jar en el fichero zip) a tu carpeta WEB-INF/lib


3. Adiciona la siguiente configuración al zk.xml de tu aplicación web: 


4. Instala la extensión de Chrome. En el menú de Chrome, selecciona Tools > Extensions para abrir el tab de extensión. Arrastra el fichero de extensión (/zkbind-tracker/chrome-extension.crx en el zip) al tab de extensiones de Chrome.


5. Después de la instalación, usted puede ver el icono del tracker, cerca del menú del navegador Google Chrome.

Modo de Usar la extensión:

1. Inicia tu aplicación.
   
2. Usa Chrome para visitar una página web con el modelo ZK MVVM.
   
3. Haga clic en el icono de la herramienta ZK Binding Tracker para abrir la extensión y se le abrirá una nueva ventana de Chrome.

Esperamos que esta extensión para Google Chrome les resulte útil en su trabajo. Quedamos al tanto de sus comentarios.