Flow panes arrange components in a horizontal line, wrapping when the contents don't fit on a single line. Components may be horizontally aligned to left, right, or center when there is space left over within a given line, and may optionally be vertically aligned by to their baselines.
The following example demonstrates the use of the FlowPane container. The buttons on the right can be used to modify the alignment properties. A BaselineDecorator is used to highlight the flow pane's baseline. This decorator draws a red line across a component's baseline. If the component does not have a baseline, it draws a blue line across the component's vertical midpoint:
The BXML source for this example is shown below:
<layout:FlowPanes title="Flow Panes" maximized="true"
xmlns:bxml="http://pivot.apache.org/bxml"
xmlns:effects="org.apache.pivot.wtk.effects"
xmlns:layout="org.apache.pivot.tutorials.layout"
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="Alignment" styles="{font:{bold:true}}"/>
<bxml:define>
<ButtonGroup bxml:id="alignment"/>
</bxml:define>
<RadioButton bxml:id="leftRadioButton" buttonData="Left" buttonGroup="$alignment" selected="true"/>
<RadioButton bxml:id="rightRadioButton" buttonData="Right" buttonGroup="$alignment"/>
<RadioButton bxml:id="centerRadioButton" buttonData="Center" buttonGroup="$alignment"/>
<BoxPane styles="{padding:{top:6}}">
<Checkbox bxml:id="alignToBaselineCheckbox" buttonData="Align to baseline"/>
</BoxPane>
</BoxPane>
</Border>
</right>
</SplitPane>
</layout:FlowPanes>
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 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.FlowPane;
import org.apache.pivot.wtk.HorizontalAlignment;
import org.apache.pivot.wtk.RadioButton;
import org.apache.pivot.wtk.Style;
import org.apache.pivot.wtk.Window;
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();
}
};
leftRadioButton.getButtonStateListeners().add(buttonStateListener);
rightRadioButton.getButtonStateListeners().add(buttonStateListener);
centerRadioButton.getButtonStateListeners().add(buttonStateListener);
alignToBaselineCheckbox.getButtonStateListeners().add(buttonStateListener);
updateFlowPaneState();
}
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(Style.alignment, alignment);
}
flowPane.getStyles().put(Style.alignToBaseline, alignToBaselineCheckbox.isSelected());
}
}
Next: Box Panes