ZK Binding Tracker - A Chrome Extension

Author
Hawk Chen, Engineer, Potix Corporation

Date
27th June, 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, the general practice is that you can turn on the debugging information printing described in ZK_Developer's_Reference/MVVM/Configuration. However, 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 become hard to read.

We therefore hereby present you a tool: ZK BindingTracker which is 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.

ZK Binding Tracker

Features

Unknown Annotation Checking

If visited ZUL page contains non-ZK-bind annotations, it will remind 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.

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 while the arrows point out the direction of data flow. 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)" />

The above logs show that ZK adds 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 regarding 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')" />

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

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

Related Logs Highlight

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.

Click a textbox.

The page shows a message to point out the textbox.

Install & Configuration

1. Download ZK Binding Tracker (zkbind-debugger-bin-0.8.2.zip) and extract the downloaded file
Note. ZK Binding Tracker is currently an experimental version for trial only.

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 , 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. (Window users have different installation steps. Please see next section).

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

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.

Install the Chrome Extension in Windows (Since 2014/5/27)

Google starts to block local Chrome extensions since 2014/5/27. Please follow the steps below to install the extension:

1. Unpack the file zkbind-debugger-bin-0.8.2/zkbind-tracker/chrome-extension.crx with a zip tool
   • rename the file chrome-extension.crx to chrome-extension.zip and unzip the contents
   • the unpacked folder will contain e.g. a manifest.json
2. Open chrome's extension settings (url: chrome://extensions/) and enable "Developer mode"
3. Click "Load unpacked extension" and choose the folder unzipped in step 1

Comments

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