Splitlayout"

From Documentation
Line 4: Line 4:
  
 
*Demonstration: [https://www.zkoss.org/zkdemo/layout/split_layout Spltlayout]
 
*Demonstration: [https://www.zkoss.org/zkdemo/layout/split_layout Spltlayout]
−
*Java API: <javadoc>org.zkoss.zkmax.zul.Splitter</javadoc>
+
*Java API: <javadoc>org.zkoss.zkmax.zul.Splitlayout</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkmax.layout.Splitter</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zkmax.layout.Splitter</javadoc>
 
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Splitlayout| Splitlayout]]
 
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Splitlayout| Splitlayout]]
Line 10: Line 10:
  
 
= Employment/Purpose =
 
= Employment/Purpose =
−
Splitlayout is a layout container, which is used to divide a component into two components. These two components inside Splitlayout, the splitlayouts, are placed either horizontally or vertically by setting the orientation, and users can easily resize these two viewports by dragging the splitter bar. Also, like other ZK layout components, it supports hflex and vflex, indicating that users can divide the area into three or more spaces by putting the splitlayouts into the outer Splitlayout.
+
Splitlayout is a layout container, which is used to divide a component into two components.  
 +
These two components inside Splitlayout, the splitlayouts, are placed either horizontally or vertically by setting the orientation, and users can easily resize these two viewports by dragging the splitter bar. Also, like other ZK layout components, it supports hflex and vflex, indicating that users can divide the area into three or more spaces by putting the splitlayouts into the outer Splitlayout.
  
 
= Example =
 
= Example =
−
 
  
 
[[Image:ZKComRef_Splitter_Examples.PNG]]  
 
[[Image:ZKComRef_Splitter_Examples.PNG]]  
  
 
<source lang="xml" >
 
<source lang="xml" >
−
<splitlayout vflex="1" hflex="1" collapse="before">
+
    <splitlayout vflex="1" hflex="1">
−
    <window title="Window 1" border="normal" vflex="2">
+
        <div sclass="area" hflex="1" vflex="1">
−
        Hello, World!
+
            <label value="Area 1"/>
−
    </window>
+
        </div>
−
    <window title="Window 2" border="normal" vflex="1">
+
        <splitlayout vflex="1" hflex="1" orient="horizontal" >
−
         Hello, World!
+
            <div sclass="area" vflex="1" hflex="1">
−
    </window>
+
                <label value="Area 2"/>
−
</splitlayout>
+
            </div>
 +
            <div sclass="area" vflex="1" hflex="2">
 +
                <label value="Area 3"/>
 +
            </div>
 +
         </splitlayout>
 +
    </splitlayout>
 
</source>
 
</source>
  
 
=Properties and Features=
 
=Properties and Features=
 +
==Orientation==
 +
The orientation indicates the how these two children container would display in splitlayout.
 +
Supported value: (default) “vertical” or “horizontal”.
 +
 
==Collapse==
 
==Collapse==
−
The collapse property (<javadoc method="setCollapse(java.lang.String)">org.zkoss.zul.Splitter</javadoc>) specifies which side of the splitter is collapsed when its grippy (button) is clicked. If this property is not specified, the splitter will not cause a collapse (and the grippy/button won't appear).
+
The collapse property (<javadoc method="setCollapse(java.lang.String)">org.zkoss.zkmax.zul.Splitlayout</javadoc>) specifies which side of the splitter is collapsed when its grippy (button) is clicked. If this property is not specified, the splitter will not cause a collapse.
  
−
Allowed values and their meaning are as follows.
+
Supported value: (default) “none”, “before” or "after".
 +
"before" means that the splitter in splitlayout would collapse to the left/top, and "after means splitter in splitlayout would collapse to the right/button.
  
−
{| border="1px"
 
−
! <center>Value</center>
 
−
! <center>Description</center>
 
−
|-
 
−
| none
 
−
| No collapsing occurs.
 
−
|-
 
−
| before
 
−
| When the grippy is clicked, the element immediately before the splitter in the same parent is collapsed so that its width or height is 0.
 
−
|-
 
−
| after
 
−
| When the grippy is clicked, the element immediately after the splitter in the same parent is collapsed so that its width or height is 0.
 
−
|}
 
 
==Open==
 
==Open==
−
 
+
This method would not be able to work if the "collapse" attribute is not specified.
−
To know whether a splitter is collapsed, you can check the value of the <tt>open</tt> property (<javadoc method="isOpen()">org.zkoss.zul.Splitter</javadoc>). To open or collapse dynamically, you are able to set the value of the <tt>open</tt> property (<javadoc method="setOpen(boolean)">org.zkoss.zul.Splitter</javadoc>).
 
  
 
===onOpen Event===
 
===onOpen Event===
 +
When a splitlayout is collapsed or opened by a user, the <tt>onOpen</tt> event (<javadoc>org.zkoss.zk.ui.event.OpenEvent</javadoc>) is sent to the application.
  
−
When a splitter is collapsed or opened by a user, the <tt>onOpen</tt> event (<javadoc>org.zkoss.zk.ui.event.OpenEvent</javadoc>) is sent to the application.
+
==Widths and Height==
−
 
+
Use setWidths(String widths) and setHeights(String heights) to set the widths/heights,
−
==OS Styling==
+
which is a list of numbers separated by comma to denote the width/height of two areas in splitlayout.
−
If you want to change the styling to be more similar to OS's look as follows.
+
Notice that it should not be used while using flex in the children component.
−
 
 
−
[[File:DrSplitterOS.png]]
 
−
 
 
−
You could specify <javadoc method="setZclass(java.lang.String)">org.zkoss.zk.ui.HtmlBasedComponent</javadoc> with <code>z-splitter-os-ver</code> or <code>z-splitter-os-hor</code>, depending on the orient is vertical or horizontal.
 
  
−
Here is an example that switches the styling between the default and OS-look:
+
==MinWidths and MinHeight==
−
 
+
User setMinWidths(String minWidths) and setMinHeights(String minHeights) to sets the minimum widths/heights in the same format of setWidths/setHeights. When user drag the splitter, the two areas will not be smaller than the minWidths/minHeights.
−
<source lang="xml">
 
−
<window>
 
−
<panel title="Splitter" border="normal" width="500px">
 
−
<panelchildren>
 
−
<hbox spacing="0" width="100%" height="100%">
 
−
<vbox spacing="0" width="100%" heights="60px,60px">
 
−
Column 1-1: The left-top box. To know whether a splitter
 
−
is collapsed, you can listen to the onOpen event.
 
−
<splitter id="s1" collapse="before"/>
 
−
Column 1-2: You can enforce to open or collapse programming
 
−
by calling setOpen method.
 
−
</vbox>
 
−
<splitter id="s2" collapse="before"/>
 
−
Column 2: Whether a splitter allows users to open or collapse
 
−
depending on the collapse attribue.
 
−
</hbox>
 
−
</panelchildren>
 
−
</panel>
 
−
<button label="change style">
 
−
<attribute name="onClick">
 
−
if ("z-splitter-ver".equals(s1.getZclass()))
 
−
s1.setZclass("z-splitter-os-ver");
 
−
else
 
−
s1.setZclass("z-splitter-ver");
 
−
if ("z-splitter-hor".equals(s2.getZclass()))
 
−
s2.setZclass("z-splitter-os-hor");
 
−
else
 
−
s2.setZclass("z-splitter-hor");
 
−
</attribute>
 
−
</button>
 
−
</window>
 
−
</source>
 
  
 
=Supported Events=
 
=Supported Events=
Line 110: Line 71:
 
|}
 
|}
 
*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 Molds=
 
−
Available molds of a component are defined in lang.xml embedded in zul.jar.
 
−
{| border="1" | width="100%"
 
−
! <center>Name</center>
 
−
! <center>Snapshot</center>
 
−
|-
 
−
| <center>default</center>
 
−
|[[Image:splitter_mold_default.png ]]
 
−
|-
 
−
| <center>os</center>
 
−
|[[Image:splitter_mold_os.png ]]
 
−
|}
 
−
 
−
=Supported Children=
 
−
 
−
*NONE
 
−
 
−
=Use Cases=
 
−
 
−
{| border='1px' | width="100%"
 
−
! Version !! Description !! Example Location
 
−
|-
 
−
| 5.0
 
−
| Used to seperate contents within hbox/vbox.
 
−
| http://www.zkoss.org/zksandbox/userguide/#l13
 
−
|}
 
  
 
=Version History=
 
=Version History=

Revision as of 08:49, 6 July 2018


DocumentationZK Component ReferenceLayoutsSplitlayout
Splitlayout

Splitlayout

Employment/Purpose

Splitlayout is a layout container, which is used to divide a component into two components. These two components inside Splitlayout, the splitlayouts, are placed either horizontally or vertically by setting the orientation, and users can easily resize these two viewports by dragging the splitter bar. Also, like other ZK layout components, it supports hflex and vflex, indicating that users can divide the area into three or more spaces by putting the splitlayouts into the outer Splitlayout.

Example

ZKComRef Splitter Examples.PNG 

    <splitlayout  vflex="1" hflex="1">
        <div sclass="area" hflex="1" vflex="1">
            <label value="Area 1"/>
        </div>
        <splitlayout vflex="1" hflex="1" orient="horizontal" >
            <div sclass="area" vflex="1" hflex="1">
                <label value="Area 2"/>
            </div>
            <div sclass="area" vflex="1"  hflex="2">
                <label value="Area 3"/>
            </div>
        </splitlayout>
    </splitlayout>

Properties and Features

Orientation

The orientation indicates the how these two children container would display in splitlayout. Supported value: (default) “vertical” or “horizontal”.

Collapse

The collapse property (Splitlayout.setCollapse(String)) specifies which side of the splitter is collapsed when its grippy (button) is clicked. If this property is not specified, the splitter will not cause a collapse.

Supported value: (default) “none”, “before” or "after". "before" means that the splitter in splitlayout would collapse to the left/top, and "after means splitter in splitlayout would collapse to the right/button.

Open

This method would not be able to work if the "collapse" attribute is not specified.

onOpen Event

When a splitlayout is collapsed or opened by a user, the onOpen event (OpenEvent) is sent to the application.

Widths and Height

Use setWidths(String widths) and setHeights(String heights) to set the widths/heights, 

which is a list of numbers separated by comma to denote the width/height of two areas in splitlayout.

Notice that it should not be used while using flex in the children component.

MinWidths and MinHeight

User setMinWidths(String minWidths) and setMinHeights(String minHeights) to sets the minimum widths/heights in the same format of setWidths/setHeights. When user drag the splitter, the two areas will not be smaller than the minWidths/minHeights.

Supported Events

Name
Event Type
onOpen
Event: OpenEvent

When a splitter is collapsed or opened by a user, the onOpen event is sent to the application.

Version History

Last Update : 2018/07/06


Version Date Content
     



Last Update : 2018/07/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/Splitlayout&oldid=47793"