AfterSizeEvent"

From Documentation
m (Created page with "{{ZKComponentReferencePageHeader}} = AfterSizeEvent = *Demonstration: N/A *Java API: <javadoc>org.zkoss.zk.ui.event.AfterSizeEvent</javadoc> *JavaScript API: N/A = Employment/...")
 
 
(7 intermediate revisions by 3 users not shown)
Line 3: Line 3:
 
= AfterSizeEvent =
 
= AfterSizeEvent =
  
*Demonstration: N/A
+
*JavaDoc:<javadoc>org.zkoss.zk.ui.event.AfterSizeEvent</javadoc>
*Java API: <javadoc>org.zkoss.zk.ui.event.AfterSizeEvent</javadoc>
+
 
*JavaScript API: N/A
+
{{versionSince | 6.5.2}}
  
 
= Employment/Purpose =
 
= Employment/Purpose =
  
Represents an event that resize a component and provides the new size of the component.
+
Represents an event that resizes and provides the new size of a component.
  
 
= Example =
 
= Example =
Resize the window to show different size of image accordingly.
+
Resize the window component to show different sized images accordingly.
<source lang="xml" high="3">
+
<source lang="xml" highlight="3">
<window title="After Size Test" border="normal" width="250px" height="200px" maximizable="true" sizable="true">
+
<window title="AfterSizeEvent" border="normal" width="250px" height="200px"  
<custom-attributes org.zkoss.zul.image.preload="true" />
+
maximizable="true" sizable="true">
<attribute name="onAfterSize"><![CDATA[
+
    <attribute name="onAfterSize"><![CDATA[
 
int width = event.getWidth();
 
int width = event.getWidth();
if (width >= 600)
+
if (width >= 600){
image.setSrc("/image/large.jpg");
+
Clients.log(">600");
else if (width >= 400 && width < 600)
+
}else if (width >= 400 && width < 600){
image.setSrc("/image/medium.jpg");
+
Clients.log("400 ~ 600");
else
+
}else{
image.setSrc("/image/small.jpg");
+
Clients.log("<400");
 +
        }
 
]]></attribute>
 
]]></attribute>
<image id="image" src="/image/small.jpg" />
 
 
</window>
 
</window>
 
</source>
 
</source>
 
=Supported events=
 
 
{| border="1" | width="100%"
 
! <center>Name</center>
 
! <center>Event Type</center>
 
|-
 
| None
 
| None
 
|}
 
 
=Supported Children=
 
 
*NONE
 
 
=Use cases=
 
 
{| border='1px' | width="100%"
 
! Version !! Description !! Example Location
 
|-
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
|}
 
  
 
=Version History=
 
=Version History=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Latest revision as of 01:46, 30 August 2022


AfterSizeEvent

AfterSizeEvent

Since 6.5.2

Employment/Purpose

Represents an event that resizes and provides the new size of a component.

Example

Resize the window component to show different sized images accordingly.

<window title="AfterSizeEvent" border="normal" width="250px" height="200px" 
maximizable="true" sizable="true">
    <attribute name="onAfterSize"><![CDATA[
		int width = event.getWidth();
		if (width >= 600){
			Clients.log(">600");
		}else if (width >= 400 && width < 600){
			Clients.log("400 ~ 600");
		}else{
			Clients.log("<400");
        }
	]]></attribute>
</window>

Version History

Version Date Content
6.5.2 March 2013 Add onAfterSize event to get component size



Last Update : 2022/08/30

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