In the past we used hbox and vbox to solve layout issues, but its rendering speed and the size of the output DOM element can be improved. The implementations of the hbox and vbox use HTML table to render which is heavy and uncontrollable for the application layout designer. As the size of the table will be extended depending upon its content, in some situations the result is reasonable and predictable, but if you want to fully control the layout via the ZK 5 component attributes hflex and vflex, you may encounter some issues. For example,
As you can see, we specify hflex=”1″ in the vbox to alter its size depending on its parent’s size. However, when we add wide content into the second grid, the size of the vbox is extended to fit the content, so the result is not what we expected. In this case, we can use Vlayout or Hlayout to solve this issue.
In the implementation of Vlayout and Hlayout, we use HTML Div tags to render its content, so the size of the output is reduced and the rendering time is approximately twice as fast.