Table Panes

Table panes are used to arrange components in a variable 2-dimensional grid, much like an HTML table. Table panes have a "columns" collection that defines the column structure of the table and a "rows" collection that defines both the row structure of the table and the contents of each row.

Note that a special syntax can be used to specify the width of a TablePane.Column or the height of a TablePane.Row:


Table panes support a number of styles that allow a caller to customize the arrangement of child components:

Below is a sample application that demonstrates a basic table pane structure and responds to mouse clicks with information about where the user clicked:

The BXML source for the application is shown below:

            
            <layout:SimpleTablePanes bxml:id="window" title="Table Panes" maximized="true"
                xmlns:bxml="http://pivot.apache.org/bxml"
                xmlns:layout="org.apache.pivot.tutorials.layout"
                xmlns="org.apache.pivot.wtk">
                <Border>
                    <TablePane bxml:id="tablePane" styles="{verticalSpacing:1, showHorizontalGridLines:true,
                        horizontalSpacing:1, showVerticalGridLines:true}">
                        <columns>
                            <TablePane.Column width="-1"/>
                            <TablePane.Column width="50"/>
                            <TablePane.Column width="-1"/>
                            <TablePane.Column width="1*"/>
                            <TablePane.Column width="2*"/>
                        </columns>

                        <TablePane.Row height="-1">
                            <TablePane.Filler/>
                            <Label text="50" styles="{horizontalAlignment:'center'}"/>
                            <Label text="-1" styles="{horizontalAlignment:'center'}"/>
                            <Label text="1*" styles="{horizontalAlignment:'center'}"/>
                            <Label text="2*" styles="{horizontalAlignment:'center'}"/>
                        </TablePane.Row>

                        <TablePane.Row height="50">
                            <Label text="50" styles="{verticalAlignment:'center'}"/>
                        </TablePane.Row>

                        <TablePane.Row height="-1">
                            <Label text="-1" styles="{verticalAlignment:'center'}"/>
                        </TablePane.Row>

                        <TablePane.Row height="1*">
                            <Label text="1*" styles="{verticalAlignment:'center'}"/>
                        </TablePane.Row>

                        <TablePane.Row height="2*">
                            <Label text="2*" styles="{verticalAlignment:'center'}"/>
                        </TablePane.Row>
                    </TablePane>
                </Border>
            </layout:SimpleTablePanes>
            
        

The Java source is as follows. Most of the code is simply event handling logic that responds to mouse clicks:

            
            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.BoxPane;
            import org.apache.pivot.wtk.Component;
            import org.apache.pivot.wtk.ComponentMouseButtonListener;
            import org.apache.pivot.wtk.Label;
            import org.apache.pivot.wtk.MessageType;
            import org.apache.pivot.wtk.Mouse;
            import org.apache.pivot.wtk.Orientation;
            import org.apache.pivot.wtk.Prompt;
            import org.apache.pivot.wtk.TablePane;
            import org.apache.pivot.wtk.Window;

            public class SimpleTablePanes extends Window implements Bindable {
                private TablePane tablePane = null;

                @Override
                public void initialize(Map<String, Object> namespace, URL location, Resources resources) {
                    tablePane = (TablePane)namespace.get("tablePane");

                    tablePane.getComponentMouseButtonListeners().add(new ComponentMouseButtonListener.Adapter() {
                        @Override
                        public boolean mouseClick(Component component, Mouse.Button button, int x, int y, int count) {
                            int rowIndex = tablePane.getRowAt(y);
                            int columnIndex = tablePane.getColumnAt(x);

                            if (rowIndex >= 0
                                && columnIndex >= 0) {
                                TablePane.Row row = tablePane.getRows().get(rowIndex);
                                TablePane.Column column = tablePane.getColumns().get(columnIndex);

                                int rowHeight = row.getHeight();
                                int columnWidth = column.getWidth();

                                String message = "Registered Click At " + rowIndex + "," + columnIndex;

                                Label heightLabel = new Label(String.format("The row's height is %d (%s)",
                                    rowHeight,
                                    rowHeight == -1 ? "default" : (row.isRelative() ? "relative" : "absolute")));
                                Label widthLabel = new Label(String.format("The column's width is %d (%s)",
                                    columnWidth,
                                    columnWidth == -1 ? "default" : (column.isRelative() ? "relative" : "absolute")));

                                BoxPane body = new BoxPane(Orientation.VERTICAL);
                                body.add(heightLabel);
                                body.add(widthLabel);

                                Prompt.prompt(MessageType.INFO, message, body, SimpleTablePanes.this);
                            }

                            return false;
                        }
                    });
                }
            }
            
        

The following is a more involved application that allows the user to interact with the table pane and get a feel for how the different settings affect layout. The application manages the table pane's styles via the controls on the left and responds to right-clicks over the table pane itself. The user can also drag the splitter to see the effect it has on the relative columns in the grid pane.

Next: Borders