Layouting With Box In ZK5
From Documentation
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.
Jumin Rubin
Date
December 3, 2009
December 3, 2009
Version
ZK 5.0.0 and above
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 & 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. |