ZK 的label组件有setValue方法,如果当它的值发生变化的时候在客户实现一些特殊的效果,我们必须在客户端覆盖setValue操作。
<label id="stockPrice1" value="100" w:setValue="updateWithExplosion"/>
覆盖setValue()方法
function NAME (value, fromServer) { this.$setValue(value, fromServer); if (this.desktop) { jq(this).WHATEVER_EFFECT } }
完整的页面代码
<?page title="Auto Generated index.zul"?> <zk xmlns:w="http://www.zkoss.org/2005/zk/client"> <!-- CLIENT SIDE FUNCTIONALITY! --> <?script src="jquery-ui-1.7.2.custom.min.js"?> <script> <![CDATA[ function updateWithExplosion (value, fromServer, updateColor) { if(this.desktop) { jq(this).effect("explode", {}, 500); } this.$setValue(value, fromServer); if (this.desktop) { if (updateColor) { jq(this.getCaveNode().parentNode.parentNode).css({background: ((value<0) ? 'red':'green')}); this.setStyle('color: #FFFFFF'); } jq(this).show("drop", {direction : "up"}, 1000); } } function updateWithColorAndExplosion (value, fromServer) { updateWithExplosion.call(this, value, fromServer, true); } ]]> </script> <!-- SERVER SIDE FUNCTIONALITY! --> <zscript> <![CDATA[ public void updateStocks() { Object[] values = getStockValues(); Label stockPrice = stockGrid.getFellow(values[0]); Label stockDifference = stockGrid.getFellow(values[1]); int newValue = ((Number)values[2]).intValue(); int difference = newValue - Integer.parseInt(stockPrice.getValue()); stockPrice.setValue(Long.toString(newValue)); stockDifference.setValue(Long.toString(difference)); } public Object[] getStockValues() { int randomControl = (int)Math.ceil(Math.random() * 3); return new Object[] {"stockPrice" + randomControl, "stockDifference" + randomControl, (int)Math.ceil((Math.random() * 10) + 95)}; } ]]> </zscript> <!-- ZUL MARKUP (UI IMPLEMENTATION!) --> <timer id="updateTimer" delay="3000" repeats="true" onTimer="updateStocks()" /> <grid id="stockGrid" fixedLayout="true"> <columns> <column label="股票名称" /> <column label="股票价格" /> <column label="股票变化" /> </columns> <rows> <row> <label id="stockName1" value="Ultra Corp: " /> <label id="stockPrice1" value="100" w:setValue="updateWithExplosion"/> <label id="stockDifference1" value="0" w:setValue="updateWithColorAndExplosion"/> </row> <row> <label id="stockName2" value="Amazing Corp: " /> <label id="stockPrice2" value="100" w:setValue="updateWithExplosion"/> <label id="stockDifference2" value="0" w:setValue="updateWithColorAndExplosion"/> </row> <row> <label id="stockName3" value="Great Corp: " /> <label id="stockPrice3" value="100" w:setValue="updateWithExplosion"/> <label id="stockDifference3" value="0" w:setValue="updateWithColorAndExplosion"/> </row> </rows> </grid> </zk>