ZK Binding Tracker - A Chrome Extension

From Documentation
DocumentationSmall Talks2013JuneZK Binding Tracker - A Chrome Extension
ZK Binding Tracker - A Chrome Extension

Author
Hawk Chen, Engineer, Potix Corporation
Date
, 2013
Version
ZK 6.5.2



Introduction

When you interact with a ZUL page built in MVVM approach, ZK does lots of things behind the scenes according to binding expressions. If you want to know what it does in detail, you can turn on debugging information printing described in ZK_Developer's_Reference/MVVM/Configuration. But this configuration will print messages on the server's console, and it is system-wide, which means debugging information of all pages will be printed and it will be hard to read.

Therefore, we present you a tool: ZK BindingTracker. It's a Chrome extension that can be installed on your Chrome browser. It can display the debugging information for the current ZUL page in rich format.


Binding tracker introduction.png
ZK Binding Tracker

Features

Unknown Annotation Checking

Binding tracker unknow-annotation.png

If visited ZUL page contains non-ZK-bind annotations, it reminds you with a warning message.


Rich Format Printing

The tracker can print logs in rich format with icons and styled texts which are easy to read. Let's see some logs the tracker prints.

Binding tracker load save binding.png

After a ZUL page is loaded, the tracker shows add-binding logs. The above logs show that ZK adds a save and a load binding and the arrows point out the data flow direction. A load binding loads data from ViewModel's property (vm.element.name) to a component's attribute (value. Its source ZUL might be like:

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


Binding tracker load save binding with command.png

The above logs show that ZK add several save or load binding with command condition and a command binding. Its source ZUL might be like:

<textbox value="@save(vm.element.name, before={'cmd1','cmd2'})" />
<label value="@load(vm.element.name, after='cmd1')" />
<button label="save1" onClick="@command('cmd1')" />


When you interact with the ZUL page, e.g. click a button, the tracker will print what ZK does about data binding immediately. If we have a ZUL page with a validator below:

<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')" />
Binding tracker event validation fail.png

The above logs show a validation failure case. We can see that a button is clicked, the command cmd1 is triggered, and the vm.validator1 performs validation.

Binding tracker event validation pass.png

The above logs show a validation success case. Because the validation passes, data is saved to the ViewModel and command is executed.

Related Logs Highlight

Binding tracker highlight same component.png

When you select a log row (the red background row), all logs related to the same component (in this case, selected row is related to a textbox) are also highlighted (blue background rows).


Binding Component Highlight

If you click on the link in a log, the tracker will locate the component to which the clicked binding expression binds.

Binding tracker click component.png

Click a textbox.

Binding tracker component highlight.png

The page shows a message to point out the textbox.

Install & Configuration

1. Download ZK Binding Tracker and extract the downloaded file (zkbind-debugger-bin-0.8.0.zip)

2. Copy debugger jar (/dist/lib/zkbind-debugger.jar in the zip file) to your WEB-INF/lib folder

3. add following configurations to your web application's zk.xml

<library-property>
	<name>org.zkoss.bind.DebuggerFactory.enable</name>
	<value>true</value>
</library-property>
<library-property>
	<name>org.zkoss.bind.DebuggerFactory.class</name>
	<value>org.zkoss.bind.addon.sys.debugger.ChromeExtensionDebuggerFactory</value>
</library-property>

4. Install Chrome extension. In Chrome's menu Chrome menu icon.png, select Tools > Extensions to open extension tab. Drag the extension file (/zkbind-tracker/chrome-extension.crx in the zip) to Chrome extension tab to install.

5. After installation, you can see the tracker's icon next to Chrome's menu. Extension icon.png

Usage:

  1. Start your application.
  2. Use Chrome to visit a page with ZK MVVM binding.
  3. Click the ZK Binding Tracker Icon to open the extension and it will open a new Chrome window.

Comments



Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.