Fill Panes

Fill panes are similar to Box panes in that they arrange their child components in in a line, either horizontally or vertically. But, unlike Box panes, they always fill out the available space of their container in both directions and size their children evenly to fill up the space. So, in this respect a Fill pane is a simpler version of a Grid pane, but in only one direction.

Fill panes support some styles that allow a caller to customize the arrangement of child components:

  • "padding" - the amount of space the fill pane reserves around the perimeter of the container.
  • "spacing" - the amount of space the fill pane inserts between components.

The BXML source for the application is shown below:

            
            <layout:FillPanes title="Fill Panes" maximized="true"
                xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns:layout="org.apache.pivot.tutorials.layout"
                xmlns="org.apache.pivot.wtk">
                <TablePane>
                    <columns>
                        <TablePane.Column width="300"/>
                        <TablePane.Column width="-1"/>
                    </columns>

                    <TablePane.Row height="1*">
                        <Border styles="{padding:6, color:'#999999'}">
                            <FillPane bxml:id="fillPane">
                                <PushButton buttonData="One"/>
                                <PushButton buttonData="Two"/>
                                <PushButton buttonData="Three"/>
                            </FillPane>
                        </Border>

                        <BoxPane orientation="vertical" styles="{padding:6, spacing:8}">
                            <bxml:define>
                                <ButtonGroup bxml:id="orientation"/>
                            </bxml:define>

                            <Label text="Orientation" styles="{font:{bold:true}}"/>
                            <RadioButton bxml:id="horizontalOrientationButton" buttonData="Horizontal" buttonGroup="$orientation" selected="true"/>
                            <RadioButton bxml:id="verticalOrientationButton" buttonData="Vertical" buttonGroup="$orientation"/>

                        </BoxPane>
                    </TablePane.Row>
                </TablePane>
            </layout:FillPanes>
            
        

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 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.FillPane;
            import org.apache.pivot.wtk.Orientation;
            import org.apache.pivot.wtk.RadioButton;
            import org.apache.pivot.wtk.Window;

            public class FillPanes extends Window implements Bindable {
                private FillPane fillPane = null;
                private RadioButton horizontalOrientationButton = null;
                private RadioButton verticalOrientationButton = null;

                @Override
                public void initialize(Map<String, Object> namespace, URL location, Resources resources) {
                    fillPane = (FillPane)namespace.get("fillPane");
                    horizontalOrientationButton = (RadioButton)namespace.get("horizontalOrientationButton");
                    verticalOrientationButton = (RadioButton)namespace.get("verticalOrientationButton");

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

                    horizontalOrientationButton.getButtonStateListeners().add(buttonStateListener);
                    verticalOrientationButton.getButtonStateListeners().add(buttonStateListener);

                    updateFillPaneState();
                }

                private void updateFillPaneState() {
                    Orientation orientation = null;
                    if (horizontalOrientationButton.isSelected()) {
                        orientation = Orientation.HORIZONTAL;
                    } else if (verticalOrientationButton.isSelected()) {
                        orientation = Orientation.VERTICAL;
                    }

                    if (orientation != null) {
                        fillPane.setOrientation(orientation);
                    }
                }
            }
            
        

Next: Grid Panes