Fisheye"

From Documentation
m ((via JWB))
 
(9 intermediate revisions by 4 users not shown)
Line 3: Line 3:
 
= Fisheye =
 
= Fisheye =
  
−
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#t4 Fisheye]
+
*Demonstration: [http://www.zkoss.org/zkdemo/menu/fisheye_menu Fisheye]
 
*Java API: <javadoc>org.zkoss.zkex.zul.Fisheye</javadoc>
 
*Java API: <javadoc>org.zkoss.zkex.zul.Fisheye</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkex.menu.Fisheye</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkex.menu.Fisheye</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Fisheyebar | Fisheyebar]]
 +
*[http://www.zkoss.org/product/edition.dsp Available in ZK PE and EE only]
  
 
= Employment/Purpose =
 
= Employment/Purpose =
 
A fisheye item
 
A fisheye item
−
 
−
 
  
 
= Example =
 
= Example =
−
[[Image:fisheyebar.PNG]]
+
[[Image:ZKComRef_fisheyebar.png]]
  
 
<source lang="xml" >
 
<source lang="xml" >
−
 
+
<zk>
−
<window>
+
<div height="450px">
−
Click "Change orient" button and move cursor over the fisheyebar before
+
<checkbox label="Attach icon edge at bottom"
−
it changes.
+
onCheck='fsb.attachEdge=self.checked?"bottom":"top"' />
−
<separator />
+
<checkbox label="Vertical orient"
−
Fisheyebar will be out of expected.(That is wrong)
+
onCheck='fsb.orient=self.checked?"vertical":"horizontal"' />
−
<fisheyebar id="fish"
+
<separator bar="true" />
−
style="position: absolute; top: 50px;
+
<fisheyebar id="fsb" style="position:absolute;margin:80px 150px;"
−
        left:100px;margin:20px;"
+
attachEdge="top" itemWidth="80" itemHeight="80" itemMaxHeight="160" itemMaxWidth="160">
−
attachEdge="top">
+
<fisheye image="/img/Centigrade-Widget-Icons/FolderABlue-128x128.png" label="Folder"
−
<fisheye image="/img/icon_browser.png" label="Web Browser"
+
onClick="alert(self.label)" />
−
onClick="alert(self.label)" />
+
<fisheye image="/img/Centigrade-Widget-Icons/ReadingGlass-128x128.png" label="Reading Glasses"
−
<fisheye image="/img/icon_calendar.png" label="Calendar"
+
onClick="alert(self.label)" />
−
onClick="alert(self.label)" />
+
<fisheye image="/img/Centigrade-Widget-Icons/Briefcase-128x128.png" label="Project"
−
<fisheye image="/img/icon_email.png" label="Emai onClick="
+
onClick="alert(self.label)" />
−
alert ( self.label ) />
+
<fisheye image="/img/Centigrade-Widget-Icons/MailboxFlag-128x128.png"
−
<fisheye image="/img/icon_texteditor.png" label="Text Editor"
+
label="Email" onClick="alert(self.label)" />
−
onClick="alert(self.label)" />
+
<fisheye image="/img/Centigrade-Widget-Icons/Globe-128x128.png"
−
<fisheye image="/img/icon_update.png" label="Software Update"
+
label="Globe" onClick="alert(self.label)" />
−
onClick="alert(self.label)" />
+
<fisheye image="/img/Centigrade-Widget-Icons/Spyglass-128x128.png" label="Spyglass"
−
<fisheye image="/img/icon_users.png" label="User onClick="
+
onClick="alert(self.label)" />
−
alert ( self.label ) />
+
</fisheyebar>
−
</fisheyebar>
+
</div>
−
<button label="Change orient">
+
</zk>
−
<attribute name="onClick"> if (fish.orient.equals("horizontal")) {
 
−
fish.orient = "vertical"; } else { fish.orient = "horizontal"; }
 
−
</attribute>
 
−
</button>
 
−
</window>
 
 
</source>
 
</source>
 +
=Properties=
 +
==Dynamic Images==
 +
For example you can create an image using the Java2D libraries and then set the content of the fisheye to the created image, below is an example of how to do this.
  
 +
<source lang="xml">
 +
<?page title="Auto Generated index.zul"?>
 +
<zk>
 +
<window title="test of autodisable">
 +
<fisheyebar><fisheye id="fish1" /></fisheyebar>
 +
 +
<zscript>
 +
import java.awt.*;
 +
import java.awt.image.*;
 +
import java.awt.geom.*;
 +
 +
 +
void draw() {
 +
BufferedImage bi = new BufferedImage(200, 200, BufferedImage.TYPE_INT_RGB);
 +
Graphics2D g2d = bi.createGraphics();
 +
Line2D line = new Line2D.Double(0, 0, bi.getWidth(), bi.getHeight());
 +
g2d.setColor(Color.blue);
 +
g2d.setStroke(new BasicStroke(100));
 +
g2d.draw(line);
 +
fish1.setImageContent(bi);
 +
}
 +
 +
draw();
 +
</zscript>
 +
</window>
 +
</zk></source>
 +
{{versionSince| 5.0.0}}
  
 +
=Inherited Functions=
  
 +
Please refer to [[ZK_Component_Reference/Base_Components/LabelImageElement| LabelImageElement]] for inherited functions.
 +
=Supported Events=
  
−
=Supported events=
+
{| class='wikitable' | width="100%"
−
 
 
−
{| border="1" | width="100%"
 
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
Line 59: Line 85:
 
| None
 
| None
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/LabelImageElement#Supported_Events | LabelImageElement]]
  
 
=Supported Children=
 
=Supported Children=
Line 64: Line 91:
 
  *None
 
  *None
  
−
=Use cases=
+
=Use Cases=
  
−
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 75: Line 102:
  
 
=Version History=
 
=Version History=
−
 
+
{{LastUpdated}}
−
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
−
| &nbsp;
+
| 5.0.0
−
| &nbsp;
+
| January 2010
−
| &nbsp;
+
| Fisheye supports dynamic images
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Latest revision as of 07:43, 14 January 2022


DocumentationZK Component ReferenceEssential ComponentsFisheye
Fisheye

Fisheye

Employment/Purpose

A fisheye item

Example

ZKComRef fisheyebar.png 

<zk>
	<div height="450px">
		<checkbox label="Attach icon edge at bottom"
			onCheck='fsb.attachEdge=self.checked?"bottom":"top"' />
		<checkbox label="Vertical orient"
			onCheck='fsb.orient=self.checked?"vertical":"horizontal"' />
		<separator bar="true" />
		<fisheyebar id="fsb" style="position:absolute;margin:80px 150px;"
			attachEdge="top" itemWidth="80" itemHeight="80" itemMaxHeight="160" itemMaxWidth="160">
			<fisheye image="/img/Centigrade-Widget-Icons/FolderABlue-128x128.png" label="Folder"
				onClick="alert(self.label)" />
			<fisheye image="/img/Centigrade-Widget-Icons/ReadingGlass-128x128.png" label="Reading Glasses"
				onClick="alert(self.label)" />
			<fisheye image="/img/Centigrade-Widget-Icons/Briefcase-128x128.png" label="Project"
				onClick="alert(self.label)" />
			<fisheye image="/img/Centigrade-Widget-Icons/MailboxFlag-128x128.png"
				label="Email" onClick="alert(self.label)" />
			<fisheye image="/img/Centigrade-Widget-Icons/Globe-128x128.png"
				label="Globe" onClick="alert(self.label)" />
			<fisheye image="/img/Centigrade-Widget-Icons/Spyglass-128x128.png" label="Spyglass"
				onClick="alert(self.label)" />
		</fisheyebar>
	</div>
</zk>

Properties

Dynamic Images

For example you can create an image using the Java2D libraries and then set the content of the fisheye to the created image, below is an example of how to do this. 

<?page title="Auto Generated index.zul"?>
<zk>
	<window title="test of autodisable">
		<fisheyebar><fisheye id="fish1" /></fisheyebar>
		
		<zscript>
		import java.awt.*;
		import java.awt.image.*;
		import java.awt.geom.*;
		
		
		void draw() {
			BufferedImage bi = new BufferedImage(200, 200, BufferedImage.TYPE_INT_RGB);
			Graphics2D g2d = bi.createGraphics();
			Line2D line = new Line2D.Double(0, 0, bi.getWidth(), bi.getHeight());
			g2d.setColor(Color.blue);
			g2d.setStroke(new BasicStroke(100));
			g2d.draw(line);
			fish1.setImageContent(bi);
		}
		
		draw();
		</zscript> 
	</window>
</zk>

Since 5.0.0

Inherited Functions

Please refer to LabelImageElement for inherited functions.

Supported Events

Name
Event Type
None None

Supported Children

*None

Use Cases

Version Description Example Location
     

Version History

Last Update : 2022/01/14


Version Date Content
5.0.0 January 2010 Fisheye supports dynamic images



Last Update : 2022/01/14

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


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Component_Reference/Essential_Components/Fisheye&oldid=53034"