Zeleos Web Toolkit V0.3 - UI Description Language Reference

zwt:action

The action tag is used to define an action on a widget. It can also be used in an application tag to define actions on Window events.

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

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

zwt:application

The application tag is a top level tag that describes an application. It defines the controllers to include in a ZWT application and create its main HTML, CSS and JS files.

id: [mandatory] The id of the application.
namespace: [mandatory] The namespace of the application. It must match the directory structure.
title: The title of the application.
theme: The theme to use in the application instead of the default one.

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

zwt:button

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

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>

zwt:checkbox

The checkBox tag represents the CheckBox widget. It is used to add a check box to a container widget.

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>

zwt:column

The column tag represents a TableColumn model. It is used to specify a table column in a table component.

modelIndex: [mandatory] The index in the table model of the data to display in the column.
label: [mandatory] The label of the column.
description: The description of the column.

<zwt:table id="MyTable">
	...
	<zwt:column label="'Title'" description="'Title'" modelIndex="0">
		<zwt:set name="PreferredWidth" value="200"/>
		<zwt:set name="MaxWidth" value="300"/>
		<zwt:set name="MinWidth" value="150"/>
		<zwt:set name="Editable" value="true"/>
		<zwt:set name="Resizable" value="true"/>
		<zwt:set name="Comparator" value="zwt.Comparator"/>
	</zwt:column>
	...
</zwt:tabBar>

zwt:controller

The controller tag represents a Controller. It is used to add a controller's part to a container widget or to declare a controller in a ZWT application. 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"/>
...

zwt:deckPanel

The deckPanel tag represents the DeckPanel widget. A deck panel is a multiple container for widgets. They are displayed in a deck, 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.

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

zwt:divider

The divider tag is used to add a divider to a VerticalPanel or a HorizontalPanel. A divider enables the user to resize the widgets inside a panel just like a split panel.

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

zwt:fieldset

The fieldset tag represents the FieldSet widget. It is used to add a field set to a container widget.

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>

zwt:flowPanel

The flowPanel tag represents the FlowPanel widget. It is used to add a flow panel to a container widget. A flow panel is a multiple container for widgets. They are displayed next to each other in a flow.

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

<zwt:flowPanel id="FlowPanel">
	...
</zwt:flowPanel>

zwt:frame

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

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>

zwt:horizontalPanel

The horizontalPanel tag represents the HorizontalPanel widget. It is used to add a horizontal panel to a container widget. A horizontal panel is a multiple container for widgets. They are displayed horizontally. A weight can be set on a child widget to indicate the space allocated to it by the panel. If no weight is specified then the intrinsic space of the widget is used.

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

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

zwt:html

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

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="'&kt;h1&gt;This is HTML...&lt;/h1&gt;'"/>
</zwt:html>

zwt:image

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

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>

zwt:item

The item tag represents an item in a tree model. It is used to specify the data displayed in a tree widget. It is possible to specify items under an item to create a sub-tree.

id: [mandatory] The id of the widget.

<zwt:tree id="Tree">
	...
	<zwt:item value="'Item 1'">
		<zwt:item value="'Item 11'"/>
		<zwt:item value="'Item 12'"/>
		<zwt:item value="'Item 13'"/>
	</zwt:item>
	...
</zwt:tree>

zwt:label

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

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>

zwt:link

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

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>

zwt:listBox

The listBox tag represents the ListBox widget. It is used to add a list box to a container widget. A list box can contains one or more elements.

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

<zwt:listBox id="ListBox" weight="1">
	<zwt:element value="apple"/>
	<zwt:element value="orange"/>
	<zwt:element value="banana"/>
</zwt:listBox>

The menu tag represents the Menu widget. It is used to create a horizontal or vertical menu and add it to a container widget or a Menu item (to create a sub-menu).

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

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

zwt:menuItem

The menuItem tag represents the MenuItem widget. It is used to add items to menus. It is possible to create a sub-menu by setting 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>

zwt:part

The part tag is a top level element that represents a Part widget. A part is a top single container included in a DIV tag in the HTML of a ZWT application. For every part, the ZUIDL compiler generates the corresponding controller and model.

id: [mandatory] The id of the part.
namespace: [mandatory] The part's namespace. It must match the directory structure.

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

zwt:passwordField

The passwordField tag represents the PasswordField widget. It is used to add a password field to a container widget.

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 a popup part.

id: [mandatory] The id of the widget.
namespace: [mandatory] The popup's 'namespace. It must match the directory structure.

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

zwt:popupWindow

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

id: [mandatory] The id of the widget.
namespace: [mandatory] The popup's 'namespace. It must match the directory structure.

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

zwt:stackItem

The stackItem tag represents the StackItem widget. It is used to add a stack item to a stack panel.

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

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

zwt:stackPanel

The stackPanel tag represents the StackPanel widget. A stack panel is a multiple container for widgets. Each widget is displayed in a stack item, one or more stack item can be displayed at a time.

id: [mandatory] The id of the widget.
weight: The weight of the panel 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>

zwt:tabBar

The tabBar tag represents the TabBar widget. It is used to add a tab bar to a container widget.

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

<zwt:tabBar id="TabBar" orientation="horizontal">
	<zwt:tabItem id="Item1">
		<zwt:set name="Text" value="'Item 1'"/>
	</zwt:tabItem>
	<zwt:tabItem id="Item2">
		<zwt:set name="Text" value="'Item 2'"/>
	</zwt:tabItem>
	<zwt:tabItem id="Item3">
		<zwt:set name="Text" value="'Item 3'"/>
	</zwt:tabItem>
</zwt:tabBar>

zwt:tabItem

The tabPanel tag represents a TabItem widget. It is used to add a tab item to a tab bar or a tab panel.

id: [mandatory] The id of the widget.

<zwt:tabPanel id="TabPanel" orientation="top">
	...
	<zwt:tabItem id="Item1">
		<zwt:label id="Label1">
			<zwt:set name="Text" value="'Label 1'"/>
		</zwt:label>
		<zwt:set name="Text" value="'Item 1'"/>
	</zwt:tabItem>
	...
</zwt:tabPanel>

zwt:table

The table tag represents a Table widget. It is used to add a table to a container widget.

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>

zwt:tabPanel

The tabPanel tag represents a TabPanel widget. It is a multiple container that displays widgets in 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 id="Item1">
		...
	</zwt:tabItem>
	<zwt:tabItem id="Item2">
		...
	</zwt:tabItem>
	<zwt:tabItem id="Item3">
		...
	</zwt:tabItem>
</zwt:tabBar>

zwt:templateView

The templateView tag represents the TemplateView widget. It is used to add a template view to a container widget.

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

<zwt:templateView id="TemplateView">
	<zwt:set name="TemplateURL" value="'xsl/template.xsl'"/>
</zwt:templateView>

zwt:textArea

The textArea tag represents the TextArea widget. It is used to add a text area to a container widget.

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>

zwt:textField

The textField tag represents the TextField widget. It is used to add a text field to a container widget.

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 tool bar to a container widget. It is a multiple container that displays widgets (but especially button, html, image, label, link, listBox, passwordField and textField) horizontally or vertically.

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="ToolBar" 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>

zwt:tree

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

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

<zwt:tree id="Tree">
	<zwt:item value="'Item 1'">
		...
	</zwt:item>
	<zwt:item value="'Item 2'">
		...
	</zwt:item>
	<zwt:item value="'Item 3'">
		...
	</zwt:item>
</zwt:tree>

zwt:verticalPanel

The verticalPanel tag represents the HorizontalPanel widget. It is used to add a vertical panel to a container widget. A vertical panel is a multiple container for widgets. They are displayed vertically. A weight can be set on a child widget to indicate the space allocated to it by the panel. If no weight is specified then the intrinsic 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.3.1 JavaScript framework for Rich Internet Applications

Zeleos User Interface Description Language Reference