Small Talks/2009/December/Layouting With Box In ZK5

Author
Jumin Rubin

Jumin is a full time software engineer at a software provider for a financial institutions in Switzerland. He has been in the software development industry since 1995 based in various areas - software architecture and design, programming, and etc. Currently he is developing financial messaging systems with ZK as front-end.

Date
December 3, 2009

Version
ZK 5.0.0 and above

Introduction

Since ZK5, the Box layout component has been slightly modified (enhanced?) as follows:

• "Widths" and "Heights" attributes are deprecated and Cell shall be used instead as child component.
• "Hflex" and "Vflex" attributes are supported to size the child widgets automatically.
• "Stretch" can be used as value in the "Align" and "Pack" attributes.

Conditioned with those changes above, it raises several questions as follows:

• How those attributes and the values effect the layout of the widgets?
• How do they work together the percentage value e.g. 50%, 100% in "Width" and "Height" attributes?
• Do those attributes and values produce same effect to all child widgets? The common child widgets would be: Label, Textbox, Button, Box (Hbox/Vbox), and Window.

Layout Experiment Playground

To answer those questions, a playground to quickly test the combination of these attributes and values is required. The following figure illustrates a proposed playground.

A sample implementation can be found in the following ZUL and Java code.

index.zul

<?page title="Box Debug" contentType="text/html;charset=UTF-8"?>
<zk>
    <window title="Box Layouting" border="normal"
        apply="layouting.BoxController">
        <caption>
            <toolbarbutton label="Refresh"/>
        </caption>
        <hbox style="margin: 5px 5px 5px 5px;" align="center">
            <label value="Align:" />
            <listbox id="alignValue" mold="select" rows="1" width="100px"
                forward="onSelect=onAssignLayout">
                <listitem label="Null" value="null" selected="true" />
                <listitem label="Start" value="start" />
                <listitem label="Center" value="center" />
                <listitem label="End" value="end" />
                <listitem label="Stretch" value="stretch" />
            </listbox>
            <space />
            <label value="Pack:" />
            <listbox id="packValue" mold="select" rows="1" width="100px"
                forward="onSelect=onAssignLayout">
                <listitem label="Null" value="null" selected="true" />
                <listitem label="Start" value="start" />
                <listitem label="Center" value="center" />
                <listitem label="End" value="end" />
                <listitem label="Stretch" value="stretch" />
            </listbox>
            <space />
            <label value="V-Flex:" />
            <listbox id="vflexValue" mold="select" rows="1" width="100px"
                forward="onSelect=onAssignLayout">
                <listitem label="False" value="false" selected="true" />
                <listitem label="True" value="start" />
            </listbox>
            <space />
            <label value="H-Flex:" />
            <listbox id="hflexValue" mold="select" rows="1" width="100px"
                forward="onSelect=onAssignLayout">
                <listitem label="False" value="false" selected="true" />
                <listitem label="True" value="start" />
            </listbox>
            <space />
            <button label="100% Width" forward="onClick=onFullPercentWidth" />
            <button label="100% Height" forward="onClick=onFullPercentHeight" />
            <button label="Reset Width &amp; Height"
                forward="onClick=onResetWidthAndHeight" />
        </hbox>
        <groupbox>
            <caption label="Children Options" />
            <button label="Reset" forward="onClick=onClearChildren" />
            <space />
            <button label="Label" forward="onClick=onAddLabelChild" />
            <button label="Textbox" forward="onClick=onAddTextboxChild" />
            <button label="Button" forward="onClick=onAddButtonChild" />
            <button label="Box" forward="onClick=onAddBoxChild" />
            <button label="Window" forward="onClick=onAddWindowChild" />
        </groupbox>
        <hbox width="100%">
            <cell width="50%" height="500px">
                <groupbox mold="3d" width="100%" height="500px">
                    <caption label="V-Box">
                        <toolbarbutton label="Refresh"
                            forward="onClick=onVboxRefresh" />
                    </caption>
                    <vbox id="vbox" width="100%" height="100%" align="start"
                        pack="start"
                        style="padding: 10px 10px 10px 10px; border: 1px solid grey" />
                </groupbox>
            </cell>
            <cell width="50%" height="500px">
                <groupbox mold="3d" width="100%" height="500px">
                    <caption label="H-Box">
                        <toolbarbutton label="Refresh"
                            forward="onClick=onHboxRefresh" />
                    </caption>
                    <hbox id="hbox" width="100%" height="100%" align="start"
                        pack="start"
                        style="padding: 10px 10px 10px 10px; border: 1px solid grey" />
                </groupbox>
            </cell>
        </hbox>
    </window>
</zk>

BoxController.java

package layouting;

import java.util.List;

import org.zkoss.zk.ui.HtmlBasedComponent;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Box;
import org.zkoss.zul.Button;
import org.zkoss.zul.Hbox;
import org.zkoss.zul.Label;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Textbox;
import org.zkoss.zul.Vbox;
import org.zkoss.zul.Window;

public class BoxController extends GenericForwardComposer {

	private static final long serialVersionUID = -3639146891743901462L;

	private Listbox alignValue;
	private Listbox packValue;
	private Listbox vflexValue;
	private Listbox hflexValue;

	private Vbox vbox;
	private Hbox hbox;

	public void onAssignLayout() {
		assignValue(hbox);
		assignValue(vbox);
	}

	@SuppressWarnings("unchecked")
	public void assignValue(Box box) {
		box.setAlign(String.valueOf(alignValue.getSelectedItem().getValue()));
		box.setPack(String.valueOf(packValue.getSelectedItem().getValue()));
		String hflexString = String.valueOf(hflexValue.getSelectedItem().getValue());
		String vflexString = String.valueOf(vflexValue.getSelectedItem().getValue());
		List<HtmlBasedComponent> children = box.getChildren();
		for (HtmlBasedComponent child : children) {
			child.setHflex(hflexString);
			child.setVflex(vflexString);
		}
	}

	private void addButtonChild(Box box) {
		int nextCount = box.getChildren().size();
		Button child = new Button("Button" + nextCount);
		box.appendChild(child);
		box.invalidate();
	}
	
	private void addBoxChild(Box box) {
		int nextCount = box.getChildren().size();
		Box child = new Box();
		child.setStyle("border: 1px solid blue");
		child.appendChild(new Label("Box-" + nextCount));
		box.appendChild(child);
		box.invalidate();
	}
	
	private void addLabelChild(Box box) {
		int nextCount = box.getChildren().size();
		Label child = new Label("Label-" + nextCount);
		child.setStyle("border: 1px solid blue");
		box.appendChild(child);
		box.invalidate();
	}
	
	private void addTextboxChild(Box box) {
		int nextCount = box.getChildren().size();
		Textbox child = new Textbox("Textbox-" + nextCount);
		box.appendChild(child);
		box.invalidate();
	}
	
	private void addWindowChild(Box box) {
		int nextCount = box.getChildren().size();
		Window child = new Window();
		child.setBorder("normal");
		child.appendChild(new Label("Window-" + nextCount));
		box.appendChild(child);
		box.invalidate();
	}
	
	public void onClearChildren() {
		hbox.getChildren().clear();
		vbox.getChildren().clear();
	}
	
	public void onAddButtonChild() {
		addButtonChild(hbox);
		addButtonChild(vbox);
	}

	public void onAddBoxChild() {
		addBoxChild(hbox);
		addBoxChild(vbox);
	}

	public void onAddWindowChild() {
		addWindowChild(hbox);
		addWindowChild(vbox);
	}

	public void onAddLabelChild() {
		addLabelChild(hbox);
		addLabelChild(vbox);
	}
	
	public void onAddTextboxChild() {
		addTextboxChild(hbox);
		addTextboxChild(vbox);
	}
	
	@SuppressWarnings("unchecked")
	private void set100PercentWidth(Box box) {
		List<HtmlBasedComponent> children = box.getChildren();
		for (HtmlBasedComponent child : children) {
			child.setWidth("100%");
		}
	}
	
	@SuppressWarnings("unchecked")
	private void set100PercentHeight(Box box) {
		List<HtmlBasedComponent> children = box.getChildren();
		for (HtmlBasedComponent child : children) {
			child.setHeight("100%");
		}
	}
	
	@SuppressWarnings("unchecked")
	private void resetWidthAndHeight(Box box) {
		List<HtmlBasedComponent> children = box.getChildren();
		for (HtmlBasedComponent child : children) {
			child.setHeight("");
			child.setWidth("");
		}
	}
	
	public void onResetWidthAndHeight() {
		resetWidthAndHeight(hbox);
		resetWidthAndHeight(vbox);
	}
	
	public void onFullPercentWidth() {
		set100PercentWidth(hbox);
		set100PercentWidth(vbox);
	}
	
	public void onFullPercentHeight() {
		set100PercentHeight(hbox);
		set100PercentHeight(vbox);
	}
	
	public void onHboxRefresh() {
		hbox.invalidate();
	}

	public void onVboxRefresh() {
		vbox.invalidate();
	}
}

Comments

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.