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.

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

• "padding" - the amount of space the table pane reserves around the perimeter of the container.
• "horizontalSpacing" - the amount of space the table pane inserts between columns.
• "verticalSpacing" - the amount of space the table pane inserts between rows.
• "showHorizontalGridLines" - whether horizontal grid lines will be painted in the space between rows. Note that this will be ignored if "verticalSpacing" is zero, as there would be no space in which to paint the grid lines.
• "showVerticalGridLines" - whether vertical grid lines will be painted in the space between columns. Note that this will be ignored if "horizontalSpacing" is zero, as there would be no space in which to paint the grid lines.
• "horizontalGridColor" - the color of the horizontal grid lines.
• "verticalGridColor" - the color of the vertical grid lines.
• "highlightBackgroundColor" - the background color of rows and columns whose "highlighted" flag is set to true.

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.