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