ZK Component Reference/Essential Components/Button

Button

• Demonstration: Button and Fileupload
• Java API: Button
• JavaScript API: Button

Employment/Purpose

You 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 is horizontal or vertical.

Within ZK 5, the file upload has been redesigned so it can be integrated with any widget. For example, The button can now be used to upload a file. In addition to this, the display of the upload status has been enhanced and can be customized 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"/>

File Upload

Any button can be used to upload files. All you need to do is:

1. Specify the upload attribute with true
2. Handles the onUpload event.

<button upload="true" label="Fileupload" onUpload="myProcessUpload(event.getMedia())"/>

When the file is uploaded, an instance of UploadEvent is sent to the button. Then, the event listener can retrieve the uploaded content by examining the return value of UploadEvent.getMedia().

---

Limitation of the Default Mold

The default mold of a button uses HTML BUTTON tag to represent it visually. It is efficient, but it has some limitations:

1. The look might be different from one browser to another.
2. It doesn't support the file upload. In fact, it will become the trendy mold automatically if upload is specified.

If it is an issue, you could use the trendy mold instead.

<button label="OK" mold="trendy"/>

Configure to Use the Trendy Mold as Default

If you prefer to use the trendy mold as default, you could configure ZK by adding the following to /WEB-INF/zk.xml

<library-property>
    <name>org.zkoss.zul.Button.mold</name>
    <value>trendy</value>
</library-property>

Supported events

Name	Event Type
onClick	MouseEvent Description: Denotes user has clicked the component.
onRightClick	MouseEvent Description: Denotes user has right-clicked the component.
onDoubleClick	MouseEvent Description: Denotes user has double-clicked the component.
onFocus	Event Description: Denotes when a component gets the focus.
onBlur	Event Description: Denotes when a component loses the focus.
onUpload	UploadEvent Description: Denotes user has uploaded a file to the component.

Supported molds

Available molds of a component are defined in lang.xml embedded in zul.jar.

Name	Snapshot
default
trendy
os

Supported Children

*NONE

Use cases

Version	Description	Example Location
3.6	Get dynamically generated Button reference in onClick Event	http://www.zkoss.org/forum/listComment/8780
3.6	How to fire onClick Event on a Button	http://www.zkoss.org/forum/listComment/1716

Version History

Version	Date	Content
5.0.4	August 2010	Button.setType(String) was introduced to allow a button able to submit or reset a form. <n:form action="a_uri" xmlns:n="native"> <button type="submit" label="Submit"/> <button type="reset" label="Reset"/> </n:form>