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,

Video

Source

<!--?page title="V/Hlayout Demo"?-->
			
						<label>
						<label>
						<label>
						<label>
					</label></label></label></label>
					
						<label>
						<label>
						<label>
						<label>
					</label></label></label></label>
				
		
		
		<button>
			<!--[CDATA[
				grid.setVisible(true);
				for (int i = 0; i < 3; i++) {
					Row r = new Row();
					new Label("Cell11111111111111111111111111111").setParent(r);
					new Label("Cell22222222222222222222222222222").setParent(r);
					new Label("Cell33333333333333333333333333333").setParent(r);
					new Label("Cell44444444444444444444444444444").setParent(r);
					rows.appendChild(r);
				}
			]]-->
		</button>
	

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.

Performance improvement

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.

For example,

Tested using Firebug on Firefox 3.6.8.

Summary:

In the upcoming ZK 5.0.4, you are able to layout your page in an easier and more controllable manner.