You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pivot.apache.org by tv...@apache.org on 2009/09/06 17:35:23 UTC
svn commit: r811828 - in /incubator/pivot/trunk/tutorials:
src/org/apache/pivot/tutorials/layout/ www/
Author: tvolkert
Date: Sun Sep 6 15:35:22 2009
New Revision: 811828
URL: http://svn.apache.org/viewvc?rev=811828&view=rev
Log:
PIVOT-235 :: Add a simple table panes tutorial, fix some UE issues in advanced table pane tutorial, add content to table panes tutorial html page
Added:
incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/SimpleTablePanes.java
incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/simple_table_panes.wtkx
Removed:
incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/arrow_left.png
incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/arrow_right.png
incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/pencil.png
Modified:
incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/table_panes.wtkx
incubator/pivot/trunk/tutorials/www/box_panes.template.html
incubator/pivot/trunk/tutorials/www/table_panes.template.html
Added: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/SimpleTablePanes.java
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/SimpleTablePanes.java?rev=811828&view=auto
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/SimpleTablePanes.java (added)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/SimpleTablePanes.java Sun Sep 6 15:35:22 2009
@@ -0,0 +1,104 @@
+/*
+ * 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.BoxPane;
+import org.apache.pivot.wtk.Component;
+import org.apache.pivot.wtk.ComponentMouseButtonListener;
+import org.apache.pivot.wtk.Application;
+import org.apache.pivot.wtk.DesktopApplicationContext;
+import org.apache.pivot.wtk.Display;
+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;
+import org.apache.pivot.wtkx.WTKXSerializer;
+
+public class SimpleTablePanes implements Application {
+ private Window window = null;
+ private TablePane tablePane = null;
+
+ @Override
+ public void startup(Display display, Map<String, String> properties) throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "simple_table_panes.wtkx");
+ tablePane = (TablePane)wtkxSerializer.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, 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(SimpleTablePanes.class, args);
+ }
+}
Added: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/simple_table_panes.wtkx
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/simple_table_panes.wtkx?rev=811828&view=auto
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/simple_table_panes.wtkx (added)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/simple_table_panes.wtkx Sun Sep 6 15:35:22 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="Table Panes" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <Border styles="{padding:0}">
+ <content>
+ <TablePane wtkx: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>
+
+ <rows>
+ <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>
+ </rows>
+ </TablePane>
+ </content>
+ </Border>
+ </content>
+</Window>
Modified: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/table_panes.wtkx
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/table_panes.wtkx?rev=811828&r1=811827&r2=811828&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/table_panes.wtkx (original)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/table_panes.wtkx Sun Sep 6 15:35:22 2009
@@ -22,45 +22,17 @@
xmlns="org.apache.pivot.wtk">
<wtkx:define>
<Menu.Section wtkx:id="cellSection">
- <Menu.Item action="configureCell">
- <buttonData>
- <content:ButtonData icon="@pencil.png" text="Configure Cell Content" />
- </buttonData>
- </Menu.Item>
+ <Menu.Item action="configureCell" buttonData="Configure Cell Content"/>
</Menu.Section>
<Menu.Section wtkx:id="rowSection">
- <Menu.Item action="configureRow">
- <buttonData>
- <content:ButtonData icon="@pencil.png" text="Configure Row" />
- </buttonData>
- </Menu.Item>
- <Menu.Item action="insertRow">
- <buttonData>
- <content:ButtonData icon="@arrow_right.png" text="Insert Row" />
- </buttonData>
- </Menu.Item>
- <Menu.Item action="removeRow">
- <buttonData>
- <content:ButtonData icon="@arrow_left.png" text="Remove Row" />
- </buttonData>
- </Menu.Item>
+ <Menu.Item action="configureRow" buttonData="Configure Row"/>
+ <Menu.Item action="insertRow" buttonData="Insert Row"/>
+ <Menu.Item action="removeRow" buttonData="Remove Row"/>
</Menu.Section>
<Menu.Section wtkx:id="columnSection">
- <Menu.Item action="configureColumn">
- <buttonData>
- <content:ButtonData icon="@pencil.png" text="Configure Column" />
- </buttonData>
- </Menu.Item>
- <Menu.Item action="insertColumn">
- <buttonData>
- <content:ButtonData icon="@arrow_right.png" text="Insert Column" />
- </buttonData>
- </Menu.Item>
- <Menu.Item action="removeColumn">
- <buttonData>
- <content:ButtonData icon="@arrow_left.png" text="Remove Column" />
- </buttonData>
- </Menu.Item>
+ <Menu.Item action="configureColumn" buttonData="Configure Column"/>
+ <Menu.Item action="insertColumn" buttonData="Insert Column"/>
+ <Menu.Item action="removeColumn" buttonData="Remove Column"/>
</Menu.Section>
</wtkx:define>
Modified: incubator/pivot/trunk/tutorials/www/box_panes.template.html
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/box_panes.template.html?rev=811828&r1=811827&r2=811828&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/box_panes.template.html (original)
+++ incubator/pivot/trunk/tutorials/www/box_panes.template.html Sun Sep 6 15:35:22 2009
@@ -36,7 +36,7 @@
<p>Box panes are used to arrange components sequentially: horizontal box panes lay out their children horizontally from left to right, and vertical box panes arrange their children vertically from top to bottom.</p>
-<p>Box panes support a number of style that allow a caller to customize the arrangement of child components:</p>
+<p>Box panes support a number of styles that allow a caller to customize the arrangement of child components:</p>
<ul>
<li><tt>padding</tt> - the amount of space the box pane reserves around the perimeter of the container.</li>
Modified: incubator/pivot/trunk/tutorials/www/table_panes.template.html
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/table_panes.template.html?rev=811828&r1=811827&r2=811828&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/table_panes.template.html (original)
+++ incubator/pivot/trunk/tutorials/www/table_panes.template.html Sun Sep 6 15:35:22 2009
@@ -34,47 +34,177 @@
<body>
<h1>Table Panes</h1>
-<p>TablePane has a "columns" collection and a "rows" collection. In WTKX, a table pane might be defined as follows:</p>
+<p>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.</p>
+
+<p>Table panes support a number of styles that allow a caller to customize the arrangement of child components:</p>
+
+<ul>
+<li><tt>padding</tt> - the amount of space the table pane reserves around the perimeter of the container.</li>
+<li><tt>horizontalSpacing</tt> - the amount of space the table pane inserts between columns.</li>
+<li><tt>verticalSpacing</tt> - the amount of space the table pane inserts between rows.</li>
+<li><tt>showHorizontalGridLines</tt> - whether horizontal grid lines will be painted in the space between rows. Note that this will be ignored if <tt>verticalSpacing</tt> is zero, as there would be no space in which to paint the grid lines.</li>
+<li><tt>showVerticalGridLines</tt> - whether vertical grid lines will be painted in the space between columns. Note that this will be ignored if <tt>horizontalSpacing</tt> is zero, as there would be no space in which to paint the grid lines.</li>
+<li><tt>gridColor</tt> - the color of the grid lines.</li>
+<li><tt>highlightBackgroundColor</tt> - the background color of rows and columns whose <tt>highlighted</tt> flag is set to <tt>true</tt>.</li>
+</ul>
+
+<p>Below is a sample application that demonstrates a basic table pane structure and responds to mouse clicks with information about where the user clicked:</p>
+
+<script>
+var attributes = {code:"org.apache.pivot.wtk.BrowserApplicationContext$HostApplet",
+ archive:"lib/@project_name@-core-@version@.jar,lib/@project_name@-wtk-@version@.jar,lib/@project_name@-wtk-@version@.terra.jar,lib/@project_name@-tutorials-@version@.jar",
+ width:500,
+ height:350,
+ style:"border:solid 1px #999999"
+};
+var parameters = {application_class_name:"org.apache.pivot.tutorials.layout.SimpleTablePanes",
+ codebase_lookup:false
+};
+deployJava.writeAppletTag(attributes, parameters);
+</script>
+
+<p>The WTKX source for the application is shown below:</p>
<pre class="brush:xml">
-<TablePane>
- <columns>
- <TablePane.Column width="120"/>
- <TablePane.Column width="240"/>
- </columns>
- <rows>
- <TablePane.Row height="80">
- <ImageView image="a.png"/>
- <ImageView image="b.png"/>
- </TablePane.Row>
- <TablePane.Row height="160">
- <ImageView image="c.png"/>
- <ImageView image="d.png"/>
- </TablePane.Row>
- </rows>
-</TablePane>
+<Window wtkx:id="window" title="Table Panes" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <Border styles="{padding:0}">
+ <content>
+ <TablePane wtkx: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>
+
+ <rows>
+ <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>
+ </rows>
+ </TablePane>
+ </content>
+ </Border>
+ </content>
+</Window>
</pre>
-<p>This table pane would contain four <tt>ImageView</tt> cells, with column widths and row heights as specified. It is analogous to defining a table in HTML, only the table's columns must be defined up front (so they don't have to be inferred), and the equivalent of a <td> tag is not required, since any component can be a cell.</p>
-
-<p>In Java, it would look like this:</p>
+<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">
-TablePane tablePane = new TablePane();
-tablePane.getColumns().add(new TablePane.Column(120));
-tablePane.getColumns().add(new TablePane.Column(240));
-
-TablePane.Row row1 = new TablePane.Row(80);
-row1.add(new ImageView(Image.load(getClass().getResource("a.png"))));
-row1.add(new ImageView(Image.load(getClass().getResource("b.png"))));
-tablePane.getRows().add(row1);
-
-TablePane.Row row2 = new TablePane.Row(160);
-row2.add(new ImageView(Image.load(getClass().getResource("c.png"))));
-row2.add(new ImageView(Image.load(getClass().getResource("d.png"))));
-tablePane.getRows().add(row2);
+package org.apache.pivot.tutorials.layout;
+
+import org.apache.pivot.collections.Map;
+import org.apache.pivot.wtk.BoxPane;
+import org.apache.pivot.wtk.Component;
+import org.apache.pivot.wtk.ComponentMouseButtonListener;
+import org.apache.pivot.wtk.Application;
+import org.apache.pivot.wtk.DesktopApplicationContext;
+import org.apache.pivot.wtk.Display;
+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;
+import org.apache.pivot.wtkx.WTKXSerializer;
+
+public class SimpleTablePanes implements Application {
+ private Window window = null;
+ private TablePane tablePane = null;
+
+ @Override
+ public void startup(Display display, Map<String, String> properties) throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "simple_table_panes.wtkx");
+ tablePane = (TablePane)wtkxSerializer.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, 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(SimpleTablePanes.class, args);
+ }
+}
</pre>
+<p>Next, let's look at a more involved application that allows you to interact with the table pane to get a feel for how you can achieve the layout that you desire. The following application allows you to control the table pane's styles via the controls on the left and responds to right-clicks over the table pane itself. You can also move the splitter to see the effect it has on the relative columns in the table pane.</p>
+
<script>
var attributes = {code:"org.apache.pivot.wtk.BrowserApplicationContext$HostApplet",
archive:"lib/@project_name@-core-@version@.jar,lib/@project_name@-wtk-@version@.jar,lib/@project_name@-wtk-@version@.terra.jar,lib/@project_name@-tutorials-@version@.jar",