I recently implemented a dashboard type of web application in
ZK to display a collection of
KPI metrics data using various views, for example
- Dashboard view - by using some flash dial/meter widgets
- Tree view - see screenshot below
- Google map view - showing geographical metrics on the map
I want to use ZK's server push feature to dynamically update the views only when the corresponding metric value has been changed and detected from the back end/server side. The examples that are available from ZK small talks invariably pass the widget(s) to be updated to the worker thread and have them updated by the server side. This approach does not quite work in my application for the following reasons:
- The various views (see screenshot above) are opened/closed by the user dynamically. Therefore, I don't know which widgets are visible and should be updated;
- There are too many widgets to be updated - there could be dozens or hundreds of metrics displayed in the view. So one approach could be to pass the whole view to the server side and have it figure out which widgets to update. I feel that the server side shouldn't be bothered with such a responsibility and the shear number/volume of the widgets involved in the view could render this infeasible.
So I took an alternative approach by combining the server push and event posting that are available in ZK framework.
The main page (main.zul file) contains the code to turn on and off server push as part of its zscript:
void startServerPush() {
if(!desktop.isServerPushEnabled()){
desktop.enableServerPush(true);
}
MetricsUpdateThread mut = new MetricsUpdateThread(user, desktop);
mut.start();
}
void endServerPush() {
if(desktop.isServerPushEnabled()){
desktop.enableServerPush(false);
}
}
The
MetricsUpdateThread class is shown below:
public class MetricsUpdateThread extends Thread {
private static final int DELAY_TIME=2000; // 2 second.
private Desktop _desktop;
private boolean _ceased;
public MetricsUpdateThread(Desktop desktop) {
this._desktop=desktop;
}
public void updateChangedMetrics() {
HashSet<Metric> metrics=new HashSet<Metric>();
// find all changed metrics and put them in the metrics Set
...
if(metrics.size()>0)
Events.postEvent(new Event("onMetricChanged", null, metrics));
}
public void run() {
if (!_desktop.isServerPushEnabled())
_desktop.enableServerPush(true);
try {
while (!_ceased) {
Executions.activate(_desktop);
try {
updateChangedMetrics();
} finally {
Executions.deactivate(_desktop);
}
Threads.sleep(DELAY_TIME); // Update delay time
}
} catch (DesktopUnavailableException due) {
//System.out.println("Browser exited.");
} catch (InterruptedException ex) {
//System.out.println("Server push interrupted.");
} catch (IllegalStateException ie) {
//System.out.println("Server push ends.");
} finally {
if (_desktop.isServerPushEnabled()) {
_desktop.enableServerPush(false);
//System.out.println("Server push disabled.");
}
}
}
}
Notice the
Events.postEvent() in the
updateChangedMetrics() method, which broadcasts an event if there are any changed metrics. These events are then handled by the corresponding view's zscript. For example, the treeview above has the event handler at its root component like so:
...
metrics = event.getData();
for(Metric metric : metrics) {
tcMovement = win.getFellowIfAny(metric.getId()+"_move");
if(tcMovement!=null) {
tcMovement.setImage(Util.constructMovementImage(metric));
tcValue = win.getFellow(metric.getId()+"_value");
tcValue.setLabel(metric.getValueAsString(metric.getCurrentValue()));
}
}
...
...
This approach of combining Server Push and Event broadcasting achieves the effect that I wanted. However, I can't help feeling that it is a bit complicated. So I wonder whether there is a better, simpler or more standard approach to achieve the same user experience in ZK.
