​​We noticed an interesting library GoldenLayout and find it useful, so here it is, a flexible and powerful layout component is now presented in ZK 8.6 – the GoldenLayout component.

Though ZK already have many useful layout components such as cross browser testing, BorderLayout and TableLayout for arranging view, GoldenLayout provides us with more choices for web view layout. ​​GoldenLayout is a docker type layout manager, users can arrange panels by drag and drop, resize the panels with splitters or even stack all panels together.

There are two new components introduced in this GoldenLayout structure, GoldenLayout and GoldenPanel. A GoldenLayout is a root component, and accepts only GoldenPanel as its child. The GoldenPanels are listed in a flat structure, which means the order of the GoldenPanels inside the GoldenLayout is not relevant to the actual layout. The layout is defined in a GoldenLayout attribute areas, which is a very straightforward way to layout the panels.  You will be seeing some examples in the following sections.

GoldenLayout Demo Video

The demo below shows how the GoldenLayout works.

Required Configuration

Versions:

• ZK: 8.6.0.FL.20181029 or later

example.zul

<goldenlayout id="gl" hflex="1" vflex="1" orient="vertical">
    <attribute name="areas">
        A B C
        A B C
        D D D
    </attribute>
    <goldenpanel id="project" area="A" title="Project" closable="false">
        //omitted
    </goldenpanel>
    <goldenpanel id="files" area="A" title="Files">
        //omitted
    </goldenpanel>
    <goldenpanel id="main" area="B" title="Main" droppable="false">
        //omitted
    </goldenpanel>
    <goldenpanel id="side" area="C" title="Side">
        //omitted
    </goldenpanel>
    <goldenpanel id="console" area="D" title="Console" draggable="true">
        //omitted
    </goldenpanel>
</goldenlayout>

GoldenLayout attributes:

• areas: In line 2, this attribute is to specify the initial rendering  layout of the GoldenLayout component. The format is to separate each area by white space, and separate each row by line break.
  • Notice that this areas attribute is only for initial rendering, it is not being maintained after user re-arranges the panels.
  • Also the areas has a sugar feature for flex sizing. If the areas is A A B, hflex="2" will automatically be assigned to the GoldenPanels which area is A, and hflex="1" for those which area is B. Note that in the case where hflex or vflex is specified explicitly on the GoldenPanel component on the initial rendering, it will overwrite the proportion assigned to the areas.
    • For example, if <goldenLayout areas="A A B">, having a child <goldenPanel area="A" hflex="3">, A and B will have a width of 3:1.
• orient: In line 1, this is the fist dividing orientation of the GoldenLayout layout.
  For example if the areas is
  A A B
  A A B
  C C DThis could be divide with two ways,
  • vertical:
    
  • horizontal:
    
  • We can see the differences above. While dragging the splitter between A and B, in the vertical dividing orientation, it’s actually the same splitter between C and D. So that B and D share the same width, A and C share the same width.

GoldenPanel attributes:

The GoldenPanel in GoldenLayout is designed in a flat manner. All the GoldenPanel should be directly added as an child of the GoldenLayout, and the order of these GoldenPanels only represents the stacking order if they are meant to be stacked.

• area: in line 7, this is the location of this GoldenPanel inside the GoldenLayout. We could see, in line 7 the area is set to A, therefore ZK renders this GoldenPanel to the location A in the areas attribute of the GoldenLayout. GoldenPanels with the same area will be stacked in the order as how they are added at initial rendering.
• closable: in line 7, representing whether this GoldenPanel is closable or not.
• draggable: in line 19, set whether this GoldenPanel is draggable. If false, the GoldenPanel could not be dragged away from the current location.
• droppable: in line 13, represents whether this GoldenPanel is droppable by other GoldenPanels. If false, no other GoldenPanels could be dropped on this GoldenPanel.

Major APIs introduction

GoldenLayout

• addPanel
  • addPanel(GoldenPanel goldenPanel, int col, int row, String region)
  • addPanel(GoldenPanel goldenPanel, String area, String region)
  • addPanel(GoldenPanel goldenPanel, GoldenPanel targetGoldenPanel, String region)
  • addPanelToRoot(GoldenPanel goldenPanel, String region)
  • movePanel(GoldenPanel goldenPanel, int col, int row, String region)
  • movePanel(GoldenPanel goldenPanel, String area, String region)
  • movePanel(GoldenPanel goldenPanel, GoldenPanel targetGoldenPanel, String region)
  • movePanelToRoot(GoldenPanel goldenPanel, String region)
    • Among these GoldenPanel adding and moving APIs, the goldenPanel attribute is the GoldenPanel that will be added/moved. col, row, area or targetGoldenPanel should be specified otherwise the goldenPanel will be added/moved to the $root. region is west, north, east, south or stack of the targetGoldenPanel which is the added/moved location of the goldenPanel.

GoldenPanel

• Notice that we support only vflex and hflex to layout GoldenPanels, also notice that flex min is not supported in GoldenLayout and GoldenPanel.

Supported GoldenPanel events introduction

• onFlexSize
  • Fires whenever a panel is resized, two meaningful data is provided, the hflex and vflex of the resized GoldenPanels whenever GoldenPanels are resized.
• onPanelDrop:
  • Fires whenever a panel is dropped by a user action.
• onActive:
  • Fires whenever a stacked panel that is not active became active.
• onClose:
  • Fires whenever a panel is closed by a user action.
• onMaximize:
  • Fires whenever a panel is maximized by a user action.
• onMinimize:
  • Fires whenever a panel is minimized by a user action.

Downloads

The demo can be download here.

For further information check out component reference.

I hope you find this new component useful. Feel free to share with us your comments.