Portallayout"

From Documentation
m (correct highlight (via JWB))
(28 intermediate revisions by 10 users not shown)
Line 3: Line 3:
 
= Portallayout =
 
= Portallayout =
  
*Demonstration: [http://www.zkoss.org/zkdemo/userguide/#l4 Portallayout]
+
*Demonstration: [http://www.zkoss.org/zkdemo/layout/portal_layout Portallayout]
 
*Java API: <javadoc>org.zkoss.zkmax.zul.Portallayout</javadoc>
 
*Java API: <javadoc>org.zkoss.zkmax.zul.Portallayout</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkmax.layout.Portallayout</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 =
Space is a Separator with the orient default to "horizontal".
+
A <code>portallayout</code> lays out a container which can have multiple columns, and each column might have any number panels placed vertically with different heights. <code>Portallayout</code> allows users to drag-and-drop a panel to change its location.
In other words, <space> is equivalent to <separator orient="horizontal">
 
  
 +
When using <code>Portallayout</code>, you have to assign the width (either percentage or pixel) to each <code>Portalchildren</code>, or the result might depend on the browser, and not as expected.
 +
 +
= Example =
 +
[[Image:ZKComRef_Portallayout_Example.PNG]]
  
  
= Example =
+
<source lang="xml" >
 +
    <portallayout height="100%">
 +
        <portalchildren width="50%">
 +
            <panel height="50%" title="Demo">
 +
                <panelchildren>
 +
                    <iframe height="100%" width="100%" src="https://www.zkoss.org/zkdemo"/>
 +
                </panelchildren>
 +
            </panel>
 +
            <panel height="50%" title="Doc">
 +
                <panelchildren>
 +
                    <iframe height="100%" width="100%" src="https://www.zkoss.org/documentation"/>
 +
                </panelchildren>
 +
            </panel>
 +
        </portalchildren>
 +
        <portalchildren width="50%">
 +
            <panel height="100%" title="ZK">
 +
                <panelchildren>
 +
                    <iframe  height="100%" width="100%" src="https://www.zkoss.org/"/>
 +
                </panelchildren>
 +
            </panel>
 +
        </portalchildren>
 +
    </portallayout>
 +
</source>
  
 +
= Row-based layout =
 +
{{versionSince|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,
  
 +
<source lang="xml" highlight="1">
 +
<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>
 +
</source>
  
=Supported events=
+
=Supported Events=
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <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.
 +
|-
 +
| <center>onPortalDrop</center>
 +
| '''Event:''' <javadoc>org.zkoss.zkmax.ui.event.PortalDropEvent</javadoc>
 +
Represents an event after a portal being dropped and before a portal being moved. (Since: 9.5.1)
 
|}
 
|}
 +
*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=
+
{| class='wikitable' | width="100%"
 
 
{| border='1px' | width="100%"
 
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
| 5.0+
+
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
Line 44: Line 104:
  
 
=Version History=
 
=Version History=
 +
{{LastUpdated}}
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-
| 5.x.x
+
| 7.0.0
| x/x/20xx
+
| October, 2013
| Initialization
+
| [http://tracker.zkoss.org/browse/ZK-1687 Portallayout supports row based orientation]
 +
|-
 +
| 9.5.1
 +
| November, 2020
 +
| [https://tracker.zkoss.org/browse/ZK-4423 Kanban missing options to listen to portallayout onPortalMove without affecting the UI]
 
|}
 
|}
  
 
{{ZKComponentReferencePageFooter}}
 
{{ZKComponentReferencePageFooter}}

Revision as of 08:49, 19 January 2022

Portallayout

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 height="100%">
        <portalchildren width="50%">
            <panel height="50%" title="Demo">
                <panelchildren>
                    <iframe height="100%" width="100%" src="https://www.zkoss.org/zkdemo"/>
                </panelchildren>
            </panel>
            <panel height="50%" title="Doc">
                <panelchildren>
                    <iframe height="100%" width="100%" src="https://www.zkoss.org/documentation"/>
                </panelchildren>
            </panel>
        </portalchildren>
        <portalchildren width="50%">
            <panel height="100%" title="ZK">
                <panelchildren>
                    <iframe  height="100%" width="100%" src="https://www.zkoss.org/"/>
                </panelchildren>
            </panel>
        </portalchildren>
    </portallayout>

Row-based layout

Since 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.

onPortalDrop
Event: PortalDropEvent

Represents an event after a portal being dropped and before a portal being moved. (Since: 9.5.1)

Supported Children

* Portalchildren

Use Cases

Version Description Example Location
     

Version History

Last Update : 2022/01/19


Version Date Content
7.0.0 October, 2013 Portallayout supports row based orientation
9.5.1 November, 2020 Kanban missing options to listen to portallayout onPortalMove without affecting the UI



Last Update : 2022/01/19

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