Box Panes

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