There are two types of buttons: button and toolbarbutton. They behave similar except the appearance is different. The button component uses HTML BUTTON tag, while the toolbarbutton component uses HTML A tag.
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.
<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"/>
In addition to identifying images by URL, you could assign a dynamically generated image to a button by use of the setImageContent method. Refer to the following section for details.
Tip: The setImageContent method is supplied by all components that has the image property. Simplicity put, setImageContent is used for dynamically generated images, while image is used for images identifiable by URL.
There are two ways to add behaviors to button and toolbarbutton. First, you could specify a listener for the onClick event. Second, you could specify an URL for the href property. If both are specified, the href property has the higher priority, i.e., the onClick event won't be sent.
<button onClick="do_something_in_Java()"/> <button href="/another_page.zul"/>
When processing an event, you could decide to stop processing the current desktop and redirect to anther page by use of the sendRedirect method. In other words, the following two buttons are equivalent (from user's viewpoint).
<button onClick="Executions.sendRedirect("another.zul")"/> <button href="another.zul"/>
Since the onClick event is sent to the server for processing, you could add more logic before invoking sendRedirect, such as redirecting to another page only if certain condition is satisfied.
On the other hand, the href property is processed completely at the client side. Your application won't be noticed, when users clicks on the button.