2種類のボタンがあります。button とtoolbarbuttonです。外見は違いますが、働きは同じです。button コンポーネントはHTML BUTTONタグを使用します。一方、toolbarbuttonコンポーネントはHTML Aのタグを使います。
labelとimageプロパティでラベルとイメージをボタンに指定することができます。二つとも指定された場合、dir プロパティでどれを一番前に表示するかを指定できます。orientプロパティはlayoutを横方向、縦方向、どちらかに指定できます。
<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"/>
URLによってイメージを指定することに加えて、setImageContentメソッドを使うことで、動的に生成させたイメージをボタンに指定することができます。詳しくは以下のセクションをご覧ください。
【ヒント】： setImageContentメソッドはimageプロパティを持つすべてのコンポーネントで提供されています。つまり、setImageContentはイメージを動的に生成するときに使われます。一方、ImageはURLが認識できるイメージに使われます。
buttonとtoolbarbuttonに動作を加える方法は二つあります。初めはonClickイベントにリスナを指定します。二つ目はURLをhrefプロパティに指定します。
両方共に指定された場合、hrefプロパティのほうが、優先順位が高いです。つまり、onClickイベントは送信されません。
<button onClick="do_something_in_Java()"/> <button href="/another_page.zul"/>
イベントを処理している時、現デスクトップの処理を停止するかどうかを操作します。そして、sendRedirectメソッドを使って他のページに変えます。つまり、以下の二つのボタンの働きは(ユーザーからみれば) 同じです。
<button onClick="Executions.sendRedirect("another.zul")"/> <button href="another.zul"/>
onClickイベントはサーバーへ送信され処理されるので、sendRedirectを呼ぶ前にロジックを加えることができます。たとえば、sendRedirectはある条件が満たされた場合のみ、他のページに変えるといったことが可能です。
一方で、hrefプロパティは完全にクライアント側で処理されます。ユーザーがボタンをクリックするなどクライアント側の操作はアプリケーションには通知されせん。