Box panes are used to arrange components sequentially: horizontal box panes lay out their children horizontally from left to right, and vertical box panes arrange their children vertically from top to bottom.
Box panes support a number of styles that allow a caller to customize the arrangement of child components:
How the alignment values are handled varies depending on the box pane's orientation. Below is a sample application that demonstrates the effect each alignment value has on the box pane's components:
The BXML source for the application is shown below:
<layout:BoxPanes title="Box Panes" maximized="true"
xmlns:bxml="http://pivot.apache.org/bxml"
xmlns:layout="org.apache.pivot.tutorials.layout"
xmlns="org.apache.pivot.wtk">
<TablePane>
<columns>
<TablePane.Column width="300"/>
<TablePane.Column width="-1"/>
</columns>
<TablePane.Row height="-1">
<Border styles="{padding:6, color:'#999999'}">
<BoxPane bxml:id="boxPane">
<PushButton buttonData="One"/>
<PushButton buttonData="Two"/>
<PushButton buttonData="Three"/>
</BoxPane>
</Border>
<BoxPane orientation="vertical" styles="{padding:6, spacing:8, fill:true}">
<bxml:define>
<ButtonGroup bxml:id="orientation"/>
<ButtonGroup bxml:id="horizontalAlignment"/>
<ButtonGroup bxml:id="verticalAlignment"/>
</bxml:define>
<Label text="Orientation" styles="{font:{bold:true}}"/>
<RadioButton bxml:id="horizontalOrientationButton" buttonData="Horizontal" buttonGroup="$orientation" selected="true"/>
<RadioButton bxml:id="verticalOrientationButton" buttonData="Vertical" buttonGroup="$orientation"/>
<Label text="Horizontal Alignment" styles="{font:{bold:true}}"/>
<RadioButton bxml:id="horizontalAlignmentLeftButton" buttonData="Left" buttonGroup="$horizontalAlignment" selected="true"/>
<RadioButton bxml:id="horizontalAlignmentRightButton" buttonData="Right" buttonGroup="$horizontalAlignment"/>
<RadioButton bxml:id="horizontalAlignmentCenterButton" buttonData="Center" buttonGroup="$horizontalAlignment"/>
<Label text="Vertical Alignment" styles="{font:{bold:true}}"/>
<RadioButton bxml:id="verticalAlignmentTopButton" buttonData="Top" buttonGroup="$verticalAlignment" selected="true"/>
<RadioButton bxml:id="verticalAlignmentBottomButton" buttonData="Bottom" buttonGroup="$verticalAlignment"/>
<RadioButton bxml:id="verticalAlignmentCenterButton" buttonData="Center" buttonGroup="$verticalAlignment"/>
<BoxPane styles="{padding:{top:8}}">
<Checkbox bxml:id="fillCheckbox" buttonData="Fill"/>
</BoxPane>
</BoxPane>
</TablePane.Row>
</TablePane>
</layout:BoxPanes>
The Java source is as follows. Most of the code is simply event handling logic that responds to changes in the radio buttons' state:
package org.apache.pivot.tutorials.layout;
import java.net.URL;
import org.apache.pivot.beans.Bindable;
import org.apache.pivot.collections.Map;
import org.apache.pivot.util.Resources;
import org.apache.pivot.wtk.Button;
import org.apache.pivot.wtk.ButtonStateListener;
import org.apache.pivot.wtk.Checkbox;
import org.apache.pivot.wtk.BoxPane;
import org.apache.pivot.wtk.HorizontalAlignment;
import org.apache.pivot.wtk.Orientation;
import org.apache.pivot.wtk.RadioButton;
import org.apache.pivot.wtk.VerticalAlignment;
import org.apache.pivot.wtk.Window;
public class BoxPanes extends Window implements Bindable {
private BoxPane boxPane = null;
private RadioButton horizontalOrientationButton = null;
private RadioButton verticalOrientationButton = null;
private RadioButton horizontalAlignmentRightButton = null;
private RadioButton horizontalAlignmentLeftButton = null;
private RadioButton horizontalAlignmentCenterButton = null;
private RadioButton verticalAlignmentTopButton = null;
private RadioButton verticalAlignmentBottomButton = null;
private RadioButton verticalAlignmentCenterButton = null;
private Checkbox fillCheckbox = null;
@Override
public void initialize(Map<String, Object> namespace, URL location, Resources resources) {
boxPane = (BoxPane)namespace.get("boxPane");
horizontalOrientationButton = (RadioButton)namespace.get("horizontalOrientationButton");
verticalOrientationButton = (RadioButton)namespace.get("verticalOrientationButton");
horizontalAlignmentRightButton = (RadioButton)namespace.get("horizontalAlignmentRightButton");
horizontalAlignmentLeftButton = (RadioButton)namespace.get("horizontalAlignmentLeftButton");
horizontalAlignmentCenterButton = (RadioButton)namespace.get("horizontalAlignmentCenterButton");
verticalAlignmentTopButton = (RadioButton)namespace.get("verticalAlignmentTopButton");
verticalAlignmentBottomButton = (RadioButton)namespace.get("verticalAlignmentBottomButton");
verticalAlignmentCenterButton = (RadioButton)namespace.get("verticalAlignmentCenterButton");
fillCheckbox = (Checkbox)namespace.get("fillCheckbox");
ButtonStateListener buttonStateListener = new ButtonStateListener() {
@Override
public void stateChanged(Button button, Button.State previousState) {
updateBoxPaneState();
}
};
horizontalOrientationButton.getButtonStateListeners().add(buttonStateListener);
verticalOrientationButton.getButtonStateListeners().add(buttonStateListener);
horizontalAlignmentLeftButton.getButtonStateListeners().add(buttonStateListener);
horizontalAlignmentRightButton.getButtonStateListeners().add(buttonStateListener);
horizontalAlignmentCenterButton.getButtonStateListeners().add(buttonStateListener);
verticalAlignmentTopButton.getButtonStateListeners().add(buttonStateListener);
verticalAlignmentBottomButton.getButtonStateListeners().add(buttonStateListener);
verticalAlignmentCenterButton.getButtonStateListeners().add(buttonStateListener);
fillCheckbox.getButtonStateListeners().add(buttonStateListener);
updateBoxPaneState();
}
private void updateBoxPaneState() {
Orientation orientation = null;
if (horizontalOrientationButton.isSelected()) {
orientation = Orientation.HORIZONTAL;
} else if (verticalOrientationButton.isSelected()) {
orientation = Orientation.VERTICAL;
}
if (orientation != null) {
boxPane.setOrientation(orientation);
}
HorizontalAlignment horizontalAlignment = null;
if (horizontalAlignmentLeftButton.isSelected()) {
horizontalAlignment = HorizontalAlignment.LEFT;
} else if (horizontalAlignmentRightButton.isSelected()) {
horizontalAlignment = HorizontalAlignment.RIGHT;
} else if (horizontalAlignmentCenterButton.isSelected()) {
horizontalAlignment = HorizontalAlignment.CENTER;
}
if (horizontalAlignment != null) {
boxPane.getStyles().put("horizontalAlignment", horizontalAlignment);
}
VerticalAlignment verticalAlignment = null;
if (verticalAlignmentTopButton.isSelected()) {
verticalAlignment = VerticalAlignment.TOP;
} else if (verticalAlignmentBottomButton.isSelected()) {
verticalAlignment = VerticalAlignment.BOTTOM;
} else if (verticalAlignmentCenterButton.isSelected()) {
verticalAlignment = VerticalAlignment.CENTER;
}
if (verticalAlignment != null) {
boxPane.getStyles().put("verticalAlignment", verticalAlignment);
}
boxPane.getStyles().put("fill", fillCheckbox.isSelected());
}
}
Next: Fill Panes