Portallayout"

From Documentation
 
(7 intermediate revisions by the same user not shown)
Line 7: Line 7:
 
*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]]
 
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Portallayout| Portallayout]]
*{{ZK EE}}
+
 
 +
{{ZK EE}}
  
 
= Employment/Purpose =
 
= Employment/Purpose =
Line 42: Line 43:
 
</source>
 
</source>
  
= Row-based layout =
+
= orient =
 
{{versionSince|7.0.0}}
 
{{versionSince|7.0.0}}
 +
Default: vertical
 +
If you want the portallayout to be displayed as a row-based layout, you can specify <code>orient="horizontal"</code>.
  
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">
 
<source lang="xml" highlight="1">
 
<portallayout orient="horizontal">
 
<portallayout orient="horizontal">
 
<portalchildren width="50%">
 
<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>
 
<portalchildren width="50%">
 
<portalchildren width="50%">
<panel height="150px" title="ZK">
+
                ...
<panelchildren>
 
<iframe width="100%" src="http://www.zkoss.org/"/>
 
</panelchildren>
 
</panel>
 
 
</portalchildren>
 
</portalchildren>
 
</portallayout>
 
</portallayout>
 
</source>
 
</source>
 +
 +
= Draggable Panel by Default=
 +
<code><panel></code> is <code>draggable="true"</code> without explicitly specifying when it's inside a Portallayout. You can disable this by <code>draggable="false"</code>.
  
 
=Supported Events=
 
=Supported Events=
Line 79: Line 68:
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
 +
|-
 +
| <center>onPortalDrop</center>
 +
| {{versionSince| 9.5.1}}
 +
'''Event:''' <javadoc>org.zkoss.zkmax.ui.event.PortalDropEvent</javadoc>
 +
 +
Represents an event after a portal is dropped and before a portal is moved.
 
|-
 
|-
 
| <center>onPortalMove</center>
 
| <center>onPortalMove</center>
 
| '''Event:''' <javadoc>org.zkoss.zkmax.ui.event.PortalMoveEvent</javadoc>
 
| '''Event:''' <javadoc>org.zkoss.zkmax.ui.event.PortalMoveEvent</javadoc>
 
Represents an event caused by a portal being moved.
 
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]]
+
 
 +
* Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]]
  
 
=Supported Children=
 
=Supported Children=
 
  *[[ZK_Component_Reference/Layouts/Portallayout/Portalchildren | Portalchildren]]
 
  *[[ZK_Component_Reference/Layouts/Portallayout/Portalchildren | Portalchildren]]
 
=Use Cases=
 
 
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
|-
 
| &nbsp;
 
| &nbsp;
 
| &nbsp;
 
|}
 
  
 
=Version History=
 
=Version History=
{{LastUpdated}}
 
  
 
{| class='wikitable' | width="100%"
 
{| class='wikitable' | width="100%"

Latest revision as of 04:24, 26 July 2023

Portallayout

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

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


    <portallayout height="100%">
        <portalchildren width="50%">
            <panel height="50%" title="Calendar" border="normal">
                <panelchildren>
                    <calendar/>
                </panelchildren>
            </panel>
            <panel height="50%" title="Colorbox" border="normal">
                <panelchildren>
                    <colorbox/>
                </panelchildren>
            </panel>
        </portalchildren>
        <portalchildren width="50%">
            <panel height="100%" title="Editor" border="normal">
                <panelchildren>
                    <tbeditor/>
                </panelchildren>
            </panel>
        </portalchildren>
    </portallayout>

orient

Since 7.0.0

Default: vertical

If you want the portallayout to be displayed as a row-based layout, you can specify orient="horizontal".


<portallayout orient="horizontal">
	<portalchildren width="50%">
		...
	</portalchildren>
	<portalchildren width="50%">
                ...
	</portalchildren>
</portallayout>

Draggable Panel by Default

<panel> is draggable="true" without explicitly specifying when it's inside a Portallayout. You can disable this by draggable="false".

Supported Events

Name
Event Type
onPortalDrop
Since 9.5.1

Event: PortalDropEvent

Represents an event after a portal is dropped and before a portal is moved.

onPortalMove
Event: PortalMoveEvent

Represents an event caused by a portal being moved.

Supported Children

* Portalchildren

Version History

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 : 2023/07/26

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