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 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