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,

 Browser rendering timeFunction called times
Hbox(100), Vbox(100), Label(300)447.52ms43396 calls
Hlayout(100), Vlayout(100), Label(300)245.246ms30667 calls

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.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

4 Responses to “Two new layout components in ZK 5.0.4, Hlayout and Vlayout”

  1. franferri says:

    As always, incredible job.

    Thank you.

  2. Cary Clark says:

    In what version will these be available – CE, PE, or EE?

  3. @Cary, this feature will be available in all versions, CE, PE and EE.

Leave a Reply