FlowPane

FlowPane是讓元件以水平線進行排列的容器，並且具有自動換行的功能。它可以讓元件靠左、靠右或置中對齊，也可以讓元件以垂直對齊基準線（baseline）進行排列。

本範例仍然取自官網，在範例中使用了BaselineDecorator（org.apache.pivot.wtk.effects）來顯示基準線，如果使用者未點選『對齊基準線』的選項，則會顯示出藍線，反之則顯示紅線。



============範例展示=================================================


============範例展示=================================================


以下是ui.bxml：

<!--ui.bxml-->
<myex:FlowPanes title="Flow Panes" maximized="true"
                xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns:effects="org.apache.pivot.wtk.effects"
                xmlns:myex="myex"
                xmlns="org.apache.pivot.wtk">
    <SplitPane splitRatio="0.75">
        <left>
            <Border styles="{padding:4}">
                <BoxPane orientation="vertical" styles="{fill:true}">
                    <FlowPane bxml:id="flowPane" styles="{padding:2}">
                        <decorators>
                            <effects:BaselineDecorator/>
                        </decorators>
 
                        <PushButton buttonData="0" styles="{minimumAspectRatio:1.5}"/>
                        <PushButton buttonData="1" styles="{minimumAspectRatio:1.5}"/>
                        <PushButton buttonData="2" styles="{minimumAspectRatio: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="{minimumAspectRatio:1.5}"/>
                        <PushButton buttonData="7" styles="{minimumAspectRatio:1.5}"/>
                    </FlowPane>
                </BoxPane>
            </Border>
        </left>
 
        <right>
            <Border styles="{padding:{top:2, left:6}}">
                <BoxPane orientation="vertical">
                    <Label text="對齊方式" styles="{font:{bold:true}}"/>
 
                    <bxml:define>
                        <ButtonGroup bxml:id="alignment"/>
                    </bxml:define>
                    <RadioButton bxml:id="leftRadioButton" buttonData="靠左對齊" buttonGroup="$alignment" selected="true"/>
                    <RadioButton bxml:id="rightRadioButton" buttonData="靠右對齊" buttonGroup="$alignment"/>
                    <RadioButton bxml:id="centerRadioButton" buttonData="置中對齊" buttonGroup="$alignment"/>
 
                    <BoxPane styles="{padding:{top:6}}">
                        <Checkbox bxml:id="alignToBaselineCheckbox" buttonData="對齊基準線"/>
                    </BoxPane>
                </BoxPane>
            </Border>
        </right>
    </SplitPane>
</myex:FlowPanes>

接下來是myex#FlowPanes.java：

//myex#FlowPanes.java
package myex;
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.*;

public class FlowPanes extends Window implements Bindable {

    private FlowPane flowPane = null;
    private RadioButton leftRadioButton = null;
    private RadioButton rightRadioButton = null;
    private RadioButton centerRadioButton = null;
    private Checkbox alignToBaselineCheckbox = null;

    @Override
    public void initialize(Map<String, Object> namespace, URL location, Resources resources) {
        flowPane = (FlowPane) namespace.get("flowPane");
        leftRadioButton = (RadioButton) namespace.get("leftRadioButton");
        rightRadioButton = (RadioButton) namespace.get("rightRadioButton");
        centerRadioButton = (RadioButton) namespace.get("centerRadioButton");
        alignToBaselineCheckbox = (Checkbox) namespace.get("alignToBaselineCheckbox");

        ButtonStateListener buttonStateListener = new ButtonStateListener() {

            @Override
            public void stateChanged(Button button, Button.State previousState) {
                updateFlowPaneState();
            }
        };

        //將4個按鈕的事件處理全交由同一個listener處理
        leftRadioButton.getButtonStateListeners().add(buttonStateListener);
        rightRadioButton.getButtonStateListeners().add(buttonStateListener);
        centerRadioButton.getButtonStateListeners().add(buttonStateListener);
        alignToBaselineCheckbox.getButtonStateListeners().add(buttonStateListener);

        updateFlowPaneState();
    }

    //依使用者所設定改變FlowPane呈現方式
    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);
        }
        //對齊基準線與否
        flowPane.getStyles().put("alignToBaseline", alignToBaselineCheckbox.isSelected());
    }
}