Rowlayout"

From Documentation
(Created page with "{{ZKComponentReferencePageHeader}} = Rowlayout = *Demonstration: N/A *Java API: <javadoc>org.zkoss.zul.Vlayout</javadoc> *JavaScript API: <javadoc directory="jsdoc">zul.layout....")
 
Line 3: Line 3:
 
= Rowlayout =
 
= Rowlayout =
  
−
*Demonstration: N/A
+
*Demonstration: [http://www.zkoss.org/zkdemo/layout/portal_layout Portallayout]
−
*Java API: <javadoc>org.zkoss.zul.Vlayout</javadoc>
+
*Java API: <javadoc>org.zkoss.zkmax.zul.Portallayout</javadoc>
−
*JavaScript API: <javadoc directory="jsdoc">zul.layout.Vlayout</javadoc>
+
*JavaScript API: <javadoc directory="jsdoc">zkmax.layout.Portallayout</javadoc>
 +
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Portallayout| Portallayout]]
 +
*{{ZK EE}}
  
 
= Employment/Purpose =
 
= Employment/Purpose =
 +
A <tt>portallayout</tt> lays out a container which can have multiple columns, and each column might have any number panels placed vertically with different heights. <tt>Portallayout</tt> allows users to drag-and-drop a panel to change its location.
  
−
The vlayout component is a simple vertical oriented layout. Added components will be placed underneath each other in a column.
+
When using <tt>Portallayout</tt>, you have to assign the width (either percentage or pixel) to each <tt>Portalchildren</tt>, or the result might depend on the browser, and not as expected.
−
 
 
−
Notice that hlayout and vlayout do not support splitter, alignment and packing. If you need them, please use [[ZK Component Reference/Layouts/Hbox]] and [[ZK Component Reference/Layouts/Vbox]] instead.
 
  
 
= Example =
 
= Example =
 +
[[Image:ZKComRef_Portallayout_Example.PNG]]
  
−
[[Image:ZKComRef_Hlayout_Simple_Example.PNG]]
 
  
 
<source lang="xml" >
 
<source lang="xml" >
−
<zk>
+
<portallayout>
−
    <vlayout>
+
<portalchildren width="50%">
−
        <button label="Button 1"/>
+
<panel height="150px" title="Yahoo">
−
        <button label="Button 2"/>
+
<panelchildren>
−
    </vlayout>
+
<iframe width="100%" src="http://www.yahoo.com/"/>
−
    <hlayout>
+
</panelchildren>
−
        <button label="Button 3"/>
+
</panel>
−
        <button label="Button 4"/>
+
<panel height="300px" title="Google">
−
    </hlayout>
+
<panelchildren>
−
</zk>
+
<iframe width="100%" src="http://www.google.com/"/>
 +
</panelchildren>
 +
</panel>
 +
</portalchildren>
 +
<portalchildren width="50%">
 +
<panel height="150px" title="ZK">
 +
<panelchildren>
 +
<iframe width="100%" src="http://www.zkoss.org/"/>
 +
</panelchildren>
 +
</panel>
 +
</portalchildren>
 +
</portallayout>
 
</source>
 
</source>
  
−
= Spacing =
+
= Row based layout =
 +
[Since ZK 7.0.0]
  
−
The default spacing between two child components is <tt>0.3em</tt>. You could modify it if you like:
+
If you want the portallayout displayed as row based layout, you can specify the ''orient'' property to ''horizontal''.
 +
Default is ''vertical''.
  
−
<source lang="xml">
+
For example,
−
<hlayout spacing="0">
+
 
−
  <textbox/>
+
<source lang="xml" high="1">
−
  <button label="Click Me"/>
+
<portallayout orient="horizontal">
−
</hlayout>
+
<portalchildren width="50%">
 +
<panel height="150px" title="Yahoo">
 +
<panelchildren>
 +
<iframe width="100%" src="http://www.yahoo.com/"/>
 +
</panelchildren>
 +
</panel>
 +
<panel height="300px" title="Google">
 +
<panelchildren>
 +
<iframe width="100%" src="http://www.google.com/"/>
 +
</panelchildren>
 +
</panel>
 +
</portalchildren>
 +
<portalchildren width="50%">
 +
<panel height="150px" title="ZK">
 +
<panelchildren>
 +
<iframe width="100%" src="http://www.zkoss.org/"/>
 +
</panelchildren>
 +
</panel>
 +
</portalchildren>
 +
</portallayout>
 
</source>
 
</source>
  
−
=Supported events=
+
=Supported Events=
  
 
{| border="1" | width="100%"
 
{| border="1" | width="100%"
Line 47: Line 80:
 
! <center>Event Type</center>
 
! <center>Event Type</center>
 
|-
 
|-
−
| None
+
| <center>onPortalMove</center>
−
| None
+
| '''Event:''' <javadoc>org.zkoss.zkmax.ui.event.PortalMoveEvent</javadoc>
 +
Represents an event caused by a portal being moved.
 +
 
 
|}
 
|}
 +
*Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
  
 
=Supported Children=
 
=Supported Children=
 +
*[[ZK_Component_Reference/Layouts/Portallayout/Portalchildren | Portalchildren]]
  
−
*ALL
+
=Use Cases=
−
 
 
−
=Use cases=
 
  
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
Line 67: Line 102:
 
=Version History=
 
=Version History=
 
{{LastUpdated}}
 
{{LastUpdated}}
 +
 
{| border='1px' | width="100%"
 
{| border='1px' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
−
| 5.0.4
+
| 7.0.0
−
| August, 2010
+
| October, 2013
−
| new added component
+
| [http://tracker.zkoss.org/browse/ZK-1687 Portallayout supports row based orientation]
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Revision as of 07:30, 6 May 2015


DocumentationZK Component ReferenceLayoutsRowlayout
Rowlayout

Rowlayout

Employment/Purpose

A portallayout lays out a container which can have multiple columns, and each column might have any number panels placed vertically with different heights. Portallayout allows users to drag-and-drop a panel to change its location.

When using Portallayout, you have to assign the width (either percentage or pixel) to each Portalchildren, or the result might depend on the browser, and not as expected.

Example

ZKComRef Portallayout Example.PNG 


<portallayout>
	<portalchildren width="50%">
		<panel height="150px" title="Yahoo">
			<panelchildren>
				<iframe width="100%" src="http://www.yahoo.com/"/>
			</panelchildren>
		</panel>
		<panel height="300px" title="Google">
			<panelchildren>
				<iframe width="100%" src="http://www.google.com/"/>
			</panelchildren>
		</panel>
	</portalchildren>
	<portalchildren width="50%">
		<panel height="150px" title="ZK">
			<panelchildren>
				<iframe width="100%" src="http://www.zkoss.org/"/>
			</panelchildren>
		</panel>
	</portalchildren>
</portallayout>

Row based layout

[Since ZK 7.0.0]

If you want the portallayout displayed as row based layout, you can specify the orient property to horizontal. 

Default is vertical.

For example, 

<portallayout orient="horizontal">
	<portalchildren width="50%">
		<panel height="150px" title="Yahoo">
			<panelchildren>
				<iframe width="100%" src="http://www.yahoo.com/"/>
			</panelchildren>
		</panel>
		<panel height="300px" title="Google">
			<panelchildren>
				<iframe width="100%" src="http://www.google.com/"/>
			</panelchildren>
		</panel>
	</portalchildren>
	<portalchildren width="50%">
		<panel height="150px" title="ZK">
			<panelchildren>
				<iframe width="100%" src="http://www.zkoss.org/"/>
			</panelchildren>
		</panel>
	</portalchildren>
</portallayout>

Supported Events

Name
Event Type
onPortalMove
 Event: PortalMoveEvent

Represents an event caused by a portal being moved.

Supported Children

* Portalchildren

Use Cases

Version Description Example Location
     

Version History

Last Update : 2015/05/06


Version Date Content
7.0.0 October, 2013 Portallayout supports row based orientation



Last Update : 2015/05/06

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/Layouts/Rowlayout&oldid=43287"