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