Toolbarbutton"

From Documentation
(12 intermediate revisions by 6 users not shown)
Line 3: Line 3:
 
= Toolbarbutton =
 
= Toolbarbutton =
  
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#t2 Toolbarbutton] and [http://docs.zkoss.org/wiki/ZK_5:_New_File_Upload#Live_Demo Fileupload]
+
*Demonstration: [http://www.zkoss.org/zkdemo/menu/toolbar Toolbar] and [[Small_Talks/2009/July/ZK_5:_New_File_Upload#Live_Demo |Fileupload]]
 
*Java API: <javadoc>org.zkoss.zul.Toolbarbutton</javadoc>
 
*Java API: <javadoc>org.zkoss.zul.Toolbarbutton</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Toolbarbutton</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Toolbarbutton</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Toolbarbutton| Toolbarbutton]]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
The behave of <tt>Toolbarbutton</tt> is similar to the <tt>button </tt>except the appearance is different. The <tt>button </tt>component uses HTML BUTTON tag, while <tt>thetoolbarbutton </tt>component uses HTML A tag.
+
The behavior of <tt>Toolbarbutton</tt> is similar to the <tt>button </tt>except the appearance is different. The <tt>button </tt>component uses HTML BUTTON tag, while the <tt>toolbarbutton </tt>component uses HTML DIV tag.
  
A <tt>toolbarbutton </tt>could be placed outside a <tt>toolbar, </tt>However <tt>toolbarbutton</tt>s change their appearance if they are placed inside a <tt>toolbar. </tt>
+
A <tt>toolbarbutton </tt>could be placed outside a <tt>toolbar</tt>. However <tt>toolbarbutton</tt>s change their appearance if they are placed inside a <tt>toolbar</tt>.
  
 
<tt>Toolbarbutton</tt> supports <tt>getHref()</tt>. If <tt>getHref()</tt> is not null, the <tt>onClick</tt> handler is ignored and this element is degenerated to HTML's A tag.
 
<tt>Toolbarbutton</tt> supports <tt>getHref()</tt>. If <tt>getHref()</tt> is not null, the <tt>onClick</tt> handler is ignored and this element 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, The toolbarbutton 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.  
+
Within ZK 5, the file upload has been redesigned so it can be integrated with any widget. For example, the toolbarbutton 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.  
  
 
See also : [[ZK_Component_Reference/Essential_Components/Button | Button]], [[ZK_Component_Reference/Essential_Components/Toolbar | Toolbar]]
 
See also : [[ZK_Component_Reference/Essential_Components/Button | Button]], [[ZK_Component_Reference/Essential_Components/Toolbar | Toolbar]]
 +
  
 
= Example =
 
= Example =
Line 24: Line 26:
 
<source lang="xml" >
 
<source lang="xml" >
 
<window title="toolbar demo" border="normal" width="300px">
 
<window title="toolbar demo" border="normal" width="300px">
<caption>
+
    <caption>
<toolbarbutton label="button3" image="/img/folder.gif" />
+
        <toolbarbutton label="button3" image="/img/network.gif" />
<space />
+
        <space />
<toolbarbutton label="button4" image="/img/folder.gif"
+
        <toolbarbutton label="button4" image="/img/network.gif"
dir="reverse" />
+
            dir="reverse" />
</caption>
+
    </caption>
<toolbar>
+
    <toolbar>
<toolbarbutton label="button1" image="/img/folder.gif" />
+
        <toolbarbutton label="button1" image="/img/network.gif" />
<space />
+
        <space />
<toolbarbutton label="button2" image="/img/folder.gif" />
+
        <toolbarbutton label="button2" image="/img/network.gif" />
</toolbar>
+
    </toolbar>
<hbox>
+
    <hbox>
<toolbarbutton label="button5" image="/img/folder.gif"
+
        <toolbarbutton label="button5" image="/img/network.gif"
orient="vertical" />
+
            orient="vertical" />
<space />
+
        <space />
<toolbarbutton label="button6" image="/img/folder.gif"
+
        <toolbarbutton label="button6" image="/img/network.gif"
orient="vertical" dir="reverse" />
+
            orient="vertical" dir="reverse" />
</hbox>
+
    </hbox>
 
</window>
 
</window>
 
</source>
 
</source>
  
= Fileupload Example =
+
= Toggle Mode =
<source lang="xml">
+
Toolbarbutton support toggle mode since ZK 6.0.0 . (mode="toggle" )
<toolbarbutton upload="true" label="Fileupload"/>
 
</source>
 
  
=Supported events=
+
[[Image:Toolbarbutton togglemode.png]]
  
{| border="1" | width="100%"
+
In the toggle mode , the toolbarbutton will be persistent checked after user clicked it, and will be released after next click.
! <center>Name</center>
+
It will fire <javadoc>org.zkoss.zk.ui.event.CheckEvent</javadoc> when state changed.
! <center>Event Type</center>
 
|-
 
| <center><tt>onClick</tt></center>
 
| <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>
 
  
'''Description: '''
+
<source lang="xml" >
 +
<window title="Toolbarbutton" border="normal" width="250px" >
 +
<toolbar >
 +
<toolbarbutton label="File system" mode="toggle" >
 +
<attribute name="onCheck"><![CDATA[
 +
    if(event.isChecked()){
 +
result.setValue("Activated:"+event.getTarget().getLabel());
 +
    }else{
 +
    result.setValue("Deactivated:"+event.getTarget().getLabel());
 +
    }
 +
]]></attribute>
 +
</toolbarbutton>
 +
</toolbar>
 +
 +
<label id="result" />
 +
</window>
 +
</source>
  
Denotes user has clicked the component.
+
= File Upload =
  
|-
+
Any toolbarbutton<ref>Any <javadoc>org.zkoss.zul.Button</javadoc> can be used to upload files too.</ref> can be used to upload files. All you need to do is:
| <center>onRightClick</center>
 
| <javadoc>org.zkoss.zk.ui.event.MouseEvent</javadoc>
 
  
'''Description: '''
+
# Specify the <tt>upload</tt> attribute with true
 +
# Handles the <tt>onUpload</tt> event.
  
Denotes user has right-clicked the component.
+
<source lang="xml">
 +
<toolbarbutton upload="true" label="Fileupload" onUpload="myProcessUpload(event.getMedia())"/>
 +
</source>
  
|-
+
When the file is uploaded, an instance of <javadoc>org.zkoss.zk.ui.event.UploadEvent</javadoc> is sent to the button. Then, the event listener can retrieve the uploaded content by examining the return value of <javadoc method="getMedia()">org.zkoss.zk.ui.event.UploadEvent</javadoc>.
| <center>onUpload</center>
 
| <javadoc>org.zkoss.zk.ui.event.UploadEvent</javadoc>
 
  
'''Description: '''
+
<blockquote>
 +
----
 +
<references/>
 +
</blockquote>
  
Denotes user has uploaded a file to the component.
+
=Supported Events=
  
 +
{| border="1" | width="100%"
 +
! <center>Name</center>
 +
! <center>Event Type</center>
 +
|-
 +
| <center>onCheck</center>
 +
| '''Event:''' <javadoc>org.zkoss.zk.ui.event.CheckEvent</javadoc>
 +
Denotes when toolbarbutton is checked , only available in toggle mode . (since ZK 6.0.0)
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Essential_Components/Button#Supported_Events | Button]]
  
 
=Supported Children=
 
=Supported Children=
Line 85: Line 107:
 
  *NONE
 
  *NONE
  
=Use cases=
+
=Use Cases=
  
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
Line 96: Line 118:
  
 
=Version History=
 
=Version History=
 
+
{{LastUpdated}}
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| 5.0.2
+
| 6.0.0
| 5/12/2010
+
| 2/10
| Initialization
+
| Introduce Toggle Mode to Toobarbutton
 +
|-
 +
| &nbsp;
 +
| &nbsp;
 +
| &nbsp;
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Revision as of 11:29, 10 February 2012

Toolbarbutton

Employment/Purpose

The behavior of Toolbarbutton is similar to the button except the appearance is different. The button component uses HTML BUTTON tag, while the toolbarbutton component uses HTML DIV tag.

A toolbarbutton could be placed outside a toolbar. However toolbarbuttons change their appearance if they are placed inside a toolbar.

Toolbarbutton supports getHref(). If getHref() is not null, the onClick handler is ignored and this element 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, the toolbarbutton 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.

See also : Button, Toolbar


Example

ZKComRef Toolbarbutton Example.png

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

Toggle Mode

Toolbarbutton support toggle mode since ZK 6.0.0 . (mode="toggle" )

Toolbarbutton togglemode.png

In the toggle mode , the toolbarbutton will be persistent checked after user clicked it, and will be released after next click. It will fire CheckEvent when state changed.

<window title="Toolbarbutton" border="normal" width="250px" >
	<toolbar >
		<toolbarbutton label="File system" mode="toggle" >
			<attribute name="onCheck"><![CDATA[
			    if(event.isChecked()){
					result.setValue("Activated:"+event.getTarget().getLabel());
			    }else{
			    	result.setValue("Deactivated:"+event.getTarget().getLabel());
			    }
			]]></attribute>			
		</toolbarbutton> 
	</toolbar>
	
	<label id="result" />
</window>

File Upload

Any toolbarbutton[1] can be used to upload files. All you need to do is:

  1. Specify the upload attribute with true
  2. Handles the onUpload event.
<toolbarbutton 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().


  1. Any Button can be used to upload files too.

Supported Events

Name
Event Type
onCheck
Event: CheckEvent

Denotes when toolbarbutton is checked , only available in toggle mode . (since ZK 6.0.0)

Supported Children

*NONE

Use Cases

Version Description Example Location
     

Version History

Last Update : 2012/02/10


Version Date Content
6.0.0 2/10 Introduce Toggle Mode to Toobarbutton
     



Last Update : 2012/02/10

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.