With a rich UI component set and scripting support, you could quickly construct an application's UI, do modifications directly as you see fit, and see the result without re-compiling or restarting the application server.

UI Composition:

In a markup file, each UI component is represented as an XML element (tag). You can configure each component's style, behaviour, and functionality by setting the XML element's attributes.

<window title="Item List" width="600px" border="normal">
...
</window>					 
		 	

Components enclosed by another component are said to be the children components. In the sample code below, the Hbox component and the Groupbox component are children components of the Window component.

<window>
	<hbox >...</hbox>
	<groupbox>...</groupbox>
</window>		 
		 	

Event Handling:

A component fires event(s) when a user interaction is made. Developers write event handling code that respond to user's actions by listening to the corresponding events. The name of an event attribute always starts with on and ends with EventName; for example, a button's "onClick" event. To handle an event directly in markup, you include an onEventName attribute in the component tag and assign the event handling script as the event attribute's value.

<button label="Add Item" onClick="addItem(itemName.getValue())" />				
			

Server Side Script:

While prototyping, server side scripting may be used to initialize pages or handle user's action. You may write scripts in an event attribute directly, or in a zscript element body. The default language for scripting is Java, you may also use Ruby, Groovy, and JavaScript.

<button label="Add Item" onClick="addItem(itemName.getValue())" />
<zscript>
	void addItem(String name){
		...
	}	
</zscript>		
			

Note:

While server side scripting is ideal for prototyping, MVC and MVVM are the recommended approach to control your application.

<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>