Introduction

We’re pleased to introduce you a new, flexible and lightweight ZK Addon – Splitpane.
Splitpane is a layout container, which is used to divide a component into two components. These two components inside Splitpane, the splitpanes, 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 splitpanes into the outer Splitpane.

In the following demo, we will simply demonstrate the benefits of ZK Splitpane.

ZK Splitpane Demo

The demo below demonstrates the flexibility of the nested splitpanes.

Required Configuration

Versions:

• ZK CE: 8.0.0 or later
• ZK PE and EE: (Optional)

ZUL

<splitpane vflex="1" hflex="1" collapse="before">
    <window title="Window 1" border="normal" vflex="2">
        Hello, World!
    </window>
    <window title="Window 2" border="normal" vflex="1">
        Hello, World!
    </window>
</splitpane>

Splitpane only supports two children components, and its orientation is “vertical” by default. To initialize the default size of the two divisions, it’s recommended to use vflex and hflex in these children components.

Splitpane Component

We provide several APIs to set splitpane:

• setOrient(String orient)
  Supported value: (default) “vertical” or “horizontal”. The orientation of splitpane will be determined by this attribute.
• setCollapse(String collapse)
  Supported value: (default) “none”, “before” or “after”. Set which side of the splitter to collapse when its grippy is clicked.
  If this attribute is not specified, then the splitter will not cause a collapse.
• setOpen(boolean open)
  Supported value: (default) true, or false. Opens or collapses the splitter. This method would not be able to work if the collapse attribute is not specified.
• setWidths(String widths) and setHeights(String heights)
  Set the widths/heights, which is a list of numbers separated by comma to denote the width/height of two areas in splitpane.
  Notice that it should not be used while using flex in the children component.
• setMinWidths(String minWidths) and setMinHeights(String minHeights)
  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.
  

This component is currently in its Beta. If you are interested in using this component please contact us at [email protected].

Downloads

The whole demo project can be found on Github project.