From Documentation

Categories
[+] Beginner [+] Data Access [+] Design Patterns [+] Enterpise [+] Integration [+] Products

Small Talks

Latest Small Talks :

More...

Sort By :

Alphabetic | Last Edit Date | Creation Date

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();
	}
}

Layouting With Box In ZK5

From Documentation

Contents

Introduction

Layout Experiment Playground

index.zul

BoxController.java