Zeleos Web Toolkit V0.2.1 UI Description Language Reference

action

The action tag is used to define an action on a widget. You can also use this tag in an application tag to define an action on Window events.

name: [mandatory] The name of the controller method to call on a user action.
event: [mandatory] The type of the event depending on the widget.

<zwt:button id="Button">
	<zwt:set name="Text" value="'Click'" />
	<zwt:action name="didClickOnButton" event="click" />
</zwt:button>

application

The application tag is a top level tag that describe an application. It is used to create the HTML and JS files entry points of a ZWT application.

id: [mandatory] The id of the application.
namespace: [mandatory] The namespace of the application. It should be the same as the directory structure.
title: The title of the application.

<zwt:application id="HelloApp" namespace="org.zeleos.samples" title="Hello World App" xmlns:zwt="http://www.zeleos.org/zwt/zwt-uidl">
	<zwt:part var="hello" class="org.zeleos.samples.Hello"/>
</zwt:application>

button

The button tag represents the Button widget. It is used to add a Button under a container element.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:button id="Button" weight="1">
	<zwt:set name="Text" value="'Button'"/>
</zwt:button>

checkbox

The checkBox tag represents the CheckBox widget. It is used to add a CheckBox under a container element.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:checkBox id="CheckBox" weight="1">
	<zwt:set name="Text" value="'Checked?'" />
	<zwt:set name="LabelPosition" value="zwt.ui.CheckBox.BEFORE" />
</zwt:checkBox>

controller

The controller tag represents a Controller. It is used to add a Controller's part under a container element. At runtime the Controller is instantiated to control the view.

id: [mandatory] The id of the Controller.
class: [mandatory] The qualified name of the Controller class.

<zwt:controller class="org.zeleos.test.controls.ControlsController" id="ControlsPart"/>

deckPanel

The deckPanel tag represents the DeckPanel widget. A DeckPanel is a multiple container for widgets, they are displayed in a deck, only one is visible at a time.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:deckPanel id="Deck">
	...
</zwt:deckPanel>

divider

The divider tag is used to add a divider to a VerticalPanel or a HorizontalPanel. A divider allow the resize of widgets inside a panel just like a splitPanel.

<zwt:verticalPanel id="VerticalPanel">
	...
	<zwt:divider/>
	...
</zwt:verticalPanel>

fieldset

The fieldset tag represents the FieldSet widget. It is used to add a FieldSet under a container element.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:fieldset id="Fieldset" weight="1">
	<zwt:set name="Legend" value="'A legend'" />
</zwt:fieldset>

frame

The frame tag represents the Frame widget. It is used to add a Frame under a container element.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:frame id="Frame" weight="1">
	<zwt:set name="URL" value="'http://www.google.com'"/>
</zwt:frame>

horizontalPanel

The horizontalPanel tag represents the HorizontalPanel widget. A HorizontalPanel is a multiple container for widgets, they are displayed horizontally. A weight has to be set to a child widget indicating the space allocated to it. If no weight is specified then the normal space of the widget is used.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:horizontalPanel id="HorizontalPanel">
	...
</zwt:horizontalPanel>

html

The html tag represents the HTML widget. It is used to add a HTML under a container element.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:html id="Frame" weight="1">
	<zwt:set name="HTML" value="'<h1>This is HTML...</h1>'"/>
</zwt:html>

image

The image tag represents the Image widget. It is used to add a Image under a container element.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:image id="Image" weight="1">
	<zwt:set name="Source" value="'foo.jpg'"/>
</zwt:image>

label

The label tag represents the Label widget. It is used to add a Label under a container element.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:label id="Label" weight="1">
	<zwt:set name="Text" value="'Label'"/>
</zwt:label>

link

The link tag represents the Link widget. It is used to add a Link under a container element.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:link id="Link" weight="1">
	<zwt:set name="Text" value="'Google'"/>
	<zwt:set name="URL" value="'http://www.google.com'"/>
</zwt:link>

listBox

The listBox tag represents the ListBox widget. It is used to add a ListBox under a container element. ListBox contains list items.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:listBox id="Link" weight="1">
	<zwt:set name="VisibleSize" value="3"/>
	<zwt:item value="0" text="apple"/>
	<zwt:item value="1" text="orange"/>
	<zwt:item value="2" text="banana"/>
</zwt:listBox>

The menu tag represents the Menu widget. It is used to create horizontal or vertical menuBar.

id: [mandatory] The id of the widget.
orientation: The orientation of the menu : top, right, bottom or left. Default is top.

<zwt:menu id="Menu" orientation="top">
	<zwt:menuItem id="item1">
		<zwt:set name="Text" value="'File'" />
		<zwt:menu id="Menu11" orientation="left">
			<zwt:menuItem id="NewItem1">
				<zwt:set name="Text" value="'New...'" />
				<zwt:menu id="NewMenu" orientation="top">
					<zwt:menuItem id="TextItem">
						<zwt:set name="Text" value="'Text'" />
					</zwt:menuItem>
					<zwt:menuItem id="OtherItem">
						<zwt:set name="Text" value="'Other'" />
					</zwt:menuItem>
				</zwt:menu>
			</zwt:menuItem>
			<zwt:menuItem id="OpenItem">
				<zwt:set name="Text" value="'Open'" />
			</zwt:menuItem>
			<zwt:menuItem id="SaveItem">
				<zwt:set name="Text" value="'Save'" />
				<zwt:set name="Separator" value="true" />
			</zwt:menuItem>
			<zwt:menuItem id="ExitItem">
				<zwt:set name="Text" value="'Exit'" />
			</zwt:menuItem>
		</zwt:menu>
	</zwt:menuItem>
</zwt:menu>

menuItem

The menuItem tag represents the MenuItem widget. It used to add items to menus. It is possible to create submenus by adding a menu tag to a menuItem tag.

id: [mandatory] The id of the widget.

<zwt:menu id="Menu" orientation="top">
	<zwt:menuItem id="item1">
		<zwt:set name="Text" value="'File'" />
		<zwt:menu id="Menu11" orientation="left">
			<zwt:menuItem id="NewItem1">
				<zwt:set name="Text" value="'New...'" />
				<zwt:menu id="NewMenu" orientation="top">
					<zwt:menuItem id="TextItem">
						<zwt:set name="Text" value="'Text'" />
					</zwt:menuItem>
					<zwt:menuItem id="OtherItem">
						<zwt:set name="Text" value="'Other'" />
					</zwt:menuItem>
				</zwt:menu>
			</zwt:menuItem>
			<zwt:menuItem id="OpenItem">
				<zwt:set name="Text" value="'Open'" />
			</zwt:menuItem>
			<zwt:menuItem id="SaveItem">
				<zwt:set name="Text" value="'Save'" />
				<zwt:set name="Separator" value="true" />
			</zwt:menuItem>
			<zwt:menuItem id="ExitItem">
				<zwt:set name="Text" value="'Exit'" />
			</zwt:menuItem>
		</zwt:menu>
	</zwt:menuItem>
</zwt:menu>

part

The part tag is a top level element that represents a Part widget. A Part is a single container.

id: [mandatory] The id of the part.
namespace: [mandatory] The namespace of the application. It should be the same as the directory structure.

<zwt:part id="Part" namespace="org.zeleos.samples" xmlns:zwt="http://www.zeleos.org/zwt/zwt-uidl">
	...
</zwt:part>

passwordField

The passwordField tag represents the PasswordField widget. It is used to add a PasswordField under a container element.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:passwordField id="Password" weight="1">
	<zwt:set name="Text" value="'hidden'"/>
</zwt:passwordField>

The popup tag is a top level element. Just like the part tag, it is a single container. It is used to define popup panels.

<popup id="Popup" namespace="org.zeleos.samples" xmlns:zwt="http://www.zeleos.org/zwt/zwt-uidl">
	...
</popup>

popupWindow

The popupWindow tag is a top level element. Just like the part tag, it is a single container. It is used to define popup windows.

<popupWindow id="PopupWindow" namespace="org.zeleos.samples" xmlns:zwt="http://www.zeleos.org/zwt/zwt-uidl">
	...
</popupWindow>

stackItem

The stackItem tag represents the StackItem widget. It is used to StackItem to a StackPanel.

id: [mandatory] The id of the widget.

<zwt:stackItem id="SItem1">
	<zwt:set name="Text" value="'Stack Label 1'"/>
		...
</zwt:stackItem>

stackPanel

The stackPanel tag represents the StackPanel widget. A StackPanel is a multiple container for widgets. They are displayed in a stack, only one widget is visible at a time.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<stackPanel id="SPanel1">
	<zwt:stackItem id="SItem1">
		<zwt:set name="Text" value="'Stack Label 1'"/>
			...
	</zwt:stackItem>
	<zwt:stackItem id="SItem2">
		<zwt:set name="Text" value="'Stack Label 2'"/>
			...
	</zwt:stackItem>
</zwt:stackPanel>

tabBar

The tabBar tag represents the TabBar widget. It is used to add a TabBar under a container element.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.
orientation: The tabBar orientation : horizontal or vertical. Default is vertical.

<zwt:tabBar id="TabBar" orientation="horizontal">
	<zwt:tabItem text="Item 1" html="false"/>
	<zwt:tabItem text="Item 2" html="false"/>
	<zwt:tabItem text="Item 3" html="false"/>
</zwt:tabBar>

table

The table tag represents a Table widget. It is used to display data in a table view.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:table id="MyTable">
	<zwt:column label="'C1'" description="'Column 1'" modelIndex="0">
		...
	</zwt:column>
	<zwt:column label="'C2'" description="'Column 2'" modelIndex="1">
		...
	</zwt:column>
	<zwt:column label="'C3'" description="'Column 3'" modelIndex="2">
		...
	</zwt:column>
</zwt:tabBar>

tabPanel

The tabPanel tag represents a TabPanel widget. It is a multiple container that displays widgets under tabs, only one widget is visible at a time.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.
orientation: The position of the tabBar in the TabPanel : top, left, bottom and right.

<zwt:tabPanel id="TabPanel" orientation="top">
	<zwt:tabItem text="Item 1" html="false">
		...
	</zwt:tabItem>
	<zwt:tabItem text="Item 2" html="false">
		...
	</zwt:tabItem>
	<zwt:tabItem text="Item 3" html="false">
		...
	</zwt:tabItem>
</zwt:tabBar>

textArea

The textArea tag represents the TextArea widget. It is used to add a TextArea under a container element.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:textArea id="TextArea" weight="1">
	<zwt:set name="Text" value="'text'"/>
</zwt:textArea>

textField

The textField tag represents the TextField widget. It is used to add a TextField under a container element.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:textField id="Text" weight="1">
	<zwt:set name="Text" value="'text'"/>
</zwt:textField>

The toolBar tag represents the ToolBar widget. It is used to add a Toolbar under a container element. You can add the following Widgets to a Toolbar: button, html, image, label, link, listBox, passwordField, textField and widget.

id: [mandatory] The id of the widget.
orientation: [mandatory] The orientation of the Toolbar, one of vertical or horizontal.
weight: The weight of the widget in the parent panel.

<zwt:toolbar id="ToolBar1" orientation="zwt.ui.Toolbar.VERTICAL">
	<zwt:button id="BarNewItem">
		<zwt:set name="Text" value="'New...'"/>
	</zwt:button>
	<zwt:button id="BarOpenItem">
		<zwt:set name="Text" value="'Open'"/>
	</zwt:button>
	<zwt:button id="BarSaveItem">
		<zwt:set name="Text" value="'Save'"/>
	</zwt:button>
	<zwt:separator/>
	<zwt:textField id="sampleField">
	</textField>
</zwt:toolbar>

tree

The tree tag represents the Tree widget. It is used to add a Tree under a container element.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:tree id="Tree">
	<zwt:treeItem id="Item1">
		<zwt:set name="Text" value="'Item 2'" />
	</zwt:treeItem>
	<zwt:treeItem id="Item2">
		<zwt:set name="Text" value="'Item 2'" />
	</zwt:treeItem>
	<zwt:treeItem id="Item3">
		<zwt:set name="Text" value="'Item 3'" />
	</zwt:treeItem>
</zwt:tree>

treeItem

The treeItem tag represents the Tree widget. It is used to add items to a tree element. You can add a tree element under a tree item to create a subtree.

id: [mandatory] The id of the widget.

<zwt:tree id="Tree">
	<zwt:treeItem id="Item1">
		<zwt:set name="Text" value="'Item 2'" />
		<zwt:tree id="SubTree">
			<zwt:treeItem id="Item11">
				<zwt:set name="Text" value="'Item 11'" />
			</zwt:treeItem>
			<treeItem id="Item12">
				<zwt:set name="Text" value="'Item 12'" />
			</zwt:treeItem>
		</zwt:tree>
	</zwt:treeItem>
	<zwt:treeItem id="Item2">
		<zwt:set name="Text" value="'Item 2'" />
	</zwt:treeItem>
	<zwt:treeItem id="Item3">
		<zwt:set name="Text" value="'Item 3'" />
	</zwt:treeItem>
</zwt:tree>

verticalPanel

The verticalPanel tag represents the VerticalPanel widget. A VerticalPanel is a multiple container for widgets, they are displayed vertically. A weight has to be set to a child widget indicating the space allocated to it. If no weight is specified then the normal space of the widget is used.

id: [mandatory] The id of the widget.
weight: The weight of the widget in the parent panel.

<zwt:verticalPanel id="VerticalPanel">
	...
</zwt:verticalPanel>

ZWT V0.2.1 JavaScript framework for Rich Internet Applications

Zeleos User Interface Description Language Reference