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 WTKX source for the application is shown below:
<Window title="Box Panes" maximized="true" xmlns:wtkx="http://pivot.apache.org/wtkx" xmlns="org.apache.pivot.wtk"> <content> <TablePane> <columns> <TablePane.Column width="300"/> <TablePane.Column width="-1"/> </columns> <rows> <TablePane.Row height="-1"> <Border styles="{padding:6, color:'#999999'}"> <content> <BoxPane wtkx:id="boxPane"> <PushButton buttonData="One"/> <PushButton buttonData="Two"/> <PushButton buttonData="Three"/> </BoxPane> </content> </Border> <BoxPane orientation="vertical" styles="{padding:6, spacing:8, fill:true}"> <Label text="Orientation" styles="{fontBold:true}"/> <RadioButton wtkx:id="horizontalOrientationButton" buttonData="Horizontal" group="orientation" selected="true"/> <RadioButton wtkx:id="verticalOrientationButton" buttonData="Vertical" group="orientation"/> <Label text="Horizontal Alignment" styles="{fontBold:true}"/> <RadioButton wtkx:id="horizontalAlignmentLeftButton" buttonData="Left" group="horizontalAlignment" selected="true"/> <RadioButton wtkx:id="horizontalAlignmentRightButton" buttonData="Right" group="horizontalAlignment"/> <RadioButton wtkx:id="horizontalAlignmentCenterButton" buttonData="Center" group="horizontalAlignment"/> <Label text="Vertical Alignment" styles="{fontBold:true}"/> <RadioButton wtkx:id="verticalAlignmentTopButton" buttonData="Top" group="verticalAlignment" selected="true"/> <RadioButton wtkx:id="verticalAlignmentBottomButton" buttonData="Bottom" group="verticalAlignment"/> <RadioButton wtkx:id="verticalAlignmentCenterButton" buttonData="Center" group="verticalAlignment"/> <BoxPane styles="{padding:{top:8}}"> <Checkbox wtkx:id="fillCheckbox" buttonData="Fill"/> </BoxPane> </BoxPane> </TablePane.Row> </rows> </TablePane> </content> </Window>
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 org.apache.pivot.collections.Map; import org.apache.pivot.wtk.Application; import org.apache.pivot.wtk.Button; import org.apache.pivot.wtk.ButtonStateListener; import org.apache.pivot.wtk.Checkbox; import org.apache.pivot.wtk.DesktopApplicationContext; import org.apache.pivot.wtk.Display; 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; import org.apache.pivot.wtkx.WTKXSerializer; public class BoxPanes implements Application { private Window window = null; 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; public void startup(Display display, Map<String, String> properties) throws Exception { WTKXSerializer wtkxSerializer = new WTKXSerializer(); window = (Window)wtkxSerializer.readObject(this, "box_panes.wtkx"); boxPane = (BoxPane)wtkxSerializer.get("boxPane"); horizontalOrientationButton = (RadioButton)wtkxSerializer.get("horizontalOrientationButton"); verticalOrientationButton = (RadioButton)wtkxSerializer.get("verticalOrientationButton"); horizontalAlignmentRightButton = (RadioButton)wtkxSerializer.get("horizontalAlignmentRightButton"); horizontalAlignmentLeftButton = (RadioButton)wtkxSerializer.get("horizontalAlignmentLeftButton"); horizontalAlignmentCenterButton = (RadioButton)wtkxSerializer.get("horizontalAlignmentCenterButton"); verticalAlignmentTopButton = (RadioButton)wtkxSerializer.get("verticalAlignmentTopButton"); verticalAlignmentBottomButton = (RadioButton)wtkxSerializer.get("verticalAlignmentBottomButton"); verticalAlignmentCenterButton = (RadioButton)wtkxSerializer.get("verticalAlignmentCenterButton"); fillCheckbox = (Checkbox)wtkxSerializer.get("fillCheckbox"); ButtonStateListener buttonStateListener = new ButtonStateListener() { 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(); window.open(display); } public boolean shutdown(boolean optional) { if (window != null) { window.close(); } return false; } public void suspend() { } public void resume() { } 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()); } public static void main(String[] args) { DesktopApplicationContext.main(BoxPanes.class, args); } }
Next: Table Panes