You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pivot.apache.org by no...@apache.org on 2009/11/19 09:01:57 UTC

svn commit: r882066 - in /incubator/pivot/trunk/tutorials: src/org/apache/pivot/tutorials/layout/ www/

Author: noelgrandin
Date: Thu Nov 19 08:01:51 2009
New Revision: 882066

URL: http://svn.apache.org/viewvc?rev=882066&view=rev
Log:
add tutorial for GridPane

Added:
    incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/GridPanes.java
    incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/SimpleGridPanes.java
    incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/grid_panes.wtkx
    incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/simple_grid_panes.wtkx
Modified:
    incubator/pivot/trunk/tutorials/www/grid_panes.html
    incubator/pivot/trunk/tutorials/www/layout_containers.html

Added: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/GridPanes.java
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/GridPanes.java?rev=882066&view=auto
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/GridPanes.java (added)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/GridPanes.java Thu Nov 19 08:01:51 2009
@@ -0,0 +1,200 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except in
+ * compliance with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.apache.pivot.tutorials.layout;
+
+import org.apache.pivot.collections.ArrayList;
+import org.apache.pivot.collections.Map;
+import org.apache.pivot.wtk.Action;
+import org.apache.pivot.wtk.Application;
+import org.apache.pivot.wtk.Component;
+import org.apache.pivot.wtk.DesktopApplicationContext;
+import org.apache.pivot.wtk.Display;
+import org.apache.pivot.wtk.GridPane;
+import org.apache.pivot.wtk.Label;
+import org.apache.pivot.wtk.Menu;
+import org.apache.pivot.wtk.MenuHandler;
+import org.apache.pivot.wtk.MessageType;
+import org.apache.pivot.wtk.Panel;
+import org.apache.pivot.wtk.Prompt;
+import org.apache.pivot.wtk.Sheet;
+import org.apache.pivot.wtk.SheetCloseListener;
+import org.apache.pivot.wtk.Window;
+import org.apache.pivot.wtkx.WTKXSerializer;
+
+public class GridPanes implements Application {
+    private class ContextMenuHandler extends MenuHandler.Adapter {
+        private int x = -1;
+        private int y = -1;
+
+        @Override
+        public boolean configureContextMenu(Component component, Menu menu, int x, int y) {
+            this.x = x;
+            this.y = y;
+
+            // Add our menu sections
+            menu.getSections().add(rowSection);
+            menu.getSections().add(columnSection);
+
+            return false;
+        }
+
+        public int getX() {
+            return x;
+        }
+
+        public int getY() {
+            return y;
+        }
+    }
+
+    private Window window = null;
+    private GridPane gridPane = null;
+
+    private Menu.Section rowSection = null;
+    private Menu.Section columnSection = null;
+
+    private ContextMenuHandler contextMenuHandler = new ContextMenuHandler();
+
+    public GridPanes() {
+        Action.NamedActionDictionary namedActions = Action.getNamedActions();
+
+        namedActions.put("insertRow", new Action() {
+            @Override
+            public void perform() {
+                // Create and insert a new row
+                GridPane.Row row = new GridPane.Row();
+
+                // Populate the row with the expected content
+                for (int i = 0, n = gridPane.getColumns().getLength(); i < n; i++) {
+                    Panel panel = new Panel();
+                    panel.getStyles().put("backgroundColor", "#dddcd5");
+                    row.add(panel);
+                }
+                
+                int rowIndex = gridPane.getRowAt(contextMenuHandler.getY());
+                gridPane.getRows().insert(row, rowIndex);
+            }
+        });
+
+        namedActions.put("removeRow", new Action() {
+            @Override
+            public void perform() {
+                ArrayList<String> options = new ArrayList<String>("OK", "Cancel");
+                String message = "Remove Row?";
+                Label body = new Label("Are you sure you want to remove the row?");
+                body.getStyles().put("wrapText", true);
+
+                final Prompt prompt = new Prompt(MessageType.QUESTION, message, options, body);
+                prompt.setSelectedOption(0);
+
+                prompt.open(window, new SheetCloseListener() {
+                    @Override
+                    public void sheetClosed(Sheet sheet) {
+                        if (prompt.getResult() && prompt.getSelectedOption() == 0) {
+                            int rowIndex = gridPane.getRowAt(contextMenuHandler.getY());
+                            gridPane.getRows().remove(rowIndex, 1);
+                        }
+                    }
+                });
+            }
+        });
+        
+        namedActions.put("insertColumn", new Action() {
+            @Override
+            public void perform() {
+                // Create and insert a new column
+                GridPane.Column column = new GridPane.Column();
+                int columnIndex = gridPane.getColumnAt(contextMenuHandler.getX());
+                gridPane.getColumns().insert(column, columnIndex);
+
+                // Populate the column with the expected content
+                GridPane.RowSequence rows = gridPane.getRows();
+                for (int i = 0, n = rows.getLength(); i < n; i++) {
+                    Panel panel = new Panel();
+                    panel.getStyles().put("backgroundColor", "#dddcd5");
+                    rows.get(i).insert(panel, columnIndex);
+                }
+            }
+        });
+
+        namedActions.put("removeColumn", new Action() {
+            @Override
+            public void perform() {
+                ArrayList<String> options = new ArrayList<String>("OK", "Cancel");
+                String message = "Remove Column?";
+                Label body = new Label("Are you sure you want to remove the column?");
+                body.getStyles().put("wrapText", true);
+
+                final Prompt prompt = new Prompt(MessageType.QUESTION, message, options, body);
+                prompt.setSelectedOption(0);
+
+                prompt.open(window, new SheetCloseListener() {
+                    @Override
+                    public void sheetClosed(Sheet sheet) {
+                        if (prompt.getResult() && prompt.getSelectedOption() == 0) {
+                            int columnIndex = gridPane.getColumnAt(contextMenuHandler.getX());
+
+                            // Remove the component at that index from each row
+                            for (GridPane.Row row : gridPane.getRows()) {
+                                row.remove(columnIndex, 1);
+                            }
+
+                            gridPane.getColumns().remove(columnIndex, 1);
+                        }
+                    }
+                });
+            }
+        });
+    }
+
+    @Override
+    public void startup(Display display, Map<String, String> properties) throws Exception {
+        WTKXSerializer wtkxSerializer = new WTKXSerializer();
+        window = (Window)wtkxSerializer.readObject(this, "grid_panes.wtkx");
+
+        gridPane = (GridPane)wtkxSerializer.get("gridPane");
+        rowSection = (Menu.Section)wtkxSerializer.get("rowSection");
+        columnSection = (Menu.Section)wtkxSerializer.get("columnSection");
+
+        gridPane.setMenuHandler(contextMenuHandler);
+
+        window.open(display);
+    }
+
+    @Override
+    public boolean shutdown(boolean optional) {
+        if (window != null) {
+            window.close();
+        }
+
+        return false;
+    }
+
+    @Override
+    public void suspend() {
+        // No-op
+    }
+
+    @Override
+    public void resume() {
+        // No-op
+    }
+
+    public static void main(String[] args) {
+        DesktopApplicationContext.main(GridPanes.class, args);
+    }
+}

Added: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/SimpleGridPanes.java
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/SimpleGridPanes.java?rev=882066&view=auto
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/SimpleGridPanes.java (added)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/SimpleGridPanes.java Thu Nov 19 08:01:51 2009
@@ -0,0 +1,101 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except in
+ * compliance with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.apache.pivot.tutorials.layout;
+
+import org.apache.pivot.collections.Map;
+import org.apache.pivot.wtk.Application;
+import org.apache.pivot.wtk.BoxPane;
+import org.apache.pivot.wtk.Component;
+import org.apache.pivot.wtk.ComponentMouseButtonListener;
+import org.apache.pivot.wtk.DesktopApplicationContext;
+import org.apache.pivot.wtk.Dimensions;
+import org.apache.pivot.wtk.Display;
+import org.apache.pivot.wtk.GridPane;
+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.Window;
+import org.apache.pivot.wtkx.WTKXSerializer;
+
+public class SimpleGridPanes implements Application {
+    private Window window = null;
+    private GridPane gridPane = null;
+
+    @Override
+    public void startup(Display display, Map<String, String> properties) throws Exception {
+        WTKXSerializer wtkxSerializer = new WTKXSerializer();
+        window = (Window)wtkxSerializer.readObject(this, "simple_grid_panes.wtkx");
+        gridPane = (GridPane)wtkxSerializer.get("gridPane");
+
+        gridPane.getComponentMouseButtonListeners().add(new ComponentMouseButtonListener.Adapter() {
+            @Override
+            public boolean mouseClick(Component component, Mouse.Button button, int x, int y, int count) {
+                int rowIndex = gridPane.getRowAt(y);
+                int columnIndex = gridPane.getColumnAt(x);
+
+                if (rowIndex >= 0
+                    && columnIndex >= 0) {
+                    Dimensions d = gridPane.getCellComponent(rowIndex, columnIndex).getSize();
+                    int rowHeight = d.height;
+                    int columnWidth = d.width;
+
+                    String message = "Registered Click At " + rowIndex + "," + columnIndex;
+
+                    Label heightLabel = new Label(String.format("The row's height is %d",
+                        rowHeight));
+                    Label widthLabel = new Label(String.format("The column's width is %d",
+                        columnWidth));
+
+                    BoxPane body = new BoxPane(Orientation.VERTICAL);
+                    body.add(heightLabel);
+                    body.add(widthLabel);
+
+                    Prompt.prompt(MessageType.INFO, message, body, window);
+                }
+
+                return false;
+            }
+        });
+
+        window.open(display);
+    }
+
+    @Override
+    public boolean shutdown(boolean optional) {
+        if (window != null) {
+            window.close();
+        }
+
+        return false;
+    }
+
+    @Override
+    public void suspend() {
+        // No-op
+    }
+
+    @Override
+    public void resume() {
+        // No-op
+    }
+
+    public static void main(String[] args) {
+        DesktopApplicationContext.main(SimpleGridPanes.class, args);
+    }
+}

Added: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/grid_panes.wtkx
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/grid_panes.wtkx?rev=882066&view=auto
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/grid_panes.wtkx (added)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/grid_panes.wtkx Thu Nov 19 08:01:51 2009
@@ -0,0 +1,164 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to you under the Apache License,
+Version 2.0 (the "License"); you may not use this file except in
+compliance with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<Window title="Grid Panes" maximized="true"
+    xmlns:wtkx="http://pivot.apache.org/wtkx"
+    xmlns:content="org.apache.pivot.wtk.content"
+    xmlns="org.apache.pivot.wtk">
+    <wtkx:define>
+        <Menu.Section wtkx:id="rowSection">
+            <Menu.Item action="insertRow" buttonData="Insert Row"/>
+            <Menu.Item action="removeRow" buttonData="Remove Row"/>
+        </Menu.Section>
+        <Menu.Section wtkx:id="columnSection">
+            <Menu.Item action="insertColumn" buttonData="Insert Column"/>
+            <Menu.Item action="removeColumn" buttonData="Remove Column"/>
+        </Menu.Section>
+    </wtkx:define>
+
+    <content>
+        <SplitPane splitRatio="0.6">
+            <left>
+                <Border>
+                    <content>
+                        <GridPane wtkx:id="gridPane" styles="{verticalSpacing:21, showHorizontalGridLines:true,
+                            horizontalSpacing:21, showVerticalGridLines:true, padding:10}">
+                            <columns>
+                                <GridPane.Column />
+                                <GridPane.Column />
+                                <GridPane.Column />
+                                <GridPane.Column />
+                            </columns>
+
+                            <rows>
+                                <GridPane.Row>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                </GridPane.Row>
+                                <GridPane.Row>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                </GridPane.Row>
+                                <GridPane.Row>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                </GridPane.Row>
+                                <GridPane.Row>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                    <Panel styles="{backgroundColor:'#dddcd5'}"/>
+                                </GridPane.Row>
+                            </rows>
+                        </GridPane>
+                    </content>
+                </Border>
+            </left>
+            <right>
+                <Border styles="{padding:10}">
+                    <content>
+                        <Form>
+                            <sections>
+                                <Form.Section>
+                                    <Checkbox Form.label="Show horizontal grid lines" selected="true">
+                                        <buttonStateListeners>
+                                            <wtkx:script>
+                                            <![CDATA[
+                                            function stateChanged(button, previousState) {
+                                                gridPane.getStyles().put("showHorizontalGridLines",
+                                                    button.isSelected());
+                                            }
+                                            ]]>
+                                            </wtkx:script>
+                                        </buttonStateListeners>
+                                    </Checkbox>
+                                    <Checkbox Form.label="Show vertical grid lines" selected="true">
+                                        <buttonStateListeners>
+                                            <wtkx:script>
+                                            <![CDATA[
+                                            function stateChanged(button, previousState) {
+                                                gridPane.getStyles().put("showVerticalGridLines",
+                                                    button.isSelected());
+                                            }
+                                            ]]>
+                                            </wtkx:script>
+                                        </buttonStateListeners>
+                                    </Checkbox>
+                                    <Spinner Form.label="Horizontal spacing" selectedIndex="21"
+                                        styles="{sizeToContent:true}">
+                                        <spinnerData>
+                                            <content:NumericSpinnerData lowerBound="0" upperBound="50"/>
+                                        </spinnerData>
+                                        <spinnerSelectionListeners>
+                                            <wtkx:script>
+                                            <![CDATA[
+                                            function selectedIndexChanged(spinner, previousSelectedIndex) {
+                                                gridPane.getStyles().put("horizontalSpacing",
+                                                    spinner.getSelectedItem());
+                                            }
+                                            ]]>
+                                            </wtkx:script>
+                                        </spinnerSelectionListeners>
+                                    </Spinner>
+                                    <Spinner Form.label="Vertical spacing" selectedIndex="21"
+                                        styles="{sizeToContent:true}">
+                                        <spinnerData>
+                                            <content:NumericSpinnerData lowerBound="0" upperBound="50"/>
+                                        </spinnerData>
+                                        <spinnerSelectionListeners>
+                                            <wtkx:script>
+                                            <![CDATA[
+                                            function selectedIndexChanged(spinner, previousSelectedIndex) {
+                                                gridPane.getStyles().put("verticalSpacing",
+                                                    spinner.getSelectedItem());
+                                            }
+                                            ]]>
+                                            </wtkx:script>
+                                        </spinnerSelectionListeners>
+                                    </Spinner>
+                                    <Spinner Form.label="Padding" selectedIndex="10"
+                                        styles="{sizeToContent:true}">
+                                        <spinnerData>
+                                            <content:NumericSpinnerData lowerBound="0" upperBound="25"/>
+                                        </spinnerData>
+                                        <spinnerSelectionListeners>
+                                            <wtkx:script>
+                                            <![CDATA[
+                                            function selectedIndexChanged(spinner, previousSelectedIndex) {
+                                                gridPane.getStyles().put("padding",
+                                                    spinner.getSelectedItem());
+                                            }
+                                            ]]>
+                                            </wtkx:script>
+                                        </spinnerSelectionListeners>
+                                    </Spinner>
+                                </Form.Section>
+                            </sections>
+                        </Form>
+                    </content>
+                </Border>
+            </right>
+        </SplitPane>
+    </content>
+</Window>

Added: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/simple_grid_panes.wtkx
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/simple_grid_panes.wtkx?rev=882066&view=auto
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/simple_grid_panes.wtkx (added)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/simple_grid_panes.wtkx Thu Nov 19 08:01:51 2009
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to you under the Apache License,
+Version 2.0 (the "License"); you may not use this file except in
+compliance with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<Window wtkx:id="window" title="Grid Panes" maximized="true"
+    xmlns:wtkx="http://pivot.apache.org/wtkx"
+    xmlns="org.apache.pivot.wtk">
+    <content>
+        <Border>
+            <content>
+                <GridPane wtkx:id="gridPane" styles="{verticalSpacing:1, showHorizontalGridLines:true,
+                    horizontalSpacing:1, showVerticalGridLines:true}">
+                    <columns>
+                        <GridPane.Column />
+                        <GridPane.Column />
+                        <GridPane.Column />
+                        <GridPane.Column />
+                        <GridPane.Column />
+                    </columns>
+
+                    <rows>
+                        <GridPane.Row>
+                            <GridPane.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'}"/>
+                        </GridPane.Row>
+                        <GridPane.Row>
+                            <Label text="50" styles="{verticalAlignment:'center'}"/>
+                        </GridPane.Row>
+                        <GridPane.Row>
+                            <Label text="-1" styles="{verticalAlignment:'center'}"/>
+                        </GridPane.Row>
+                        <GridPane.Row>
+                            <Label text="1*" styles="{verticalAlignment:'center'}"/>
+                        </GridPane.Row>
+                        <GridPane.Row>
+                            <Label text="2*" styles="{verticalAlignment:'center'}"/>
+                        </GridPane.Row>
+                    </rows>
+                </GridPane>
+            </content>
+        </Border>
+    </content>
+</Window>

Modified: incubator/pivot/trunk/tutorials/www/grid_panes.html
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/grid_panes.html?rev=882066&r1=882065&r2=882066&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/grid_panes.html (original)
+++ incubator/pivot/trunk/tutorials/www/grid_panes.html Thu Nov 19 08:01:51 2009
@@ -34,7 +34,196 @@
 <body>
 <h1>Grid Panes</h1>
 
-<p>This section is not yet complete.</p>
+<p>Grid panes are used to arrange components in a fixed 2-dimensional grid. Grid panes have a "columns" collection that defines the column structure of the grid and a "rows" collection that defines both the row structure of the grid and the contents of each row.</p>
+
+<p>Grid panes support a number of styles that allow a caller to customize the arrangement of child components:</p>
+
+<ul>
+<li>"padding" - the amount of space the grid pane reserves around the perimeter of the container.</li>
+<li>"horizontalSpacing" - the amount of space the grid pane inserts between columns.</li>
+<li>"verticalSpacing" - the amount of space the grid pane inserts between rows.</li>
+<li>"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.</li>
+<li>"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.</li>
+<li>"horizontalGridColor" - the color of the horizontal grid lines.</li>
+<li>"verticalGridColor" - the color of the vertical grid lines.</li>
+<li>"highlightBackgroundColor" - the background color of rows and columns whose "highlighted" flag is set to <tt>true</tt>.</li>
+</ul>
+
+<p>Below is a sample application that demonstrates a basic grid pane structure and responds to mouse clicks with information about where the user clicked:</p>
+
+<script src="version.js"></script>
+<script>
+var attributes = {code:"org.apache.pivot.wtk.BrowserApplicationContext$HostApplet",
+    archive:"lib/pivot-core-" + version + ".jar"
+        + ",lib/pivot-wtk-" + version + ".jar"
+        + ",lib/pivot-wtk-" + version + ".terra.jar"
+        + ",lib/pivot-tutorials-" + version + ".jar",
+    width:500,
+    height:350,
+    style:"border:solid 1px #999999"
+};
+var parameters = {application_class_name:"org.apache.pivot.tutorials.layout.SimpleGridPanes",
+    codebase_lookup:false,
+    java_arguments:"-Dsun.awt.noerasebackground=true -Dsun.awt.erasebackgroundonresize=true"
+};
+deployJava.writeAppletTag(attributes, parameters);
+</script>
+
+<p>The WTKX source for the application is shown below:</p>
+
+<pre class="brush:xml">
+&lt;Window wtkx:id="window" title="Grid Panes" maximized="true"
+    xmlns:wtkx="http://pivot.apache.org/wtkx"
+    xmlns="org.apache.pivot.wtk"&gt;
+    &lt;content&gt;
+        &lt;Border&gt;
+            &lt;content&gt;
+                &lt;GridPane wtkx:id="gridPane" styles="{verticalSpacing:1, showHorizontalGridLines:true,
+                    horizontalSpacing:1, showVerticalGridLines:true}"&gt;
+                    &lt;columns&gt;
+                        &lt;GridPane.Column /&gt;
+                        &lt;GridPane.Column /&gt;
+                        &lt;GridPane.Column /&gt;
+                        &lt;GridPane.Column /&gt;
+                        &lt;GridPane.Column /&gt;
+                    &lt;/columns&gt;
+
+                    &lt;rows&gt;
+                        &lt;GridPane.Row&gt;
+                            &lt;GridPane.Filler/&gt;
+                            &lt;Label text="50" styles="{horizontalAlignment:'center'}"/&gt;
+                            &lt;Label text="-1" styles="{horizontalAlignment:'center'}"/&gt;
+                            &lt;Label text="1*" styles="{horizontalAlignment:'center'}"/&gt;
+                            &lt;Label text="2*" styles="{horizontalAlignment:'center'}"/&gt;
+                        &lt;/GridPane.Row&gt;
+                        &lt;GridPane.Row&gt;
+                            &lt;Label text="50" styles="{verticalAlignment:'center'}"/&gt;
+                        &lt;/GridPane.Row&gt;
+                        &lt;GridPane.Row&gt;
+                            &lt;Label text="-1" styles="{verticalAlignment:'center'}"/&gt;
+                        &lt;/GridPane.Row&gt;
+                        &lt;GridPane.Row&gt;
+                            &lt;Label text="1*" styles="{verticalAlignment:'center'}"/&gt;
+                        &lt;/GridPane.Row&gt;
+                        &lt;GridPane.Row&gt;
+                            &lt;Label text="2*" styles="{verticalAlignment:'center'}"/&gt;
+                        &lt;/GridPane.Row&gt;
+                    &lt;/rows&gt;
+                &lt;/GridPane&gt;
+            &lt;/content&gt;
+        &lt;/Border&gt;
+    &lt;/content&gt;
+&lt;/Window&gt;
+</pre>
+
+<p>The Java source is as follows. Most of the code is simply event handling logic that responds to mouse clicks:</p>
+
+<pre class="brush:java">
+package org.apache.pivot.tutorials.layout;
+
+import org.apache.pivot.collections.Map;
+import org.apache.pivot.wtk.Application;
+import org.apache.pivot.wtk.BoxPane;
+import org.apache.pivot.wtk.Component;
+import org.apache.pivot.wtk.ComponentMouseButtonListener;
+import org.apache.pivot.wtk.DesktopApplicationContext;
+import org.apache.pivot.wtk.Dimensions;
+import org.apache.pivot.wtk.Display;
+import org.apache.pivot.wtk.GridPane;
+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.Window;
+import org.apache.pivot.wtkx.WTKXSerializer;
+
+public class SimpleGridPanes implements Application {
+    private Window window = null;
+    private GridPane gridPane = null;
+
+    @Override
+    public void startup(Display display, Map<String, String> properties) throws Exception {
+        WTKXSerializer wtkxSerializer = new WTKXSerializer();
+        window = (Window)wtkxSerializer.readObject(this, "simple_grid_panes.wtkx");
+        gridPane = (GridPane)wtkxSerializer.get("gridPane");
+
+        gridPane.getComponentMouseButtonListeners().add(new ComponentMouseButtonListener.Adapter() {
+            @Override
+            public boolean mouseClick(Component component, Mouse.Button button, int x, int y, int count) {
+                int rowIndex = gridPane.getRowAt(y);
+                int columnIndex = gridPane.getColumnAt(x);
+
+                if (rowIndex >= 0
+                    && columnIndex >= 0) {
+                    Dimensions d = gridPane.getCellComponent(rowIndex, columnIndex).getSize();
+                    int rowHeight = d.height;
+                    int columnWidth = d.width;
+
+                    String message = "Registered Click At " + rowIndex + "," + columnIndex;
+
+                    Label heightLabel = new Label(String.format("The row's height is %d",
+                        rowHeight));
+                    Label widthLabel = new Label(String.format("The column's width is %d",
+                        columnWidth));
+
+                    BoxPane body = new BoxPane(Orientation.VERTICAL);
+                    body.add(heightLabel);
+                    body.add(widthLabel);
+
+                    Prompt.prompt(MessageType.INFO, message, body, window);
+                }
+
+                return false;
+            }
+        });
+
+        window.open(display);
+    }
+
+    @Override
+    public boolean shutdown(boolean optional) {
+        if (window != null) {
+            window.close();
+        }
+
+        return false;
+    }
+
+    @Override
+    public void suspend() {
+        // No-op
+    }
+
+    @Override
+    public void resume() {
+        // No-op
+    }
+
+    public static void main(String[] args) {
+        DesktopApplicationContext.main(SimpleGridPanes.class, args);
+    }
+}
+</pre>
+
+<p>Next, let's look at a more involved application that allows you to interact with the grid pane to get a feel for how you can achieve the layout that you desire. The following application allows you to control the grid pane's styles via the controls on the left and responds to right-clicks over the grid pane itself. You can also move the splitter to see the effect it has on the relative columns in the grid pane.</p>
+
+<script>
+var attributes = {code:"org.apache.pivot.wtk.BrowserApplicationContext$HostApplet",
+    archive:"lib/pivot-core-" + version + ".jar"
+        + ",lib/pivot-wtk-" + version + ".jar"
+        + ",lib/pivot-wtk-" + version + ".terra.jar"
+        + ",lib/pivot-tutorials-" + version + ".jar",
+    width:500,
+    height:350,
+    style:"border:solid 1px #999999"
+};
+var parameters = {application_class_name:"org.apache.pivot.tutorials.layout.TablePanes",
+    codebase_lookup:false,
+    java_arguments:"-Dsun.awt.noerasebackground=true -Dsun.awt.erasebackgroundonresize=true"
+};
+deployJava.writeAppletTag(attributes, parameters);
+</script>
 
 <p>Next: <a href="borders.html">Borders</a></p>
 </body>

Modified: incubator/pivot/trunk/tutorials/www/layout_containers.html
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/layout_containers.html?rev=882066&r1=882065&r2=882066&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/layout_containers.html (original)
+++ incubator/pivot/trunk/tutorials/www/layout_containers.html Thu Nov 19 08:01:51 2009
@@ -30,6 +30,7 @@
 <li><p><a href="box_panes.html"><b>BoxPane</b></a> - Container that arranges components in a line, either vertically or horizontally.</p></li>
 <li><p><a href="table_panes.html"><b>TablePane</b></a> - A container that lays out its children in a two-dimensional table structure, optionally spanning table cells.</p></li>
 <li><p><a href="grid_panes.html"><b>GridPane</b></a> - Similar to TablePane, but without spanning cells and where each cell is the same size.</p></li>
+<li><p><a href="grid_panes.html"><b>GridPane</b></a> - Container that arranges components in a grid, much like a TablePane, but where every cell is the same size.</p></li>
 <li><p><a href="borders.html"><b>Border</b></a> - A container with an optional title that draws a border around a single content component.</p></li>
 <li><p><a href="stack_panes.html"><b>StackPane</b></a> - Arranges components in layers, like a stack of transparencies.</p></li>
 <li><p><a href="split_panes.html"><b>SplitPane</b></a> - Provides a draggable divider between two components allowing a user to dynamically change the size of each; may be horizontal or vertical.</p></li>