Flow Panes

Flow panes arrange components in a horizontal line, wrapping when the contents don't fit on a single line. Components may be aligned to left, right, or center when there is space left over within a given line. The following example demonstrates the use of the FlowPane container:

The WTKX source for this example is shown below:

<Window title="Flow Panes" maximized="true"
    xmlns:wtkx="http://pivot.apache.org/wtkx"
    xmlns="org.apache.pivot.wtk">
    <content>
        <SplitPane splitRatio="0.5">
            <left>
                <Border styles="{padding:0}">
                    <content>
                        <FlowPane wtkx:id="flowPane">
                            <PushButton buttonData="0" styles="{preferredAspectRatio:1.5}"/>
                            <PushButton buttonData="1" styles="{preferredAspectRatio:1.5}"/>
                            <PushButton buttonData="2" styles="{preferredAspectRatio:1.5}"/>
                            <PushButton buttonData="3" preferredWidth="20" preferredHeight="20"/>
                            <PushButton buttonData="4" preferredWidth="30" preferredHeight="30"/>
                            <PushButton buttonData="5" preferredWidth="40" preferredHeight="40"/>
                            <PushButton buttonData="6" styles="{preferredAspectRatio:1.5}"/>
                            <PushButton buttonData="7" styles="{preferredAspectRatio:1.5}"/>
                        </FlowPane>
                    </content>
                </Border>
            </left>
            <right>
                <Border styles="{padding:{top:2, left:6}}">
                    <content>
                        <BoxPane orientation="vertical">
                            <Label text="Alignment" styles="{fontBold:true}"/>
                            <RadioButton wtkx:id="leftRadioButton" buttonData="Left" group="alignment" selected="true"/>
                            <RadioButton wtkx:id="rightRadioButton" buttonData="Right" group="alignment"/>
                            <RadioButton wtkx:id="centerRadioButton" buttonData="Center" group="alignment"/>
                        </BoxPane>
                    </content>
                </Border>
            </right>
        </SplitPane>
    </content>
</Window>

The Java source is as follows. It wires up the event handlers that respond 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.DesktopApplicationContext;
import org.apache.pivot.wtk.Display;
import org.apache.pivot.wtk.FlowPane;
import org.apache.pivot.wtk.HorizontalAlignment;
import org.apache.pivot.wtk.RadioButton;
import org.apache.pivot.wtk.Window;
import org.apache.pivot.wtkx.WTKXSerializer;

public class FlowPanes implements Application {
    private Window window = null;
    private FlowPane flowPane = null;
    private RadioButton leftRadioButton = null;
    private RadioButton rightRadioButton = null;
    private RadioButton centerRadioButton = null;

    public void startup(Display display, Map<String, String> properties) throws Exception {
        WTKXSerializer wtkxSerializer = new WTKXSerializer();
        window = (Window)wtkxSerializer.readObject(this, "flow_panes.wtkx");
        flowPane = (FlowPane)wtkxSerializer.get("flowPane");
        leftRadioButton = (RadioButton)wtkxSerializer.get("leftRadioButton");
        rightRadioButton = (RadioButton)wtkxSerializer.get("rightRadioButton");
        centerRadioButton = (RadioButton)wtkxSerializer.get("centerRadioButton");

        ButtonStateListener buttonStateListener = new ButtonStateListener() {
            public void stateChanged(Button button, Button.State previousState) {
                updateFlowPaneState();
            }
        };

        leftRadioButton.getButtonStateListeners().add(buttonStateListener);
        rightRadioButton.getButtonStateListeners().add(buttonStateListener);
        centerRadioButton.getButtonStateListeners().add(buttonStateListener);

        updateFlowPaneState();

        window.open(display);
    }

    public boolean shutdown(boolean optional) {
        if (window != null) {
            window.close();
        }

        return false;
    }

    public void suspend() {
    }

    public void resume() {
    }

    private void updateFlowPaneState() {
        HorizontalAlignment alignment = null;

        if (leftRadioButton.isSelected()) {
            alignment = HorizontalAlignment.LEFT;
        } else if (rightRadioButton.isSelected()) {
            alignment = HorizontalAlignment.RIGHT;
        } else if (centerRadioButton.isSelected()) {
            alignment = HorizontalAlignment.CENTER;
        }

        if (alignment != null) {
            flowPane.getStyles().put("alignment", alignment);
        }
    }

    public static void main(String[] args) {
        DesktopApplicationContext.main(FlowPanes.class, args);
    }
}

Next: Box Panes