Contents

Introduction

In ZK 5, we introduce two new properties, vflex and hflex, to all components so you have the maximum flexibility to layout your components. By utilizing these two new features, you can hint the ZK engine how to distribute a parent component's remaining empty space among its child components vertically(vflex) and horizontally(hflex). Thus you can easily do layouts that might not be possible before.

A Simple Example

In this example, you can easily keep the operation buttons at the bottom of your window. Simply provide a flexible <separator vflex="1"> and it will push the buttons down for you.

This is a common practice to push things to side. You can also use this technique to separate two groups of components, etc.

Proportional Flexibility

The absolute value of the vflex/hflex is not that important. It is used to determine the proportion among flexible components. That is, you can give different integer to different child components so they will take space proportionally per the given vflex/hflex value. e.g.

Minimum Flexibility

Sometimes, you might wish that the parent component's size is determined by its children. Or I shall say, the size of the parent component is just high/wide enough to hold all of its child components. We also support that. Just specify vflex/hflex="min".

As you can see, the height of the north region of the outer borderlayout is determined by its child borderlayout. And the height of the inner borderlayout, in this example, is determined by the height of its west child region.

Resizing Flexibility

vflex/hflex of course support resizing. If the parent component changes its size which increase or decrease the extra space, the child components with vflex/hflex will recalculate themselves to accommodate the new size.

Note that the height proportion between the two trees are always 1 : 2 when we change the browser height.

Summary

In this article, we demonstrated the power of the vflex/hflex new feature. Now you can use them to do layouts that might not be possible before. ZK 5 will continue on providing "good things" to improve both the developer and the user experience. As always, we love to hear your feed backs because that is why the ZK can keep on improving.