Image"

From Documentation
m
m (correct highlight (via JWB))
 
(One intermediate revision by one other user not shown)
Line 3: Line 3:
 
__TOC__
 
__TOC__
  
An <tt>image</tt> component is used to display a client side image. You can use the <tt>src</tt> attribute to specify a URI where the image is located. This approach is similar to HTML and is useful if you want to display a static image, or any image that can be identified by URL.
+
An <code>image</code> component is used to display a client side image. You can use the <code>src</code> attribute to specify a URI where the image is located. This approach is similar to HTML and is useful if you want to display a static image, or any image that can be identified by URL.
  
 
<image src="/some/my.jpg"/>
 
<image src="/some/my.jpg"/>
Line 13: Line 13:
 
<image src="/my*.png"/>
 
<image src="/my*.png"/>
  
Assuming one of your users is visiting your page with ''de_DE'' as the preferred Locale. Zk will try to locate the image file called <tt>/my_de_DE.png</tt>. If it is not found, it will try <tt>/my_de.png</tt> and finally <tt>/my.png</tt>.
+
Assuming one of your users is visiting your page with ''de_DE'' as the preferred Locale. Zk will try to locate the image file called <code>/my_de_DE.png</code>. If it is not found, it will try <code>/my_de.png</code> and finally <code>/my.png</code>.
  
Please refer to the '''Browser and Locale Dependent URI''' section in the '''Internationalization''' chapter for details.
+
Please refer to the [http://books.zkoss.org/wiki/Internationalization#Browser_and_Locale-Dependent_URI  '''Browser and Locale Dependent URI''' ] section in the '''Internationalization''' chapter for details.
  
Secondly, you could use the <tt>setContent</tt> method to set the content of an image to an <tt>image</tt> component directly. Once assigned, the image displayed at the browser is updated automatically. This approach is useful if an image is generated dynamically.
+
Secondly, you could use the <code>setContent</code> method to set the content of an image to an <code>image</code> component directly. Once assigned, the image displayed at the browser is updated automatically. This approach is useful if an image is generated dynamically.
  
 
For example, you can generate a map for the location specified by a user as demonstrated below.
 
For example, you can generate a map for the location specified by a user as demonstrated below.
Line 37: Line 37:
 
</source>
 
</source>
  
In the above example, we assume you have a class named <tt>MapImage</tt> for generating a map of the specified location.
+
In the above example, we assume you have a class named <code>MapImage</code> for generating a map of the specified location.
  
Notice that the image component accepts the content encapsulated by the <javadoc type="interface">org.zkoss.image.Image</javadoc> format. If the image generated by your tool is not in this format, you can use the <javadoc>org.zkoss.image.AImage</javadoc> class to wrap a binary array of data, a file or an input stream into the <tt>Image</tt> interface.
+
Notice that the image component accepts the content encapsulated by the <javadoc type="interface">org.zkoss.image.Image</javadoc> format. If the image generated by your tool is not in this format, you can use the <javadoc>org.zkoss.image.AImage</javadoc> class to wrap a binary array of data, a file or an input stream into the <code>Image</code> interface.
  
In traditional Web applications, caching a dynamically generated image is complicated, however with the <tt>image</tt> component, you don't need to worry about it. Once the content of an image is assigned, it belongs to the <tt>image</tt> component, and the memory it occupies will be released automatically when the <tt>image</tt> component is no long used.
+
In traditional Web applications, caching a dynamically generated image is complicated, however with the <code>image</code> component, you don't need to worry about it. Once the content of an image is assigned, it belongs to the <code>image</code> component, and the memory it occupies will be released automatically when the <code>image</code> component is no long used.
  
'''Tip:''' If you want to display the content other than an image, say a PDF, you can use the <tt>iframe</tt> component. Please refer to the relevant section for details.
+
'''Tip:''' If you want to display the content other than an image, say a PDF, you can use the <code>iframe</code> component. Please refer to the relevant section for details.
  
===<tt>Image</tt> supports <tt>javax.awt.image.RenderedImage</tt>===
+
===<code>Image</code> supports <code>javax.awt.image.RenderedImage</code>===
  
 
Since version 3.0.7 ZK allows image, button and related components to support RenderedImage directly without a format conversion. Here is the example code,
 
Since version 3.0.7 ZK allows image, button and related components to support RenderedImage directly without a format conversion. Here is the example code,

Latest revision as of 10:44, 19 January 2022

Stop.png This documentation is for an older version of ZK. For the latest one, please click here.


An image component is used to display a client side image. You can use the src attribute to specify a URI where the image is located. This approach is similar to HTML and is useful if you want to display a static image, or any image that can be identified by URL.

<image src="/some/my.jpg"/>

Locale Dependent Image

You can specify "*" for identifying a Locale dependent image. For example, if you have different image for different Locales, you could use the following code.

<image src="/my*.png"/>

Assuming one of your users is visiting your page with de_DE as the preferred Locale. Zk will try to locate the image file called /my_de_DE.png. If it is not found, it will try /my_de.png and finally /my.png.

Please refer to the Browser and Locale Dependent URI section in the Internationalization chapter for details.

Secondly, you could use the setContent method to set the content of an image to an image component directly. Once assigned, the image displayed at the browser is updated automatically. This approach is useful if an image is generated dynamically.

For example, you can generate a map for the location specified by a user as demonstrated below.

<zk>
	Location: <textbox onChange="updateMap(self.value)"/>
	Map: <image id="image"/>
	<zscript><![CDATA[	
		void updateMap(String location) {
			if (location.length() > 0) {
				org.zkoss.image.AImage img = new org.zkoss.image.AImage(location);
				image.setContent(img);
			}
		}
	]]>
	</zscript>
</zk>

In the above example, we assume you have a class named MapImage for generating a map of the specified location.

Notice that the image component accepts the content encapsulated by the Image format. If the image generated by your tool is not in this format, you can use the AImage class to wrap a binary array of data, a file or an input stream into the Image interface.

In traditional Web applications, caching a dynamically generated image is complicated, however with the image component, you don't need to worry about it. Once the content of an image is assigned, it belongs to the image component, and the memory it occupies will be released automatically when the image component is no long used.

Tip: If you want to display the content other than an image, say a PDF, you can use the iframe component. Please refer to the relevant section for details.

Image supports javax.awt.image.RenderedImage

Since version 3.0.7 ZK allows image, button and related components to support RenderedImage directly without a format conversion. Here is the example code,

<window title="Test of Live Image">
	<image id="img"/>
	<zscript>
	import java.awt.*;
	import java.awt.image.*;
	import java.awt.geom.*;
	int x = 10, y = 10;

	void draw(int x1, int y1, int x2, int y2) {
		BufferedImage bi = new BufferedImage(400, 300, BufferedImage.TYPE_INT_RGB);
		Graphics2D g2d = bi.createGraphics();
		Line2D line = new Line2D.Double(x1, y1, x2, y2);
		g2d.setColor(Color.blue);
		g2d.setStroke(new BasicStroke(3));
		g2d.draw(line);
		img.setContent(bi);
	}
	draw(x, y, x += 10, y += 10);
	</zscript>
	<button label="change" onClick="draw(x, y, x += 10, y += 10)"/>
</window>



Last Update : 2022/01/19

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