|
Processing... Unlike other demonstrations, here we utilised ZK's server side scripting feature to code the event handling bits right on the markup file.
Description & Source Code
demo.zul
<window title="Item List" width="600px" border="normal"> <hlayout valign="middle"> Name : <textbox id="itemName" constraint="no empty" /> <!-- call a method directly in an event --> <button label="Add Item" onClick="addItem(itemName.getValue())" /> <button label="Delete Item" onClick="deleteItem()" /> </hlayout> <groupbox> <caption> Total Items : <label id="itemCount"/> </caption> <listbox id="itemList" rows="5"> <listhead> <listheader label="Item" /> </listhead> <listitem label="Nissan Primera"/> </listbox> </groupbox> <!-- Programming with zscript is usually for prototyping or small-system only. If you are developing a large system, you should use Presenter or Presentation Model Pattern to control your application. --> <zscript><![CDATA[ //declare zscript methods void addItem(String name){ //you could new a component directly and append it to another component. Listitem item = new Listitem(name); itemList.appendChild(item); //select the new created item. itemList.setSelectedItem(item); updateItemCount(); } void deleteItem(){ int index = itemList.getSelectedIndex(); if(index >= 0){ //remove the selected item itemList.removeItemAt(index); updateItemCount(); }else{ //a easy way to show a message to user alert("Please select an item first!"); } } void updateItemCount(){ //update extra information for user itemCount.setValue(Integer.toString(itemList.getItemCount())); } //initialize updateItemCount(); ]]></zscript> </window>
Copyright © 2005-2024 Potix Corporation All rights reserved.
|
Processing... |