ZK 5.0.3 Component Reference

PDF generated using the open source mwlib toolkit. See http://code.pediapress.com/ for more information.PDF generated at: Tue, 29 Jun 2010 10:02:05 CET

ZK Component ReferenceFor ZK 5.0.3

ContentsArticles

ZK Component Reference 1

ZK Component Reference/ Introduction 1

ZK Component Reference/ Base Components 1

ZK Component Reference/ Base Components/ AbstractComponent 2

ZK Component Reference/ Base Components/ FormatInputElement 3

ZK Component Reference/ Base Components/ HeaderElement 4

ZK Component Reference/ Base Components/ HeadersElement 5

ZK Component Reference/ Base Components/ HtmlBasedComponent 6

ZK Component Reference/ Base Components/ HtmlMacroComponent 7

ZK Component Reference/ Base Components/ InputElement 9

ZK Component Reference/ Base Components/ LabelElement 10

ZK Component Reference/ Base Components/ LabelImageElement 11

ZK Component Reference/ Base Components/ LayoutRegion 12

ZK Component Reference/ Base Components/ NumberInputElement 13

ZK Component Reference/ Base Components/ XulElement 14

ZK Component Reference/ Containers 15

ZK Component Reference/ Containers/ Box 15

ZK Component Reference/ Containers/ Caption 16

ZK Component Reference/ Containers/ Div 18

ZK Component Reference/ Containers/ Groupbox 19

ZK Component Reference/ Containers/ Panel 21

ZK Component Reference/ Containers/ Panel/ Panelchildren 23

ZK Component Reference/ Containers/ Span 24

ZK Component Reference/ Containers/ Splitter 25

ZK Component Reference/ Containers/ Tabbox 27

ZK Component Reference/ Containers/ Tabbox/ Tab 29

ZK Component Reference/ Containers/ Tabbox/ Tabs 31

ZK Component Reference/ Containers/ Tabbox/ Tabpanel 32

ZK Component Reference/ Containers/ Tabbox/ Tabpanels 35

ZK Component Reference/ Containers/ Window 36

ZK Component Reference/ Data 38

ZK Component Reference/ Data/ Grid 38

ZK Component Reference/ Data/ Grid/ Column 41

ZK Component Reference/ Data/ Grid/ Columns 43

ZK Component Reference/ Data/ Grid/ Detail 45

ZK Component Reference/ Data/ Grid/ Foot 47

ZK Component Reference/ Data/ Grid/ Footer 49

ZK Component Reference/ Data/ Grid/ Group 50

ZK Component Reference/ Data/ Grid/ Groupfoot 53

ZK Component Reference/ Data/ Grid/ Row 55

ZK Component Reference/ Data/ Grid/ Rows 57

ZK Component Reference/ Data/ Listbox 59

ZK Component Reference/ Data/ Listbox/ Listcell 61

ZK Component Reference/ Data/ Listbox/ Listfoot 62

ZK Component Reference/ Data/ Listbox/ Listfooter 64

ZK Component Reference/ Data/ Listbox/ Listgroup 66

ZK Component Reference/ Data/ Listbox/ Listgroupfoot 68

ZK Component Reference/ Data/ Listbox/ Listhead 70

ZK Component Reference/ Data/ Listbox/ Listheader 72

ZK Component Reference/ Data/ Listbox/ Listitem 74

ZK Component Reference/ Data/ Tree 76

ZK Component Reference/ Data/ Tree/ Treecell 78

ZK Component Reference/ Data/ Tree/ Treechildren 81

ZK Component Reference/ Data/ Tree/ Treecol 83

ZK Component Reference/ Data/ Tree/ Treecols 85

ZK Component Reference/ Data/ Tree/ Treefoot 86

ZK Component Reference/ Data/ Tree/ Treefooter 89

ZK Component Reference/ Data/ Tree/ Treeitem 91

ZK Component Reference/ Data/ Tree/ Treerow 93

ZK Component Reference/ Diagrams and Reports 95

ZK Component Reference/ Diagrams and Reports/ Chart 96

ZK Component Reference/ Diagrams and Reports/ Flashchart 99

ZK Component Reference/ Diagrams and Reports/ Gmaps 101

ZK Component Reference/ Diagrams and Reports/ Gmaps/ Gimage 104

ZK Component Reference/ Diagrams and Reports/ Gmaps/ Ginfo 105

ZK Component Reference/ Diagrams and Reports/ Gmaps/ Gmarker 106

ZK Component Reference/ Diagrams and Reports/ Gmaps/ Gpolyline 108

ZK Component Reference/ Diagrams and Reports/ Gmaps/ Gpolygon 109

ZK Component Reference/ Diagrams and Reports/ Gmaps/ Gscreen 111

ZK Component Reference/ Diagrams and Reports/ Jasperreport 113

ZK Component Reference/ Diagrams and Reports/ Timeline 115

ZK Component Reference/ Diagrams and Reports/ Timeline/ Bandinfo 117

ZK Component Reference/ Diagrams and Reports/ Timeline/ Hotzone 119

ZK Component Reference/ Diagrams and Reports/ Timeplot 121

ZK Component Reference/ Diagrams and Reports/ Timeplot/ Plotinfo 124

ZK Component Reference/ Essential Components 127

ZK Component Reference/ Essential Components/ A 128

ZK Component Reference/ Essential Components/ Applet 129

ZK Component Reference/ Essential Components/ Button 131

ZK Component Reference/ Essential Components/ Captcha 133

ZK Component Reference/ Essential Components/ Fileupload 134

ZK Component Reference/ Essential Components/ Fisheye 136

ZK Component Reference/ Essential Components/ Fisheye/ Fisheyebar 138

ZK Component Reference/ Essential Components/ HTML 140

ZK Component Reference/ Essential Components/ Iframe 142

ZK Component Reference/ Essential Components/ Include 144

ZK Component Reference/ Essential Components/ Image 146

ZK Component Reference/ Essential Components/ Imagemap 148

ZK Component Reference/ Essential Components/ Imagemap/ Area 150

ZK Component Reference/ Essential Components/ Label 151

ZK Component Reference/ Essential Components/ Menu 153

ZK Component Reference/ Essential Components/ Menu/ Menubar 154

ZK Component Reference/ Essential Components/ Menu/ Menuitem 156

ZK Component Reference/ Essential Components/ Menu/ Menupopup 157

ZK Component Reference/ Essential Components/ Menu/ Menuseparator 159

ZK Component Reference/ Essential Components/ Popup 160

ZK Component Reference/ Essential Components/ Progressmeter 162

ZK Component Reference/ Essential Components/ Separator 163

ZK Component Reference/ Essential Components/ Space 164

ZK Component Reference/ Essential Components/ Script 165

ZK Component Reference/ Essential Components/ Style 167

ZK Component Reference/ Essential Components/ Timer 168

ZK Component Reference/ Essential Components/ Toolbar 169

ZK Component Reference/ Essential Components/ Toolbarbutton 171

ZK Component Reference/ Input 173

ZK Component Reference/ Input/ Bandbox 173

ZK Component Reference/ Input/ Bandpopup 175

ZK Component Reference/ Input/ Calendar 177

ZK Component Reference/ Input/ Checkbox 179

ZK Component Reference/ Input/ CKEditor 181

ZK Component Reference/ Input/ Colorbox 184

ZK Component Reference/ Input/ Combobox 186

ZK Component Reference/ Input/ Comboitem 188

ZK Component Reference/ Input/ Datebox 189

ZK Component Reference/ Input/ Decimalbox 191

ZK Component Reference/ Input/ Doublebox 192

ZK Component Reference/ Input/ Intbox 193

ZK Component Reference/ Input/ Longbox 195

ZK Component Reference/ Input/ Radio 197

ZK Component Reference/ Input/ Radiogroup 199

ZK Component Reference/ Input/ Slider 201

ZK Component Reference/ Input/ Spinner 202

ZK Component Reference/ Input/ Textbox 203

ZK Component Reference/ Input/ Timebox 205

ZK Component Reference/ Layouts 206

ZK Component Reference/ Layouts/ Borderlayout 207

ZK Component Reference/ Layouts/ Borderlayout/ Center 210

ZK Component Reference/ Layouts/ Borderlayout/ East 212

ZK Component Reference/ Layouts/ Borderlayout/ North 215

ZK Component Reference/ Layouts/ Borderlayout/ South 217

ZK Component Reference/ Layouts/ Borderlayout/ West 219

ZK Component Reference/ Layouts/ Columnlayout 221

ZK Component Reference/ Layouts/ Columnlayout/ Columnchildren 224

ZK Component Reference/ Layouts/ Hbox 227

ZK Component Reference/ Layouts/ Vbox 229

ZK Component Reference/ Layouts/ Portallayout 230

ZK Component Reference/ Layouts/ Portallayout/ Portalchildren 232

ZK Component Reference/ Layouts/ Tablelayout 234

ZK Component Reference/ Layouts/ Tablelayout/ TableChildren 235

ZK Component Reference/ Multimedia and Miscellaneous 237

ZK Component Reference/ Multimedia and Miscellaneous/ Audio 237

ZK Component Reference/ Multimedia and Miscellaneous/ Flash 238

ZK Component Reference/ Supplementary 239

ZK Component Reference/ Supplementary/ Auxhead 240

ZK Component Reference/ Supplementary/ Auxheader 242

ZK Component Reference/ Supplementary/ Cell 244

ZK Component Reference/ Supplementary/ Frozen 245

ZK Component Reference/ Supplementary/ Paging 246

ZK Component Reference/ Events 247

ZK Component Reference/ Events/ BandScrollEvent 248

ZK Component Reference/ Events/ CheckEvent 249

ZK Component Reference/ Events/ ColSizeEvent 250

ZK Component Reference/ Events/ CreateEvent 251

ZK Component Reference/ Events/ DropEvent 252

ZK Component Reference/ Events/ ErrorEvent 253

ZK Component Reference/ Events/ Event 254

ZK Component Reference/ Events/ InfoChangeEvent 255

ZK Component Reference/ Events/ InputEvent 256

ZK Component Reference/ Events/ KeyEvent 257

ZK Component Reference/ Events/ MapDropEvent 258

ZK Component Reference/ Events/ MapMouseEvent 259

ZK Component Reference/ Events/ MapMoveEvent 260

ZK Component Reference/ Events/ MapTypeChangeEvent 261

ZK Component Reference/ Events/ MapZoomEvent 262

ZK Component Reference/ Events/ MouseEvent 263

ZK Component Reference/ Events/ MoveEvent 264

ZK Component Reference/ Events/ OccurEventSelectEvent 265

ZK Component Reference/ Events/ OpenEvent 266

ZK Component Reference/ Events/ PageSizeEvent 267

ZK Component Reference/ Events/ PagingEvent 268

ZK Component Reference/ Events/ PortalMoveEvent 269

ZK Component Reference/ Events/ ScrollEvent 270

ZK Component Reference/ Events/ SelectEvent 271

ZK Component Reference/ Events/ SelectionEvent 272

ZK Component Reference/ Events/ SizeEvent 273

ZK Component Reference/ Events/ UploadEvent 274

ZK Component Reference/ Events/ ZIndexEvent 275

ZK Component Reference/ Supporting Classes 276

ZK Component Reference/ Supporting Classes/ AbstractListModel 276

ZK Component Reference/ Supporting Classes/ Constraint 277

ZK Component Reference/ Supporting Classes/ Constrained 278

ZK Component Reference/ Supporting Classes/ ListitemRenderer 279

ZK Component Reference/ Supporting Classes/ ListModel 280

ZK Component Reference/ Supporting Classes/ Messagebox 281

ZK Component Reference/ Supporting Classes/ RendererCtrl 282

ZK Component Reference/ Supporting Classes/ SimpleConstraint 283

ZK Component Reference/ Supporting Classes/ SimpleListModel 284

ZK Component Reference/ XHTML Components 285

ZK Component Reference/ XHTML Components/ Encoding URLs 285

ZK Component Reference/ XHTML Components/ In Pure Java 286

ZK Component Reference/ XHTML Components/ The Difference Between XUL and XHTMLComponents 286

ReferencesArticle Sources and Contributors 287

Image Sources, Licenses and Contributors 291

ZK Component Reference 1

ZK Component Reference<CollectionIndex>Documentation:Books/ZK_Component_Reference</CollectionIndex>

If you have any feedback regarding this book, please leave it here.

<comment>http:/ / books. zkoss. org/ wiki/ ZK_Component_Reference</comment>

ZK Component Reference/ IntroductionThis guide acts as a reference of components within the latest version of ZK. We outline each of the XULcomponents and include discussions of XHTML components.

The guide follows a distinctive pattern outlining the following items:

• A link to a demonstration of the component• A link to the component’s Javadoc• A link to the component’s JavaScript API• The employment and purpose of the component• An example with source of the component• The component’s support events and children• Component use cases• The version history of the component

ZK Component Reference/ Base ComponentsThis section outlines the base components on which other ZK components are built.

ZK Component Reference/Base Components/AbstractComponent 2

ZK Component Reference/ Base Components/AbstractComponent

Abstract Component• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.AbstractComponent</javadoc>• JavaScript API: N/A

Employment/PurposeA skeletal implementation of Component. Though it is OK to implement Component from scratch, this classsimplifies some of the chores.

ExampleN/A

Supported Events

Name Event Type

None None

Supported Children*ALL

Use cases

Version Description Example Location

Version History

Version Date Content

ZK Component Reference/Base Components/FormatInputElement 3

ZK Component Reference/ Base Components/FormatInputElement

Format Input Element• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.impl.FormatInputElement</javadoc>• JavaScript API: N/A

Employment/PurposeA skeletal implementation for an input box with format

ExampleN/A

Supported Events

Name Event Type

Supported Children*NONE

Use cases


Version History


ZK Component Reference/Base Components/HeaderElement 4

ZK Component Reference/ Base Components/HeaderElement

Header Element• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.impl.HeaderElement</javadoc>• JavaScript API: N/A

Employment/PurposeA skeletal implementation for a header

ExampleN/A

Supported Events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Base Components/HeadersElement 5

ZK Component Reference/ Base Components/HeadersElement

Headers Element• Demonstration: Headers Element [1]

• Java API: <javadoc>org.zkoss.zul.impl.HeadersElement</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.mesh.HeadWidget</javadoc>

Employment/PurposeA skeletal implementation for headers, the parent of a group of HeaderElement [2].

ExampleN/A

Supported events

Name Event Type

None None

Supported ChildrenHeader Element

Use cases


Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #g13[2] http:/ / www. zkoss. org/ javadoc/ 2. 4. 1/ zul/ org/ zkoss/ zul/ impl/ HeaderElement. html

ZK Component Reference/Base Components/HtmlBasedComponent 6

ZK Component Reference/ Base Components/HtmlBasedComponent

Html Based Component• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.HtmlBasedComponent</javadoc>• JavaScript API: <javadoc directory="jsdoc">zk.Widget</javadoc>

Employment/PurposeA skeletal implementation for HTML based components. It simplifies to implement methods common to HTMLbased components.

ExampleN/A

Supported events

Name Event Type

onDrop <javadoc>org.zkoss.zk.ui.event.DropEvent</javadoc>

onClick <javadoc> org.zkoss.zk.ui.event.MouseEvent</javadoc>

onDoubleClick <javadoc> org.zkoss.zk.ui.event.MouseEvent</javadoc>

onRightClick <javadoc> org.zkoss.zk.ui.event.MouseEvent</javadoc>

onMove <javadoc> org.zkoss.zk.ui.event.MoveEvent</javadoc>

onSize <javadoc> org.zkoss.zk.ui.event.SizeEvent</javadoc>

onMouseOver <javadoc> org.zkoss.zk.ui.event.MoveEvent</javadoc>

onMouseOut <javadoc> org.zkoss.zk.ui.event.MoveEvent</javadoc>

onZIndex <javadoc> org.zkoss.zk.ui.event.ZIndexEvent</javadoc>

onOK <javadoc> org.zkoss.zk.ui.event.KeyEvent</javadoc>

onCacnel <javadoc> org.zkoss.zk.ui.event.KeyEvent</javadoc>

onCtrlKey <javadoc> org.zkoss.zk.ui.event.KeyEvent</javadoc>

ZK Component Reference/Base Components/HtmlBasedComponent 7


Use cases


Version History


5.0.3 June 2010 The onMouseOver and onMouseOut events are supported.

ZK Component Reference/ Base Components/HtmlMacroComponent

Html Macro Component• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.AbstractComponent</javadoc>• JavaScript API: N/A

Employment/PurposeThe base class for macro components.

If you want to apply the auto-wiring, you can invoke <javadoc method="wireVariables(org.zkoss.zk.ui.Component,java.lang.Object)">org.zkoss.zk.ui.Components</javadoc> in <javadocmethod="afterCompose()">org.zkoss.zk.ui.HtmlMacroComponent</javadoc> as follows.

public void afterCompose() { super.afterCompose(); //create components

Components.wireVariables(this, this); Components.addForward(this, this);}

ZK Component Reference/Base Components/HtmlMacroComponent 8

ExampleN/A

Supported Events

Name Event Type

None None

See also events inherited from HtmlBasedComponent's Supported Events.


Use cases


Version History


5.0.3 June2010

The corresponding DOM element is customizable. It is default to SPAN (the same as prior version) but you can change it to anytag by use of <javadoc method="setEnclosingTag(java.lang.String)">org.zkoss.zk.ui.HtmlMacroComponent</javadoc>.

ZK Component Reference/Base Components/InputElement 9

ZK Component Reference/ Base Components/InputElement

Input Element• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.impl.InputElement</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.inp.InputWidget</javadoc>

Employment/PurposeInputElement is a super class for components which provie user key input, such as Textbox, Intbox, etc.

Some features are implemented in this class, such as constraint, disabled, maxlength, name, readonly, etc.

You sholuld not deirectly use this class, please use the inherited class.

ExampleN/A

Supported events

Name Event Type

onOK 'Event:' <javadoc>org.zkoss.zk.ui.event.KeyEvent</javadoc>

[#DropEvent Denotes user has pressed the ][#DropEvent ENTER][#DropEvent key.]

Supported Children*None

Use cases


Version History


ZK Component Reference/Base Components/LabelElement 10

ZK Component Reference/ Base Components/LabelElement

Label Element• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.impl.LabelElement</javadoc>• JavaScript API: N/A

Employment/PurposeA HTML element with a label.

ExampleN/A

Supported Events

Name Event Type

None None

Supported Children*All

Version History


ZK Component Reference/Base Components/LabelImageElement 11

ZK Component Reference/ Base Components/LabelImageElement

Label Image Element• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.impl.LabelImageElement</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.LabelImageWidget</javadoc>

Employment/PurposeA HTML element with a label and an image.

ExampleN/A

Supported Events

Name Event Type

Supported Children*All

Version History


ZK Component Reference/Base Components/LayoutRegion 12

ZK Component Reference/ Base Components/LayoutRegion

Layout Region• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.LayoutRegion</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.layout.LayoutRegion</javadoc>

Employment/PurposeThis class represents a region in a layout manager.

ExampleN/A

Supported events

Name Event Type

onOpen <javadoc>org.zkoss.zk.ui.event.OpenEvent</javadoc>

Description: When a layout is collapsed or opened by a user, the onOpen event is sent to the application.


Version History


ZK Component Reference/Base Components/NumberInputElement 13

ZK Component Reference/ Base Components/NumberInputElement

Number Input Element• Demonstration: Number Input Element [1]

• Java API: <javadoc>org.zkoss.zul.impl.NumberInputElement</javadoc>• JavaScript API: N/A

Employement/PurposeA skeletal implementation for number-type input box.

ExampleN/A

Supported Events

Name Inherited From

None None


Use Cases


Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #f2

ZK Component Reference/Base Components/XulElement 14

ZK Component Reference/ Base Components/XulElement

Xul Element• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.impl.XulElement</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.Widget</javadoc>

Employement/PurposeThe fundamental class for XUL elements.

ExampleN/A

Supported Events

Name Inherited From

None None

See also events inherited from HtmlBasedComponent's Supported Events.


Use Cases


Version History


ZK Component Reference/Containers 15

ZK Component Reference/ ContainersThis section outlines components which are specifically designed to be able to contain other components.

ZK Component Reference/ Containers/ Box

Box• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Box</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.box.Box</javadoc>

Employment/PurposeThe box model of XUL is used to divide a portion of the display into a series of boxes. Components inside of a boxwill orient themselves horizontally or vertically. By combining a series of boxes and separators, you can control thelayout of the visual presentation.

A box can lay out its children in one of two orientations, either horizontally or vertically. A horizontal box lines upits components horizontally and a vertical box orients its components vertically. You can think of a box as one rowor one column from an HTML table.

Example

<zk> <box orient="vertical"> <button label="Button 1"/> <button label="Button 2"/> </box> <box orient="horizontal"> <button label="Button 3"/> <button label="Button 4"/> </box> </zk>

ZK Component Reference/Containers/Box 16

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/ Containers/ Caption

Caption• Demonstration: Caption [1]

• Java API: <javadoc>org.zkoss.zul.Caption</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Caption</javadoc>

Employement/PurposeA header for a Groupbox. It may contain either a text label, using <javadocmethod="setLabel(java.lang.String)">org.zkoss.zul.impl.LabelElement</javadoc>, or child elements for a morecomplex caption.

Example

<zk> <window border="normal" width="350px"> <caption label="This is a caption"/> <groupbox width="300px">

ZK Component Reference/Containers/Caption 17

<caption label="fruits"/> <radiogroup onCheck="fruit.value = self.selectedItem.label"> <radio label="Apple"/> <radio label="Orange"/> <radio label="Banana"/> </radiogroup> </groupbox> </window> </zk>


Use cases


5.0 How to use the title and caption inside a Window [2]

Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #l6[2] http:/ / docs. zkoss. org/ wiki/ Layout_and_Windows#Titles_and_Captions

ZK Component Reference/Containers/Div 18

ZK Component Reference/ Containers/ Div

Div• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Div</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Div</javadoc>

Employment/PurposeThe same as HTML DIV tag.

An extension. It has the same effect as <h:div xmlns:h="http://www.w3.org/1999/xhtml">. Note: aWindow without title and caption has the same visual effect as Div, but Div doesn't implement IdSpace. In otherwords, Div won't affect the uniqueness of identifiers.

Example

<div align="left" width="300px"> <doublebox /> </div> <div align="right" width="300px"> <doublebox /> </div>

Supported events

Name Event Type

None None

See also events inherited from XulElement's Supported Events.


ZK Component Reference/Containers/Div 19

Use cases


Version History


ZK Component Reference/ Containers/Groupbox

Groupbox• Demonstration: Groupbox [1]

• Java API: <javadoc>org.zkoss.zul.Groupbox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Groupbox</javadoc>

Employment/PurposeA group box is used to group components together. A border is typically drawn around the components to show thatthey are related. The label across the top of the group box can be created by using the caption component. Itworks much like the HTML legend element. Unlike windows, a group box is not an owner of the ID space. It cannotbe overlapped or popup.

Example

<groupbox width="250px"> <caption label="Fruits"/> <radiogroup> <radio label="Apple"/> <radio label="Orange"/> <radio label="Banana"/> </radiogroup> </groupbox>

ZK Component Reference/Containers/Groupbox 20

Supported events

Name Event Type

onClick <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>

Description: Denotes user has clicked the component.onRightClick <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>

Description: Denotes user has right-clicked the component.onDoubleClick <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>

Description: Denotes user has double-clicked the component.onOpen <javadoc>org.zkoss.zk.ui.event.OpenEvent</javadoc>

Description: Denotes user has opened or closed a component. Note:

unlike onClose, this event is only a notification. The client sends this event after opening or closing the component.

It is useful to implement load-on-demand by listening to the onOpen event, and creating components when the first time thecomponent is opened.


Use cases


Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #l11

ZK Component Reference/Containers/Panel 21

ZK Component Reference/ Containers/ Panel

Panel• Demonstration: Panel [1]

• Java API: <javadoc>org.zkoss.zul.Panel</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wnd.Panel</javadoc>

Employment/PurposePanel is a container that has specific functionality and structural components that make it the perfect building blockfor application-oriented user interfaces. The Panel contains bottom, top, and foot toolbars, along with separateheader, footer and body sections. It also provides built-in collapsible, closable, maximizable, and minimizablebehavior, along with a variety of pre-built tool buttons that can be wired up to provide other customized behavior.Panels can be easily embedded into any kind of ZUL component that is allowed to have children or layoutcomponent. Panels also provide specific features like float and move. Unlike Window, Panels can only be floatedand moved inside its parent node, which is not using zk.setVParent() function at client side. In other words, if Panel'sparent node is an relative position, the floated panel is only inside its parent, not the whole page. The seconddifference of Window is that Panel is not an independent ID space (by implementing IdSpace), so the ID of eachchild can be used throughout the panel.

DraggableWhen used with ZK Component Reference/Layouts/Portallayout Portallayout, the draggable property (<javadocmethod="setDraggable(java.lang.String)">org.zkoss.zk.ui.HtmlBasedComponent</javadoc>) can be used to controlwhether the panel is draggable under the portal layout.

Note: this feature is available since 5.0.3.

Example

<panel height="100px" width="200px" style="margin-bottom:10px" title="Panel1" border="normal" maximizable="true" collapsible="true"> <panelchildren>PanelContent1</panelchildren></panel><panel height="100px" width="200px" framable="true" title="Panel2" border="normal" maximizable="true" style="margin-bottom:10px">


<panelchildren>PanelContent2</panelchildren></panel>

Supported events

Name Event Type

onMove MoveEvent: <javadoc>org.zkoss.zk.ui.event.MoveEvent</javadoc>

Denotes the close button is pressed by a user, and the

component shall detach itself.

onOpen OpenEvent: <javadoc>org.zkoss.zk.ui.event.OpenEvent</javadoc>

Denotes user has opened or closed a component.

Note:Unlike onClose, this event is only a notification. The

client sends this event after opening or closing the

component.

It is useful to implement load-on-demand by listening to

the onOpen event, and creating components when the

first time the component is opened.

onMaximize MaximizeEvent: <javadoc>org.zkoss.zk.ui.event.MaximizeEvent</javadoc>

Denotes user has maximize a component.

onMinimize MinimizeEvent: <javadoc>org.zkoss.zk.ui.event.MinimizeEvent</javadoc>

Denotes user has minimize a component.

onClose OpenEvent: <javadoc>org.zkoss.zk.ui.event.OpenEvent</javadoc>



Supported Children*Panel_Children, Panel_Children

Use cases


5.0 Portallayout, panels and events [2]

Version History


5.0.3 July, 2010 The draggable property can be used to control the drag-ability in a portal layout.


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #l9[2] http:/ / www. zkoss. org/ forum/ listComment/ 10765

ZK Component Reference/ Containers/ Panel/Panelchildren

Panel Children• Demonstration: Panel [1]

• Java API: <javadoc>org.zkoss.zul.Panelchildren</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wnd.Panelchildren</javadoc>

Employment/PurposePanelchildren is used for Panel component to manage each child who will be shown in the body of Panel. Note thatthe size of Panelchildren is automatically calculated by Panel so both setWidth(String) and setHeight(String) areread-only.

Example

<panel height="100px" width="200px" style="margin-bottom:10px" title="Panel1" border="normal" maximizable="true" collapsible="true"> <panelchildren>PanelContent1</panelchildren></panel><panel height="100px" width="200px" framable="true" title="Panel2" border="normal" maximizable="true" style="margin-bottom:10px"> <panelchildren>PanelContent2</panelchildren></panel>

ZK Component Reference/Containers/Panel/Panelchildren 24

Supported events

Name Event Type

None None


Use cases


5.0 Portallayout, panels and events [2]

Version History


ZK Component Reference/ Containers/ Span

Span• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Span</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Span</javadoc>

Employment/PurposeA Span is same as HTML SPAN tag

Supported events

Name Event Type

ZK Component Reference/Containers/Span 25


Use cases


Version History


ZK Component Reference/ Containers/ Splitter

Splitter• Demonstration: Splitter [1]

• Java API: <javadoc>org.zkoss.zul.Splitter</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.box.Splitter</javadoc>

Employment/PurposeAn element which should appear before or after an element inside a box (Box, Vbox and Hbox).

When the splitter is dragged, the sibling elements of the splitter are resized. If getCollapse() is true, a grippyin placed inside the splitter, and one sibling element of the splitter is collapsed when the grippy is clicked.

Example

<hbox spacing="0" width="100%"> <vbox height="200px"> Column 1-1: The left-top box. To know whether a splitter is collapsed, you can listen to the onOpen event. <splitter collapse="after" /> Column 1-2: You can enforce to open or collapse programming by calling

ZK Component Reference/Containers/Splitter 26

setOpen method. </vbox> <splitter collapse="before" /> Column 2: Whether a splitter allows users to open or collapse depending on the collapse attribue.</hbox>

Supported events

Name Event Type

onOpen Event: <javadoc>org.zkoss.zk.ui.event.OpenEvent</javadoc>

When a splitter is collapsed or opened by a user, the onOpen event is sent to the application.


Use cases


5.0 Used to seperate contents within hbox/vbox. [1]

Version History



ZK Component Reference/Containers/Tabbox 27

ZK Component Reference/ Containers/ Tabbox

Tabbox• Demonstration: Tabbox [1]

• Java API: <javadoc>org.zkoss.zul.Tabbox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.tab.Tabbox</javadoc>

Employment/PurposeA tabbox that contains the tabs and tabpanels allows developers to separate a large number of components intoseveral groups(each group contains a tab and a tabpanel), and show one group each time, such that the user interfacewon't be too complicate to read. There is only one group (aka., a tabpanel) is visible at the same time. Once the tab ofan invisible group is clicked, it becomes visible and the previous visible group becomes invisible.

The currently selected tab component is given an additional selected property which is set to true. This is used togive the currently selected tab a different appearance so that it will look selected. Only one tab will have a true valuefor this property at a time. If none of tabs are selected, the first one is selected automatically.

Example

<zk> <tabbox width="400px"> <tabs> <tab label="Tab 1" /> <tab label="Tab 2" /> </tabs> <tabpanels> <tabpanel>This is panel 1</tabpanel> <tabpanel>This is panel 2</tabpanel> </tabpanels> </tabbox> <space /> <tabbox width="400px" mold="accordion"> <tabs> <tab label="Tab 3" /> <tab label="Tab 4" /> </tabs>

ZK Component Reference/Containers/Tabbox 28

<tabpanels> <tabpanel>This is panel 3</tabpanel> <tabpanel>This is panel 4</tabpanel> </tabpanels> </tabbox></zk>

Supported events

Name Event Type

onRightClick Event: <javadoc>'org.zkoss.zk.ui.event.MouseEvent</javadoc>

Denotes user has right-clicked the component.

onSelect Event: <javadoc>org.zkoss.zk.ui.event.SelectEvent</javadoc>

Denotes user has selected a tab. onSelect is sent to both tab and tabbox.

Supported Children*Tabs, *Tabpanels

Use cases


5.0 Tabbox can be used to display information on seperate panels and show only one panel a time. [1]

Version History



ZK Component Reference/Containers/Tabbox/Tab 29

ZK Component Reference/ Containers/ Tabbox/Tab

Tab• Demonstration: Tab [1]

• Java API: <javadoc>org.zkoss.zul.Tab</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.tab.Tab</javadoc>

Employment/PurposeA specific tab. Clicking on the tab brings the tab panel to the front. You could put a label and an image on it bylabel and image properties.

By setting the closable property to true, a close button is shown for the tab, such that user could close the taband the corresponding tab panel by clicking the button. Once user clicks on the close button, an onClose event issent to the tab. It is processed by the onClose method of Tab. Then, onClose, by default, detaches the tabitself and the corresponding tab panel.

Example

<tabbox width="400px"> <tabs> <tab label="Tab 1" image="/img/folder.gif" /> <tab label="Tab 2" image="/img/folder.gif" closable="true" /> </tabs> <tabpanels> <tabpanel>This is panel 1</tabpanel> <tabpanel>This is panel 2</tabpanel> </tabpanels></tabbox>

Supported events

ZK Component Reference/Containers/Tabbox/Tab 30

Name Event Type


Description:

Denotes user has clicked the component.

onRightClick <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>

Description:


onDoubleClick <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>

Description:

Denotes user has double-clicked the component.

onSelect <javadoc>org.zkoss.zk.ui.event.SelectEvent</javadoc>

Description:

Denotes user has selected a tab. onSelect is sent to both tab and tabbox.

onClose <javadoc>org.zkoss.ui.zk.ui.event.Event</javadoc>

Description:

Denotes the close button is pressed by a user, and the component shall detach itself.


Use casesTabbox

Version History


ZK Component Reference/Containers/Tabbox/Tabs 31

ZK Component Reference/ Containers/ Tabbox/Tabs

Tabs• Demonstration: Tabs [1]

• Java API: <javadoc>org.zkoss.zul.Tabs</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.tab.Tabs</javadoc>

Employment/PurposeA tabs is the container for the tab components.

Example

<zk> <tabbox width="400px"> <tabs> <tab label="Tab 1" /> <tab label="Tab 2" /> </tabs> <tabpanels> <tabpanel>This is panel 1</tabpanel> <tabpanel>This is panel 2</tabpanel> </tabpanels> </tabbox> <space /> <tabbox width="400px" mold="accordion"> <tabs> <tab label="Tab 3" /> <tab label="Tab 4" /> </tabs> <tabpanels> <tabpanel>This is panel 3</tabpanel> <tabpanel>This is panel 4</tabpanel> </tabpanels>

ZK Component Reference/Containers/Tabbox/Tabs 32

</tabbox></zk>

Supported events*NONE

Supported ChildrenTab

Use casesTabbox

Version History


ZK Component Reference/ Containers/ Tabbox/Tabpanel

Tabpanel• Demonstration: Tabpanel [1]

• Java API: <javadoc>org.zkoss.zul.Tabpanel</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.tab.Tabpanel</javadoc>

Employment/PurposeA tabpanel is the body of a single tab panel. You would place the content for a group of components within a tabpanel. The first tabpanel corresponds to the first tab, the second tabpanel corresponds to the second taband so on.

ZK Component Reference/Containers/Tabbox/Tabpanel 33

Example

<zk> <tabbox width="400px"> <tabs> <tab label="Tab 1" /> <tab label="Tab 2" /> </tabs> <tabpanels> <tabpanel>This is panel 1</tabpanel> <tabpanel>This is panel 2</tabpanel> </tabpanels> </tabbox> <space /> <tabbox width="400px" mold="accordion"> <tabs> <tab label="Tab 3" /> <tab label="Tab 4" /> </tabs> <tabpanels> <tabpanel>This is panel 3</tabpanel> <tabpanel>This is panel 4</tabpanel> </tabpanels> </tabbox></zk>

Supported events

ZK Component Reference/Containers/Tabbox/Tabpanel 34

Name Event Type


Description:



Description:



Description:



Use cases


3.6 How to put a scrollbar inside a tabpanel [1] [1]

3.6 How to make a tabpanel loaded on demand [2] [2]

See also: Tabbox

Version History


References[1] http:/ / www. zkoss. org/ forum/ listComment/ 9889[2] http:/ / www. zkoss. org/ forum/ listComment/ 6236

ZK Component Reference/Containers/Tabbox/Tabpanels 35

ZK Component Reference/ Containers/ Tabbox/Tabpanels

Tabpanels• Demonstration: Tabpanels [1]

• Java API: <javadoc>org.zkoss.zul.Tabpanels</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.tab.Tabpanels</javadoc>

Employment/PurposeA tabpanels is the container for the tab panels, i.e., a collection of tabpanel components.

Example

<zk> <tabbox width="400px"> <tabs> <tab label="Tab 1" /> <tab label="Tab 2" /> </tabs> <tabpanels> <tabpanel>This is panel 1</tabpanel> <tabpanel>This is panel 2</tabpanel> </tabpanels> </tabbox> <space /> <tabbox width="400px" mold="accordion"> <tabs> <tab label="Tab 3" /> <tab label="Tab 4" /> </tabs> <tabpanels> <tabpanel>This is panel 3</tabpanel> <tabpanel>This is panel 4</tabpanel> </tabpanels>

ZK Component Reference/Containers/Tabbox/Tabpanels 36

</tabbox></zk>

Supported events*NONE

Supported ChildrenTabpanel

Use casesTabbox

Version History


ZK Component Reference/ Containers/ Window

Window• Demonstration: Window [1]

• Java API: <javadoc>org.zkoss.zul.Window</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wnd.Window</javadoc>

Employement/PurposeA window is, like HTML DIV tag, used to group components. Unlike other components, a window has the followingcharacteristics.

• A window is an owner of an ID space. Any component contained in a window, including itself, could be found byuse of the getFellow method, if it is assigned with an identifier.

• A window could be overlapped, popup, and embedded.• A window could be a modal dialog.

Example

<hbox> <window title="Embedded Style" border="normal" width="200px"> Hello, Embedded! </window> <window title="Cyan Style" sclass="wndcyan" border="normal"

ZK Component Reference/Containers/Window 37

width="200px"> Hello, Cyan! </window> <window title="Popup Style" sclass="popup" border="normal" width="200px"> Hello, Popup! </window> <window title="Modal Style" sclass="modal" border="normal" width="200px"> Hello, Modal! </window></hbox>

Supported events

Name Event Type

onMove Event: <javadoc>org.zkoss.zk.ui.event.Event</javadoc>





Note:Unlike onClose, this event is only a notification. The

client sends this event after opening or closing the

component.

It is useful to implement load-on-demand by listening to

the onOpen event, and creating components when the

first time the component is opened.

onClose Event: <javadoc>org.zkoss.zk.ui.event.Event</javadoc>



onOK Event:<javadoc>org.zkoss.zk.ui.event.KeyEvent</javadoc>

Denotes user has pressed the ENTER key.

onCancel Event:<javadoc>org.zkoss.zk.ui.event.KeyEvent</javadoc>

Denotes user has pressed the ESC key.

onCtrlKey Event: <javadoc>org.zkoss.zk.ui.event.KeyEvent</javadoc>

Denotes user has pressed a special key, such as PgUp, Home and a key combined with the Ctrl or Alt key. Refer to the ctrlKeysProperty section below for details.


Use cases

ZK Component Reference/Containers/Window 38


5.0+ How to create a modal Window and communicate with it [1]

3.6+ Best practises on creating a pop-up window to display PDF reports [2]

Version History



ZK Component Reference/ DataThis section outlines components which are designed to handle data display.

ZK Component Reference/ Data/ Grid

Grid• Demonstration: Grid Demo [1]

• Java API: <javadoc>org.zkoss.zul.Grid</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.grid.Grid</javadoc>

Employment/PurposeComponents: grid, columns, column, rows and row.A grid contains components that are aligned in rows like tables. Inside a grid, you declare two things, thecolumns, that define the header and column attributes, and the rows, that provide the content. To declare a setof rows, use the rows component, which should be a child element of grid. Inside that you should add rowcomponents, which are used for each row. Inside the row element, you should place the content that you wantinside that row. Each child is a column of the specific row. Similarly, the columns are declared with thecolumns component, which should be placed as a child element of the grid. Unlike row is used to hold thecontent of each row, column declares the common attributes of each column, such as the width and alignment,and and optional headers, i.e., label and/or image.

ZK Component Reference/Data/Grid 39

AutopagingWhen using the paging mold and vflex, you could also turn on autopaging (<javadocmethod="setAutopaging(boolean)">org.zkoss.zul.Grid</javadoc>) such that the page size will be adjustedautomatically based on the available space.

Example

<window title="Grid Demo" border="normal" width="360px"> <zscript> class Comp implements Comparator { private boolean _asc; public Comp(boolean asc) { _asc = asc; } public int compare(Object o1, Object o2) { String s1 = o1.getChildren().get(0).getValue(), s2 = o2.getChildren().get(0).getValue(); int v = s1.compareTo(s2); return _asc ? v: -v; } } Comp asc = new Comp(true), dsc = new Comp(false); </zscript> <grid> <columns sizable="true"> <column label="Type" sortAscending="${asc}" sortDescending="${dsc}"/> <column label="Content"/> </columns> <rows> <row> <label value="File:"/> <textbox width="99%"/> </row> <row> <label value="Type:"/>

ZK Component Reference/Data/Grid 40

<hbox> <listbox rows="1" mold="select"> <listitem label="Java Files,(*.java)"/> <listitem label="All Files,(*.*)"/> </listbox> <button label="Browse..."/> </hbox> </row> <row> <label value="Options:"/> <textbox rows="3" width="99%"/> </row> </rows> </grid> </window>

Supported events

Name Event Type

None None

Supported Children*Columns, Rows

Use cases


Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #g1

ZK Component Reference/Data/Grid/Column 41

ZK Component Reference/ Data/ Grid/ Column

Column• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Column</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.grid.Column</javadoc>

Employment/PurposeA single column in a Columns element. Each child of the Column element is placed in each successive cell of thegrid. The column with the most child elements determines the number of rows in each column. The use of column ismainly to define attributes for each cell in the grid.

Example

<window title="Grid Demo" border="normal" width="360px"> <zscript> class Comp implements Comparator { private boolean _asc; public Comp(boolean asc) { _asc = asc; } public int compare(Object o1, Object o2) { String s1 = o1.getChildren().get(0).getValue(), s2 = o2.getChildren().get(0).getValue(); int v = s1.compareTo(s2); return _asc ? v: -v; } } Comp asc = new Comp(true), dsc = new Comp(false); </zscript> <grid> <columns sizable="true"> <column label="Type" sortAscending="${asc}" sortDescending="${dsc}" /> <column label="Content" /> </columns> <rows> <row>

ZK Component Reference/Data/Grid/Column 42

<label value="File:" /> <textbox width="99%" /> </row> <row> <label value="Type:" /> <hbox> <listbox rows="1" mold="select"> <listitem label="Java Files,(*.java)" /> <listitem label="All Files,(*.*)" /> </listbox> <button label="Browse..." /> </hbox> </row> <row> <label value="Options:" /> <textbox rows="3" width="99%" /> </row> </rows> </grid></window>

Supported events

Name Event Type


Description: Denotes user has clicked the component.


Description: Denotes user has right-clicked the component.


Description: Denotes user has double-clicked the component.


Use casesGrid

Version History


ZK Component Reference/Data/Grid/Columns 43

ZK Component Reference/ Data/ Grid/ Columns

Columns• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Columns</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.grid.Columns</javadoc>

Employment/PurposeDefines the columns of a grid.

Each child of a columns element should be a org.zkoss.zul.Column element.

Example

<window title="Grid Demo" border="normal" width="360px"> <zscript> class Comp implements Comparator { private boolean _asc; public Comp(boolean asc) { _asc = asc; } public int compare(Object o1, Object o2) { String s1 = o1.getChildren().get(0).getValue(), s2 = o2.getChildren().get(0).getValue(); int v = s1.compareTo(s2); return _asc ? v: -v; } } Comp asc = new Comp(true), dsc = new Comp(false); </zscript> <grid> <columns sizable="true"> <column label="Type" sortAscending="${asc}" sortDescending="${dsc}" /> <column label="Content" /> </columns> <rows> <row> <label value="File:" />

ZK Component Reference/Data/Grid/Columns 44

<textbox width="99%" /> </row> <row> <label value="Type:" /> <hbox> <listbox rows="1" mold="select"> <listitem label="Java Files,(*.java)" /> <listitem label="All Files,(*.*)" /> </listbox> <button label="Browse..." /> </hbox> </row> <row> <label value="Options:" /> <textbox rows="3" width="99%" /> </row> </rows> </grid></window>

Supported events

Name Event Type

onColSize <javadoc>org.zkoss.zul.event.ColSizeEvent</javadoc>

Description: Notifies the parent of a group of headers that the widths of two of its children are changed by the user.

Supported ChildrenColumn

Use casesGrid

Version History


ZK Component Reference/Data/Grid/Detail 45

ZK Component Reference/ Data/ Grid/ Detail

Detail• Demonstration: Grid (Master detail) [1]

• Java API: <javadoc>org.zkoss.zul.Detail</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkex.grid.Detail</javadoc>

Employment/PurposeThe detail component is used to display a detailed section where a master row and

multiple detail rows are on the same row.

Example

<?xml version="1.0" encoding="UTF-8"?><zk> Please open/close the +/- button, and the layout of this page shows properly. <grid fixedLayout="true" width="600px"> <columns> <column width="25px" /> <column>Product Name</column> <column>Price</column> <column>Item location</column> </columns> <rows> <row> <detail> <hbox> <image width="200px" height="200px" src="/img/icon_update.png" />


<vbox> <label value="Item Specifics - Item Condition " style="font-weight:bold;font-style: italic;" /> <hbox> <label value="Condition:" /> <label value="Used" style="font-weight:bold;" /> </hbox> <hbox> <label value="Brand:" /> <label value="Apple" style="font-weight:bold;" /> </hbox> <hbox> <label value="Technology:" /> <label value="DVI" style="font-weight:bold;" /> </hbox> <hbox> <label value="Monitor Type:" /> <label value="LCD/Flat Panel" style="font-weight:bold;" /> </hbox> </vbox> </hbox> </detail> <label value="Apple 20-inch Aluminum Cinema Display M9177/A" /> <label style="color:green;float:right;" value="US $202.50" /> <label value="tulsa, ok, United States" /> </row> </rows> </grid></zk>

Supported events

Name Event Type

None None


Use cases



Version History



ZK Component Reference/ Data/ Grid/ Foot

Foot• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Foot</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.grid.Foot</javadoc>

Employment/PurposeDefines a set of footers ( Footer) for a grid ( Grid).

Example

<grid> <columns> <column label="Type"/> <column label="Content"/> </columns> <rows> <row> <label value="File:"/> <textbox width="99%"/> </row> <row> <label value="Type:"/> <hbox> <listbox rows="1" mold="select"> <listitem label="Java Files,(*.java)"/> <listitem label="All Files,(*.*)"/> </listbox> <button label="Browse..."/> </hbox> </row>

ZK Component Reference/Data/Grid/Foot 48

</rows> <foot> <footer>footer1</footer> <footer>footer2</footer> <foot> </grid>

Supported events

Name Event Type

None None

Supported Children*Footer

Use casesGrid

Version History


ZK Component Reference/Data/Grid/Footer 49

ZK Component Reference/ Data/ Grid/ Footer

Footer• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Footer</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.grid.Footer</javadoc>

Employment/PurposeA column of the footer of a grid (Grid). Its parent must be Foot.

Unlike Column, you could place any child in a grid footer.

Example

<grid> <columns> <column label="Type"/> <column label="Content"/> </columns> <rows> <row> <label value="File:"/> <textbox width="99%"/> </row> <row> <label value="Type:"/> <hbox> <listbox rows="1" mold="select"> <listitem label="Java Files,(*.java)"/> <listitem label="All Files,(*.*)"/> </listbox> <button label="Browse..."/> </hbox> </row> </rows> <foot> <footer>footer1</footer> <footer>footer2</footer> <foot> </grid>

ZK Component Reference/Data/Grid/Footer 50

Supported events

Name Event Type

None None


Use casesGrid

Version History


ZK Component Reference/ Data/ Grid/ Group

Group• Demonstration: Group [1]

• Java API: <javadoc>org.zkoss.zul.Group</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkex.grid.Group</javadoc>

Employment/PurposeAdds the ability for single level grouping to the Grid.

Default getSclass(): the same as grid's sclass.

ZK Component Reference/Data/Grid/Group 51

Example

<?xml version="1.0" encoding="UTF-8"?> <zk> Grid support Groupfoot in Group <grid id="grid"> <columns id="h" sizable="true"> <column id="col1" label="Type"/> <column id="col2" label="Content"/> </columns> <rows id="rows"> <group id="gp1"> <label value="Group1: (gp1)"/> <label value="Group1:"/> </group> <row> <label value="File:"/> <label value="File:"/> </row> <row id="row1"> <label value="Type:"/> <hbox> <listbox rows="1" mold="select"> <listitem label="Java Files,(*.java)"/> <listitem label="All Files,(*.*)"/> </listbox> <button label="Browse..."/> </hbox> </row> <groupfoot> <label value="2 Java Files"/> <label value="10 Files"/> </groupfoot>

ZK Component Reference/Data/Grid/Group 52

<group id="gp2" label="Group 2 (gp2)" onOpen='alert("Group is open: "+self.open);'/> <row> <label value="Options:"/> <label value="Options:"/> </row> <groupfoot> <label value="2 Options"/> <label value="10 Options"/> </groupfoot> </rows> </grid> </zk>

Supported events

Name Event Type

None None


Use cases*Grid

Version History



ZK Component Reference/Data/Grid/Groupfoot 53

ZK Component Reference/ Data/ Grid/Groupfoot

Groupfoot• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Groupfoot</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkex.grid.Groupfoot</javadoc>

Employment/PurposeAdds the ability for single level grouping to the Grid. Default getSclass(): the same as grid's sclass.

Example

<?xml version="1.0" encoding="UTF-8"?> <zk> Grid support Groupfoot in Group

<grid id="grid"> <columns id="h" sizable="true"> <column id="col1" label="Type"/> <column id="col2" label="Content"/> </columns> <rows id="rows"> <group id="gp1"> <label value="Group1: (gp1)"/> <label value="Group1:"/> </group> <row> <label value="File:"/> <label value="File:"/>


</row> <row id="row1"> <label value="Type:"/> <hbox> <listbox rows="1" mold="select"> <listitem label="Java Files,(*.java)"/> <listitem label="All Files,(*.*)"/> </listbox> <button label="Browse..."/> </hbox> </row> <groupfoot> <label value="2 Java Files"/> <label value="10 Files"/> </groupfoot> <group id="gp2" label="Group 2 (gp2)" onOpen='alert("Group is open: "+self.open);'/> <row> <label value="Options:"/> <label value="Options:"/> </row> <groupfoot> <label value="2 Options"/> <label value="10 Options"/> </groupfoot> </rows> </grid> </zk>

Supported events

Name Event Type

None None


Use cases



Version History


ZK Component Reference/ Data/ Grid/ Row

Row• Demonstration: Grid [1]

• Java API: <javadoc>org.zkoss.zul.Row</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.grid.Row</javadoc>

Employment/PurposeA single row in a Rows element. Each child of the Row element is placed in each successive cell of the grid. Therow with the most child elements determines the number of columns in each row.

Default getSclass(): the same as grid's sclass.

Example

<window title="Grid Demo" border="normal" width="360px"> <zscript> class Comp implements Comparator { private boolean _asc; public Comp(boolean asc) { _asc = asc; } public int compare(Object o1, Object o2) { String s1 = o1.getChildren().get(0).getValue(), s2 = o2.getChildren().get(0).getValue(); int v = s1.compareTo(s2); return _asc ? v: -v; }

ZK Component Reference/Data/Grid/Row 56

} Comp asc = new Comp(true), dsc = new Comp(false); </zscript> <grid> <columns sizable="true"> <column label="Type" sortAscending="${asc}" sortDescending="${dsc}" /> <column label="Content" /> </columns> <rows> <row> <label value="File:" /> <textbox width="99%" /> </row> <row> <label value="Type:" /> <hbox> <listbox rows="1" mold="select"> <listitem label="Java Files,(*.java)" /> <listitem label="All Files,(*.*)" /> </listbox> <button label="Browse..." /> </hbox> </row> <row> <label value="Options:" /> <textbox rows="3" width="99%" /> </row> </rows> </grid></window>

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Data/Grid/Row 57

Version History


ZK Component Reference/ Data/ Grid/ Rows

Rows• Demonstration: Grid [1]

• Java API: <javadoc>org.zkoss.zul.Rows</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.grid.Rows</javadoc>

Employment/PurposeDefines the rows of a grid. Each child of a rows element should be a <javadoc>org.zkoss.zul.Row</javadoc>element.

Example

<window title="Grid Demo" border="normal" width="360px"> <zscript> class Comp implements Comparator { private boolean _asc; public Comp(boolean asc) { _asc = asc; } public int compare(Object o1, Object o2) { String s1 = o1.getChildren().get(0).getValue(), s2 = o2.getChildren().get(0).getValue(); int v = s1.compareTo(s2); return _asc ? v: -v; } } Comp asc = new Comp(true), dsc = new Comp(false);

ZK Component Reference/Data/Grid/Rows 58

</zscript> <grid> <columns sizable="true"> <column label="Type" sortAscending="${asc}" sortDescending="${dsc}" /> <column label="Content" /> </columns> <rows> <row> <label value="File:" /> <textbox width="99%" /> </row> <row> <label value="Type:" /> <hbox> <listbox rows="1" mold="select"> <listitem label="Java Files,(*.java)" /> <listitem label="All Files,(*.*)" /> </listbox> <button label="Browse..." /> </hbox> </row> <row> <label value="Options:" /> <textbox rows="3" width="99%" /> </row> </rows> </grid></window>

Supported events

Name Event Type

None None

Supported Children*Row

Use cases


ZK Component Reference/Data/Grid/Rows 59

Version History


ZK Component Reference/ Data/ Listbox

Listbox• Demonstration: Listbox [1]

• Java API: <javadoc>org.zkoss.zul.Listbox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Listbox</javadoc>

Employment/PurposeComponents: listbox, listitem, listcell, listhead and listheader.

A list box is used to display a number of items in a list. The user may select an item from the list.

AutopagingWhen using the paging mold and vflex, you could also turn on autopaging (<javadocmethod="setAutopaging(boolean)">org.zkoss.zul.Listbox</javadoc>) such that the page size will be adjustedautomatically based on the available space.

Example

<window title="listbox demo" border="normal"> <listbox id="box" width="250px"> <listhead sizable="true"> <listheader label="name" sort="auto"/> <listheader label="gender" sort="auto"/> </listhead> <listitem> <listcell label="Mary"/> <listcell label="FEMALE"/> </listitem> <listitem> <listcell label="John"/> <listcell label="MALE"/> </listitem>

ZK Component Reference/Data/Listbox 60

<listitem> <listcell label="Jane"/> <listcell label="FEMALE"/> </listitem> <listitem> <listcell label="Henry"/> <listcell label="MALE"/> </listitem> <listfoot > <listfooter><label value="This is footer1"/></listfooter> <listfooter><label value="This is footer2"/></listfooter> </listfoot> </listbox> </window>

Listbox has two molds: default and select. If the select mold is used, the HTML's SELECT tag is generatedinstead.

Supported events

Name Event Type

onPaging <javadoc>org.zkoss.zul.event.PagingEvent</javadoc>

Description: Notifies one of the pages of a multi-page component isselected by the user.

onSelect <javadoc>org.zkoss.zul.event.SelectEvent</javadoc>

Description: Notifies one that the user has selected a new item in the list box

Supported ChildrenListitem, Listhead, Listfoot

Use cases


Version History


ZK Component Reference/Data/Listbox 61


ZK Component Reference/ Data/ Listbox/ Listcell

Listcell• Demonstration: Listbox [1]

• Java API: <javadoc>org.zkoss.zul.Listcell</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Listcell</javadoc>

Employment/PurposeA list cell.

ExampleListbox

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Data/Listbox/Listfoot 62

ZK Component Reference/ Data/ Listbox/Listfoot

Listfoot• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Listfoot</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Listfoot</javadoc>

Employment/PurposeLike Listhead, each listbox has at most one Listfoot.

Example

<window title="listbox demo" border="normal"> <listbox id="box" width="250px"> <listhead sizable="true"> <listheader label="name" sort="auto"/> <listheader label="gender" sort="auto"/> </listhead> <listitem> <listcell label="Mary"/> <listcell label="FEMALE"/> </listitem> <listitem> <listcell label="John"/> <listcell label="MALE"/> </listitem> <listitem> <listcell label="Jane"/> <listcell label="FEMALE"/> </listitem> <listitem> <listcell label="Henry"/> <listcell label="MALE"/> </listitem> <listfoot > <listfooter><label value="This is footer1"/></listfooter>

ZK Component Reference/Data/Listbox/Listfoot 63

<listfooter><label value="This is footer2"/></listfooter> </listfoot> </listbox> </window>

Supported events

Name Event Type

None None

Supported Children*Listfooter

Use cases


Version History


ZK Component Reference/Data/Listbox/Listfooter 64

ZK Component Reference/ Data/ Listbox/Listfooter

Listfooter• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Listfooter</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Listfooter</javadoc>

Employment/PurposeA column of the footer of a list box (Listbox). Its parent must be Listfoot. Unlike Listheader, you couldplace any child in a list footer.

Note: Listcell also accepts children.

Example

<window title="listbox demo" border="normal"> <listbox id="box" width="250px"> <listhead sizable="true"> <listheader label="name" sort="auto"/> <listheader label="gender" sort="auto"/> </listhead> <listitem> <listcell label="Mary"/> <listcell label="FEMALE"/> </listitem> <listitem> <listcell label="John"/> <listcell label="MALE"/> </listitem> <listitem> <listcell label="Jane"/> <listcell label="FEMALE"/> </listitem> <listitem> <listcell label="Henry"/> <listcell label="MALE"/> </listitem>

ZK Component Reference/Data/Listbox/Listfooter 65

<listfoot > <listfooter><label value="This is footer1"/></listfooter> <listfooter><label value="This is footer2"/></listfooter> </listfoot> </listbox> </window>

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Data/Listbox/Listgroup 66

ZK Component Reference/ Data/ Listbox/Listgroup

Listgroup• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Listgroup</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkex.sel.Listgroup</javadoc>

Employment/PurposeAdds the ability for single level grouping to the Listbox.

Example

<?xml version="1.0" encoding="UTF-8"?> <zk> Listbox support Grouping <listbox id="listbox" width="250px"> <listhead sizable="true" id="h"> <listheader id="h1" label="name" sort="auto" /> <listheader id="h2" label="gender" sort="auto" /> </listhead> <listgroup id="gp1" open="false"> <listcell label="Group1"/> <listcell label="Group2"/> </listgroup> <listitem> <listcell label="a Mary" /> <listcell label="a FEMALE" /> </listitem> <listitem> <listcell label="b Mary" /> <listcell label="b FEMALE" /> </listitem> <listitem id="li1">


<listcell label="c Mary1" /> <listcell label="c FEMALE1" /> </listitem> <listitem> <listcell label="d Mary" /> <listcell label="d FEMALE" /> </listitem> <listitem> <listcell label="e John" /> <listcell label="e MALE" /> </listitem> <listgroup id="g2" label="Grouping 2" /> <listitem> <listcell label="Jane" /> <listcell label="FEMALE" /> </listitem> <listitem> <listcell label="Henry" /> <listcell label="MALE" /> </listitem> </listbox> </zk>

Supported events

Name Event Type

None None

Supported Children*Listcell

Use cases



Version History


ZK Component Reference/ Data/ Listbox/Listgroupfoot

Listgroupfoot• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Listgroupfoot</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkex.sel.Listgroupfoot</javadoc>

Employment/PurposeGroupFooter serves as a summary listitem of listgroup.

Example

<?xml version="1.0" encoding="UTF-8"?> <zk> Listbox support Grouping <listbox id="listbox" width="250px"> <listhead sizable="true" id="h"> <listheader id="h1" label="name" sort="auto" /> <listheader id="h2" label="gender" sort="auto" /> </listhead> <listgroup id="gp1" open="false"> <listcell label="Group1"/> <listcell label="Group2"/> </listgroup> <listitem> <listcell label="a Mary" /> <listcell label="a FEMALE" />

ZK Component Reference/Data/Listbox/Listgroupfoot 69

</listitem> <listitem> <listcell label="b Mary" /> <listcell label="b FEMALE" /> </listitem> <listitem id="li1"> <listcell label="c Mary1" /> <listcell label="c FEMALE1" /> </listitem> <listitem> <listcell label="d Mary" /> <listcell label="d FEMALE" /> </listitem> <listitem> <listcell label="e John" /> <listcell label="e MALE" /> </listitem> <listgroupfoot id="f1"> <listcell label="10 emails" /> <listcell label="zk1" /> </listgroupfoot> <listgroup id="g2" label="Grouping 2" /> <listitem> <listcell label="Jane" /> <listcell label="FEMALE" /> </listitem> <listitem> <listcell label="Henry" /> <listcell label="MALE" /> </listitem>

</listbox> </zk>

ZK Component Reference/Data/Listbox/Listgroupfoot 70

Supported events

Name Event Type

None None

Supported Children<javadoc>org.zkoss.zul.Listcell</javadoc>

Use cases


Version History


ZK Component Reference/ Data/ Listbox/Listhead

Listhead• Demonstration: Listhead [1]

• Java API: <javadoc>org.zkoss.zul.Listhead</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Listhead</javadoc>

Employment/PurposeA list headers used to define multi-columns and/or headers. Can only surpport Listheader as its child.

Example

<window title="listbox demo" border="normal"> <listbox id="box" width="250px"> <listhead sizable="true">

ZK Component Reference/Data/Listbox/Listhead 71

<listheader label="name" sort="auto"/> <listheader label="gender" sort="auto"/> </listhead> <listitem> <listcell label="Mary"/> <listcell label="FEMALE"/> </listitem> <listitem> <listcell label="John"/> <listcell label="MALE"/> </listitem> <listitem> <listcell label="Jane"/> <listcell label="FEMALE"/> </listitem> <listitem> <listcell label="Henry"/> <listcell label="MALE"/> </listitem> <listfoot > <listfooter><label value="This is footer1"/></listfooter> <listfooter><label value="This is footer2"/></listfooter> </listfoot> </listbox> </window>

Supported events

Name Event Type

onColSize Event: <javadoc>org.zkoss.zk.ui.event.ColSizeEvent</javadoc> Denotes user has resized one of the columns.

Supported Children*<javadoc>org.zkoss.zul.Listheader</javadoc>

Use cases


5.0 Multiline Listheader [1]

ZK Component Reference/Data/Listbox/Listhead 72

Version History


References[1] http:/ / www. zkoss. org/ forum/ listComment/ 6864

ZK Component Reference/ Data/ Listbox/Listheader

Listheader• Demonstration: Listheader [1]

• Java API: <javadoc>org.zkoss.zul.Listheader</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Listheader</javadoc>

Employment/PurposeThe list header which defines the attributes and header of a columen of a list box. Its parent must be Listhead.

Example

<window title="listbox demo" border="normal"> <listbox id="box" width="250px"> <listhead sizable="true"> <listheader label="name" sort="auto"/> <listheader label="gender" sort="auto"/> </listhead> <listitem> <listcell label="Mary"/> <listcell label="FEMALE"/> </listitem> <listitem> <listcell label="John"/> <listcell label="MALE"/> </listitem> <listitem> <listcell label="Jane"/>

ZK Component Reference/Data/Listbox/Listheader 73

<listcell label="FEMALE"/> </listitem> <listitem> <listcell label="Henry"/> <listcell label="MALE"/> </listitem> <listfoot > <listfooter><label value="This is footer1"/></listfooter> <listfooter><label value="This is footer2"/></listfooter> </listfoot> </listbox> </window>

Supported events

Name Event Type

onClick Event: <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>


onRightClick Event: <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>

Denotes user has right-clicked the component

onDoubleClick Event: <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>

Denotes user has double-clicked the component


Use cases


5.0 Multiline Listheader [1]

Version History


ZK Component Reference/Data/Listbox/Listitem 74

ZK Component Reference/ Data/ Listbox/Listitem

Listitem• Demonstration: Listitem [1]

• Java API: <javadoc>org.zkoss.zul.Listitem</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Listitem</javadoc>

Employment/PurposeA list item.

Example

<window title="listbox demo" border="normal"> <listbox id="box" width="250px"> <listhead sizable="true"> <listheader label="name" sort="auto" /> <listheader label="gender" sort="auto" /> </listhead> <listitem> <listcell label="Mary" /> <listcell label="FEMALE" /> </listitem> <listitem> <listcell label="John" /> <listcell label="MALE" /> </listitem> <listitem> <listcell label="Jane" /> <listcell label="FEMALE" /> </listitem> <listitem> <listcell label="Henry" /> <listcell label="MALE" /> </listitem> <listfoot> <listfooter>

ZK Component Reference/Data/Listbox/Listitem 75

<label value="This is footer1" /> </listfooter> <listfooter> <label value="This is footer2" /> </listfooter> </listfoot> </listbox></window>

Supported events

Name Event Type

None None

Supported Children*Listcell

Use casesSee Listbox.

Version History


ZK Component Reference/Data/Tree 76

ZK Component Reference/ Data/ Tree

Tree• Demonstration: Tree [1]

• Java API: <javadoc>org.zkoss.zul.Tree </javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Tree </javadoc>

Employment/PurposeA tree consists of tree parts, the set of columns, the set of footers, and the tree body. The set of columns is definedby a number of treecol components, one for each column. Each column will appear as a header at the top of thetree. The second part, The set of footers is defined by a number of treefooter components, one for each columnalso. Each column will appear as a footer at the bottom of the tree. The third part, the tree body, contains the data toappear in the tree and is created with a treechildren component.

AutopagingWhen using the paging mold and vflex, you could also turn on autopaging (<javadoc method="setAutopaging(boolean)">org.zkoss.zul.Tree</javadoc>) such that the page size will be adjusted automatically based on theavailable space.

Example

<window title="tree demo" border="normal"> <tree id="tree" width="400px" rows="5"> <treecols sizable="true"> <treecol label="Name"/> <treecol label="Description"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="Item 1"/> <treecell label="Item 1 description"/> </treerow> </treeitem>


<treeitem> <treerow> <treecell label="Item 2"/> <treecell label="Item 2 description"/> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Item 2.1"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Item 2.2"/> <treecell label="Item 2.2 is something who cares"/> </treerow> </treeitem> </treechildren> </treeitem> <treeitem label="Item 3"/> </treechildren> <treefoot> <treefooter label="Count"/> <treefooter label="Summary"/> </treefoot> </tree> </window>

Supported events

Name Event Type

onSelect <javadoc>org.zkoss.zk.ui.event.SelectEvent</javadoc>

Description:

Denotes user has selected one or multiple child components(a set of treeitem).

Supported Children*Treecols, Treechildren, Treefoot

Use cases



3.6 Smalltalk: Building a Complex Tree with Grid-in-Grid [2] [2]

3.6 Open treeitem at start [3] [3]

3.6 Expand all items of a Tree at start [4] [4]

Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #g11[2] http:/ / docs. zkoss. org/ wiki/ Building_a_Complex_Tree_with_Grid-in-Grid[3] http:/ / docs. zkoss. org/ wiki/ ZK/ How-Tos/ Concepts-and-Tricks#Open_treeitem_at_start[4] http:/ / www. zkoss. org/ forum/ listComment/ 9379

ZK Component Reference/ Data/ Tree/ Treecell

Treecell• Demonstration: Treecell [1]

• Java API: <javadoc>org.zkoss.zul.Treecell</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Treecell</javadoc>

Employment/PurposeTreecell represent one column in a treerow by sequencial. Treecell can contains any component in it, such as label,image, textbox etc.

Example

<window title="tree demo" border="normal" width="400px"> <tree id="tree" width="90%"> <treecols sizable="true"> <treecol label="Name" />

ZK Component Reference/Data/Tree/Treecell 79

<treecol label="Description" /> </treecols> <treechildren> <treeitem> <treerow> <treecell> <image src="/img/folder.gif" /> Item 1 </treecell> <treecell> <textbox value="Item 1 description" /> </treecell> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Item 2" /> <treecell label="Item 2 description" /> </treerow> <treechildren> <treeitem open="false"> <treerow> <treecell label="Item 2.1"> <image src="/img/folder.gif" /> </treecell> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Item 2.1.1" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </treeitem> <treeitem label="Item 3" /> </treechildren> </tree></window>

ZK Component Reference/Data/Tree/Treecell 80

Supported events

Event Name Event Type


Description:


onRightClick Event: <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>

Description:


onDoubleClick Event: <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>

Description:



Use cases


Version History


ZK Component Reference/Data/Tree/Treechildren 81

ZK Component Reference/ Data/ Tree/Treechildren

Treechildren• Demonstration: Tree Demo [1]

• Java API: <javadoc>org.zkoss.zul.Treechildren</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Treechildren</javadoc>

Employment/PurposeTreechildren contains a collection of treeitem components. It is main body of the Tree and it also the mainbody of a Treeitem's children.

You can change the page size of each treechildren instance by modifying the pageSize property

Example<window title="tree demo" border="normal" width="450px"> <tree id="tree" width="90%"> <treecols sizable="true"> <treecol label="Name" /> <treecol label="Description" /> </treecols> <treechildren> <treeitem> <treerow> <treecell label="Item 1" /> <treecell label="Item 1 description" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Item 2" /> <treecell label="Item 2 description" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Item 2.1" /> </treerow> <treechildren pageSize="3"> <treeitem> <treerow> <treecell label="Item 2.1.1" /> </treerow> </treeitem>


<treeitem> <treerow> <treecell label="Item 2.1.2" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Item 2.1.3" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Item 2.1.4" /> </treerow> </treeitem> </treechildren> </treeitem> <treeitem> <treerow> <treecell label="Item 2.2" /> <treecell label="Item 2.2 is something who cares" /> </treerow> </treeitem> </treechildren> </treeitem> <treeitem label="Item 3" /> </treechildren> </tree></window>

Supported events

Name Event Type

onPaging <javadoc>org.zkoss.zul.event.PagingEvent</javadoc>

Description:

Notifies one of the pages of a multi-page component is selected by the user.

onPageSize <javadoc>org.zkoss.zul.event.PageSizeEvent</javadoc>

Description:

Used to notify that the page size is changed (by the user)


Supported Children*Treeitem

Use cases


Version History


ZK Component Reference/ Data/ Tree/ Treecol

Treecol• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Treecol</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Treecol</javadoc>

Employment/PurposeA treecol is a top column of tree, Its parent must be Treecols.

Example<window title="tree demo" border="normal" width="400px"> <tree id="tree" width="90%" rows="2"> <treecols sizable="true"> <treecol label="Name" /> <treecol label="Description" /> <treecol label="Remark" /> </treecols> <treechildren> <treeitem> <treerow> <treecell label="Item 1" /> <treecell label="Item 1 description" /> <treecell label="Item 1 remark" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Item 1.2" />

ZK Component Reference/Data/Tree/Treecol 84

<treecell label="Item 1.2 description" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree></window>

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Data/Tree/Treecols 85

ZK Component Reference/ Data/ Tree/ Treecols

Treecols• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Treecols</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Treecols</javadoc>

Employment/PurposeA treecols is main part of tree which contains set of columns. The set of columns is defined by a number oftreecol components. Each column will appear as a column at the top of the tree.

Example<window title="tree demo" border="normal" width="400px"> <tree id="tree" width="90%" rows="2"> <treecols sizable="true"> <treecol label="Name" /> <treecol label="Description" /> <treecol label="Remark" /> </treecols> <treechildren> <treeitem> <treerow> <treecell label="Item 1" /> <treecell label="Item 1 description" /> <treecell label="Item 1 remark" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Item 1.2" /> <treecell label="Item 1.2 description" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree></window>

ZK Component Reference/Data/Tree/Treecols 86

Supported events

Name Event Type

onColSize <javadoc>org.zkoss.zul.event.ColSizeEvent</javadoc>

Description:

Notifies the parent of a group of headers that the widths

of two of its children are changed by the user.


Use cases


Version History


ZK Component Reference/ Data/ Tree/ Treefoot

Treefoot• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Treefoot</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Treefoot</javadoc>

Employment/PurposeA treefoot is main part of tree which contains set of footers. The set of footers is defined by a number of treefootercomponents. Each column will appear as a footer at the bottom of the tree.

ZK Component Reference/Data/Tree/Treefoot 87

Example

<window title="tree demo" border="normal"> <tree id="tree" width="400px" rows="5"> <treecols sizable="true"> <treecol label="Name" /> <treecol label="Description" /> </treecols> <treechildren> <treeitem> <treerow> <treecell label="Item 1" /> <treecell label="Item 1 description" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Item 2" /> <treecell label="Item 2 description" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Item 2.1" /> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Item 2.2" /> <treecell label="Item 2.2 is something who cares" /> </treerow> </treeitem> </treechildren> </treeitem> <treeitem label="Item 3" /> </treechildren> <treefoot>

ZK Component Reference/Data/Tree/Treefoot 88

<treefooter label="Count" /> <treefooter label="Summary" /> </treefoot> </tree></window>

Supported events

Name Event Type

None None

Supported ChildrenTreefooter

Use casesTree

Version History


ZK Component Reference/Data/Tree/Treefooter 89

ZK Component Reference/ Data/ Tree/Treefooter

Treefooter• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Treefooter</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Treefooter</javadoc>

Employment/PurposeA treefooter is a bottom column of tree, Its parent must be Treefoot. You colud place any child in a tree footer.

Example

<window title="tree demo" border="normal" width="400px"> <tree id="tree" width="90%" rows="2"> <treecols sizable="true"> <treecol label="Name" /> <treecol label="Description" /> </treecols> <treechildren> <treeitem> <treerow> <treecell label="Item 1" /> <treecell label="Item 1 description" /> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Item 1.2" /> <treecell label="Item 1.2 description" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> <treefoot>

ZK Component Reference/Data/Tree/Treefooter 90

<treefooter> <image src="/img/folder.gif" /> Count </treefooter> <treefooter> <image src="/img/folder.gif" /> Summary </treefooter> </treefoot> </tree></window>

Supported events

Name Event Type

None None


Use casesTree

Version History


ZK Component Reference/Data/Tree/Treeitem 91

ZK Component Reference/ Data/ Tree/ Treeitem

Treeitem• Demonstration: Tree [1]

• Java API: <javadoc>org.zkoss.zul.Treeitem</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Treeitem</javadoc>

Employment/PurposeTreeitem contains a row of data (treerow), and an optional treechildren.

If the component doesn't contain a treechildren, it is a leaf node that doesn't accept any child items.

If it contains a treechildren, it is a branch node that might contain other items.

For a branch node, an +/- button will appear at the beginning of the row, such that user could open and close the itemby clicking on the +/- button.

Example

<window title="tree demo" border="normal" width="400px"> <tree id="tree" width="90%"> <treecols sizable="true"> <treecol label="Name" /> <treecol label="Description" /> </treecols> <treechildren> <treeitem> <treerow> <treecell> <image src="/img/folder.gif" /> Item 1 </treecell> <treecell> <textbox value="Item 1 description" /> </treecell> </treerow> </treeitem> <treeitem>


<treerow> <treecell label="Item 2" /> <treecell label="Item 2 description" /> </treerow> <treechildren> <treeitem open="false"> <treerow> <treecell label="Item 2.1"> <image src="/img/folder.gif" /> </treecell> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Item 2.1.1" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </treeitem> <treeitem label="Item 3" /> </treechildren> </tree> </window>

Supported events

Name Event Type


Description:



Description:



Description:





Use cases


Version History


ZK Component Reference/ Data/ Tree/ Treerow

Treerow• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Treerow</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.sel.Treerow</javadoc>

Employment/PurposeTreerow is a single row in the tree, it is the main content of treeitem. Treerow can contains multiple treecell, eachtreecell represent one column in this row by sequencial. A treecell can contains any component in it, such as label,image, textbox etc.

Example

<window title="tree demo" border="normal" width="400px"> <tree id="tree" width="90%"> <treecols sizable="true"> <treecol label="Name" /> <treecol label="Description" /> </treecols> <treechildren> <treeitem>

ZK Component Reference/Data/Tree/Treerow 94

<treerow> <treecell> <image src="/img/folder.gif" /> Item 1 </treecell> <treecell> <textbox value="Item 1 description" /> </treecell> </treerow> </treeitem> <treeitem> <treerow> <treecell label="Item 2" /> <treecell label="Item 2 description" /> </treerow> <treechildren> <treeitem open="false"> <treerow> <treecell label="Item 2.1"> <image src="/img/folder.gif" /> </treecell> </treerow> <treechildren> <treeitem> <treerow> <treecell label="Item 2.1.1" /> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </treeitem> <treeitem label="Item 3" /> </treechildren> </tree></window>

ZK Component Reference/Data/Tree/Treerow 95

Supported events

Name Event Type

None None

Supported Children*Treecell

Use casesTree

Version History


ZK Component Reference/ Diagrams andReportsThis section outlines components which are used to create interactive charts and reports.

ZK Component Reference/Diagrams and Reports/Chart 96

ZK Component Reference/ Diagrams andReports/ Chart

Chart• Demonstration: Chart [1]

• Java API: <javadoc>org.zkoss.zul.Chart</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Chart</javadoc>

Employment/PurposeA chart is used to show a set of data as a graph. It helps users to judge things with a snapshot. To use a chartcomponent , developers must prepare a ChartModel and a ChartEngine. Developers also set proper charttype, and the threeD (3D) attribute to draw proper chart. The model and type must match to each other; or the resultis unpredictable. The 3D chart is not supported on all chart type.

Example

Type Model 3D

pie PieModel o

ring PieModel x

bar CategoryModel o

line CategoryModel or XYModel o

area CategoryModel or XYModel x

stacked_bar CategoryModel o

stacked_area CategoryModel or XYModelxwaterfall

CategoryModel x


polar XYModelxscatter

XYModelxtime_series

XYModel x

polar XYModelxstep_area

XYModel x

step XYModelxhistogram

XYModelxcandlestick

HiLoModel x

hilow HiLoModel x

<vbox> <chart id="mychart" title="Pie Chart Demo" width="500" height="250" type="pie" threeD="true" fgAlpha="128"/> <zscript> PieModel model = new MyPieModel(); mychart.setModel(model); </zscript> </vbox>

Supported events

Name Event Type


Description: Denotes user has clicked the component.Use getX(), getY() method to get coordinates.Use getArea() method to get the area component which user clicks on.


Use cases


5.0 Make a Chart fill 100% width in parent panel [2] [2]

5.0 Dual axis in Chart [3] [3]


Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #d2[2] http:/ / www. zkoss. org/ forum/ listComment/ 10761[3] http:/ / www. zkoss. org/ forum/ listComment/ 8752

ZK Component Reference/Diagrams and Reports/Flashchart 99

ZK Component Reference/ Diagrams andReports/ Flashchart

Flashchart• Demonstration: link [1]

• Java API: <javadoc>org.zkoss.zul.Flashchart</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.fchart.Flashchart</javadoc>

Employment/PurposeThe generic flash chart component.

Example

<vbox> <grid width="400px"> <columns> <column label="category" width="150px" /> <column label="value" /> </columns> <rows> <row> <label id="c0" value="C/C++" />


<decimalbox id="v0" value="21.2" constraint="no empty" onChange="update(0)" /> </row> <row> <label id="c1" value="VB" /> <decimalbox id="v1" value="10.2" constraint="no empty" onChange="update(1)" /> </row> <row> <label id="c2" value="Java" /> <decimalbox id="v2" value="40.4" constraint="no empty" onChange="update(2)" /> </row> <row> <label id="c3" value="PHP" /> <decimalbox id="v3" value="28.2" constraint="no empty" onChange="update(3)" /> </row> </rows> </grid> <flashchart id="mychart" width="500" height="250" type="pie"> <zscript> void update(int rowIndex) { Label lb = (Label) self.getFellow("c"+rowIndex); Decimalbox db = (Decimalbox) self.getFellow("v"+rowIndex); model.setValue(lb.value, new Double(db.getValue().doubleValue())); } PieModel model = new SimplePieModel(); for(int j=0; j < 4; ++j) { update(j); } mychart.setModel(model); </zscript> </flashchart> <toolbarbutton label="See More chart..." href="/userguide/data/moreflashchart.zul" target="zkdemo"/></vbox>


Supported events

Name Event Type

None None


Use cases


Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #d21

ZK Component Reference/ Diagrams andReports/ Gmaps

Gmaps• Demonstration: Gmaps Demo [1]

• Java API: N/A• JavaScript API: N/A

Employment/PurposeComponents: gmaps, ginfo, gmarker, gpolyline, gpolygon, gimage, and gscreen.A gmaps is a maps component that wraps the famous Google Maps service that you can control it and embedded itin your ZK web application page in pure Java. Inside a gmaps, you can manipulate your maps and add contents tothe maps and create convenient locality related web application. You can add ginfo to represent an anchoredinformation window for the maps. You can add multiple gmarkers to indicate special locations. You can addgpolyline and gpolygon to indicate a path or an area. You can also overlay gimage and gscreen toindicate very special places.

ZK Component Reference/Diagrams and Reports/Gmaps 102

Example

<window title="Gmaps Demo" border="normal" width="508px"> <script type="text/javascript" content="zk.googleAPIkey='Your-Google-API-Key'"/> <gmaps id="mymap" width="500px" height="300px" showSmallCtrl="true"> <ginfo id="myinfo" open="true"> <![CDATA[ Hello, <a href="http://www.zkoss.org">ZK</a>. ]]> </ginfo> <gmarker id="mymark" lat="37.4410" lng="-122.1490"> <![CDATA[ Hello, <a href="http://www.zkoss.org">ZK</a> on top of Gmarker. ]]> </gmarker> <attribute name="onMapClick"> Gmarker gmarker = event.getGmarker(); if (gmarker != null) { gmarker.setOpen(true); } </attribute> </gmaps> </window>

ZK Component Reference/Diagrams and Reports/Gmaps 103

Supported events

Name Event Type

onInfoChange InfoChangeEvent

Description: Notifies that the current open information window haschanged(opened/closed)

onMapDrop MapDropEvent

Description: Notifies that some component is dragged and dropped onthe gmaps or gmarker component with latitude and longitudeinformation.

onMapClick,onMapDoubleClick,onMapRightClick

MapMouseEvent

Description: Notifies that some mouse action has been applied on thegmaps or gmarker component with latitude and longitude information.

onMapMove MapMoveEvent

Description: Notifies that the view center (latitude, longitude) ofthe gmaps has been moved.

onMapTypeChange MapTypeChangeEvent

Description: Notifies that the map type of the gmaps has beenchanged.

onMapZoom MapZoomEvent

Description: Notifies that the zoom level of the gmaps has beenchanged.

Supported Children*Ginfo, Gmarker,Gpolyline,Gpolygon,Gimage,Gscreen

Use cases


Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #m8

ZK Component Reference/Diagrams and Reports/Gmaps/Gimage 104

ZK Component Reference/ Diagrams andReports/ Gmaps/ Gimage

Gimage• Demonstration: N/A• Java API: N/A• JavaScript API: N/A

Employment/PurposeImage anchored on two specified (latitude, longitude) points(south-west and north-east) which is zoomed and movedwith the Google Maps.

Example

<window title="Google Maps"> <script type="text/javascript" content="zk.googleAPIkey='Your-Google-API-Key'"/> <gmaps id="mymap" width="500px" height="300px" showSmallCtrl="true"> <gimage src="/img/Centigrade-Widget-Icons/Globe-128x128.png" swlat="37.44215478" swlng="-122.14273453" nelat="37.45033195" nelng="-122.13191986"/> </gmaps></window>

ZK Component Reference/Diagrams and Reports/Gmaps/Gimage 105

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/ Diagrams andReports/ Gmaps/ Ginfo

Ginfo• Demonstration: Gmaps Demo [1]


Employment/PurposeThe popup info window of the Gooogle Maps. You can specify the content in pure text or HTML.

ExampleGmaps

ZK Component Reference/Diagrams and Reports/Gmaps/Ginfo 106

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/ Diagrams andReports/ Gmaps/ Gmarker

Gmarker• Demonstration: Gmaps Demo [1]


Employment/PurposeThe gmarker of the Google Maps that you can used to indicate a specific (latitude, longitude) points. The icon,shadow, color, and so on are customizable.

ExampleGmaps

Supported events

ZK Component Reference/Diagrams and Reports/Gmaps/Gmarker 107

Name Event Type

onMapDrop <javadoc>org.zkoss.gmaps.event.MapDropEvent</javadoc>

Description: Notifies that some component is dragged and dropped on thegmaps or gmarker component with latitude and longitude information.

onMapClick,onMapDoubleClick,onMapRightClick

<javadoc>org.zkoss.gmaps.event.MapMouseEvent</javadoc>

Description: Notifies that some mouse action has been applied on thegmaps or gmarker component with latitude and longitude information.


Use cases


Version History


ZK Component Reference/Diagrams and Reports/Gmaps/Gpolyline 108

ZK Component Reference/ Diagrams andReports/ Gmaps/ Gpolyline

Gpolyline• Demonstration: N/A• Java API: N/A• JavaScript API: N/A

Employment/PurposePolyline drawn on the Google Maps per the given (latitude, longitude) points and visible zoom level(0~3).

Example

<window title="Google Maps"> <script type="text/javascript" content="zk.googleAPIkey='Your-Google-API-Key'"/> <gmaps id="mymap" width="500px" height="300px" showSmallCtrl="true"> <gpolyline points="37.42838786,-122.13998795,3,37.43561240,-122.13277816,3,37.42416187,-122.11441040,3, 37.42157162,-122.12007522,3,37.41734524,-122.12316513,3,37.42838786,-122.13998795,3"/> </gmaps></window>

ZK Component Reference/Diagrams and Reports/Gmaps/Gpolyline 109

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/ Diagrams andReports/ Gmaps/ Gpolygon

Gpolygon• Demonstration: N/A• Java API: N/A• JavaScript API: N/A

Employment/PurposePolygon drawn on the Google Maps per the given (latitude, longitude) points, visible zoom level(0~3), and fill color,etc..

ZK Component Reference/Diagrams and Reports/Gmaps/Gpolygon 110

Example

<window title="Google Maps"> <script type="text/javascript" content="zk.googleAPIkey='Your-Google-API-Key'"/> <gmaps id="mymap" width="500px" height="300px" showSmallCtrl="true"> <gpolygon points="37.42838786,-122.13998795,3,37.43561240,-122.13277816,3,37.42416187,-122.11441040,3, 37.42157162,-122.12007522,3,37.41734524,-122.12316513,3"/> </gmaps></window>

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Diagrams and Reports/Gmaps/Gpolygon 111

Version History


ZK Component Reference/ Diagrams andReports/ Gmaps/ Gscreen

Gscreen• Demonstration: N/A• Java API: N/A• JavaScript API: N/A

Employment/PurposeA rectangular image on the Gmaps whose position remains fixed on the screen even you move the maps. It can beused in showing logos, heads-up display, etc.

Example

<window title="Google Maps"> <script type="text/javascript" content="zk.googleAPIkey='Your-Google-API-Key'"/> <gmaps id="mymap" width="500px" height="300px" showSmallCtrl="true"> <gscreen src="/img/ZK-Logo.gif" screenX="465" screenY="10" offsetX="0" offsetY="0" width="30" height="30"/> </gmaps>

ZK Component Reference/Diagrams and Reports/Gmaps/Gscreen 112

</window>

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Diagrams and Reports/Jasperreport 113

ZK Component Reference/ Diagrams andReports/ Jasperreport

Jasperreport• Demonstration: Jasperreport [1]

• Java API: <javadoc>org.zkoss.zkex.zul.Jasperreport</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkex.utl.Jasperreport</javadoc>

Employment/PurposeThe JasperReport component. It is used to generate a Jasper report into an inline frame

Example

<jasperreport id="report" height="360px" /> <zscript> import org.zkoss.zkdemo.userguide.CustomDataSource; //Preparing parameters Map parameters = new HashMap(); parameters.put("ReportTitle", "Address Report"); parameters.put("DataFile", "CustomDataSource from java"); report.setSrc("/userguide/data/jasperreport.jasper");

ZK Component Reference/Diagrams and Reports/Jasperreport 114

report.setParameters(parameters); report.setDatasource(new CustomDataSource()); report.setType("pdf"); </zscript>

Supported events

Name Event Type

None None


Use cases


5.0.2 How to use Dynamic Jasper Reports [2]

Version History


5.0.1 March 2010 Support Hibernate and SQL connections

References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #d3[2] http:/ / www. zkoss. org/ forum/ listComment/ 10873

ZK Component Reference/Diagrams and Reports/Timeline 115

ZK Component Reference/ Diagrams andReports/ Timeline

Timeline• Demonstration: SIMILE Timeline [1]


Employment/PurposeTimeline [2]is a DHTML-based Ajax widget for visualizing time-based events developed by SIMILE project of MIT.It is like Google Maps for time-based information.

A timeline contains one or more Bands, which can be panned infinitely by dragging with the mouse pointer, usingthe mouse scroll-wheel or the keyboard's arrow buttons.

A band can be configured to synchronize with another band such that panning one band also scrolls the other.

Example

<timeline height="300px" width="100%"> <bandinfo width="70%" id="b1" intervalUnit="month" intervalPixels="100" eventSourceUrl="misc/timeline_ex1.xml"> </bandinfo> <bandinfo width="30%" intervalUnit="year" intervalPixels="200" syncWith="b1" eventSourceUrl="misc/timeline_ex1.xml"> </bandinfo></timeline>

timeline_ex1.xml

<data> <event start="Oct 1 2008 00:00:00 GMT" end="Oct 1 2008 00:00:00 GMT"


title="Friend's wedding"> I'm not sure precisely when my friend's wedding is. </event> <event start="Oct 15 2008 11:00:00 GMT" end="Nov 1 2008 09:00:00 GMT" isDuration="true" title="Writing Style Guide" image="http://simile.mit.edu/images/csail-logo.gif"> A few days to write some documentation for <a href="http://www.zkoss.org/doc/styleguide">Timeline</a> . </event> <event start="Oct 23 2008 06:12:33 GMT" title="Trip to New York" link="http://www.priceline.com/"> Happy New Year ! </event></data>

Supported events

Name Event Type

None None

Supported Children*Bandinfo

Use cases


3.6 Smalltalk: Using Timeline Component, Part I [3] [3]

3.6 Smalltalk: Using Timeline Component, Part II [4] [4]

3.6 How to use ListModel in Timeline component [5] [5]

3.6 Using the New Feature Of The Timeline Component [6] [6]

3.6 Integrating Google Calendar with ZK Timeline Component [7] [7]


Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #m9[2] http:/ / www. simile-widgets. org/ timeline/[3] http:/ / docs. zkoss. org/ wiki/ Using_Timeline_Component%2C_Part_I[4] http:/ / docs. zkoss. org/ wiki/ Using_Timeline_Component%2C_Part_II[5] http:/ / docs. zkoss. org/ wiki/ How_to_use_ListModel_in_Timeline_component[6] http:/ / docs. zkoss. org/ wiki/ Using_the_New_Feature_Of_The_Timeline_Component[7] http:/ / docs. zkoss. org/ wiki/ Integrating_Google_Calendar_with_ZK_Timeline_Component

ZK Component Reference/ Diagrams andReports/ Timeline/ Bandinfo

Bandinfo• Demonstration: SIMILE Timeline [1]


Employment/PurposeDefines the bandinfo of a timeline.

A band layer is the main building block for timeline and it's the object that is responsible for painting the band itself.

Example

<timeline height="300px" width="100%"> <bandinfo width="70%" id="b1" intervalUnit="month"

ZK Component Reference/Diagrams and Reports/Timeline/Bandinfo 118

intervalPixels="100" eventSourceUrl="misc/timeline_ex1.xml"> </bandinfo> <bandinfo width="30%" intervalUnit="year" intervalPixels="200" syncWith="b1" eventSourceUrl="misc/timeline_ex1.xml"> </bandinfo></timeline>

timeline_ex1.xml

<data> <event start="Oct 1 2008 00:00:00 GMT" end="Oct 1 2008 00:00:00 GMT" title="Friend's wedding"> I'm not sure precisely when my friend's wedding is. </event> <event start="Oct 15 2008 11:00:00 GMT" end="Nov 1 2008 09:00:00 GMT" isDuration="true" title="Writing Style Guide" image="http://simile.mit.edu/images/csail-logo.gif"> A few days to write some documentation for <a href="http://www.zkoss.org/doc/styleguide">Timeline</a> . </event> <event start="Oct 23 2008 06:12:33 GMT" title="Trip to New York" link="http://www.priceline.com/"> Happy New Year ! </event></data>

Supported events

Name Event Type

onOccurEventSelect OccurEventSelectEvent

Description: Denotes the Occur Event in the bandinfo component has been clicked by the user.

onBandScroll BandScrollEvent

Description: Denotes the bandinfo component has been moved by the user.

ZK Component Reference/Diagrams and Reports/Timeline/Bandinfo 119

Supported Children*Hotzone

Use casesTimeline

Version History


ZK Component Reference/ Diagrams andReports/ Timeline/ Hotzone

Hotzone• Demonstration: N/A• Java API: N/A• JavaScript API: N/A

Employment/PurposeDefines the hotzoneof a bandinfo .

Example

<window id="win"><zscript> <![CDATA[ import java.util.Date; import java.util.TimeZone;

TimeZone zone=TimeZone.getTimeZone("GMT-05");

ZK Component Reference/Diagrams and Reports/Timeline/Hotzone 120

Date current=new Date(Date.parse("Jun 28 2006 00:00:00 GMT-0500")); //for hotzone of band #1 Date d1=new Date(Date.parse("Aug 01 2006 00:00:00 GMT-0500")); Date d2=new Date(Date.parse("Sep 01 2006 00:00:00 GMT-0500")); Date d3=new Date(Date.parse("Aug 02 2006 00:00:00 GMT-0500")); Date d4=new Date(Date.parse("Aug 04 2006 00:00:00 GMT-0500")); Date d5=new Date(Date.parse("Aug 02 2006 06:00:00 GMT-0500")); Date d6=new Date(Date.parse("Aug 02 2006 12:00:00 GMT-0500"));

//for hotzone of band #2 Date d7=new Date(Date.parse("Aug 01 2006 00:00:00 GMT-0500")); Date d8=new Date(Date.parse("Sep 01 2006 00:00:00 GMT-0500")); ]]></zscript><timeline height="300px" width="100%"> <bandinfo width="70%" id="b1" intervalUnit="month" intervalPixels="100" timeZone="${zone}" date="${current}"> <hotzone start="${d1}" end="${d2}" magnify="10" unit="week" /> <hotzone start="${d3}" end="${d4}" magnify="7" unit="day" /> <hotzone start="${d5}" end="${d6}" magnify="5" unit="hour" /> </bandinfo> <bandinfo timeZone="${zone}" date="${current}" width="30%" intervalUnit="year" intervalPixels="200" syncWith="b1"> <hotzone start="${d7}" end="${d8}" magnify="20" unit="week" /> </bandinfo></timeline></window>

Supported events

Name Event Type

None None


Use casesTimeline

ZK Component Reference/Diagrams and Reports/Timeline/Hotzone 121

Version History


ZK Component Reference/ Diagrams andReports/ Timeplot

Timeplot• Demonstration: SIMILE Timeplot [1]


Employment/PurposeTimeplot [2] is a DHTML-based AJAXy widget for plotting time series and overlay time-based events over them.

You can populate Timeplot with data by pointing it to an space or comma separated file. Timeplot also supportsTimeline's XML format, meaning that you can reuse the same data file of your Timeline and overlay them over atime series plot.

Example

<zk> <div width="1200px"> New Legal Permanent Residents in the U.S. (per year) vs. U.S. History <zscript> import org.zkforge.timeplot.geometry.*; import org.zkforge.timeplot.data.*; import org.zkforge.timeplot.operator.*; import org.zkforge.timeline.data.OccurEvent; import org.zkoss.zul.*; PlotDataSource pds=new PlotDataSource();

ZK Component Reference/Diagrams and Reports/Timeplot 122

pds.setDataSourceUri("misc/immigration.txt"); pds.setSeparator(" "); ValueGeometry vg=new DefaultValueGeometry(); vg.setGridColor("#000000"); TimeGeometry tg=new DefaultTimeGeometry(); tg.setAxisLabelsPlacement("bottom"); </zscript> <timeplot width="1000px" height="300px"> <plotinfo id="plot 1" plotDataSource="${pds}" dotColor="#000000" showValues="true" lineColor="#008bb6" valueGeometry="${vg}" timeGeometry="${tg}" eventSourceUri="misc/us_history.xml" /> </timeplot> </div></zk>

immigration.txt

1820 83851821 91271822 69111823 63541824 79121825 101991826 108371827 188751828 273821829 225201830 23322

us_history.xml

<?xml version="1.0" encoding="UTF-8"?><data> <event start="Jan 01 1849 00:00:00 GMT" title="California Gold Rush" link="http://en.wikipedia.org/wiki/California_Gold_Rush"></event> <event start="Apr 12 1861 00:00:00 GMT" end="Apr 09 1865 00:00:00 GMT" title="American Civil War" link="http://en.wikipedia.org/wiki/American_Civil_War"></event> <event start="Aug 03 1882 00:00:00 GMT" title="Immigration Act of 1882" link="http://en.wikipedia.org/wiki/1882_Immigration_Act">The U.S. Congress passes a new Immigration Act that stated that a 50 cents tax would be levied on all aliens landing at United States ports. The money collected was to be used to defray the expenses of regulating immigration and for the care of immigrants after landing. The legislation also gave powers to the authorities to deny entry to "convicts (except those convicted of political offences), lunatics, idiots and persons likely to become public charges".</event> <event start="Apr 25 1898 00:00:00 GMT" title="Spanish-American War" link="http://en.wikipedia.org/wiki/Spanish-American_War"></event> <event start="Jul 28 1914 00:00:00 GMT" end="Nov 11 1918 00:00:00 GMT" title="World War I" link="http://en.wikipedia.org/wiki/World_war_1"></event> <event start="Jan 01 1924 00:00:00 GMT" title="Immigration Act of 1924" link="http://en.wikipedia.org/wiki/1924_Immigration_Act">The Immigration Act of 1924, which included the National Origins


Act, Asian Exclusion Act or the Johnson-Reed Act, was a United States federal law that limited the number of immigrants who could be admitted from any country to 2% of the number of people from that country who were already living in the United States in 1890, according to the Census of 1890. It excluded immigration to the US of Asians. It superseded the 1921 Emergency Quota Act. The law was aimed at further restricting the Southern and Eastern Europeans who had begun to enter the country in large numbers beginning in the 1890s, as well as East Asians and Asian Indians, who were prohibited from immigrating entirely. It set no limits on immigration from Latin America.</event> <event start="Oct 29 1929 00:00:00 GMT" title="Black Tuesday" link=""></event> <event start="Jan 01 1933 00:00:00 GMT" end="Jan 01 1938 00:00:00 GMT" title="New Deal" link="http://en.wikipedia.org/wiki/New_Deal"></event> <event start="Sep 01 1939 00:00:00 GMT" end="Sep 02 1945 00:00:00 GMT" title="World War II" link="http://en.wikipedia.org/wiki/World_war_2"></event> <event start="Jun 25 1950 00:00:00 GMT" end="Jul 27 1953 00:00:00 GMT" title="Korean War" link="http://en.wikipedia.org/wiki/Korean_War"></event> <event start="Aug 02 1964 00:00:00 GMT" end="Apr 30 1975 00:00:00 GMT" title="Vietnam War" link="http://en.wikipedia.org/wiki/Vietnam_War"></event> <event start="Jul 21 1969 00:00:00 GMT" title="Man on the Moon">Neil Armstrong becomes the first person to walk on the Moon as the commander of the American mission Apollo 11.</event> <event start="Jan 01 1980 00:00:00 GMT" title="Refugee Act">The Refugee Act is a 1980 United States federal law that reformed United States immigration law and admitted refugees on systematic basis for humanitarian reasons. A 1985 ceiling of 70,000 refugees, with 270,000 immigrants total and 20,000 from any one country, was established.</event> <event start="Nov 06 1986 00:00:00 GMT" title="Immigration Reform and Control Act of 1986" link="http://en.wikipedia.org/wiki/Immigration_Reform_and_Control_Act_of_1986">The Act made it illegal to knowingly hire or recruit illegal immigrants, required employers to attest to their employees' immigration status, and granted amnesty to illegal immigrants who entered the United States before January 1, 1982 and had resided there continuously.</event> <event start="Nov 29 1990 00:00:00 GMT" title="Immigration Act of 1990" link="http://en.wikipedia.org/wiki/Immigration_Act_of_1990"></event> <event start="Sep 30 1996 00:00:00 GMT" title="Illegal Immigration Reform and Immigrant Responsibility Act of 1996" link="http://en.wikipedia.org/wiki/Illegal_Immigration_Reform_and_Immigrant_Responsibility_Act_of_1996"></event> <event start="Sep 11 2001 00:00:00 GMT" title="Attack at the World Trade Center" link="http://en.wikipedia.org/wiki/Vietnam_War"></event></data>

Supported events

Name Event Type

None None

Supported Children*Plotinfo

Use cases



3.6 Smalltalk: Using Timeplot component-Part I [3] [3]

3.6 Smalltalk: Using Timeplot component-Part II [4] [4]

Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #m10[2] http:/ / www. simile-widgets. org/ timeplot/[3] http:/ / docs. zkoss. org/ wiki/ Using_Timeplot_component-Part_I[4] http:/ / docs. zkoss. org/ wiki/ Using_Timeplot_component-Part_II

ZK Component Reference/ Diagrams andReports/ Timeplot/ Plotinfo

Plotinfo• Demonstration: SIMILE Timeplot [1]


Employment/PurposeDefines the plotinfo of a timeplot.

A plot layer is the main building block for timeplots and it's the object that is responsible for painting the plot itself.Each plot needs to have a time geometry, either a DataSource (for time series plots) or an EventSource (for eventplots) and a value geometry in case of time series plots.

Example

ZK Component Reference/Diagrams and Reports/Timeplot/Plotinfo 125

<zk> <div width="1200px"> New Legal Permanent Residents in the U.S. (per year) vs. U.S. History <zscript> import org.zkforge.timeplot.geometry.*; import org.zkforge.timeplot.data.*; import org.zkforge.timeplot.operator.*; import org.zkforge.timeline.data.OccurEvent; import org.zkoss.zul.*; PlotDataSource pds=new PlotDataSource(); pds.setDataSourceUri("misc/immigration.txt"); pds.setSeparator(" "); ValueGeometry vg=new DefaultValueGeometry(); vg.setGridColor("#000000"); TimeGeometry tg=new DefaultTimeGeometry(); tg.setAxisLabelsPlacement("bottom"); </zscript> <timeplot width="1000px" height="300px"> <plotinfo id="plot 1" plotDataSource="${pds}" dotColor="#000000" showValues="true" lineColor="#008bb6" valueGeometry="${vg}" timeGeometry="${tg}" eventSourceUri="misc/us_history.xml" /> </timeplot> </div></zk>

immigration.txt

1820 83851821 91271822 69111823 63541824 79121825 101991826 108371827 188751828 273821829 225201830 23322

us_history.xml

<?xml version="1.0" encoding="UTF-8"?><data>


<event start="Jan 01 1849 00:00:00 GMT" title="California Gold Rush" link="http://en.wikipedia.org/wiki/California_Gold_Rush"></event> <event start="Apr 12 1861 00:00:00 GMT" end="Apr 09 1865 00:00:00 GMT" title="American Civil War" link="http://en.wikipedia.org/wiki/American_Civil_War"></event> <event start="Aug 03 1882 00:00:00 GMT" title="Immigration Act of 1882" link="http://en.wikipedia.org/wiki/1882_Immigration_Act">The U.S. Congress passes a new Immigration Act that stated that a 50 cents tax would be levied on all aliens landing at United States ports. The money collected was to be used to defray the expenses of regulating immigration and for the care of immigrants after landing. The legislation also gave powers to the authorities to deny entry to "convicts (except those convicted of political offences), lunatics, idiots and persons likely to become public charges".</event> <event start="Apr 25 1898 00:00:00 GMT" title="Spanish-American War" link="http://en.wikipedia.org/wiki/Spanish-American_War"></event> <event start="Jul 28 1914 00:00:00 GMT" end="Nov 11 1918 00:00:00 GMT" title="World War I" link="http://en.wikipedia.org/wiki/World_war_1"></event> <event start="Jan 01 1924 00:00:00 GMT" title="Immigration Act of 1924" link="http://en.wikipedia.org/wiki/1924_Immigration_Act">The Immigration Act of 1924, which included the National Origins Act, Asian Exclusion Act or the Johnson-Reed Act, was a United States federal law that limited the number of immigrants who could be admitted from any country to 2% of the number of people from that country who were already living in the United States in 1890, according to the Census of 1890. It excluded immigration to the US of Asians. It superseded the 1921 Emergency Quota Act. The law was aimed at further restricting the Southern and Eastern Europeans who had begun to enter the country in large numbers beginning in the 1890s, as well as East Asians and Asian Indians, who were prohibited from immigrating entirely. It set no limits on immigration from Latin America.</event> <event start="Oct 29 1929 00:00:00 GMT" title="Black Tuesday" link=""></event> <event start="Jan 01 1933 00:00:00 GMT" end="Jan 01 1938 00:00:00 GMT" title="New Deal" link="http://en.wikipedia.org/wiki/New_Deal"></event> <event start="Sep 01 1939 00:00:00 GMT" end="Sep 02 1945 00:00:00 GMT" title="World War II" link="http://en.wikipedia.org/wiki/World_war_2"></event> <event start="Jun 25 1950 00:00:00 GMT" end="Jul 27 1953 00:00:00 GMT" title="Korean War" link="http://en.wikipedia.org/wiki/Korean_War"></event> <event start="Aug 02 1964 00:00:00 GMT" end="Apr 30 1975 00:00:00 GMT" title="Vietnam War" link="http://en.wikipedia.org/wiki/Vietnam_War"></event> <event start="Jul 21 1969 00:00:00 GMT" title="Man on the Moon">Neil Armstrong becomes the first person to walk on the Moon as the commander of the American mission Apollo 11.</event> <event start="Jan 01 1980 00:00:00 GMT" title="Refugee Act">The Refugee Act is a 1980 United States federal law that reformed United States immigration law and admitted refugees on systematic basis for humanitarian reasons. A 1985 ceiling of 70,000 refugees, with 270,000 immigrants total and 20,000 from any one country, was established.</event> <event start="Nov 06 1986 00:00:00 GMT" title="Immigration Reform and Control Act of 1986" link="http://en.wikipedia.org/wiki/Immigration_Reform_and_Control_Act_of_1986">The Act made it illegal to knowingly hire or recruit illegal immigrants, required employers to attest to their employees' immigration status, and granted amnesty to illegal immigrants who entered the United States before January 1, 1982 and had resided there continuously.</event> <event start="Nov 29 1990 00:00:00 GMT" title="Immigration Act of 1990" link="http://en.wikipedia.org/wiki/Immigration_Act_of_1990"></event> <event start="Sep 30 1996 00:00:00 GMT" title="Illegal Immigration Reform and Immigrant Responsibility Act of 1996" link="http://en.wikipedia.org/wiki/Illegal_Immigration_Reform_and_Immigrant_Responsibility_Act_of_1996"></event> <event start="Sep 11 2001 00:00:00 GMT" title="Attack at the World Trade Center" link="http://en.wikipedia.org/wiki/Vietnam_War"></event></data>


Supported events

Name Event Type

onEventClick <javadoc>org.zkoss.zk.ui.event.Event</javadoc>

Description: Denotes the Occur Event in the plotinfo component has been clicked by the user.


Use casesTimeplot

Version History


ZK Component Reference/ Essential ComponentsThis section outlines components which are considered a "must have" by ZK developers.

ZK Component Reference/Essential Components/A 128

ZK Component Reference/ EssentialComponents/ A

A• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.A</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.A</javadoc>

Employment/PurposeThe same as HTML A tag.

Example

<a href="http://www.zkoss.org">Visit ZK!</a>

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Essential Components/A 129

Version History


ZK Component Reference/ EssentialComponents/ Applet

Applet• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Applet</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.med.Applet</javadoc>

Employment/PurposeA generic applet component.

If the properties are not enough, you can use the Client-Attribute namespace [1] to specify them.

<applet xmlns:ca="http://www.zkoss.org/2005/zk/client/attribute" ca:whatever_name="whatever_value"/>

archive and codebaseSince 5.0.3, both archive and codebase properties are encoded with the application's context path and URL rewriting,so you don't and shall not encode it again.

Example

<applet codebase="img/" code="ticker.class" msg="ZK is Simple and Rich!" width="580px" />

ZK Component Reference/Essential Components/Applet 130

Supported events

Name Event Type

None None


Use cases


Version History


5.0.3 June 201 The archive, myscript, align, hspace, and vspace properties are supported

References[1] http:/ / docs. zkoss. org/ wiki/ ZK5:_Client_Computing_with_ZUML#The_Client-Attribute_Namespace:_http:. 2F. 2Fwww. zkoss. org.

2F2005. 2Fzk. 2Fclient. 2Fattribute

ZK Component Reference/Essential Components/Button 131

ZK Component Reference/ EssentialComponents/ Button

Button• Demonstration: Button [1] and Fileupload [2]

• Java API: <javadoc>org.zkoss.zul.Button</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Button</javadoc>

Employment/PurposeYou could assign a label and an image to a button by the label and image properties. If both are specified,the dir property control which is displayed up front, and the orient property controls whether the layout ishorizontal or vertical.

Within ZK 5, the file upload has been redesigned so it can be integrated with any widget. For example, The buttoncan now be used to upload a file. In addition to this, the display of the upload status has been enhanced and can becustomized easily.

Example

<button label="Left" image="/img/folder.gif" width="125px"/> <button label="Right" image="/img/folder.gif" dir="reverse" width="125px"/> <button label="Above" image="/img/folder.gif" orient="vertical" width="125px"/> <button label="Below" image="/img/folder.gif" orient="vertical" dir="reverse" width="125px"/>

Fileupload Example<button upload="true" label="Fileupload"/>

Supported events


Name Event Type


Description:



Description:



Description:


onFocus <javadoc>org.zkoss.zk.ui.event.Event</javadoc>

Description:

Denotes when a component gets the focus.

onBlur <javadoc>org.zkoss.zk.ui.even.Event</javadoc>

Description:

Denotes when a component loses the focus.

onUpload <javadoc>org.zkoss.zk.ui.event.UploadEvent</javadoc>

Description:

Denotes user has uploaded a file to the component.


Use cases


3.6 Get dynamically generated Button reference in onClick Event [3] [3]

3.6 How to fire onClick Event on a Button [4] [4]


Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #f8[2] http:/ / docs. zkoss. org/ wiki/ ZK_5:_New_File_Upload#Live_Demo[3] http:/ / www. zkoss. org/ forum/ listComment/ 8780[4] http:/ / www. zkoss. org/ forum/ listComment/ 1716

ZK Component Reference/ EssentialComponents/ Captcha

Captcha• Demonstration: Capcha [1]

• Java API: <javadoc>org.zkoss.zul.Captcha</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Captcha</javadoc>

Employment/PurposeA captcha component can generate a special distortion image, also called a CAPTCHA (Completely AutomatedPublic Turing test to tell Computers and Humans Apart) image. Developers could set height and width fordimension of captcha. By default, captcha render the image with a randomly generated text, and developers can setvalue to assign a purposive text.

Example <vbox> <captcha id="cpa" length="5" width="200px" height="50px"/> </vbox>

Supported events

Name Event Type


Description: Denotes user has clicked the component.Use getX(), getY() method get coordinates.

ZK Component Reference/Essential Components/Captcha 134


Use cases


Version History


ZK Component Reference/ EssentialComponents/ Fileupload

FileUpload• Demonstration: FileUpload [1]

• Java API: <javadoc>org.zkoss.zul.Fileupload</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Fileupload</javadoc>

Employment/PurposeA fileupload dialog used to let user upload a file.The fileupload component is not a modal dialog. Rather, it is acomponent, so it is placed inline with other components.

Specify the target componentSince 5.0.2, if the event thread is disabled, an onUpload event is posted to all root components when the uploaddialog is closed.

If you want the event being sent to a particular component, specify the component in the desktop's attribute calledorg.zkoss.zul.Fileupload.target.

For example,

desktop.setAttribute("org.zkoss.zul.Fileupload.target", mainWindow);Fileupload.get(); //then mainWindow will receive the onUpload event

ZK Component Reference/Essential Components/Fileupload 135

Example<image id="img" />Upload your hot shot:<fileupload onUpload="img.setContent(event.media)" />

Supported events

Name Event Type

None None


Use cases


Version History


5.0.2 May 2010 Able to specify a target for the onUpload event.

References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #u1

ZK Component Reference/Essential Components/Fisheye 136

ZK Component Reference/ EssentialComponents/ Fisheye

Fisheye• Demonstration: Fisheye [1]

• Java API: <javadoc>org.zkoss.zkex.zul.Fisheye</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkex.menu.Fisheye</javadoc>

Employment/PurposeA fisheye item

Example

<window> Click "Change orient" button and move cursor over the fisheyebar before it changes. <separator /> Fisheyebar will be out of expected.(That is wrong) <fisheyebar id="fish" style="position: absolute; top: 50px; left:100px;margin:20px;" attachEdge="top"> <fisheye image="/img/icon_browser.png" label="Web Browser" onClick="alert(self.label)" /> <fisheye image="/img/icon_calendar.png" label="Calendar" onClick="alert(self.label)" /> <fisheye image="/img/icon_email.png" label="Emai onClick=" alert ( self.label ) /> <fisheye image="/img/icon_texteditor.png" label="Text Editor" onClick="alert(self.label)" /> <fisheye image="/img/icon_update.png" label="Software Update" onClick="alert(self.label)" />

ZK Component Reference/Essential Components/Fisheye 137

<fisheye image="/img/icon_users.png" label="User onClick=" alert ( self.label ) /> </fisheyebar> <button label="Change orient"> <attribute name="onClick"> if (fish.orient.equals("horizontal")) { fish.orient = "vertical"; } else { fish.orient = "horizontal"; } </attribute> </button></window>

Supported events

Name Event Type

None None


Use cases


Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #t4

ZK Component Reference/Essential Components/Fisheye/Fisheyebar 138

ZK Component Reference/ EssentialComponents/ Fisheye/ Fisheyebar

Fisheyebar• Demonstration: Fisheyebar [1]

• Java API: <javadoc>org.zkoss.zkex.zul.Fisheyebar</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkex.menu.Fisheyebar</javadoc>

Employment/PurposeA fisheye bar is a bar of fisheye that is a menu similar to the fish eye menu on the Mac OS.

Example

<window> Click "Change orient" button and move cursor over the fisheyebar before it changes. <separator /> Fisheyebar will be out of expected.(That is wrong) <fisheyebar id="fish" style="position: absolute; top: 50px; left:100px;margin:20px;" attachEdge="top"> <fisheye image="/img/icon_browser.png" label="Web Browser" onClick="alert(self.label)" /> <fisheye image="/img/icon_calendar.png" label="Calendar" onClick="alert(self.label)" /> <fisheye image="/img/icon_email.png" label="Emai onClick=" alert ( self.label ) /> <fisheye image="/img/icon_texteditor.png" label="Text Editor" onClick="alert(self.label)" /> <fisheye image="/img/icon_update.png" label="Software Update" onClick="alert(self.label)" />

ZK Component Reference/Essential Components/Fisheye/Fisheyebar 139

<fisheye image="/img/icon_users.png" label="User onClick=" alert ( self.label ) /> </fisheyebar> <button label="Change orient"> <attribute name="onClick"> if (fish.orient.equals("horizontal")) { fish.orient = "vertical"; } else { fish.orient = "horizontal"; } </attribute> </button></window>

Supported events

Name Event Type

None None

Supported Children*Fisheye

Use cases


Version History


ZK Component Reference/Essential Components/HTML 140

ZK Component Reference/ EssentialComponents/ HTML

HTML• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Html</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Html</javadoc>

Employment/PurposeThe simplest way is to use a XUL component called html to embed whatever HTML tags you want to senddirectly to the browser. To avoid ZK from interpreting the HTML tags, you usually enclose them with <![CDATA[and ]]>. In other words, they are not the child component. Rather, they are stored in the content property.Notice you can use EL expressions in it.

Example

<window id="win" title="Html Demo"> <html><![CDATA[ <h4>Hi, ${win.title}</h4> <p>It is the content of the html component.</p> ]]></html> </window>

where <h4>...</p> will become the content of the html element (see also the getContent method of theorg.zkoss.zul.Html class).

The html component generates the HTML SPAN tag to enclose the content. In other words, it generates thefollowing HTML tags when rendered to the browser.

<span id=”...”> <h4>Hi, Html Demo</h4> <p>It is the content of the html component.</p> </span>

ZK Component Reference/Essential Components/HTML 141

Supported events

Name Event Type

None None


Use cases


3.6 Work with HTML tags: The Html component [1] [1]

3.6 herf attribute in Html component [2] [2]

3.6 Use Html component to escape HTML characters [3] [3]

Version History


References[1] http:/ / docs. zkoss. org/ wiki/ Work_with_HTML_Tags#The_html_Component[2] http:/ / www. zkoss. org/ forum/ listComment/ 4745[3] http:/ / www. zkoss. org/ forum/ listComment/ 11118

ZK Component Reference/Essential Components/Iframe 142

ZK Component Reference/ EssentialComponents/ Iframe

iFrame• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Iframe</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.utl.Iframe</javadoc>

Employment/Purposehe iframe component uses the HTML IFRAME tag to delegate a portion of the display to another URL. Thoughthe appearance looks similar to the include component. The concept and meaning of the iframe component isdifferent.

The content included by the include component is a fragment of the whole HTML page.

Because the content is part of the HTML page, the content is part of the desktop and you could access anycomponents, if any, inside of the include component. The inclusion is done at the server, and the browser knowsnothing about it. It means the URL specified by the src property could be any internal resource.

The content of the iframe component is loaded by the browser as a separate page. Because it is loaded as aseparate page, the format of the content could be different from HTML. For example, you could embed an PDF file.

The embedding is done by the browser, when it interprets the HTML page containing the IFRAME tag. It alsoimplies that the URL must be a resource that you can access from the browser.

Like the image and audio components47, you could specify the dynamically generated content. A typicalexample is you could use JasperReport to generate a PDF report in a binary array or stream, and then pass the reportto an iframe component by wrapping the result with the org.zkoss.util.media.AMedia class.

In the following example, we illustrate that you could embed any content by use of iframe, as long as the clientsupports its format.


Example

<window id="win" title="This is an Iframe Demo!"> <iframe style="width:99%; height:400px;border:3px inset;" src="/zk-devguide.pdf" /></window>

Supported events

Name Event Type

onURIChange <javadoc>org.zkoss.zk.ui.event.URIEvent</javadoc>

Description: Denotes the associated URI (src) has been changed by user.

Use getURI() to retrieve the URI being changed to.



Use cases


3.6 Print Iframe Content [1] [1]

Version History


References[1] http:/ / www. zkoss. org/ forum/ listComment/ 6599

ZK Component Reference/ EssentialComponents/ Include

Include• Demonstration: Include [1]

• Java API: <javadoc>org.zkoss.zul.Include</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Include</javadoc>

Employment/PurposeThe include component is used to include the output generated by another servlet. The servlet could be anythingincluding JSF, JSP and even another ZUML page.

<window title="include demo" border="normal" width="300px"> Hello, World! <include src="/userguide/misc/includedHello.zul" /> <include src="/html/frag.html?some=any" /> <include src="mypage" argument="${anyValue}" other="${anotherValue}" /></window>

Like all other properties, you could dynamically change the src attribute to include the output from a differentservlet at the run time.

If the included output is another ZUML, developers are allowed to access components in the included page as if theyare part of the containing page.

If the include component is used to include a ZUML page, the included page will become part of the desktop. However, the included page is not visible until the request is processed completely. In other words, it is visible only

ZK Component Reference/Essential Components/Include 145

in the following events, triggered by user or timer.

The reason is that the include component includes a page as late as the Rendering phase. On the other hand, zscripttakes place at the Component Creation phase, and onCreate takes place at the Event Processing Phase. They bothexecute before the inclusion.

Pass Values to the Included Page There are two ways to pass values to the included page. First, you can pass themwith the query string.

<include src="mypage?some=something"/>

Then, in the included page, you can access them with the getParameter method of the Execution interfaceor the ServletRequest interface. In EL expressions (of the included page), you can use the param variable toaccess them. However, you can only pass String-typed values with the query string.

${param.some}

Alternatively, we can pass any kind of values with the so-called dynamic properties by use of thesetDynamicProperty method or, in ZUL, a dynamic property as follows:

<include src="mypage" some="something" another="${expr}"/>

With the dynamic properties, you can pass non-String-typed values. In the included page, you can access them withthe getAttribute method of the Execution interface or the ServletRequest interface. In ELexpressions (of the included page), you can use the requestScope variable to access them.

${requestScope.some}

Example<window title="include demo" border="normal" width="300px"> Hello, World! <include src="/userguide/misc/includedHello.zul" /> <include src="/html/frag.html?some=any" /> <include src="mypage" argument="${anyValue}" other="${anotherValue}" /></window>

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Essential Components/Include 146

Version History



ZK Component Reference/ EssentialComponents/ Image

Image• Demonstration: Image [1]

• Java API: <javadoc>org.zkoss.zul.Image</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Image</javadoc>

Employment/PurposeAn image component is used to display an image at the browser. There are two ways to assign an image to animage component. First, you could use the src property to specify a URI where the image is located. Thisapproach is similar to what HTML supports. It is useful

if you want to display a static image, or any image that can be identified by URL.

<image src="/my.png">

Like using any other properties that accept an URI, you could specify "*" for identifying a Locale dependent image.For example, if you have different image for different Locales, you could use as follows.

<image src="/my*.png">

Then, assume one of your users is visiting your page with de_DE as the preferred Locale.

Zk will try to locate the image file called /my_de_DE.png. If not found, it will try

/my_de.png and finally /my.png.

ZK Component Reference/Essential Components/Image 147

Example <image src="/my.png">

Supported events

Name Event Type

None None


Use cases


Version History



ZK Component Reference/Essential Components/Imagemap 148

ZK Component Reference/ EssentialComponents/ Imagemap

Imagemap• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Imagemap</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Imagemap</javadoc>

Employment/PurposeA imagemap component is a special image. It accepts whatever properties an image component accepts.However, unlike image, if a user clicks on the image, an onClick event is sent back to the server with thecoordinates of the mouse position. In contrast, the onClick event sent by image doesn't contain the coordinates.

The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image beginningwith (0, 0). It is stored as instance of org.zkoss.zk.ui.event .MouseEvent. Once the application receivesthe onClick event, it could examine the coordinates of the mouse position from the getX and getY methods.

Example<imagemap src="/img/sun.jpg" onClick="alert(event.x + ", " +event.y)"/>

For example, if a user clicks 208 pixels over and 205 pixels down from the upper-left corner of the image displayedfrom the following statement, then the user gets the result as depicted below.

ZK Component Reference/Essential Components/Imagemap 149

Supported events

Name Event Type


Description: Denotes user has clicked the component.Use getX(), getY() method get coordinates.


Use cases


3.6 How to get area clicked from Imagemap onClick Event [1] [1]

3.6 Imagemap with hyperlink [2] [2]

Version History



ZK Component Reference/Essential Components/Imagemap/Area 150

ZK Component Reference/ EssentialComponents/ Imagemap/ Area

Area• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Area</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Area</javadoc>

Employment/PurposeAn area of a image map

ExampleImagemap

Supported events

Name Event Type

None None


Use cases


5.0.2 Area in Imagemap with href [2]

Version History


ZK Component Reference/Essential Components/Label 151

ZK Component Reference/ EssentialComponents/ Label

Label• Demonstration: Label [1]

• Java API: <javadoc>org.zkoss.zul.Label</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Label</javadoc>

Employment/PurposeA label component represents a piece of text.

Example

<window title="Label Demo" > <grid> <rows> <row>Label(normal): <label id="lb1"/></row> <row>Label(color): <label id="lb2" style="color:red"/></row> <row>Label(font): <label id="lb3" style="font-weight:bold"/></row> <row>Label(size): <label id="lb4" style="font-size:14pt"/></row> <row>Label(maxlength): <label id="lb5" maxlength="5"/></row> <row>Label(pre): <label id="lb6" pre="true"/></row> <row>input: <textbox id="txt" rows="2"><attribute name="onChange"> lb1.value=self.value; lb2.value=self.value; lb3.value=self.value; lb4.value=self.value;

ZK Component Reference/Essential Components/Label 152

lb5.value=self.value; lb6.value=self.value; </attribute></textbox> </row> </rows> </grid> </window>

You can control how a label is displayed with the style, pre and maxlength Properties.

For example, if you specify pre to be true, all white spaces, such as new line, space and tab, are preserved.

[For ZK3 users]

The specification of display behavior about pre, maxlength, and multiline is slightly different in ZK3.Please refer to ZK - Form and Inputs.

Supported events

Name Event Type

None None

See also events inherited from XulElement's Supported Events.


Use cases


Version History


ZK Component Reference/Essential Components/Menu 153

ZK Component Reference/ EssentialComponents/ Menu

Menu• Demonstration: Menu Demo [1]

• Java API: <javadoc>org.zkoss.zul.Menu</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.menu.Menu</javadoc>

Employment/PurposeAn element, much like a button, that is placed on a menu bar. When the user clicks the menu element, the childMenupopup of the menu will be displayed. This element is also used to create submenus of Menupopup.

Example

<menu label="File"> <menupopup> <menuitem label="New" onClick="alert(self.label)"/> <menuitem label="Open" onClick="alert(self.label)"/> <menuitem label="Save" onClick="alert(self.label)"/> <menuseparator/> <menuitem label="Exit" onClick="alert(self.label)"/> </menupopup> </menu>

ZK Component Reference/Essential Components/Menu 154

Supported events

Name Event Type

None None


Use cases


Version History



ZK Component Reference/ EssentialComponents/ Menu/ Menubar

Menubar• Demonstration: Menu [1]

• Java API: <javadoc>org.zkoss.zul.Menubar</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.menu.Menubar</javadoc>

Employment/PurposeA container that usually contains menu elements.

Example

ZK Component Reference/Essential Components/Menu/Menubar 155

<menubar id="menubar"> <menu label="File"> <menupopup onOpen="alert(self.id)"> <menuitem label="New" onClick="alert(self.label)" /> <menuitem label="Open" onClick="alert(self.label)" /> <menuitem label="Save" onClick="alert(self.label)" /> <menuseparator /> <menuitem label="Exit" onClick="alert(self.label)" /> </menupopup> </menu> <menu label="Help"> <menupopup> <menuitem label="Index" onClick="alert(self.label)" /> <menu label="About"> <menupopup> <menuitem label="About ZK" onClick="alert(self.label)" /> <menuitem label="About Potix" onClick="alert(self.label)" /> </menupopup> </menu> </menupopup> </menu></menubar>

Supported events

Name Event Type

None None

Supported Children*Menu

Use cases


Version History


ZK Component Reference/Essential Components/Menu/Menuitem 156

ZK Component Reference/ EssentialComponents/ Menu/ Menuitem

Menuitem• Demonstration: Menu [1] and Fileupload [2]

• Java API: <javadoc>org.zkoss.zul.Menuitem</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.menu.Menuitem</javadoc>

Employment/PurposeA single choice in a Menupopup element. It acts much like a button but it is rendered on a menu. DefaultgetZclass(): z-menu-item .

Within ZK 5, the file upload has been redesigned so it can be integrated with any widget. For example, Thetoolbarbutton can now be used to upload a file. In addition to this, the display of the upload status has been enhancedand can be customized easily.

Example


Fileupload Example<menuitem upload="true" label="Customized Attach" onUpload='alert("File is uploaded!")'/>

Supported events

ZK Component Reference/Essential Components/Menu/Menuitem 157

Name Event Type


Description: A menu command is associated with a menu item. There are two ways to associate a command to it: the onClick eventand the href property. If a event listener is added for a menu item for the onClick event, the listener is invoked when the item is clicked.


Description:



Use cases


Version History


ZK Component Reference/ EssentialComponents/ Menu/ Menupopup

Menupopup• Demonstration: Menu [1]

• Java API: <javadoc>org.zkoss.zul.Menupopup</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.menu.Menupopup</javadoc>

Employment/PurposeA container used to display menus. It should be placed inside a Menu.

Supported event: onOpen.

Note: to have better performance, onOpen is sent only if non-deferrable event listener is registered (see Deferrable).

To load the content dynamically, you can listen to the onOpen event, and then create menuitem whenOpenEvent.isOpen() is true.

Default HtmlBasedComponent.getSclass(): menupopup.

ZK Component Reference/Essential Components/Menu/Menupopup 158

Example

<menubar id="menubar"> <menu label="File"> <menupopup onOpen="alert(self.id)"> <menuitem label="New" onClick="alert(self.label)" /> <menuitem label="Open" onClick="alert(self.label)" /> <menuitem label="Save" onClick="alert(self.label)" /> <menuseparator /> <menuitem label="Exit" onClick="alert(self.label)" /> </menupopup> </menu> <menu label="Help"> <menupopup> <menuitem label="Index" onClick="alert(self.label)" /> <menu label="About"> <menupopup> <menuitem label="About ZK" onClick="alert(self.label)" /> <menuitem label="About Potix" onClick="alert(self.label)" /> </menupopup> </menu> </menupopup> </menu></menubar>

Supported events

Name Event Type


Description: Denotes user has opened or closed a component.

Supported Children*Menu, Menuitem, Menuseparator

ZK Component Reference/Essential Components/Menu/Menupopup 159

Use casesMenu

Version History


ZK Component Reference/ EssentialComponents/ Menu/ Menuseparator

Menuseparator• Demonstration: Menu [1]

• Java API: <javadoc>org.zkoss.zul.Menuseparator</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.menu.Menuseparator</javadoc>

Employment/PurposeUsed to create a separator between menu items..

Example


ZK Component Reference/Essential Components/Menu/Menuseparator 160

Supported events

Name Event Type

None None


Use casesMenu

Version History


ZK Component Reference/ EssentialComponents/ Popup

Popup• Demonstration: Tooltips and Popup [1]

• Java API: <javadoc>org.zkoss.zul.Popup</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Popup</javadoc>

Employment/PurposeA container that is displayed as a popup. The popup window does not have any special frame. Popups can bedisplayed when an element is clicked by assigning the id of the popup to either theXulElement.setPopup(java.lang.String), XulElement.setContext(java.lang.String) orXulElement.setTooltip(java.lang.String) attribute of the element.

Example

ZK Component Reference/Essential Components/Popup 161

<label value="Move Mouse Over Me!" tooltip="editPopup" /><separator bar="true" /><label value="Tooptip for Another Popup" tooltip="any" /><separator bar="true" />...<popup id="any" width="300px"> <vbox> ZK simply rich. <toolbarbutton label="ZK your killer Web application now!" href="http://www.zkoss.org" /> </vbox></popup>

Supported events

Name Event Type

None None


Use cases


3.6 Smalltalk: Toolbar and Menus [2] [2]

3.6 A way to specify the position of the Popup component [3] [3]

3.6 Popup, tooltip and context positions [4] [4]

Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #t5[2] http:/ / docs. zkoss. org/ wiki/ Toolbar_and_Menus#Customizable_Tooltip_and_Popup_Menus[3] http:/ / docs. zkoss. org/ wiki/ New_Features_of_ZK_3. 6. 1#A_way_to_specify_the_position_of_the_Popup_component[4] http:/ / docs. zkoss. org/ wiki/ New_Features_of_ZK_3. 6. 3#Popup. 2C_tooltip_and_context_positions

ZK Component Reference/Essential Components/Progressmeter 162

ZK Component Reference/ EssentialComponents/ Progressmeter

Progressmeter• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Progressmeter</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Progressmeter</javadoc>

Employment/PurposeA progress meter is a bar that indicates how much of a task has been completed. The value property must be in therange between 0 and 100.

Example

<progressmeter value="10"/>

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Essential Components/Separator 163

ZK Component Reference/ EssentialComponents/ Separator

Separator• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Separator</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Separator</javadoc>

Employment/PurposeA separator is used to insert a space between two components. There are several ways to customize the separator.

• By use of the orient attribute, you are able to specify whether the separator is vertical or horizontal. By default itis a horizontal separator, which inserts a line break. On the other hand, a vertical separator inserts white space.

• By use of the bar attribute, you can control whether to show a horizontal or vertical line between components.• By use of the spacing attribute, you can control the size of spacing.

Example

line 1 by separator <separator /> line 2 by separator <separator /> line 3 by separator <space bar="true" /> another piece <separator spacing="20px" /> line 4 by separator <space bar="true" spacing="20px" /> another piece

ZK Component Reference/Essential Components/Separator 164

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/ EssentialComponents/ Space

Space• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Space</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Space</javadoc>

Employment/PurposeSpace is a Separator with the orient default to "horizontal". In other words, <space> is equivalent to <separatororient="horizontal">

Example

<zk> <space bar="true"/> <space bar="true"/> <space bar="true"/> <space bar="true"/> </zk>

ZK Component Reference/Essential Components/Space 165

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/ EssentialComponents/ Script

Script• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Script</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.utl.Script</javadoc>

Employment/PurposeThe script component is used to specify the script codes running at the browser. Notice that, unlike zscript, the scriptcodes are running at the browser. They are usually written in JavaScript which is supported by the most of browsers.The simplest format is as follows.

Example

<zk> <window id="win"> <button label="change color" onClick='Clients.evalJavaScript("myfunc()")' /> </window> <script type="text/javascript"> function myfunc() {

ZK Component Reference/Essential Components/Script 166

jq("$win").css("backgroundColor", "blue"); } </script></zk>

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Essential Components/Style 167

ZK Component Reference/ EssentialComponents/ Style

Style• Demonstration: Style [1]

• Java API: <javadoc>org.zkoss.zul.Style </javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.utl.Style</javadoc>

Employment/PurposeThe style component used to specify CSS styles for the owner desktop.

Note:

• a style component can appear anywhere in a ZUML page, but it affects all components in the same desktop.• getContent() simply get the string that is set by setContent(). If you call setSrc() or call the constructor of Style(),

getContent() still gets null.

Example

<style> a{ color:red; }</style>

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Essential Components/Style 168

Version History


5.0.3 June 2010 The media property is supported.


ZK Component Reference/ EssentialComponents/ Timer

Timer• Demonstration: Timer [1]

• Java API: <javadoc>org.zkoss.zul.Timer</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.utl.Timer</javadoc>

Employment/PurposeTimer is a special component that is invisible. It fires one or more org.zkoss.zk.ui.event.Event after a specified delay.Notice that the timer won't fire any event until it is attached to a page.

Example<label id="now" /><timer id="timer" delay="1000" repeats="true" onTimer="now.setValue(new Date().toString())" />

Supported events

Name Event Type

onTimer Event: <javadoc>org.zkoss.zk.ui.event.Event</javadoc>

Denotes the timer you specified has triggered an event. To know which timer, invoke the getTarget method in the Event class.

ZK Component Reference/Essential Components/Timer 169


Use cases


Version History



ZK Component Reference/ EssentialComponents/ Toolbar

Toolbar• Demonstration: Toolbar [1]

• Java API: <javadoc>org.zkoss.zul.Toolbar</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Toolbar</javadoc>

Employment/PurposeA toolbar is used to place a series of buttons, such as toolbarbutton or button. The toolbar buttonscould be used without toolbars, so a toolbar could be used without tool buttons. However, tool buttons change theirappearance if they are placed inside a toolbar.

The toolbar has two orientation: horizontal and vertical. It controls how the buttons are placed.

See also : Button, Toolbarbutton

Example

<window title="Toolbar window" border="normal" width="300px"> <toolbar>

ZK Component Reference/Essential Components/Toolbar 170

<toolbarbutton label="Left" /> <space /> <toolbarbutton label="Right" image="/img/folder.gif" dir="reverse" /> </toolbar> <toolbar orient="vertical"> <button label="Left" image="/img/folder.gif" width="125px" /> <toolbarbutton label="Right" image="/img/folder.gif" dir="reverse" /> </toolbar></window>

Supported events

Name Event Type


Description:



Description:



Description:



Use cases


Version History


ZK Component Reference/Essential Components/Toolbar 171


ZK Component Reference/ EssentialComponents/ Toolbarbutton

Toolbarbutton• Demonstration: Toolbarbutton [1] and Fileupload [2]

• Java API: <javadoc>org.zkoss.zul.Toolbarbutton</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Toolbarbutton</javadoc>

Employment/PurposeThe behave of Toolbarbutton is similar to the button except the appearance is different. The buttoncomponent uses HTML BUTTON tag, while thetoolbarbutton component uses HTML A tag.

A toolbarbutton could be placed outside a toolbar, However toolbarbuttons change theirappearance if they are placed inside a toolbar.Toolbarbutton supports getHref(). If getHref() is not null, the onClick handler is ignored and thiselement is degenerated to HTML's A tag.

Within ZK 5, the file upload has been redesigned so it can be integrated with any widget. For example, Thetoolbarbutton can now be used to upload a file. In addition to this, the display of the upload status has been enhancedand can be customized easily.

See also : Button, Toolbar

Example

<window title="toolbar demo" border="normal" width="300px"> <caption> <toolbarbutton label="button3" image="/img/folder.gif" /> <space /> <toolbarbutton label="button4" image="/img/folder.gif" dir="reverse" /> </caption> <toolbar> <toolbarbutton label="button1" image="/img/folder.gif" /> <space /> <toolbarbutton label="button2" image="/img/folder.gif" />

ZK Component Reference/Essential Components/Toolbarbutton 172

</toolbar> <hbox> <toolbarbutton label="button5" image="/img/folder.gif" orient="vertical" /> <space /> <toolbarbutton label="button6" image="/img/folder.gif" orient="vertical" dir="reverse" /> </hbox></window>

Fileupload Example<toolbarbutton upload="true" label="Fileupload"/>

Supported events

Name Event Type


Description:



Description:



Description:



Use cases


Version History


ZK Component Reference/Input 173

ZK Component Reference/ InputThis section outlines components which are used to input application data.

ZK Component Reference/ Input/ Bandbox

Bandbox• Demonstration: Bandbox [1]

• Java API: <javadoc>org.zkoss.zul.Bandbox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.inp.Bandbox</javadoc>

Employment/PurposeA bandbox is a special text box that embeds a customizable popup window (aka., a dropdown window). Likecomboboxes, a bandbox consists of an input box and a popup window. The popup window is opened automatically,when users presses Alt+DOWN or clicks the magnifier button.

Unlike comboboxes, the popup window of a bandbox could be anything. It is designed to give developers themaximal flexibility. A typical use is to represent the popup window as a search dialog.

Example

<bandbox id="bd"> <bandpopup> <vbox> <hbox> Search <textbox /> </hbox> <listbox width="200px" onSelect="bd.value=self.selectedItem.label; bd.closeDropdown();"> <listhead> <listheader label="Name" /> <listheader label="Description" /> </listhead> <listitem> <listcell label="John" /> <listcell label="CEO" />

ZK Component Reference/Input/Bandbox 174

</listitem> <listitem> <listcell label="Joe" /> <listcell label="Engineer" /> </listitem> <listitem> <listcell label="Mary" /> <listcell label="Supervisor" /> </listitem> </listbox> </vbox> </bandpopup></bandbox>

Supported events

Name Event Type


Denotes user has opened or closed a component. Note: unlike onClose, this event is only a notification. The client sends this event afteropening or closing the component.

Supported Children*Bandpopup

Use cases


Version History


ZK Component Reference/Input/Bandpopup 175

ZK Component Reference/ Input/ Bandpopup

Bandpopup• Demonstration: Bandpopup [1]

• Java API: <javadoc>org.zkoss.zul.Bandpopup</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.inp.Bandpopup</javadoc>

Employment/PurposeThe popup that belongs to a Bandbox instance.

Developer usually listen to the onOpen event that is sent to Bandbox and then creates proper components aschildren of this component.

Example

<bandbox id="bd"> <bandpopup> <vbox> <hbox> Search <textbox /> </hbox> <listbox width="200px" onSelect="bd.value=self.selectedItem.label; bd.closeDropdown();"> <listhead> <listheader label="Name" /> <listheader label="Description" /> </listhead> <listitem> <listcell label="John" /> <listcell label="CEO" /> </listitem> <listitem> <listcell label="Joe" /> <listcell label="Engineer" /> </listitem> <listitem>

ZK Component Reference/Input/Bandpopup 176

<listcell label="Mary" /> <listcell label="Supervisor" /> </listitem> </listbox> </vbox> </bandpopup></bandbox>

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Input/Calendar 177

ZK Component Reference/ Input/ Calendar

Calendar• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Calendar</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.db.Calendar</javadoc>

Employment/PurposeA calendar displays a 'flat' calendar and allows user to select a day from it.

The first day of the week is decided by the locale (actually the return value of the getFirstDayOfWeek methodin the java.util.Calendar).

Since 5.0.3, you can control the first day of the week by use of the session attribute and the library property. Pleaserefer to The First Day of the Week [1] for details.

CustomizationSince 5.0.3, the rendering of the calendar can be customized at the client by providing JavaScript code that overrides<javadoc directory="jsdoc">zul.db.Renderer</javadoc>.

Example

<hbox> <calendar id="cal" onChange="in.value = cal.value"/> <datebox id="in" onChange="cal.value = in.value"/> </hbox>

ZK Component Reference/Input/Calendar 178

Supported events

Name Event Type

None None


Use cases


Version History


5.0.3 July,2010

An application can control the first day of the week by use of the session attribute and the library property. Please refer to TheFirst Day of the Week [1] for details.

References[1] http:/ / docs. zkoss. org/ wiki/ Internationalization#The_First_Day_of_the_Week

ZK Component Reference/Input/Checkbox 179

ZK Component Reference/ Input/ Checkbox

Checkbox• Demonstration: Checkbox [1]

• Java API: <javadoc>org.zkoss.zul.Checkbox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Checkbox</javadoc>

Employment/PurposeA checkbox.

Example

<window title="Checkbox demo" border="normal" width="350px"> <checkbox id="apple" label="Apple" onCheck="doChecked()" /> <checkbox id="orange" label="Orange" onCheck="doChecked()" /> <checkbox id="banana" label="Banana" onCheck="doChecked()" /> <hbox> You have selected : <label id="fruit2" /> </hbox> <zscript> void doChecked() { fruit2.value = (apple.isChecked() ? apple.label+' ' : "") + (orange.isChecked() ? orange.label+' ' : "") + (banana.isChecked() ? banana.label+' ' : ""); } </zscript> </window>

Supported events

ZK Component Reference/Input/Checkbox 180

Name Event Type


Description: Denotes user has right-clicked the component.onDoubleClick <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>

Description: Denotes user has double-clicked the component.onFocus <javadoc>org.zkoss.zk.ui.event.Event</javadoc>

Description: Denotes when a component gets the focus.onBlur <javadoc>org.zkoss.zk.ui.event.Event</javadoc>

Description: Denotes when a component loses the focus.

onCheck <javadoc>org.zkoss.zk.ui.event.CheckEvent</javadoc>



Use cases


Version History



ZK Component Reference/Input/CKEditor 181

ZK Component Reference/ Input/ CKEditor

CKEditor• Demonstration: WYSIWYG editor [1]


Employment/PurposeThe component used to represent CKEditor [2]

CKEditor is a popular HTML on-line text editor developed by Frederico Caldeira Knabben.

CKEditor is a text editor to be used inside web pages. It's a WYSIWYG editor, which means that the text beingedited on it looks as similar as possible to the results users have when publishing it.

It brings to the web common editing features found on desktop editing applications like Microsoft Word andOpenOffice.

Example

<ckeditor> <attribute name="value"> <table width="200" cellspacing="1" cellpadding="1" border="1"> <tbody> <tr style="background: #B7B313; color:white;"> <td>First Name</td> <td>Last Name</td> </tr> <tr> <td>Jone</td> <td>Hayes</td> </tr>


<tr> <td>Mary</td> <td>Bally</td> </tr> </tbody> </table> </attribute></ckeditor>

It will turn on the save button when inside a form

<zk xmlns:n="http://www.zkoss.org/2005/zk/native"> <n:form> <ckeditor onSave="alert(self.value);"/> </n:form></zk>

Supported events

Name Event Type

onChange <javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc>

Description: Denotes the content of an input component has been modified by the user.

onChanging <javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc>

Description: Denotes that user is changing the content of an input component. Notice that the component's content (at theserver) won't be changed until onChange is received. Thus, you have to invoke the getValue method in the InputEventclass to retrieve the temporary value.

onSave <javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc>

Description: Denotes the save button of the CKEditor component has been clicked by the user.



Use cases


Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #f4[2] http:/ / ckeditor. com/

ZK Component Reference/Input/Colorbox 184

ZK Component Reference/ Input/ Colorbox

Colorbox• Demonstration: link1 [1] link2 [1]

• Java API: <javadoc>org.zkoss.zkex.zul.Colorbox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkex.inp.Colorbox</javadoc>

Employment/PurposeA Colorbox used to retrieve an input that the user can select a color.

Example

<colorbox color="#FFFFFF" />


<menubar id="menubar" width="100%"> <menu image="/img/Centigrade-Widget-Icons/Spyglass-16x16.png"> <menupopup> <menuitem label="Index" onClick="alert(self.label)" /> <menu label="Color Picker" content="#color=#184dc6"/> </menupopup> </menu> </menubar>

Supported events

Name Event Type

onChange Event: <javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc>

Notifies the application with the onChange event if its content is changed



Use cases


Version History


ZK Component Reference/ Input/ Combobox

Combobox• Demonstration: Comboboxes [1]

• Java API: <javadoc>org.zkoss.zul.Combobox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.inp.Combobox</javadoc>

Employment/PurposeComponents: combobox and comboitem.

A combobox is a special text box that embeds a drop-down list. With comboboxes, users are allowed to selectfrom a drop-down list, in addition to entering the text manually.

Example

<combobox> <comboitem label="Simple and Rich"/> <comboitem label="Cool!"/> <comboitem label="Ajax and RIA"/> </combobox>

Supported events

ZK Component Reference/Input/Combobox 187

Name Event Type


Denotes the content of an input component has been modified by the user.

onChanging Event: <javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc>

Denotes that user is changing the content of an input component. Notice that the component's content (at the server) won't be changeduntil onChange is received.

Thus, you have to invoke the getValue method in the InputEvent class to retrieve the temporary value.

onSelect Event: <javadoc>org.zkoss.zk.ui.event.SelectEvent</javadoc>

Represents an event cause by user's the list selection is changed at the client.

onSelection Event: <javadoc>org.zkoss.zk.ui.event.SelectionEvent</javadoc>

Denotes that user is selecting a portion of the text of an input component. You can retrieve the start and end position of the selectedtext by use of the getStart and getEnd methods.


Denotes user has opened or closed a component. Note: unlike onClose, this event is only a notification. The client sends this eventafter opening or closing the component.


onFocus Event: <javadoc>org.zkoss.zk.ui.event.Event</javadoc>


onBlur Event: <javadoc>org.zkoss.zk.ui.event.Event</javadoc>


onCreate Event: <javadoc>org.zkoss.zk.ui.event.CreateEvent</javadoc>

It's used to make the combobox do some action after it has been created. For example you can make it 'ReadOnly' (onCreate="self.setReadonly(true);" ), 'Disabled' ( onCreate="self.setDisabled(true);" ) or even 'Select' a value from the combobox (onCreate="self.setSelectedIndex(0);" ) .

Supported Children<javadoc>org.zkoss.zul.Comboitem</javadoc>

Use cases


Version History


ZK Component Reference/Input/Combobox 188


ZK Component Reference/ Input/ Comboitem

Comboitem• Demonstration: Comboboxes [1]

• Java API: <javadoc>org.zkoss.zul.Comboitem</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.inp.Comboitem</javadoc>

Employment/PurposeAn item of a combo box.

Example

<combobox> <comboitem label="Simple and Rich"/> <comboitem label="Cool!"/> <comboitem label="Ajax and RIA"/> </combobox>

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Input/Comboitem 189

Version History


ZK Component Reference/ Input/ Datebox

Datebox• Demonstration: Date and Time [1]

• Java API: <javadoc>org.zkoss.zul.Datebox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.db.Datebox</javadoc>

Employment/PurposeAn edit box for holding a date. After click on the calender, a calender will pop-up for inputting date.

Mouseless Entry datebox• Alt+DOWN to pop up the calendar.• LEFT, RIGHT, UP and DOWN to change the selected day from the calendar.• ENTER to activate the selection by copying the selected day to the datebox control.

• Alt+UP or ESC to give up the selection and close the calendar.

The First Day of the WeekThe first day of the week is decided by the locale (actually the return value of the getFirstDayOfWeek methodin the java.util.Calendar).

Since 5.0.3, you can control the first day of the week by use of the session attribute and the library property. Pleaserefer to The First Day of the Week [1] for details.

CustomizationSince 5.0.3, the rendering of the calendar can be customized at the client by providing JavaScript code that overrides<javadoc directory="jsdoc">zul.db.Renderer</javadoc>.

Example

ZK Component Reference/Input/Datebox 190

<datebox lenient="true" buttonVisible="false" /> <datebox lenient="false" compact="false" buttonVisible="true" />

Supported events

Name Event Type




An input control notifies the application with the onChange event if its content is changed by the user.

onChanging Event: <javadoc>org.zkoss.zk.ui.event.InputEvent</javadoc>

An input control also notifies the application with the onChanging event, when user is changing the content.

onSelection Event: <javadoc>org.zkoss.zk.ui.event.SelectionEvent</javadoc>


onFocus Event: <javadoc>org.zkoss.zk.ui.event.Event</javadoc>


onBlur Event: <javadoc>org.zkoss.zk.ui.event.Event</javadoc>


Supported Children

Name Event Type

None None

Use cases


Version History


5.0.3 July,2010

An application can control the first day of the week by use of the session attribute and the library property. Please refer to TheFirst Day of the Week [1] for details.


ZK Component Reference/Input/Decimalbox 191

ZK Component Reference/ Input/ Decimalbox

Decimalbox• Demonstration: Decimalbox [1]

• Java API: <javadoc>org.zkoss.zul.Decimalbox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.inp.Decimalbox</javadoc>

Employment/PurposeAn edit box for holding big decimal value .

Example

<doublebox value="155"/>

Supported events

Name Event Type

onBlur Event:<javadoc>org.zkoss.zk.ui.even.Event</javadoc>


onChange Event:<javadoc>org.zkoss.zk.ui.even.InputEvent</javadoc>

An input control notifies the application with the onChange event if its content is changed by the user.

onChanging Event:<javadoc>org.zkoss.zk.ui.even.InputEvent</javadoc>

An input control also notifies the application with the onChanging event, when user is changing the content.

onFocus Event:<javadoc>org.zkoss.zk.ui.event.Event</javadoc>


onSelection Event:<javadoc>org.zkoss.zk.ui.event.SelectionEvent</javadoc>


ZK Component Reference/Input/Decimalbox 192


Use cases


Version History


ZK Component Reference/ Input/ Doublebox

Doublebox• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Doublebox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.inp.Doublebox</javadoc>

Employment/PurposeAn edit box for holding an float point value (double).

Example

<doublebox value="2.3"/>

Supported events

Name Event Type

onClick Event:<javadoc> org.zkoss.zk.ui.event.MouseEvent</javadoc>


onSelection Event:<javadoc> org.zkoss.zk.ui.event.SelectionEvent</javadoc>

Denotes that user is selecting a portion of the text of an input component. You canretrieve the start and end position of the selected text by use of the getStart andgetEnd methods.

onFocus Event:<javadoc>org.zkoss.zk.ui.event.Event</javadoc>


onBlur Event:<javadoc>org.zkoss.zk.ui.even.Event</javadoc>


ZK Component Reference/Input/Doublebox 193

onChange Event:<javadoc>org.zkoss.zk.ui.even.InputEvent</javadoc>

An input control notifies the application with the onChange event if its content ischangedby the user.

onChanging Event:<javadoc>org.zkoss.zk.ui.even.InputEvent</javadoc>

An input control also notifies the application with the onChanging event, when user ischanging the content.


Use cases


Version History


ZK Component Reference/ Input/ Intbox

Intbox• Demonstration: Intbox [1]

• Java API: <javadoc>org.zkoss.zul.Intbox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.inp.Intbox</javadoc>

Employment/PurposeA intbox is used to let users input integer data.

Example

While input invalid data:

ZK Component Reference/Input/Intbox 194

<window title="Intbox Demo" border="normal" width="200px"> int box:<intbox/> </window>

Supported events

Name Event Type


Description:



Description:

Denotes that user is changing the content of an input component. Notice that the component's content (at the server) won't bechanged until onChange is received. Thus, you have to invoke the getValue method in the InputEvent class to retrievethe temporary value.

onSelection <javadoc>org.zkoss.zk.ui.event.SelectionEvent</javadoc>

Description:

Denotes that user is selecting a portion of the text of an input component. You can retrieve the start and end position of theselected text by use of the getStart and getEnd methods.


Description:

Denotes when a component gets the focus. Remember event listeners execute at the server, so the focus at the client might bechanged when the event listener for onFocus got executed.

onBlur <javadoc>org.zkoss.zk.ui.event.Event</javadoc>

Description:

Denotes when a component loses the focus. Remember event listeners execute at the server, so the focus at the client might bechanged when the event listener for onBlur got executed.

onCreate <javadoc>org.zkoss.ui.zk.ui.event.CreateEvent</javadoc>

Description:

Denotes a component is created when rendering a ZUML page.

onDrop <javadoc>org.zkoss.ui.zk.ui.event.DropEvent</javadoc>

Description:

Denotes another component is dropped to the component that receives this event.


Use cases

ZK Component Reference/Input/Intbox 195


3.6 Leading zero in Intbox [1] [1]

3.6 Constraint Intbox to accept only digits [2] [2]

Version History



ZK Component Reference/ Input/ Longbox

Longbox• Demonstration: Longbox [1]

• Java API: <javadoc>org.zkoss.zul.Longbox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.inp.Longbox</javadoc>

Employment/PurposeA longbox is used to let users input long data.

Example

<window title="Longbox Demo" border="normal" width="200px"> long box:<longbox/> </window>

Supported events

ZK Component Reference/Input/Longbox 196

Name Event Type


Description:



Description:



Description:



Description:



Description:



Description:



Description:



Use cases


Version History


ZK Component Reference/Input/Radio 197

ZK Component Reference/ Input/ Radio

Radio• Demonstration: Radio [1]

• Java API: <javadoc>org.zkoss.zul.Radio</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Radio</javadoc>

Employment/PurposeA radio button is a component that can be turned on and off. Radio buttons are grouped together in a group, calledradiogroup. Only one radio button with the same group may be selected at a time.

Example

<window title="Radiobox & Radio Demo"> <vbox> <radiogroup onCheck="fruit.value = self.selectedItem.label"> <radio label="Apple" /> <radio label="Orange" /> <radio label="Banana" /> </radiogroup> You have selected : <label id="fruit" style="color:red" /> </vbox></window>

Supported events

ZK Component Reference/Input/Radio 198

Name Event Type


Description: Denotes when a component gets the focus.onBlur <javadoc>org.zkoss.zk.ui.even.Event</javadoc>


onCheck <javadoc>org.zkoss.zk.ui.event.CheckEvent</javadoc>



Use cases


3.6 Radio buttons with Listitems [1] [1]

3.6 Radiogroup radio's in seperate table/grid rows [2] [2]

See also: Radiogroup

Version History



ZK Component Reference/Input/Radiogroup 199

ZK Component Reference/ Input/ Radiogroup

Radiogroup• Demonstration: Radiogroup [1]

• Java API: <javadoc>org.zkoss.zul.Radiogroup</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Radiogroup</javadoc>

Employment/PurposeUsed to group multiple radio buttons. In one radiogroup. Only one radio button may be selected at a time.

Example

<window title="Radiobox & Radio Demo"> <vbox> <radiogroup onCheck="fruit.value = self.selectedItem.label"> <radio label="Apple" /> <radio label="Orange" /> <radio label="Banana" /> </radiogroup> You have selected : <label id="fruit" style="color:red" /> </vbox></window>

Note: To support the versatile layout, a radio group accepts any kind of children , including Radio. On the otherhand, the parent of a radio, if any, must be a radio group.

ZK Component Reference/Input/Radiogroup 200

Supported events

Name Event Type

None None


Use cases


5.0 Radiogroup and selection [1] [1]

5.0 Radiogroup, data binding and TypeConverter [2] [2]

Version History



ZK Component Reference/Input/Slider 201

ZK Component Reference/ Input/ Slider

Slider• Demonstration: Slider [1]

• Java API: <javadoc>org.zkoss.zul.Slider</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.inp.Slider</javadoc>

Employment/PurposeA slider component represents a slider with slid and knob. It can be used to let user specify a value by scrolling. Aslider accepts a range of value starting from 0 to 100. You could change the maximum allowed value by themaxpos property.

Example

<slider id="slider" /> <slider curpos=”1” maxpos=”20” />

Supported events

Name Event Type

onScroll Event: <javadoc>org.zkoss.zk.ui.event.ScrollEvent</javadoc>

Denotes the content of a scrollable component has been scrolled by the user.

onScrolling Event: <javadoc>org.zkoss.zk.ui.event.ScrollEvent</javadoc>

Denotes that user is scrolling a scrollable component. Notice that the component's content (at the server) won't be changed untilonScroll is received. Thus, you have to invoke the getPos method in the ScrollEvent class to retrieve the temporary position.


Use cases


Version History


ZK Component Reference/Input/Slider 202


ZK Component Reference/ Input/ Spinner

Spinner• Demonstration: Spinner [1]

• Java API: <javadoc>org.zkoss.zul.Spinner</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.inp.Spinner</javadoc>

Employment/PurposeAn edit box for holding a constrained integer.

Example

<window title="Spinner" border="normal" width="150px"> <spinner /> </window>

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Input/Spinner 203

Version History


ZK Component Reference/ Input/ Textbox

Textbox• Demonstration: Textbox [1]

• Java API: <javadoc>org.zkoss.zul.Textbox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.inp.Textbox</javadoc>

Employment/PurposeA textbox is used to let users input text data.

You colud assign value, type, constraint, rows, cols to a textbox by the corresponding properties.When you assigns the property type to a string value 「password」 when multiline is false( multilinewill be true if You set rows large then 1 or sets multiline to true directly) then any character in thiscomponent will replace by '*'.

You colud also assign a constraint value with a regular expression string or a default constraint expression(availablevalue is 「no empty 」). When user change the value of textbox, will cause a validating preocess to valdate thevalue. If valdation fail, then a notification will poped up.

Example

<textbox value="text..." /><textbox value="secret" type="password" /><textbox constraint="/.+@.+\.[a-z]+/: Please enter an e-mail address" /><textbox rows="5" cols="40"> <attribute name="value">text line1... text line2... </attribute>

ZK Component Reference/Input/Textbox 204

</textbox>

To specify multilines value, you can use the attribute element or as shown below

<textbox rows="5" cols="40"> <attribute name="value">text line1... text line2... </attribute></textbox><textbox value="Line 1 Line 2" rows="3"/>

Supported events

Name Event Type


Description:



Description:



Description:



Description:



Description:



Description:



Description:


ZK Component Reference/Input/Textbox 205


Use cases


Version History


ZK Component Reference/ Input/ Timebox

Timebox• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Timebox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.inp.Timebox</javadoc>

Employment/PurposeAn edit box for holding a time (a java.util.Date Object , but only Hour & Minute are used.

Example

<window title="Simple" width="300px" border="normal"> <timebox id="tb0"/> </window>

ZK Component Reference/Input/Timebox 206

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/ LayoutsThis section outlines components which enable developers to control the layout of their application.

ZK Component Reference/Layouts/Borderlayout 207

ZK Component Reference/ Layouts/Borderlayout

Borderlayout• Demonstration: Borderlayout [1]

• Java API: <javadoc>org.zkoss.zkex.zul.Borderlayout</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.layout.Borderlayout</javadoc>

Employment/PurposeThe layout component is a nested component. The parent component is borderlayout, and its childrencomponents include north, south, center, west, and east. The combination of children components ofborderlayout is free.

Example

<borderlayout height="450px"> <north title="North" maxsize="300" size="50%" splittable="true" collapsible="true"> <borderlayout> <west title="West" size="25%" flex="true" maxsize="250" splittable="true" collapsible="true"> <div style="background:#B8D335"> <label value="25%" style="color:white;font-size:50px" /> </div> </west> <center border="none" flex="true"> <div style="background:#E6D92C">


Supported events

Name Event Type

None None


Use cases


Version History



ZK Component Reference/Layouts/Borderlayout/Center 210

ZK Component Reference/ Layouts/Borderlayout/ Center

Center• Demonstration: Borderlayout [1]

• Java API: <javadoc>org.zkoss.zul.Center</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.layout.Center</javadoc>

Employment/PurposeThis component is a center region. The default class of CSS is specified "layout-region-center".

Example

<borderlayout height="500px"> <north size="50%" border="0"> <borderlayout> <west size="25%" border="none" flex="true"> <div style="background:#B8D335"> <label value="25%" style="color:white;font-size:50px" /> </div> </west> <center border="none" flex="true"> <div style="background:#E6D92C"> <label value="25%" style="color:white;font-size:50px" /> </div>


</center> <east size="50%" border="none" flex="true"> <label value="Here is a non-border" style="color:gray;font-size:30px" /> </east> </borderlayout> </north> <center border="0"> <borderlayout> <west size="30%" flex="true" border="0"> <div style="background:#E6D92C"> <label value="30%" style="color:white;font-size:50px" /> </div> </west> <center> <label value="Here is a border" style="color:gray;font-size:30px" /> </center> <east size="30%" flex="true" border="0"> <div style="background:#B8D335"> <label value="30%" style="color:white;font-size:50px" /> </div> </east> </borderlayout> </center> </borderlayout>

Supported events

Name Event Type

OnOpen <javadoc>org.zkoss.zk.ui.event.OpenEvent</javadoc>

Description: When a layout is collapsed or opened by a user, the onOpen event is sent tothe application.



Use casesBorderlayout

Version History


ZK Component Reference/ Layouts/Borderlayout/ East

East• Demonstration: Borderlayout [1]

• Java API: <javadoc>org.zkoss.zul.East</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.layout.East</javadoc>

Employment/PurposeThis component is a east region. The default class of CSS is specified "layout-region-east".

Example

ZK Component Reference/Layouts/Borderlayout/East 213

<borderlayout height="500px"> <north size="50%" border="0"> <borderlayout> <west size="25%" border="none" flex="true"> <div style="background:#B8D335"> <label value="25%" style="color:white;font-size:50px" /> </div> </west> <center border="none" flex="true"> <div style="background:#E6D92C"> <label value="25%" style="color:white;font-size:50px" /> </div> </center> <east size="50%" border="none" flex="true"> <label value="Here is a non-border" style="color:gray;font-size:30px" /> </east> </borderlayout> </north> <center border="0"> <borderlayout> <west size="30%" flex="true" border="0"> <div style="background:#E6D92C"> <label value="30%" style="color:white;font-size:50px" /> </div> </west> <center> <label value="Here is a border" style="color:gray;font-size:30px" /> </center> <east size="30%" flex="true" border="0"> <div style="background:#B8D335"> <label value="30%" style="color:white;font-size:50px" /> </div> </east> </borderlayout> </center></borderlayout>

ZK Component Reference/Layouts/Borderlayout/East 214

Supported events

Name Event Type





Version History


ZK Component Reference/Layouts/Borderlayout/North 215

ZK Component Reference/ Layouts/Borderlayout/ North

North• Demonstration: Borderlayout [1]

• Java API: <javadoc>org.zkoss.zul.North</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.layout.North</javadoc>

Employment/PurposeThis component is a north region. The default class of CSS is specified "layout-region-north".

Example

<borderlayout height="500px"> <north size="50%" border="0"> <borderlayout> <west size="25%" border="none" flex="true"> <div style="background:#B8D335"> <label value="25 style=" color:white ; font-size:50px " /> </div> </west> <center border="none" flex="true"> <div style="background:#E6D92C"> <label value="25 style=" color:white ; font-size:50px " /> </div> </center> <east size="50%" border="none" flex="true">

ZK Component Reference/Layouts/Borderlayout/North 216

<label value="Here is a non-borde style=" color:gray ; font-size:30px " /> </east> </borderlayout> </north> <center border="0"> <borderlayout> <west size="30%" flex="true" border="0"> <div style="background:#E6D92C"> <label value="30 style=" color:white ; font-size:50px " /> </div> </west> <center> <label value="Here is a borde style=" color:gray ; font-size:30px " /> </center> <east size="30%" flex="true" border="0"> <div style="background:#B8D335"> <label value="30 style=" color:white ; font-size:50px " /> </div> </east> </borderlayout> </center></borderlayout>

Supported events

Name Event Type





Version History


ZK Component Reference/Layouts/Borderlayout/South 217

ZK Component Reference/ Layouts/Borderlayout/ South

South• Demonstration: Borderlayout [1]

• Java API: <javadoc>org.zkoss.zul.South</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.layout.South</javadoc>

Employment/PurposeThis component is a south region.

Example


ZK Component Reference/Layouts/Borderlayout/South 218


Supported events

Name Event Type

onOpen Event: OpenEvent




Version History


ZK Component Reference/Layouts/Borderlayout/West 219

ZK Component Reference/ Layouts/Borderlayout/ West

West• Demonstration: Borderlayout [1]

• Java API: <javadoc>org.zkoss.zul.West</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.layout.West</javadoc>

Employment/PurposeThis component is a west region.

Example


ZK Component Reference/Layouts/Borderlayout/West 220


Supported events

Name Event Type

onOpen Event: OpenEvent




Version History


ZK Component Reference/Layouts/Columnlayout 221

ZK Component Reference/ Layouts/Columnlayout

Columnlayout• Demonstration: Columnlayout [1]

• Java API: <javadoc>org.zkoss.zkex.zul.Columnlayout</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkex.layout.Columnlayout</javadoc>

Employment/PurposeA columnlayout lays out a container which can have multiple columns, and each column may contain one or morepanel.Use Columnlayout need assign width (either percent or pixel) on every Columnchildren, or we cannot makesure about layout look.

Example

<columnlayout> <columnchildren width="30%" style="padding: 5px"> <panel height="100px" style="margin-bottom:10p title=" column1-1 " border="normal" maximizable="true" collapsible="true"> <panelchildren>Panel</panelchildren> </panel> <panel height="100px" framable="true" title="column1- border=" normal " maximizable="true" style="margin-bottom:10px">


<panelchildren>Panel</panelchildren> </panel> <panel height="100px" title="column1-3" border="normal" closable="true"> <panelchildren>Panel</panelchildren> </panel> </columnchildren> <columnchildren width="40%" style="padding: 10px"> <panel title="Data" maximizable="true" border="normal" style="margin-bottom:10px"> <panelchildren> <grid fixedLayout="true" style="border:0px" height="100%"> <columns> <column label="category" /> <column label="value" /> </columns> <rows> <row> <label id="c0" value="C/C++" /> <decimalbox id="v0" value="21. constraint=" no empty " onChange="update(0)" /> </row> <row> <label id="c1" value="VB" /> <decimalbox id="v1" value="10. constraint=" no empty " onChange="update(1)" /> </row> <row> <label id="c2" value="Java" /> <decimalbox id="v2" value="40. constraint=" no empty " onChange="update(2)" /> </row> <row> <label id="c3" value="PHP" /> <decimalbox id="v3" value="28. constraint=" no empty " onChange="update(3)" /> </row> </rows> </grid> </panelchildren> </panel> <panel border="normal"> <panelchildren> <checkbox label="3D Chart" checked="true" onCheck="mychart.setThreeD(self.isChecked())" /> <chart id="mychart" title="Pie Chart Demo" width="320p type="


pie " threeD="true" fgAlpha="128"> <attribute name="onClick"> String areaid = event.getArea(); if (areaid!= null) { Area area = self.getFellow(areaid); alert(""+area.getAttribute("entity")+":"+area.getTooltiptext()); } </attribute> <zscript> void update(int rowIndex) { Label lb = (Label) self.getFellow("c"+rowIndex); Decimalbox db = (Decimalbox)self.getFellow("v"+rowIndex); model.setValue(lb.value, newDouble(db.getValue().doubleValue())); } PieModel model = new SimplePieModel(); for(int j=0; j < 4; ++j) { update(j); } mychart.setModel(model); </zscript> </chart> </panelchildren> </panel> </columnchildren> </columnlayout>

Supported events

Name Event Type

None None

Supported ChildrenColumnchildren

Use cases



Version History



ZK Component Reference/ Layouts/Columnlayout/ Columnchildren

Columnchildren• Demonstration: Columnchildren [1]

• Java API: <javadoc>org.zkoss.zkex.zul.Columnchildren</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkex.layout.Columnchildren</javadoc>

Employment/PurposeChild of Columnchildren only can be Panel.

Example

<columnlayout> <columnchildren width="30%" style="padding: 5px"> <panel height="100px" style="margin-bottom:10p title=" column1-1 "

ZK Component Reference/Layouts/Columnlayout/Columnchildren 225

border="normal" maximizable="true" collapsible="true"> <panelchildren>Panel</panelchildren> </panel> <panel height="100px" framable="true" title="column1- border=" normal " maximizable="true" style="margin-bottom:10px"> <panelchildren>Panel</panelchildren> </panel> <panel height="100px" title="column1-3" border="normal" closable="true"> <panelchildren>Panel</panelchildren> </panel> </columnchildren> <columnchildren width="40%" style="padding: 10px"> <panel title="Data" maximizable="true" border="normal" style="margin-bottom:10px"> <panelchildren> <grid fixedLayout="true" style="border:0px" height="100%"> <columns> <column label="category" /> <column label="value" /> </columns> <rows> <row> <label id="c0" value="C/C++" /> <decimalbox id="v0" value="21. constraint=" no empty " onChange="update(0)" /> </row> <row> <label id="c1" value="VB" /> <decimalbox id="v1" value="10. constraint=" no empty " onChange="update(1)" /> </row> <row> <label id="c2" value="Java" /> <decimalbox id="v2" value="40. constraint=" no empty " onChange="update(2)" /> </row> <row> <label id="c3" value="PHP" /> <decimalbox id="v3" value="28. constraint=" no empty " onChange="update(3)" /> </row> </rows> </grid> </panelchildren> </panel>


<panel border="normal"> <panelchildren> <checkbox label="3D Chart" checked="true" onCheck="mychart.setThreeD(self.isChecked())" /> <chart id="mychart" title="Pie Chart Demo" width="320px" type="pie" threeD="true" fgAlpha="128"> <attribute name="onClick"> String areaid = event.getArea(); if(areaid!= null) { Area area = self.getFellow(areaid); alert(""+area.getAttribute("entity")+":"+area.getTooltiptext()); } </attribute> <zscript> void update(int rowIndex) { Label lb = (Label) self.getFellow("c"+rowIndex); Decimalbox db = (Decimalbox)self.getFellow("v"+rowIndex); model.setValue(lb.value, newDouble(db.getValue().doubleValue())); } PieModel model = new SimplePieModel(); for(int j=0; j < 4; ++j) { update(j); } mychart.setModel(model); </zscript> </chart> </panelchildren> </panel> </columnchildren> </columnlayout>


Supported events

Name Event Type

None None

Supported ChildrenPanel [1]

Use cases


Version History


References[1] http:/ / books. zkoss. org/ wiki/ ZK_Component_Reference/ Containers/ Panel

ZK Component Reference/ Layouts/ Hbox

Hbox• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Hbox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.box.Box</javadoc>

Employment/PurposeThe hbox component is used to create a horizontally oriented box. Each component placed in the hbox will be placedhorizontally in a row.

ZK Component Reference/Layouts/Hbox 228

Example

<zk> <vbox> <button label="Button 1" /> <button label="Button 2" /> </vbox> <hbox> <button label="Button 3" /> <button label="Button 4" /> </hbox></zk>

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Layouts/Vbox 229

ZK Component Reference/ Layouts/ Vbox

Hbox• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Vbox</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.box.Box</javadoc>

Employment/PurposeThe vbox component is used to create a vertically oriented box. Added components will be placed underneath eachother in a column.

Example

<zk> <vbox> <button label="Button 1"/> <button label="Button 2"/> </vbox> <hbox> <button label="Button 3"/> <button label="Button 4"/> </hbox></zk>

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Layouts/Vbox 230

Version History


ZK Component Reference/ Layouts/ Portallayout

Portallayout• Demonstration: Portallayout [1]

• Java API: <javadoc>org.zkoss.zkmax.zul.Portallayout</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkmax.layout.Portallayout</javadoc>

Employment/PurposeA portallayout lays out a container which can have multiple columns, and each column may contain one ormore panel. Portallayout provides a way to drag-and-drop panel into other portalchildren from thesame portallayout.

Use Portallayout need assign width (either present or pixel) on every Portalchildren, or we cannot makesure about layout look.

Example

<portallayout> <portalchildren width="30%"> <panel height="150px" title="Google Tools"> <panelchildren>...</panelchildren>

ZK Component Reference/Layouts/Portallayout 231

</panel> <panel height="300px" title="LabPixies Clock"> <panelchildren>...</panelchildren> </panel> </portalchildren> <portalchildren width="30%"> <panel height="150px" title="Google Tools"> <panelchildren>...</panelchildren> </panel> </portalchildren></portallayout>

Supported events

Name Event Type

onPortalMove Event: <javadoc>org.zkoss.zkmax.event.PortalMoveEvent</javadoc> Represents an event caused by a portal being moved.

Supported Children*Portalchildren

Use cases


Version History



ZK Component Reference/Layouts/Portallayout/Portalchildren 232

ZK Component Reference/ Layouts/ Portallayout/Portalchildren

Portalchildren• Demonstration: Portalchildren [1]

• Java API: <javadoc>org.zkoss.zkmax.zul.Portalchildren</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkmax.layout.Portalchildren</javadoc>

Employment/PurposeThe column of Portallayout

Child of Portalchildren can only be Panel

Example

<portallayout> <portalchildren width="30%"> <panel height="150px" title="Google Tools"> <panelchildren>...</panelchildren> </panel> <panel height="300px" title="LabPixies Clock"> <panelchildren>...</panelchildren> </panel> </portalchildren> <portalchildren width="30%"> <panel height="150px" title="Google Tools">

ZK Component Reference/Layouts/Portallayout/Portalchildren 233

<panelchildren>...</panelchildren> </panel> </portalchildren></portallayout>

Supported events

Name Event Type

None None

Supported Children*Panel

Use cases


Version History


ZK Component Reference/Layouts/Tablelayout 234

ZK Component Reference/ Layouts/ Tablelayout

Tablelayout• Demonstration: Tablelayout [1]

• Java API: <javadoc>org.zkoss.zkex.zul.Tablelayout</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkmax.layout.Tablelayout</javadoc>

Employment/PurposeTablelayout lay outs a container as an HTML table whose columns can be specified, and rowspan and colspan of itschild can also be specified to create complex layouts within the table.

Example

<?xml version="1.0" encoding="UTF-8"?>

<?component name="panel" extends="panel" width="200px" height="200px" ?>

<zk> <label value="3 columns, 1 colspan, 1 rowspan" /> <tablelayout id="tbl" columns="3"> <tablechildren id="tc1" colspan="2"> <panel title="table1" border="normal" maximizable="true" collapsible="true"> <panelchildren>Panel</panelchildren> </panel> </tablechildren> <tablechildren> <panel title="table2" border="normal" maximizable="true" collapsible="true"> <panelchildren>Panel</panelchildren> </panel> </tablechildren> </tablelayout></zk>

ZK Component Reference/Layouts/Tablelayout 235

Supported events

Name Event Type

None None

Supported Children*Tablechildren

Use cases


Version History



ZK Component Reference/ Layouts/ Tablelayout/TableChildren

TableChildren• Demonstration: N/A• Java API: <javadoc>org.zkoss.zkmax.zul.TableChildren</javadoc>• JavaScript API: <javadoc directory="jsdoc">zkmax.layout.TableChildren</javadoc>

Employment/PurposeThe cell of Tablelayout. The child component of Tablechildren only can be Panel.

Example <?xml version="1.0" encoding="UTF-8"?>

<?component name="panel" extends="panel" width="200px" height="200px" ?>

<zk> <label value="3 columns, 1 colspan, 1 rowspan" /> <tablelayout id="tbl" columns="3">

ZK Component Reference/Layouts/Tablelayout/TableChildren 236

<tablechildren id="tc1" colspan="2"> <panel title="table1" border="normal" maximizable="true" collapsible="true"> <panelchildren>Panel</panelchildren> </panel> </tablechildren> <tablechildren> <panel title="table2" border="norma maximizable=" true " collapsible="true"> <panelchildren>Panel</panelchildren> </panel> </tablechildren> </tablelayout></zk>

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Multimedia and Miscellaneous 237

ZK Component Reference/ Multimedia andMiscellaneousThis section outlines components which bring further multimedia capabilities to ZK.

ZK Component Reference/ Multimedia andMiscellaneous/ Audio

Audio• Demonstration: Audio [1]

• Java API: <javadoc>org.zkoss.zul.Audio</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.med.Audio</javadoc>

Employment/PurposeAn audio component is used to play the audio at the browser. Like image, you could use the src property tospecify an URL of an audio resource, or the setContent method to specify a dynamically generated audio.

Depending on the browser and the audio plugin, developers might be able to control the play of an audio by theplay, stop and pause methods. Currently, Internet Explorer with Media Player is capable of such controls.

Example

<audio id="audio" height="20"/>

Supported events

Name Event Type

None None

ZK Component Reference/Multimedia and Miscellaneous/Audio 238


Use cases


Version History



ZK Component Reference/ Multimedia andMiscellaneous/ Flash

Flash• Demonstration: Flash [1]

• Java API: <javadoc>org.zkoss.zul.Flash</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.med.Flash</javadoc>

Employment/PurposeA generic Flash component.

Example

<flash src="SWF/cc.milestones.121503.swf" height="320" width="620"></flash>

ZK Component Reference/Multimedia and Miscellaneous/Flash 239

Supported events

Name Event Type

None None


Use cases


Version History



ZK Component Reference/ SupplementaryThis section outlines components which supplement other ZK components.

ZK Component Reference/Supplementary/Auxhead 240

ZK Component Reference/ Supplementary/Auxhead

Auxhead• Demonstration: Auxhead zkdemo [1]

• Java API: <javadoc>org.zkoss.zul.Auxhead</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.mesh.Auxhead</javadoc>

Employment/PurposeUsed to define a collection of auxiliary headers (Auxheader).

Example

<grid> <auxhead> <auxheader label="H1'07" colspan="6" /> <auxheader label="H2'07" colspan="6" /> </auxhead> <auxhead> <auxheader label="Q1" colspan="3" /> <auxheader label="Q2" colspan="3" /> <auxheader label="Q3" colspan="3" /> <auxheader label="Q4" colspan="3" /> </auxhead> <columns> <column label="Jan" /> <column label="Feb" /> <column label="Mar" /> <column label="Apr" /> <column label="May" /> <column label="Jun" /> <column label="Jul" /> <column label="Aug" /> <column label="Sep" /> <column label="Oct" /> <column label="Nov" /> <column label="Dec" /> </columns>

ZK Component Reference/Supplementary/Auxhead 241

<rows> <row> <label value="1,000" /> <label value="1,100" /> <label value="1,200" /> <label value="1,300" /> <label value="1,400" /> <label value="1,500" /> <label value="1,600" /> <label value="1,700" /> <label value="1,800" /> <label value="1,900" /> <label value="2,000" /> <label value="2,100" /> </row> </rows></grid>

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Supplementary/Auxheader 242

ZK Component Reference/ Supplementary/Auxheader

Auxheader• Demonstration: Auxheader demo [1]

• Java API: <javadoc>org.zkoss.zul.Auxheader</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.mesh.Auxheader</javadoc>

Employment/PurposeThe auxiliary headers support the colspan and rowspan properties which allows itself to be spanned across severalcolumns/rows. Auxiliary headers should be accompanied with columns/listhead/treecols when used withgrid/listbox/tree.

ExampleAn auxiliary header.

<grid> <auxhead> <auxheader label="H1'07" colspan="6" /> <auxheader label="H2'07" colspan="6" /> </auxhead> <auxhead> <auxheader label="Q1" colspan="3" /> <auxheader label="Q2" colspan="3" /> <auxheader label="Q3" colspan="3" /> <auxheader label="Q4" colspan="3" /> </auxhead> <columns> <column label="Jan" /> <column label="Feb" /> <column label="Mar" /> <column label="Apr" /> <column label="May" /> <column label="Jun" /> <column label="Jul" /> <column label="Aug" /> <column label="Sep" /> <column label="Oct" />

ZK Component Reference/Supplementary/Auxheader 243

<column label="Nov" /> <column label="Dec" /> </columns> <rows> <row> <label value="1,000" /> <label value="1,100" /> <label value="1,200" /> <label value="1,300" /> <label value="1,400" /> <label value="1,500" /> <label value="1,600" /> <label value="1,700" /> <label value="1,800" /> <label value="1,900" /> <label value="2,000" /> <label value="2,100" /> </row> </rows></grid>

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Supplementary/Cell 244

ZK Component Reference/ Supplementary/ Cell

Cell• Demonstration: Live Demo [1]

• Java API: <javadoc>org.zkoss.zul.Cell</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.wgt.Cell</javadoc>

Employment/PurposeThe generic cell component to be embedded into <javadoc>org.zkoss.zul.Row</javadoc> or<javadoc>org.zkoss.zul.Vbox</javadoc> or <javadoc>org.zkoss.zul.Hbox</javadoc> for fully control style andlayout.

Example<row> <cell sclass="years" rowspan="12"> ... </cell></row>

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Supplementary/Cell 245

Version History


References[1] http:/ / docs. zkoss. org/ wiki/ ZK_5:_Frozen_Column%2C_In-place_Editing_and_Rowspan#Live_Demo

ZK Component Reference/ Supplementary/Frozen

Frozen• Demonstration: Frozen [1]

• Java API: <javadoc>org.zkoss.zul.Frozen</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.mesh.Frozen</javadoc>

Employment/PurposeA frozen component to represent a frozen column or row in grid, like MS Excel.

Example<grid> <frozen style="background: #dfded8" columns="3"> ... </frozen></grid>

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Supplementary/Frozen 246

Version History


ZK Component Reference/ Supplementary/Paging

Paging• Demonstration: Paging (with Grid) [1], Paging (with Listbox) [2], Paging (with Tree) [3]

• Java API: <javadoc>org.zkoss.zul.Paging</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.mesh.Paging</javadoc>

Employment/PurposeA paging component is used to separate long content into multiple pages. For example, assume that you have 100items and prefer to show 20 items at a time, then you can use the paging components as follows.

Then, when a user clicks on the hyperlinks, the onPaging event is sent with an instance oforg.zkoss.zul.event.PagingEvent to the paging component. To decide which portion of your 100 itemsare visible, you shall add a listener to the paging component.

The listbox and grid component support the paging intrinsically, so you don't need to specify a pagingcomponent explicitly as above, unless you want to have different visual layout or to control multiple listbox and gridwith one paging component.

Example

<vbox> <paging totalSize="100" pageSize="20"/> </vbox>

Supported events

Name Event Type

onPaging <javadoc>org.zkoss.zk.ui.event.PagingEvent</javadoc>

Description: Notifies one of the pages of a multi-page component is selected by the user.

ZK Component Reference/Supplementary/Paging 247


Use cases


3.6 Smalltalk: Paging Sorting with a filter object [4] [4]

3.6 Live Data [5] [5]

Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #g6[2] http:/ / www. zkoss. org/ zkdemo/ userguide/ #g10[3] http:/ / www. zkoss. org/ zkdemo/ userguide/ #g15[4] http:/ / docs. zkoss. org/ wiki/ Paging_Sorting_with_a_filter_object[5] http:/ / docs. zkoss. org/ wiki/ Live_Data,_Paging,_setModel_and_Implement_your_own_renderer

ZK Component Reference/ EventsThis section outline events which are used in components.

ZK Component Reference/Events/BandScrollEvent 248

ZK Component Reference/ Events/BandScrollEvent

BandScrollEvent• Demonstration: N/A• Java API: N/A• JavaScript API: N/A

Employment/PurposeRepresents an event caused by that user is scrolling or has scrolled at the client.

BandScrollEvent will be sent with name as "onBandScrollEvent" after the bandinfo component has been moved bythe user.

The components which are supported this event are: Bandinfo.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/CheckEvent 249

ZK Component Reference/ Events/ CheckEvent

CheckEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.event.CheckEvent </javadoc>• JavaScript API: N/A

Employment/PurposeRepresents an event cause by user's check a state at the client.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/ColSizeEvent 250

ZK Component Reference/ Events/ ColSizeEvent

ColSizeEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.event.ColSizeEvent</javadoc>• JavaScript API: N/A

Employment/PurposeUsed to notify that the widths of two adjacent column are changed.

When an user drags the border of sizable columns, the width of the adjacent columns are changed accordingly - oneis enlarged, the other is shrunk and the total width is not changed.

The event is sent to the parent (e.g., Columns and Treecols).

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/CreateEvent 251

ZK Component Reference/ Events/ CreateEvent

CreateEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.event.CreateEvent</javadoc>• JavaScript API: N/A

Employment/PurposeUsed to notify a window that all its children are created and initialized. UiEngine post this event to componentsthat declares the onCreate handler (either as a method or as in instance definition).

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/DropEvent 252

ZK Component Reference/ Events/ DropEvent

DropEvent• Demonstration: DropEvent [1]

• Java API: <javadoc>org.zkoss.zk.ui.event.DropEvent</javadoc>• JavaScript API: N/A

Employment/PurposeRepresents an event cause by user's dragging and dropping a component.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


5.0 Fadeout on Drop Event [2]

Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #a2[2] http:/ / www. zkoss. org/ forum/ listComment/ 11377

ZK Component Reference/Events/ErrorEvent 253

ZK Component Reference/ Events/ ErrorEvent

ErrorEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.ErrorEvent</javadoc>• JavaScript API: N/A

Employment/PurposeRepresents an event cause by user's entering a wrong data or clearing the last wrong data. ErrorEvent is sentwhen the client detects users entered a wrong value.

Note: if the client doesn't detect the error, the value is sent back to the server with regular event, such asInputEvent

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/Event 254

ZK Component Reference/ Events/ Event

Event• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.event.Event</javadoc>• JavaScript API: N/A

Employment/PurposeAn event sent to the event handler of a component.

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/InfoChangeEvent 255

ZK Component Reference/ Events/InfoChangeEvent

InfoChangeEvent• Demonstration: N/A• Java API: N/A• JavaScript API: N/A

Employment/PurposeRepresents a Google Maps related event which is triggered whenever the currently opened ginfo or gmarker ischanged.

ExampleN/A

Supported events

Name Event Type

None None

Supported Children*N/A

Use cases


Version History


ZK Component Reference/Events/InputEvent 256

ZK Component Reference/ Events/ InputEvent

InputEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.InputEvent</javadoc>• JavaScript API: N/A

Employment/PurposeRepresents an event cause by user's input something at the client.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/KeyEvent 257

ZK Component Reference/ Events/ KeyEvent

KeyEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.KeyEvent</javadoc>• JavaScript API: N/A

Employment/PurposeRepresents a key pressed by the user.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


3.6 Smalltalk: Keylistener Component [1] [1]

Version History


References[1] http:/ / docs. zkoss. org/ wiki/ Keylistener_Component

ZK Component Reference/Events/MapDropEvent 258

ZK Component Reference/ Events/MapDropEvent

MapDropEvent• Demonstration: N/A• Java API: N/A• JavaScript API: N/A

Employment/PurposeRepresents a Google Maps related event which is triggered whenever a component is dragged and dropped on agmaps or gmarker. This event was sent to the dropped component with the latitude and longitude information ofthe dropping point.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/MapMouseEvent 259

ZK Component Reference/ Events/MapMouseEvent

MapMouseEvent• Demonstration: N/A• Java API: N/A• JavaScript API: N/A

Employment/PurposeRepresents a Google Maps related event which is triggered whenever a gmaps is mouse clicked, right clicked, ordouble clicked. The event includes the latitude and longitude information of the mouse clicking point.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/MapMoveEvent 260

ZK Component Reference/ Events/MapMoveEvent

MapMoveEvent• Demonstration: N/A• Java API: N/A• JavaScript API: N/A

Employment/PurposeRepresents a Google Maps related event which is triggered whenever the view center of the gmaps is moved or thezoom level of the gmaps is changed.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/MapTypeChangeEvent 261

ZK Component Reference/ Events/MapTypeChangeEvent

MapTypeChangeEvent• Demonstration: N/A• Java API: N/A• JavaScript API: N/A

Employment/PurposeRepresents a Google Maps related event which is triggered whenever the current type(normal, satellite, hybrid,physical) of the gmaps is changed.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/MapZoomEvent 262

ZK Component Reference/ Events/MapZoomEvent

MapZoomEvent• Demonstration: N/A• Java API: N/A• JavaScript API: N/A

Employment/PurposeRepresents a Google Maps related event which is triggered whenever the zoom level of a gmaps is changed.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/MouseEvent 263

ZK Component Reference/ Events/ MouseEvent

MouseEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.MouseEvent</javadoc>• JavaScript API: N/A

Employment/PurposeRepresents an event cause by mouse activitly. There are two possible way to identify a mouse event. One is bycoordination (getX() and getY()). The other is by a logical name, called area (getArea()).

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/MoveEvent 264

ZK Component Reference/ Events/ MoveEvent

MoveEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.event.MoveEvent</javadoc>• JavaScript API: N/A

Employment/PurposeRepresents an event caused by a component being moved.

Component Implementation Note:

A movable component must implement Movable for the returned object ofComponentCtrl.getExtraCtrl().

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/OccurEventSelectEvent 265

ZK Component Reference/ Events/OccurEventSelectEvent

OccurEventSelectEvent• Demonstration: N/A• Java API: N/A• JavaScript API: N/A

Employment/PurposeRepresents an event caused by that user click the Occur Event in the bandinfo component

OccurEventSelectEvent will be sent with name as "onOccurEventSelectEvent " after the Occur Event in the bandinfocomponent has been clicked by the user.

The components which are supported this event are: Bandinfo.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/OpenEvent 266

ZK Component Reference/ Events/ OpenEvent

OpenEvent• Demonstration: OpenEvent [1]

• Java API: <javadoc>org.zkoss.zk.ui.event.OpenEvent</javadoc>• JavaScript API: N/A

Employment/PurposeRepresents an event cause by user's openning or closing something at the client.

Note: it is a bit confusing but Events.ON_CLOSE is sent when user clicks a close button. It is a request to ask theserver to close a window, a tab or others. If the server ignores the event, nothing will happen at the client. By default,the component is detached when receiving this event.

On the other hand, Events.ON_OPEN (with OpenEvent) is a notification. It is sent to notify the server that theclient has opened or closed something. And, the server can not prevent the client from opening or closing.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


References[1] http:/ / www. zkoss. org/ zkdemo/ userguide/ #e9

ZK Component Reference/Events/PageSizeEvent 267

ZK Component Reference/ Events/PageSizeEvent

PageSizeEvent• Java API: <javadoc>org.zkoss.zul.event.PageSizeEvent</javadoc>

Employment/PurposeUsed to notify that the page size is changed (by the user), or by paginal (such as Paging).

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/PagingEvent 268

ZK Component Reference/ Events/ PagingEvent

PagingEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul..event.PagingEvent</javadoc>• JavaScript API: N/A

Employment/PurposeUsed to notify that a new page is selected by the user, or by Paginal (such as Paging). It is used for paging longcontent.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/PortalMoveEvent 269

ZK Component Reference/ Events/PortalMoveEvent

PortalMoveEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zkmax.ui.event.PortalMoveEvent</javadoc>• JavaScript API: N/A

Employment/PurposeRepresents an event caused by a portal being moved.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/ScrollEvent 270

ZK Component Reference/ Events/ ScrollEvent

ScrollEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.event.ScrollEvent</javadoc>• JavaScript API: N/A

Employment/PurposeRepresents an event caused by that user is scrolling or has scrolled at the client.

ScrollEvent will be sent wih name as "onScroll" after setCurposByClient(int) is called to notifyapplication developers that it is called by user (rather than by codes).

For components that might also support ScrollEvent with "onScrolling". It is used to notified the server that useris changing its content (changing is on progress and not finished).

The components which are supported this event are: <javadoc>org.zkoss.zul.Slider</javadoc>.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/SelectEvent 271

ZK Component Reference/ Events/ SelectEvent

SelectEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.event.SelectEvent</javadoc>• JavaScript API: N/A

Employment/PurposeRepresents an event cause by user's the list selection is changed at the client.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/SelectionEvent 272

ZK Component Reference/ Events/SelectionEvent

SelectionEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.event.SelectionEvent</javadoc>• JavaScript API: N/A

Employment/PurposeRepresents an event cause by user's the list selection is changed at the client.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/SizeEvent 273

ZK Component Reference/ Events/ SizeEvent

SizeEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.event.SizeEvent</javadoc>• JavaScript API: N/A

Employment/PurposeRepresents an event caused by a component being re-sized.

Component Implementation Note: A sizable component must implement Sizable for the returned object ofComponentCtrl.getExtraCtrl().

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/UploadEvent 274

ZK Component Reference/ Events/ UploadEvent

UploadEvent• Demonstration: UploadEvent [1]

• Java API: <javadoc>org.zkoss.zk.ui.event.UploadEvent</javadoc>• JavaScript API: N/A

Employment/PurposeRepresents that user has uploaded one or several files from the client to the server.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Events/ZIndexEvent 275

ZK Component Reference/ Events/ ZIndexEvent

ZIndexEvent• Demonstration: N/A• Java API: <javadoc>org.zkoss.zk.ui.event.ZIndexEvent</javadoc>• JavaScript API: N/A

Employment/PurposeRepresents an event caused by a component whose z-index is modified by the client. A z-indexed component mustsend ZindexEvent once the z-index of component is modifiable by the client.

The components which are supported this event are: Window.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/Supporting Classes 276

ZK Component Reference/ Supporting ClassesThis section outlines classes which support ZK's components.

ZK Component Reference/ Supporting Classes/AbstractListModel

AbstractListModel• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.AbstractListModel</javadoc>• JavaScript API: N/A

Employment/PurposeA skeletal implementation for ListModel [1].

ExampleN/A

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Supporting Classes/AbstractListModel 277

Version History


References[1] http:/ / books. zkoss. org/ wiki/ ZK_Component_Reference/ Supporting_Classes/ ListModel

ZK Component Reference/ Supporting Classes/Constraint

Constraint• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.Constraint</javadoc>• JavaScript API: N/A

Employment/PurposeAn interface that defines validate method to verify whether the value is acceptable

ExampleN/A

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Supporting Classes/Constraint 278

Version History


ZK Component Reference/ Supporting Classes/Constrained

Constrained• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.ext.constrainted</javadoc>• JavaScript API: N/A

Employment/PurposeDecorates a component that its value is constrained by Constraint.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Supporting Classes/Constrained 279

Version History


ZK Component Reference/ Supporting Classes/ListitemRenderer

ListitemRenderer• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.ListitemRenderer</javadoc>• JavaScript API: N/A

Employment/PurposeIdentifies components that can be used as "rubber stamps" to paint the cells in a Listbox.

ExampleN/A

Supported events

Name Event Type

None None

Supported ChildrenNone

Use cases


ZK Component Reference/Supporting Classes/ListitemRenderer 280

Version History


ZK Component Reference/ Supporting Classes/ListModel

ListModel• Demonstration: Listbox (Live Data) [1]

• Java API: <javadoc>org.zkoss.zul.ListModel</javadoc>• JavaScript API: N/A

Employment/PurposeThis interface defines the methods that components like Listbox and Grid use to get the content of items.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Supporting Classes/ListModel 281

Version History



ZK Component Reference/ Supporting Classes/Messagebox

Messagebox• Demonstration: Messagebox [1]

• Java API: <javadoc>org.zkoss.zul.Messagebox</javadoc>• JavaScript API: N/A

Employment/PurposeIt provides a set of utilities to show message boxes.

It is typically used to alert users when an error occurs, or to prompt user for an decision.

Example<window title="Messagebox demo" border="normal"> <button label="Question" width="100px"> <attribute name="onClick">{ Messagebox.show("Question is pressed. Are you sure?", "Question", Messagebox.OK | Messagebox.CANCEL, Messagebox.QUESTION); }</attribute> </button></window>

ZK Component Reference/Supporting Classes/Messagebox 282

Supported events

Name Event Type

None None


Use cases


Version History



ZK Component Reference/ Supporting Classes/RendererCtrl

RendererCtrl• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.RendererCtrl</javadoc>• JavaScript API: N/A

Employment/PurposeThis interface defines the methods components like Listbox use to notify the renderer for several circumstance.

Though ListitemRenderer.render(org.zkoss.zul.Listitem, java.lang.Object) is calledone item a timer, a request might have several items to render. And, if the renderer implements this interface,doTry() will be called before any rendering, and doFinally() will be called after all rendering. If anyexception occurs, doCatch(java.lang.Throwable) will be called.

A typical use is to start a transaction and use it for rendering all items from the same request.

ZK Component Reference/Supporting Classes/RendererCtrl 283

Supported events

Name Event Type

None None


Use cases


Version History


ZK Component Reference/ Supporting Classes/SimpleConstraint

SimpleConstraint• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.SimpleConstraint</javadoc>• JavaScript API: <javadoc directory="jsdoc">zul.inp.SimpleConstraint</javadoc>

Employment/PurposeA simple constraint that you could build based the predefined constants.

Supported events

Name Event Type

None None

ZK Component Reference/Supporting Classes/SimpleConstraint 284


Use cases


Version History


ZK Component Reference/ Supporting Classes/SimpleListModel

SimpleListModel• Demonstration: N/A• Java API: <javadoc>org.zkoss.zul.SimpleListModel</javadoc>• JavaScript API: N/A

Employment/PurposeA simple implementation of <javadoc>ListModel</javadoc>.

ExampleN/A

Supported events

Name Event Type

None None


Use cases


ZK Component Reference/Supporting Classes/SimpleListModel 285

Version History


ZK Component Reference/ XHTML ComponentsThis section provides information on XHTML Components, such as what they are and how to use them.

ZK Component Reference/ XHTMLComponents/ Encoding URLsA XHTML component generates attributes directly to native HTML tags. It means, unlike XUL, it doesn't prefix theservlet context path to attributes for specifying URL. For example, the following codes don't work (unless the servletcontext is "").

<img href="/my/good.png"/>

Instead, you should use the <mp>encodeURL</mp> function in EL expressions as follows.

<?taglib uri="http://www.zkoss.org/dsp/web/core.dsp.tld" prefix="p"?> ... <img href="${p:encodeURL('/my/good.png')}"/>

In Java, you should use the method, <javadocmethod="encodeURL(java.lang.String)">org.zkoss.zk.ui.Execution</javadoc>.

<img id="another"/> <zscript> another.setDynamicAttribute("href", Executions.getCurrent().encodeURL("/my/good.png")); </zscript>

Notice that XUL components and all ZK features that accept a URL will invoke the <mp>encodeURL</mp> methodautomatically. The reason why we do not handle XHTML components is that we do not know which attributerequires a URL.

ZK Component Reference/XHTML Components/In Pure Java 286

ZK Component Reference/ XHTMLComponents/ In Pure JavaIt is also possible to create XHTML components in Java. The XHTML components are mapped to classes by ZKwhich means you can implement something like this:

Td myTd = new Td();

This enables you to use XHTML components from ZUL or within Java just like anything ZK related. If you need tooutput an XHTML component which is not present in ZK you can use the Raw object.

RawA special component, <javadoc>org.zkoss.zhtml.Raw</javadoc> is used to represent any component that is notdeclared in the following section (i.e., not in lang.xml). In other words, if any unrecognized component name isfound, an instance of <javadoc>org.zkoss.zhtml.Raw</javadoc> is created and a proper HTML tag will be generatedaccordingly. In other words, any component name is legal as long as the targeted browser supports.

<marquee align="top">...</marquee>

is equivalent to

new Raw("marquee").setDynamicAttribute("align", "top");

Next let's investigate the differences between XUL and XHTML components.

ZK Component Reference/ XHTMLComponents/ The Difference Between XUL andXHTML ComponentsAll XHTML components are derived from <javadoc>org.zkoss.zhtml.impl.AbstractTag</javadoc>.

An XHTML component is a thin wrapper that encapsulates a native HTML tag. It is different to a XUL componentor other none-native component in several ways.

• By implementing the <javadoc type="interface">org.zkoss.zk.ui.ext.RawId</javadoc> interface, the universalidentifier, <mp>getUuid</mp>, is the same as the identifier <mp>getId</mp>

• By implementing the <javadoc type="interface">org.zkoss.zk.ui.ext.DynamicAttributes</javadoc> interface, allXHTML components support arbitrary attributes. In other words, any attribute name is legal (as long as thetargeted browser supports)

Article Sources and Contributors 287

Article Sources and ContributorsZK Component Reference Source: http://books.zkoss.org/index.php?oldid=2110 Contributors: Tmillsclare

ZK Component Reference/ Introduction Source: http://books.zkoss.org/index.php?oldid=1515 Contributors: Tmillsclare

ZK Component Reference/ Base Components Source: http://books.zkoss.org/index.php?oldid=1521 Contributors: Tmillsclare

ZK Component Reference/ Base Components/ AbstractComponent Source: http://books.zkoss.org/index.php?oldid=1899 Contributors: Ashishd, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Base Components/ FormatInputElement Source: http://books.zkoss.org/index.php?oldid=1901 Contributors: Ashishd, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Base Components/ HeaderElement Source: http://books.zkoss.org/index.php?oldid=1902 Contributors: Ashishd, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Base Components/ HeadersElement Source: http://books.zkoss.org/index.php?oldid=1903 Contributors: Iantsai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Base Components/ HtmlBasedComponent Source: http://books.zkoss.org/index.php?oldid=2133 Contributors: Iantsai, Tmillsclare, Tomyeh, Zkwikiadmin

ZK Component Reference/ Base Components/ HtmlMacroComponent Source: http://books.zkoss.org/index.php?oldid=2145 Contributors: Tmillsclare, Tomyeh

ZK Component Reference/ Base Components/ InputElement Source: http://books.zkoss.org/index.php?oldid=1905 Contributors: Iantsai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Base Components/ LabelElement Source: http://books.zkoss.org/index.php?oldid=1907 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Base Components/ LabelImageElement Source: http://books.zkoss.org/index.php?oldid=1908 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Base Components/ LayoutRegion Source: http://books.zkoss.org/index.php?oldid=1910 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Base Components/ NumberInputElement Source: http://books.zkoss.org/index.php?oldid=1911 Contributors: Jumperchen, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Base Components/ XulElement Source: http://books.zkoss.org/index.php?oldid=2137 Contributors: Jumperchen, Tmillsclare, Tomyeh, Zkwikiadmin

ZK Component Reference/ Containers Source: http://books.zkoss.org/index.php?oldid=1522 Contributors: Tmillsclare

ZK Component Reference/ Containers/ Box Source: http://books.zkoss.org/index.php?oldid=1913 Contributors: Sphota, Tmillsclare

ZK Component Reference/ Containers/ Caption Source: http://books.zkoss.org/index.php?oldid=1914 Contributors: Jumperchen, Tmillsclare

ZK Component Reference/ Containers/ Div Source: http://books.zkoss.org/index.php?oldid=2135 Contributors: Sphota, Tmillsclare, Tomyeh

ZK Component Reference/ Containers/ Groupbox Source: http://books.zkoss.org/index.php?oldid=1916 Contributors: Sphota, Tmillsclare

ZK Component Reference/ Containers/ Panel Source: http://books.zkoss.org/index.php?oldid=2117 Contributors: Peterkuo, Tmillsclare, Tomyeh

ZK Component Reference/ Containers/ Panel/ Panelchildren Source: http://books.zkoss.org/index.php?oldid=1927 Contributors: Peterkuo, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Containers/ Span Source: http://books.zkoss.org/index.php?oldid=1928 Contributors: Samchuang, Tmillsclare

ZK Component Reference/ Containers/ Splitter Source: http://books.zkoss.org/index.php?oldid=1929 Contributors: Samchuang, Tmillsclare

ZK Component Reference/ Containers/ Tabbox Source: http://books.zkoss.org/index.php?oldid=1930 Contributors: Samchuang, Tmillsclare

ZK Component Reference/ Containers/ Tabbox/ Tab Source: http://books.zkoss.org/index.php?oldid=1931 Contributors: SimonPai, Tmillsclare

ZK Component Reference/ Containers/ Tabbox/ Tabs Source: http://books.zkoss.org/index.php?oldid=1932 Contributors: SimonPai, Tmillsclare

ZK Component Reference/ Containers/ Tabbox/ Tabpanel Source: http://books.zkoss.org/index.php?oldid=2090 Contributors: SimonPai, Tmillsclare

ZK Component Reference/ Containers/ Tabbox/ Tabpanels Source: http://books.zkoss.org/index.php?oldid=1934 Contributors: SimonPai, Tmillsclare

ZK Component Reference/ Containers/ Window Source: http://books.zkoss.org/index.php?oldid=1935 Contributors: Peterkuo, SimonPai, Tmillsclare

ZK Component Reference/ Data Source: http://books.zkoss.org/index.php?oldid=1529 Contributors: Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Grid Source: http://books.zkoss.org/index.php?oldid=2152 Contributors: Iantsai, Tmillsclare, Tomyeh

ZK Component Reference/ Data/ Grid/ Column Source: http://books.zkoss.org/index.php?oldid=1937 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Grid/ Columns Source: http://books.zkoss.org/index.php?oldid=1938 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Grid/ Detail Source: http://books.zkoss.org/index.php?oldid=1939 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Grid/ Foot Source: http://books.zkoss.org/index.php?oldid=1940 Contributors: Jumperchen, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Grid/ Footer Source: http://books.zkoss.org/index.php?oldid=1941 Contributors: Jumperchen, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Grid/ Group Source: http://books.zkoss.org/index.php?oldid=1942 Contributors: Jumperchen, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Grid/ Groupfoot Source: http://books.zkoss.org/index.php?oldid=1943 Contributors: Sphota, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Grid/ Row Source: http://books.zkoss.org/index.php?oldid=1944 Contributors: Peterkuo, Tmillsclare

ZK Component Reference/ Data/ Grid/ Rows Source: http://books.zkoss.org/index.php?oldid=1945 Contributors: Peterkuo, Tmillsclare

ZK Component Reference/ Data/ Listbox Source: http://books.zkoss.org/index.php?oldid=2154 Contributors: Sphota, Tmillsclare, Tomyeh

ZK Component Reference/ Data/ Listbox/ Listcell Source: http://books.zkoss.org/index.php?oldid=1918 Contributors: Peterkuo, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Listbox/ Listfoot Source: http://books.zkoss.org/index.php?oldid=1919 Contributors: Sphota, Tmillsclare

ZK Component Reference/ Data/ Listbox/ Listfooter Source: http://books.zkoss.org/index.php?oldid=1920 Contributors: Peterkuo, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Listbox/ Listgroup Source: http://books.zkoss.org/index.php?oldid=1921 Contributors: Peterkuo, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Listbox/ Listgroupfoot Source: http://books.zkoss.org/index.php?oldid=1922 Contributors: Samchuang, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Listbox/ Listhead Source: http://books.zkoss.org/index.php?oldid=1923 Contributors: Samchuang, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Listbox/ Listheader Source: http://books.zkoss.org/index.php?oldid=1924 Contributors: Samchuang, Tmillsclare, Zkwikiadmin


ZK Component Reference/ Data/ Listbox/ Listitem Source: http://books.zkoss.org/index.php?oldid=1925 Contributors: SimonPai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Tree Source: http://books.zkoss.org/index.php?oldid=2156 Contributors: SimonPai, Tmillsclare, Tomyeh

ZK Component Reference/ Data/ Tree/ Treecell Source: http://books.zkoss.org/index.php?oldid=1947 Contributors: Ashishd, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Tree/ Treechildren Source: http://books.zkoss.org/index.php?oldid=1948 Contributors: Iantsai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Tree/ Treecol Source: http://books.zkoss.org/index.php?oldid=1949 Contributors: Iantsai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Tree/ Treecols Source: http://books.zkoss.org/index.php?oldid=1950 Contributors: Iantsai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Tree/ Treefoot Source: http://books.zkoss.org/index.php?oldid=1951 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Tree/ Treefooter Source: http://books.zkoss.org/index.php?oldid=1952 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Data/ Tree/ Treeitem Source: http://books.zkoss.org/index.php?oldid=2083 Contributors: Iantsai, Tmillsclare

ZK Component Reference/ Data/ Tree/ Treerow Source: http://books.zkoss.org/index.php?oldid=1953 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Diagrams and Reports Source: http://books.zkoss.org/index.php?oldid=1593 Contributors: Tmillsclare

ZK Component Reference/ Diagrams and Reports/ Chart Source: http://books.zkoss.org/index.php?oldid=1954 Contributors: SimonPai, Tmillsclare

ZK Component Reference/ Diagrams and Reports/ Flashchart Source: http://books.zkoss.org/index.php?oldid=1955 Contributors: Samchuang, Tmillsclare

ZK Component Reference/ Diagrams and Reports/ Gmaps Source: http://books.zkoss.org/index.php?oldid=1956 Contributors: Henrichen, Tmillsclare

ZK Component Reference/ Diagrams and Reports/ Gmaps/ Gimage Source: http://books.zkoss.org/index.php?oldid=1957 Contributors: Henrichen, Tmillsclare

ZK Component Reference/ Diagrams and Reports/ Gmaps/ Ginfo Source: http://books.zkoss.org/index.php?oldid=1958 Contributors: Henrichen, Tmillsclare

ZK Component Reference/ Diagrams and Reports/ Gmaps/ Gmarker Source: http://books.zkoss.org/index.php?oldid=1959 Contributors: Henrichen, Tmillsclare

ZK Component Reference/ Diagrams and Reports/ Gmaps/ Gpolyline Source: http://books.zkoss.org/index.php?oldid=1960 Contributors: Henrichen, Tmillsclare

ZK Component Reference/ Diagrams and Reports/ Gmaps/ Gpolygon Source: http://books.zkoss.org/index.php?oldid=1961 Contributors: Henrichen, Tmillsclare

ZK Component Reference/ Diagrams and Reports/ Gmaps/ Gscreen Source: http://books.zkoss.org/index.php?oldid=1962 Contributors: Henrichen, Tmillsclare

ZK Component Reference/ Diagrams and Reports/ Jasperreport Source: http://books.zkoss.org/index.php?oldid=2151 Contributors: Samchuang, Tmillsclare, Tomyeh

ZK Component Reference/ Diagrams and Reports/ Timeline Source: http://books.zkoss.org/index.php?oldid=1964 Contributors: Jimmyshiau, Tmillsclare

ZK Component Reference/ Diagrams and Reports/ Timeline/ Bandinfo Source: http://books.zkoss.org/index.php?oldid=1965 Contributors: Jimmyshiau, Tmillsclare

ZK Component Reference/ Diagrams and Reports/ Timeline/ Hotzone Source: http://books.zkoss.org/index.php?oldid=1966 Contributors: Jimmyshiau, Tmillsclare

ZK Component Reference/ Diagrams and Reports/ Timeplot Source: http://books.zkoss.org/index.php?oldid=1967 Contributors: Jimmyshiau, Tmillsclare

ZK Component Reference/ Diagrams and Reports/ Timeplot/ Plotinfo Source: http://books.zkoss.org/index.php?oldid=1968 Contributors: Jimmyshiau, Tmillsclare

ZK Component Reference/ Essential Components Source: http://books.zkoss.org/index.php?oldid=1530 Contributors: Tmillsclare, Zkwikiadmin

ZK Component Reference/ Essential Components/ A Source: http://books.zkoss.org/index.php?oldid=1969 Contributors: Samchuang, Tmillsclare

ZK Component Reference/ Essential Components/ Applet Source: http://books.zkoss.org/index.php?oldid=2141 Contributors: Samchuang, Tmillsclare, Tomyeh

ZK Component Reference/ Essential Components/ Button Source: http://books.zkoss.org/index.php?oldid=1971 Contributors: Jumperchen, SimonPai, Tmillsclare

ZK Component Reference/ Essential Components/ Captcha Source: http://books.zkoss.org/index.php?oldid=2084 Contributors: Iantsai, Tmillsclare

ZK Component Reference/ Essential Components/ Fileupload Source: http://books.zkoss.org/index.php?oldid=2150 Contributors: Samchuang, Tmillsclare, Tomyeh, Zkwikiadmin

ZK Component Reference/ Essential Components/ Fisheye Source: http://books.zkoss.org/index.php?oldid=1973 Contributors: Ashishd, Tmillsclare

ZK Component Reference/ Essential Components/ Fisheye/ Fisheyebar Source: http://books.zkoss.org/index.php?oldid=1974 Contributors: Sphota, Tmillsclare

ZK Component Reference/ Essential Components/ HTML Source: http://books.zkoss.org/index.php?oldid=1975 Contributors: SimonPai, Tmillsclare

ZK Component Reference/ Essential Components/ Iframe Source: http://books.zkoss.org/index.php?oldid=1976 Contributors: SimonPai, Tmillsclare

ZK Component Reference/ Essential Components/ Include Source: http://books.zkoss.org/index.php?oldid=1978 Contributors: Ashishd, Tmillsclare

ZK Component Reference/ Essential Components/ Image Source: http://books.zkoss.org/index.php?oldid=1979 Contributors: Ashishd, Tmillsclare

ZK Component Reference/ Essential Components/ Imagemap Source: http://books.zkoss.org/index.php?oldid=1980 Contributors: SimonPai, Tmillsclare

ZK Component Reference/ Essential Components/ Imagemap/ Area Source: http://books.zkoss.org/index.php?oldid=1981 Contributors: Samchuang, Tmillsclare

ZK Component Reference/ Essential Components/ Label Source: http://books.zkoss.org/index.php?oldid=2142 Contributors: Ashishd, Tmillsclare, Tomyeh

ZK Component Reference/ Essential Components/ Menu Source: http://books.zkoss.org/index.php?oldid=1983 Contributors: Iantsai, Tmillsclare

ZK Component Reference/ Essential Components/ Menu/ Menubar Source: http://books.zkoss.org/index.php?oldid=1984 Contributors: Iantsai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Essential Components/ Menu/ Menuitem Source: http://books.zkoss.org/index.php?oldid=1985 Contributors: Iantsai, Jumperchen, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Essential Components/ Menu/ Menupopup Source: http://books.zkoss.org/index.php?oldid=1986 Contributors: Jimmyshiau, Tmillsclare

ZK Component Reference/ Essential Components/ Menu/ Menuseparator Source: http://books.zkoss.org/index.php?oldid=1987 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Essential Components/ Popup Source: http://books.zkoss.org/index.php?oldid=1988 Contributors: Jimmyshiau, Tmillsclare

ZK Component Reference/ Essential Components/ Progressmeter Source: http://books.zkoss.org/index.php?oldid=1989 Contributors: Peterkuo, Tmillsclare

ZK Component Reference/ Essential Components/ Separator Source: http://books.zkoss.org/index.php?oldid=2111 Contributors: Henrichen, Jumperchen, Tmillsclare

ZK Component Reference/ Essential Components/ Space Source: http://books.zkoss.org/index.php?oldid=1991 Contributors: Jumperchen, Tmillsclare

ZK Component Reference/ Essential Components/ Script Source: http://books.zkoss.org/index.php?oldid=2011 Contributors: Jumperchen, Tmillsclare


ZK Component Reference/ Essential Components/ Style Source: http://books.zkoss.org/index.php?oldid=2146 Contributors: Sphota, Tmillsclare, Tomyeh

ZK Component Reference/ Essential Components/ Timer Source: http://books.zkoss.org/index.php?oldid=2013 Contributors: Ashishd, Tmillsclare

ZK Component Reference/ Essential Components/ Toolbar Source: http://books.zkoss.org/index.php?oldid=2014 Contributors: Sphota, Tmillsclare

ZK Component Reference/ Essential Components/ Toolbarbutton Source: http://books.zkoss.org/index.php?oldid=2015 Contributors: Jumperchen, Sphota, Tmillsclare

ZK Component Reference/ Input Source: http://books.zkoss.org/index.php?oldid=1531 Contributors: Tmillsclare

ZK Component Reference/ Input/ Bandbox Source: http://books.zkoss.org/index.php?oldid=2016 Contributors: Jumperchen, Tmillsclare

ZK Component Reference/ Input/ Bandpopup Source: http://books.zkoss.org/index.php?oldid=2017 Contributors: Sphota, Tmillsclare

ZK Component Reference/ Input/ Calendar Source: http://books.zkoss.org/index.php?oldid=2147 Contributors: Sphota, Tmillsclare, Tomyeh

ZK Component Reference/ Input/ Checkbox Source: http://books.zkoss.org/index.php?oldid=2019 Contributors: Sphota, Tmillsclare

ZK Component Reference/ Input/ CKEditor Source: http://books.zkoss.org/index.php?oldid=1992 Contributors: Jimmyshiau, Tmillsclare

ZK Component Reference/ Input/ Colorbox Source: http://books.zkoss.org/index.php?oldid=1993 Contributors: Samchuang, Tmillsclare

ZK Component Reference/ Input/ Combobox Source: http://books.zkoss.org/index.php?oldid=1994 Contributors: Peterkuo, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Input/ Comboitem Source: http://books.zkoss.org/index.php?oldid=1995 Contributors: Peterkuo, Tmillsclare

ZK Component Reference/ Input/ Datebox Source: http://books.zkoss.org/index.php?oldid=2148 Contributors: Peterkuo, Tmillsclare, Tomyeh

ZK Component Reference/ Input/ Decimalbox Source: http://books.zkoss.org/index.php?oldid=1997 Contributors: Samchuang, Tmillsclare

ZK Component Reference/ Input/ Doublebox Source: http://books.zkoss.org/index.php?oldid=1998 Contributors: Samchuang, Tmillsclare

ZK Component Reference/ Input/ Intbox Source: http://books.zkoss.org/index.php?oldid=1999 Contributors: SimonPai, Tmillsclare

ZK Component Reference/ Input/ Longbox Source: http://books.zkoss.org/index.php?oldid=2000 Contributors: SimonPai, Tmillsclare

ZK Component Reference/ Input/ Radio Source: http://books.zkoss.org/index.php?oldid=2001 Contributors: SimonPai, Tmillsclare

ZK Component Reference/ Input/ Radiogroup Source: http://books.zkoss.org/index.php?oldid=2002 Contributors: Ashishd, Tmillsclare

ZK Component Reference/ Input/ Slider Source: http://books.zkoss.org/index.php?oldid=2003 Contributors: Ashishd, Tmillsclare

ZK Component Reference/ Input/ Spinner Source: http://books.zkoss.org/index.php?oldid=2004 Contributors: Ashishd, Tmillsclare

ZK Component Reference/ Input/ Textbox Source: http://books.zkoss.org/index.php?oldid=2121 Contributors: Iantsai, Tmillsclare, Tomyeh

ZK Component Reference/ Input/ Timebox Source: http://books.zkoss.org/index.php?oldid=2006 Contributors: Iantsai, Tmillsclare

ZK Component Reference/ Layouts Source: http://books.zkoss.org/index.php?oldid=1532 Contributors: Tmillsclare, Zkwikiadmin

ZK Component Reference/ Layouts/ Borderlayout Source: http://books.zkoss.org/index.php?oldid=2007 Contributors: Iantsai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Layouts/ Borderlayout/ Center Source: http://books.zkoss.org/index.php?oldid=2008 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Layouts/ Borderlayout/ East Source: http://books.zkoss.org/index.php?oldid=2009 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Layouts/ Borderlayout/ North Source: http://books.zkoss.org/index.php?oldid=2010 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Layouts/ Borderlayout/ South Source: http://books.zkoss.org/index.php?oldid=2020 Contributors: Jumperchen, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Layouts/ Borderlayout/ West Source: http://books.zkoss.org/index.php?oldid=2021 Contributors: Jumperchen, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Layouts/ Columnlayout Source: http://books.zkoss.org/index.php?oldid=2022 Contributors: Jumperchen, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Layouts/ Columnlayout/ Columnchildren Source: http://books.zkoss.org/index.php?oldid=2023 Contributors: Ashishd, Tmillsclare

ZK Component Reference/ Layouts/ Hbox Source: http://books.zkoss.org/index.php?oldid=2024 Contributors: Peterkuo, Tmillsclare

ZK Component Reference/ Layouts/ Vbox Source: http://books.zkoss.org/index.php?oldid=2025 Contributors: Tmillsclare

ZK Component Reference/ Layouts/ Portallayout Source: http://books.zkoss.org/index.php?oldid=2026 Contributors: Sphota, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Layouts/ Portallayout/ Portalchildren Source: http://books.zkoss.org/index.php?oldid=2027 Contributors: Sphota, Tmillsclare

ZK Component Reference/ Layouts/ Tablelayout Source: http://books.zkoss.org/index.php?oldid=2028 Contributors: Sphota, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Layouts/ Tablelayout/ TableChildren Source: http://books.zkoss.org/index.php?oldid=2079 Contributors: Iantsai, Tmillsclare

ZK Component Reference/ Multimedia and Miscellaneous Source: http://books.zkoss.org/index.php?oldid=1602 Contributors: Tmillsclare, Zkwikiadmin

ZK Component Reference/ Multimedia and Miscellaneous/ Audio Source: http://books.zkoss.org/index.php?oldid=2029 Contributors: Sphota, Tmillsclare

ZK Component Reference/ Multimedia and Miscellaneous/ Flash Source: http://books.zkoss.org/index.php?oldid=2030 Contributors: Sphota, Tmillsclare

ZK Component Reference/ Supplementary Source: http://books.zkoss.org/index.php?oldid=1534 Contributors: Tmillsclare

ZK Component Reference/ Supplementary/ Auxhead Source: http://books.zkoss.org/index.php?oldid=2031 Contributors: Iantsai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Supplementary/ Auxheader Source: http://books.zkoss.org/index.php?oldid=2032 Contributors: Iantsai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Supplementary/ Cell Source: http://books.zkoss.org/index.php?oldid=2033 Contributors: Jumperchen, Tmillsclare

ZK Component Reference/ Supplementary/ Frozen Source: http://books.zkoss.org/index.php?oldid=2035 Contributors: Jumperchen, Tmillsclare

ZK Component Reference/ Supplementary/ Paging Source: http://books.zkoss.org/index.php?oldid=2036 Contributors: SimonPai, Tmillsclare

ZK Component Reference/ Events Source: http://books.zkoss.org/index.php?oldid=1536 Contributors: Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ BandScrollEvent Source: http://books.zkoss.org/index.php?oldid=2037 Contributors: Jimmyshiau, Tmillsclare

ZK Component Reference/ Events/ CheckEvent Source: http://books.zkoss.org/index.php?oldid=2038 Contributors: Peterkuo, Tmillsclare, Zkwikiadmin


ZK Component Reference/ Events/ ColSizeEvent Source: http://books.zkoss.org/index.php?oldid=2039 Contributors: Peterkuo, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ CreateEvent Source: http://books.zkoss.org/index.php?oldid=2040 Contributors: Peterkuo, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ DropEvent Source: http://books.zkoss.org/index.php?oldid=2041 Contributors: Samchuang, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ ErrorEvent Source: http://books.zkoss.org/index.php?oldid=2042 Contributors: Samchuang, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ Event Source: http://books.zkoss.org/index.php?oldid=2043 Contributors: Samchuang, Tmillsclare

ZK Component Reference/ Events/ InfoChangeEvent Source: http://books.zkoss.org/index.php?oldid=2044 Contributors: Henrichen, Tmillsclare

ZK Component Reference/ Events/ InputEvent Source: http://books.zkoss.org/index.php?oldid=2045 Contributors: SimonPai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ KeyEvent Source: http://books.zkoss.org/index.php?oldid=2046 Contributors: SimonPai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ MapDropEvent Source: http://books.zkoss.org/index.php?oldid=2047 Contributors: Henrichen, Tmillsclare

ZK Component Reference/ Events/ MapMouseEvent Source: http://books.zkoss.org/index.php?oldid=2048 Contributors: Henrichen, Tmillsclare

ZK Component Reference/ Events/ MapMoveEvent Source: http://books.zkoss.org/index.php?oldid=2049 Contributors: Henrichen, Tmillsclare

ZK Component Reference/ Events/ MapTypeChangeEvent Source: http://books.zkoss.org/index.php?oldid=2050 Contributors: Henrichen, Tmillsclare

ZK Component Reference/ Events/ MapZoomEvent Source: http://books.zkoss.org/index.php?oldid=2051 Contributors: Henrichen, Tmillsclare

ZK Component Reference/ Events/ MouseEvent Source: http://books.zkoss.org/index.php?oldid=2052 Contributors: SimonPai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ MoveEvent Source: http://books.zkoss.org/index.php?oldid=2053 Contributors: Ashishd, SimonPai, Tmillsclare

ZK Component Reference/ Events/ OccurEventSelectEvent Source: http://books.zkoss.org/index.php?oldid=2054 Contributors: Jimmyshiau, Tmillsclare

ZK Component Reference/ Events/ OpenEvent Source: http://books.zkoss.org/index.php?oldid=2055 Contributors: Ashishd, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ PageSizeEvent Source: http://books.zkoss.org/index.php?oldid=2056 Contributors: Ashishd, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ PagingEvent Source: http://books.zkoss.org/index.php?oldid=2057 Contributors: Iantsai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ PortalMoveEvent Source: http://books.zkoss.org/index.php?oldid=2058 Contributors: Iantsai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ ScrollEvent Source: http://books.zkoss.org/index.php?oldid=2059 Contributors: Iantsai, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ SelectEvent Source: http://books.zkoss.org/index.php?oldid=2060 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ SelectionEvent Source: http://books.zkoss.org/index.php?oldid=2061 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ SizeEvent Source: http://books.zkoss.org/index.php?oldid=2062 Contributors: Jimmyshiau, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ UploadEvent Source: http://books.zkoss.org/index.php?oldid=2063 Contributors: Jumperchen, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Events/ ZIndexEvent Source: http://books.zkoss.org/index.php?oldid=2064 Contributors: Jumperchen, Tmillsclare, Zkwikiadmin

ZK Component Reference/ Supporting Classes Source: http://books.zkoss.org/index.php?oldid=2073 Contributors: Tmillsclare

ZK Component Reference/ Supporting Classes/ AbstractListModel Source: http://books.zkoss.org/index.php?oldid=2065 Contributors: Ashishd, Tmillsclare

ZK Component Reference/ Supporting Classes/ Constraint Source: http://books.zkoss.org/index.php?oldid=2066 Contributors: Ashishd, Tmillsclare

ZK Component Reference/ Supporting Classes/ Constrained Source: http://books.zkoss.org/index.php?oldid=2067 Contributors: Sphota, Tmillsclare

ZK Component Reference/ Supporting Classes/ ListitemRenderer Source: http://books.zkoss.org/index.php?oldid=2068 Contributors: Sphota, Tmillsclare

ZK Component Reference/ Supporting Classes/ ListModel Source: http://books.zkoss.org/index.php?oldid=2069 Contributors: Peterkuo, Tmillsclare

ZK Component Reference/ Supporting Classes/ Messagebox Source: http://books.zkoss.org/index.php?oldid=2070 Contributors: Peterkuo, Tmillsclare

ZK Component Reference/ Supporting Classes/ RendererCtrl Source: http://books.zkoss.org/index.php?oldid=2071 Contributors: SimonPai, Tmillsclare

ZK Component Reference/ Supporting Classes/ SimpleConstraint Source: http://books.zkoss.org/index.php?oldid=2072 Contributors: SimonPai, Tmillsclare

ZK Component Reference/ Supporting Classes/ SimpleListModel Source: http://books.zkoss.org/index.php?oldid=2087 Contributors: Iantsai, Tmillsclare

ZK Component Reference/ XHTML Components Source: http://books.zkoss.org/index.php?oldid=2099 Contributors: Tmillsclare

ZK Component Reference/ XHTML Components/ Encoding URLs Source: http://books.zkoss.org/index.php?oldid=2103 Contributors: Tmillsclare

ZK Component Reference/ XHTML Components/ In Pure Java Source: http://books.zkoss.org/index.php?oldid=2104 Contributors: Tmillsclare

ZK Component Reference/ XHTML Components/ The Difference Between XUL and XHTML Components Source: http://books.zkoss.org/index.php?oldid=2105 Contributors:Tmillsclare, Tomyeh


Image Sources, Licenses and ContributorsImage:ZKComRef_Box_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Box_Example.png License: unknown Contributors: Sphota

File:ZKComRef_Caption_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Caption_Example.png License: unknown Contributors: Jumperchen

Image:ZKComRef_Div_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Div_Example.png License: unknown Contributors: Sphota

Image:ZKComRef_Groupbox_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Groupbox_Example.png License: unknown Contributors: Sphota

Image:ZKComRef_Panel_Simple_Examples.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Panel_Simple_Examples.PNG License: unknown Contributors: Peterkuo

Image:ZKComRef_Splitter_Examples.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Splitter_Examples.PNG License: unknown Contributors: Samchuang

Image:ZKComRef_Tabbox_Examples.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Tabbox_Examples.PNG License: unknown Contributors: Samchuang

Image:ZKComRef_Containers_Tab.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Containers_Tab.PNG License: unknown Contributors: SimonPai

Image:ZKComRef_Containers_Tabs.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Containers_Tabs.PNG License: unknown Contributors: SimonPai

Image:ZKComRef_Containers_Tabpanel.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Containers_Tabpanel.PNG License: unknown Contributors: SimonPai

Image:ZKComRef_Containers_Tabpanels.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Containers_Tabpanels.PNG License: unknown Contributors: SimonPai

Image:ZKComRef_Window_Multiple_Examples.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Window_Multiple_Examples.PNG License: unknown Contributors:Tmillsclare

Image:grid.png Source: http://books.zkoss.org/index.php?title=File:Grid.png License: unknown Contributors: Jimmyshiau

Image:detail.png Source: http://books.zkoss.org/index.php?title=File:Detail.png License: unknown Contributors: Jimmyshiau

Image:ZKComRef_Foot_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Foot_Example.png License: unknown Contributors: Jumperchen

Image:ZKComRef_Group_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Group_Example.png License: unknown Contributors: Jumperchen

Image:ZKComRef_Groupfoot_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Groupfoot_Example.png License: unknown Contributors: Sphota

Image:ZKComRef_Row_Example.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Row_Example.PNG License: unknown Contributors: Peterkuo

Image:ZKComRef_Listbox_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Listbox_Example.png License: unknown Contributors: Sphota

Image:ZKComRef_Listfooter_Example.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Listfooter_Example.PNG License: unknown Contributors: Peterkuo

Image:ZKComRef_Listgroup_Example.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Listgroup_Example.PNG License: unknown Contributors: Peterkuo

Image:ZKComRef_Listgroupfoot_Example.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Listgroupfoot_Example.PNG License: unknown Contributors: Samchuang

Image:ZKComRef_Listhead_Examples.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Listhead_Examples.PNG License: unknown Contributors: Samchuang

Image:ZKComRef_ Listheader_Examples.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Listheader_Examples.PNG License: unknown Contributors: Samchuang

Image:ZKComRef_Listitem.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Listitem.PNG License: unknown Contributors: SimonPai

Image:ZKComRef_Tree.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Tree.PNG License: unknown Contributors: SimonPai

Image:treeitem.PNG Source: http://books.zkoss.org/index.php?title=File:Treeitem.PNG License: unknown Contributors: Ashishd

Image:tree.png Source: http://books.zkoss.org/index.php?title=File:Tree.png License: unknown Contributors: Jimmyshiau

Image:treefooter.png Source: http://books.zkoss.org/index.php?title=File:Treefooter.png License: unknown Contributors: Jimmyshiau

Image:treeitem.png Source: http://books.zkoss.org/index.php?title=File:Treeitem.png License: unknown Contributors: Jimmyshiau

Image:ZKComRef_Chart.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Chart.png License: unknown Contributors: SimonPai

Image:ZKComRef_Flashchart_Examples.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Flashchart_Examples.PNG License: unknown Contributors: Samchuang

Image:ZKComRef_Gmaps_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Gmaps_Example.png License: unknown Contributors: Henrichen

Image:ZKComRef_Gimage_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Gimage_Example.png License: unknown Contributors: Henrichen

Image:ZKComRef_Gpolyline_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Gpolyline_Example.png License: unknown Contributors: Henrichen

Image:ZKComRef_Gpolygon_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Gpolygon_Example.png License: unknown Contributors: Henrichen

Image:ZKComRef_Gscreen_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Gscreen_Example.png License: unknown Contributors: Henrichen

Image:ZKComRef_Jasperreport_Examples.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Jasperreport_Examples.PNG License: unknown Contributors: Samchuang

Image:ZKCompRef_Timeline.png Source: http://books.zkoss.org/index.php?title=File:ZKCompRef_Timeline.png License: unknown Contributors: Jimmyshiau

Image:ZKCompRef_Timeline2.png Source: http://books.zkoss.org/index.php?title=File:ZKCompRef_Timeline2.png License: unknown Contributors: Jimmyshiau

Image:ZKCompRef_Timeplot.png Source: http://books.zkoss.org/index.php?title=File:ZKCompRef_Timeplot.png License: unknown Contributors: Jimmyshiau

Image:ZKComRef_A_Examples.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_A_Examples.PNG License: unknown Contributors: Samchuang

Image:ZKComRef_Applet_Examples.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Applet_Examples.PNG License: unknown Contributors: Samchuang

Image:ZKComRef_Button.jpg Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Button.jpg License: unknown Contributors: SimonPai

Image:fisheyebar.PNG Source: http://books.zkoss.org/index.php?title=File:Fisheyebar.PNG License: unknown Contributors: Ashishd

Image:ZKComRef_Html.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Html.png License: unknown Contributors: SimonPai

Image:ZKComRef_Iframe.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Iframe.png License: unknown Contributors: SimonPai

Image:ZKComRef_Imagemap.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Imagemap.png License: unknown Contributors: SimonPai

Image:label.png Source: http://books.zkoss.org/index.php?title=File:Label.png License: unknown Contributors: Ashishd

Image:Menu.png Source: http://books.zkoss.org/index.php?title=File:Menu.png License: unknown Contributors: Jimmyshiau

Image:Popup.png Source: http://books.zkoss.org/index.php?title=File:Popup.png License: unknown Contributors: Jimmyshiau

Image:ZKComRef_Progressmeter_Example.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Progressmeter_Example.PNG License: unknown Contributors: Peterkuo

Image:ZKComRef_Separator_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Separator_Example.png License: unknown Contributors: Jumperchen

Image:ZKComRef_Space_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Space_Example.png License: unknown Contributors: Jumperchen

Image:ZKComRef_Script_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Script_Example.png License: unknown Contributors: Jumperchen

Image:ZKComRef_Style_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Style_Example.png License: unknown Contributors: Sphota

Image:ZKComRef_Toolbar_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Toolbar_Example.png License: unknown Contributors: Sphota

Image:ZKComRef_Toolbarbutton_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Toolbarbutton_Example.png License: unknown Contributors: Sphota

Image:ZKComRef_Bandbox_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Bandbox_Example.png License: unknown Contributors: Jumperchen

Image:ZKComRef_Bandpopup_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Bandpopup_Example.png License: unknown Contributors: Sphota

Image:ZKComRef_Calendar_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Calendar_Example.png License: unknown Contributors: Tmillsclare

Image:ZKComRef_Checkbox_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Checkbox_Example.png License: unknown Contributors: Sphota

Image:ZKCompRef_CKEditor.png Source: http://books.zkoss.org/index.php?title=File:ZKCompRef_CKEditor.png License: unknown Contributors: Jimmyshiau

Image:ZKCompRef_CKEditor2.png Source: http://books.zkoss.org/index.php?title=File:ZKCompRef_CKEditor2.png License: unknown Contributors: Jimmyshiau

Image:ZKComRef_Colorbox_Examples.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Colorbox_Examples.PNG License: unknown Contributors: Samchuang

Image:ZKComRef_Colorbox_Examples2.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Colorbox_Examples2.PNG License: unknown Contributors: Samchuang

Image:ZKComRef_Combobox_Example.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Combobox_Example.PNG License: unknown Contributors: Peterkuo

Image:ZKComRef_Comboitem_Example.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Comboitem_Example.PNG License: unknown Contributors: Peterkuo


Image:ZKComRef_Datebox_Example.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Datebox_Example.PNG License: unknown Contributors: Peterkuo

Image:ZKComRef_Decimalbox_Examples.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Decimalbox_Examples.PNG License: unknown Contributors: Samchuang

Image:ZKComRef_Doublebox_Examples.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Doublebox_Examples.PNG License: unknown Contributors: Samchuang

Image:ZKComRef_Intbox.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Intbox.png License: unknown Contributors: SimonPai

Image:ZKComRef_Intbox2.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Intbox2.png License: unknown Contributors: SimonPai

Image:ZKComRef_longbox.jpg Source: http://books.zkoss.org/index.php?title=File:ZKComRef_longbox.jpg License: unknown Contributors: SimonPai

Image:ZKComRef_radio.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_radio.png License: unknown Contributors: SimonPai

Image:radio.png Source: http://books.zkoss.org/index.php?title=File:Radio.png License: unknown Contributors: Ashishd

Image:Slider.png Source: http://books.zkoss.org/index.php?title=File:Slider.png License: unknown Contributors: Ashishd

Image:Spinner.PNG Source: http://books.zkoss.org/index.php?title=File:Spinner.PNG License: unknown Contributors: Ashishd

Image:ZKCompRef_Textbox.png Source: http://books.zkoss.org/index.php?title=File:ZKCompRef_Textbox.png License: unknown Contributors: Tmillsclare

Image:ZKCompRef_Timebox.png Source: http://books.zkoss.org/index.php?title=File:ZKCompRef_Timebox.png License: unknown Contributors: Tmillsclare

Image:ZKCompRef_Borderlayout.jpg Source: http://books.zkoss.org/index.php?title=File:ZKCompRef_Borderlayout.jpg License: unknown Contributors: Tmillsclare

Image:ZKComRef_South_Example.jpg Source: http://books.zkoss.org/index.php?title=File:ZKComRef_South_Example.jpg License: unknown Contributors: Jumperchen

Image:ZKComRef_Columnlayout_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Columnlayout_Example.png License: unknown Contributors: Jumperchen

Image:ColumnLayout.PNG Source: http://books.zkoss.org/index.php?title=File:ColumnLayout.PNG License: unknown Contributors: Ashishd

Image:ZKComRef_Hbox_Simple_Examples.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Hbox_Simple_Examples.PNG License: unknown Contributors: Peterkuo

Image:ZKComRef_Vbox_Simple_Example.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Vbox_Simple_Example.PNG License: unknown Contributors: Tmillsclare

Image:ZKComRef_Portallayout_Example.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Portallayout_Example.PNG License: unknown Contributors: Sphota

Image:ZKComRef_Tablelayout_Example.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Tablelayout_Example.PNG License: unknown Contributors: Sphota

Image:ZKComRef_Audio_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Audio_Example.png License: unknown Contributors: Sphota

Image:ZKComRef_Flash_Example.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Flash_Example.png License: unknown Contributors: Sphota

Image:ZKComRef_Auxheader.png Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Auxheader.png License: unknown Contributors: Tmillsclare

Image:ZKComRef_Paging.PNG Source: http://books.zkoss.org/index.php?title=File:ZKComRef_Paging.PNG License: unknown Contributors: SimonPai

ZK 5.0.3 Component Reference

Documents

Transcript of ZK 5.0.3 Component Reference