You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pivot.apache.org by gb...@apache.org on 2009/12/06 16:01:42 UTC
svn commit: r887688 - in /incubator/pivot/trunk/tutorials:
src/org/apache/pivot/tutorials/layout/ www/
Author: gbrown
Date: Sun Dec 6 15:01:41 2009
New Revision: 887688
URL: http://svn.apache.org/viewvc?rev=887688&view=rev
Log:
Continue migrating tutorial content to XML.
Removed:
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/simple_grid_panes.wtkx
incubator/pivot/trunk/tutorials/www/forms.html
incubator/pivot/trunk/tutorials/www/grid_panes.html
incubator/pivot/trunk/tutorials/www/hello_world.html
incubator/pivot/trunk/tutorials/www/hello_wtkx.html
Modified:
incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/grid_panes.wtkx
incubator/pivot/trunk/tutorials/www/forms.xml
incubator/pivot/trunk/tutorials/www/grid-panes.xml
incubator/pivot/trunk/tutorials/www/hello-world.xml
incubator/pivot/trunk/tutorials/www/hello-wtkx.xml
incubator/pivot/trunk/tutorials/www/index.xml
incubator/pivot/trunk/tutorials/www/platform_overview.html
incubator/pivot/trunk/tutorials/www/table-panes.xml
Modified: 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=887688&r1=887687&r2=887688&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/grid_panes.wtkx (original)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/layout/grid_panes.wtkx Sun Dec 6 15:01:41 2009
@@ -18,147 +18,79 @@
<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>
+ <Border>
+ <content>
+ <GridPane wtkx:id="gridPane" styles="{horizontalSpacing:1, verticalSpacing:1,
+ showHorizontalGridLines:true, showVerticalGridLines:true}">
+ <columns>
+ <GridPane.Column/>
+ <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>
+ <rows>
+ <GridPane.Row>
+ <Label text="0, 0" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <Label text="0, 1" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <Label text="0, 2" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <Label text="0, 3" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <GridPane.Filler/>
+ </GridPane.Row>
+ <GridPane.Row>
+ <Label text="1, 0" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <Label text="1, 1" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <Label text="1, 2" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <GridPane.Filler/>
+ <Label text="1, 4" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ </GridPane.Row>
+ <GridPane.Row>
+ <Label text="2, 0" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <Label text="2, 1" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <GridPane.Filler/>
+ <Label text="2, 3" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <Label text="2, 4" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ </GridPane.Row>
+ <GridPane.Row>
+ <Label text="3, 0" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <GridPane.Filler/>
+ <Label text="3, 2" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <Label text="3, 3" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <Label text="3, 4" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ </GridPane.Row>
+ <GridPane.Row>
+ <GridPane.Filler/>
+ <Label text="4, 1" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <Label text="4, 2" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <Label text="4, 3" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ <Label text="4, 4" styles="{horizontalAlignment:'center',
+ verticalAlignment:'center'}"/>
+ </GridPane.Row>
+ </rows>
+ </GridPane>
+ </content>
+ </Border>
</content>
</Window>
Modified: incubator/pivot/trunk/tutorials/www/forms.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/forms.xml?rev=887688&r1=887687&r2=887688&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/forms.xml (original)
+++ incubator/pivot/trunk/tutorials/www/forms.xml Sun Dec 6 15:01:41 2009
@@ -22,5 +22,240 @@
</properties>
<body>
+ <p>
+ Forms are often used to collect related pieces of information from a user. For example,
+ an application that manages a user's music collection might provide a form that allows
+ the user to enter such information as song title, artist, and album name, and a content
+ management system might provide a form that allows a user to specify the title, author,
+ and publication date of an article.
+ </p>
+
+ <p>
+ Form contents are commonly organized into sections, to make it easier for the user to
+ read. A contact management application might use a form such as the one shown below to
+ collect information about the user's contacts. The form is divided into four sections,
+ one for each aspect of the contact record: name, addresses, phone numbers, and email
+ addresses. Note the use of the <tt><Form.Section></tt> elements to define the
+ sections; the <tt>Form</tt>'s skin automatically inserts
+ <a href="separators.html">separators</a> to visually partition the section content and
+ uses the <tt>Form.Section</tt> heading as the <tt>Separator</tt> heading:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.layout.Forms"
+ width="512" height="384">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ The WTKX for this example is shown below:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/layout/forms.wtkx">
+ <![CDATA[
+ <Window title="Forms" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <Border styles="{padding:6}">
+ <content>
+ <TablePane>
+ <columns>
+ <TablePane.Column width="1*"/>
+ </columns>
+ <rows>
+ <TablePane.Row height="1*">
+ <Form styles="{rightAlignLabels:true}">
+ <sections>
+ <Form.Section>
+ <BoxPane wtkx:id="nameBoxPane" Form.label="Name">
+ <TextInput wtkx:id="lastNameTextInput" prompt="Last"/>
+ <TextInput wtkx:id="firstNameTextInput" prompt="First"/>
+ </BoxPane>
+ </Form.Section>
+ <Form.Section heading="Addresses">
+ <BoxPane Form.label="Home" orientation="vertical">
+ <TextInput prompt="Street" textSize="24"/>
+ <BoxPane>
+ <TextInput prompt="City"/>
+ <TextInput prompt="State" textSize="6"/>
+ <TextInput prompt="Zip" textSize="10"/>
+ </BoxPane>
+ </BoxPane>
+ <BoxPane Form.label="Work" orientation="vertical">
+ <TextInput prompt="Street" textSize="24"/>
+ <BoxPane>
+ <TextInput prompt="City"/>
+ <TextInput prompt="State" textSize="6"/>
+ <TextInput prompt="Zip" textSize="10"/>
+ </BoxPane>
+ </BoxPane>
+ </Form.Section>
+ <Form.Section heading="Phone Numbers">
+ <TextInput Form.label="Home"/>
+ <TextInput Form.label="Work"/>
+ </Form.Section>
+ <Form.Section heading="Email Addresses">
+ <TextInput Form.label="Home"/>
+ <TextInput Form.label="Work"/>
+ </Form.Section>
+ </sections>
+ </Form>
+ </TablePane.Row>
+ <TablePane.Row height="-1">
+ <Separator/>
+ </TablePane.Row>
+ <TablePane.Row height="-1">
+ <TablePane>
+ <columns>
+ <TablePane.Column width="1*"/>
+ <TablePane.Column width="-1"/>
+ </columns>
+ <rows>
+ <TablePane.Row>
+ <BoxPane styles="{verticalAlignment:'center'}">
+ <Label wtkx:id="errorLabel" styles="{color:'#ff0000'}"/>
+ </BoxPane>
+ <BoxPane styles="{horizontalAlignment:'right', verticalAlignment:'center'}">
+ <PushButton wtkx:id="submitButton" buttonData="Submit"
+ styles="{minimumAspectRatio:3}"/>
+ </BoxPane>
+ </TablePane.Row>
+ </rows>
+ </TablePane>
+ </TablePane.Row>
+ </rows>
+ </TablePane>
+ </content>
+ </Border>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ Also note the use of the <tt>Form.label</tt> attribute - this is an example of an
+ "attached property", also called an "attribute" in WTK. An attribute is a property that
+ can be specified on a component only when it is a child of the container that defines
+ the property. The same result can be achieved programmatically by calling the static
+ <tt>Form.setName()</tt> method on a component after it has been added to the form.
+ Several other containers, including <tt>TabPane</tt> and <tt>TablePane</tt>, define
+ similar attributes.
+ </p>
+
+ <p>
+ Note also that section components are not required to be typical form elements such as
+ <tt>TextInput</tt> or <tt>PushButton</tt>. They can also be containers, allowing the
+ arrangement of components within a section to be customized.
+ </p>
+
+ <h2>Form Validation</h2>
+ <p>
+ Pressing the "Submit" button performs some simple validation on the name fields,
+ ensuring that the user has provided some text in each field. If either field is empty,
+ an error message is displayed at the bottom of the form, and the row containing the
+ text fields is highlighted with a red flag. This demonstrates the use of another
+ <tt>Form</tt> attribute: the flag. A flag is an instance of <tt>Form.Flag</tt> that
+ allows a user to tag a form element as requiring attention from the user. It is a
+ simple class that contains a message type (error, warning, info, etc.) and a message.
+ Mousing over the flag displays a tooltip containing the message.
+ </p>
+
+ <p>
+ The button press handler in the code sample below shows how a flag is set on the name
+ fields:
+ </p>
+
+ <source type="java" location="org/apache/pivot/tutorials/layout/Forms.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.layout;
+
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.wtk.Application;
+ import org.apache.pivot.wtk.Button;
+ import org.apache.pivot.wtk.ButtonPressListener;
+ import org.apache.pivot.wtk.DesktopApplicationContext;
+ import org.apache.pivot.wtk.Display;
+ import org.apache.pivot.wtk.BoxPane;
+ import org.apache.pivot.wtk.Form;
+ import org.apache.pivot.wtk.Label;
+ import org.apache.pivot.wtk.MessageType;
+ import org.apache.pivot.wtk.Prompt;
+ import org.apache.pivot.wtk.PushButton;
+ import org.apache.pivot.wtk.TextInput;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class Forms implements Application {
+ private Window window = null;
+ private BoxPane nameBoxPane = null;
+ private TextInput lastNameTextInput = null;
+ private TextInput firstNameTextInput = null;
+ private PushButton submitButton = null;
+ private Label errorLabel = null;
+
+ @Override
+ public void startup(Display display, Map<String, String> properties) throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "forms.wtkx");
+ nameBoxPane = (BoxPane)wtkxSerializer.get("nameBoxPane");
+ lastNameTextInput = (TextInput)wtkxSerializer.get("lastNameTextInput");
+ firstNameTextInput = (TextInput)wtkxSerializer.get("firstNameTextInput");
+ submitButton = (PushButton)wtkxSerializer.get("submitButton");
+ errorLabel = (Label)wtkxSerializer.get("errorLabel");
+
+ submitButton.getButtonPressListeners().add(new ButtonPressListener() {
+ @Override
+ public void buttonPressed(Button button) {
+ String lastName = lastNameTextInput.getText();
+ String firstName = firstNameTextInput.getText();
+
+ Form.Flag flag = null;
+ if (lastName.length() == 0
+ || firstName.length() == 0) {
+ flag = new Form.Flag(MessageType.ERROR, "Name is required.");
+ }
+
+ Form.setFlag(nameBoxPane, flag);
+
+ if (flag == null) {
+ errorLabel.setText(null);
+ Prompt.prompt("Pretending to submit...", window);
+ } else {
+ errorLabel.setText("Some required information is missing.");
+ }
+ }
+ });
+
+ window.open(display);
+ }
+
+ @Override
+ public boolean shutdown(boolean optional) {
+ if (window != null) {
+ window.close();
+ }
+
+ return false;
+ }
+
+ @Override
+ public void suspend() {
+ }
+
+ @Override
+ public void resume() {
+ }
+
+ public static void main(String[] args) {
+ DesktopApplicationContext.main(Forms.class, args);
+ }
+ }
+ ]]>
+ </source>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/grid-panes.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/grid-panes.xml?rev=887688&r1=887687&r2=887688&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/grid-panes.xml (original)
+++ incubator/pivot/trunk/tutorials/www/grid-panes.xml Sun Dec 6 15:01:41 2009
@@ -22,5 +22,49 @@
</properties>
<body>
+ <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>
+ Each cell in a grid pane is given the same size, based on the available width and
+ height. For more complex table layouts, <tt>TablePane</tt>, discussed next, may be
+ used.
+ </p>
+
+ <p>
+ Below is a simple application that demonstrates the use of the <tt>GridPane</tt>
+ component. Note the use of the <tt>GridPane.Filler</tt> component, which is used to
+ insert empty cells:
+ </p>
+
+ <application class="org.apache.pivot.wtk.ScriptApplication"
+ width="360" height="360">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ <startup-properties>
+ <src>org/apache/pivot/tutorials/layout/grid_panes.wtkx</src>
+ </startup-properties>
+ </application>
+
+ <p>
+ The WTKX source for the application is shown below:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/layout/grid_panes.wtkx">
+ <![CDATA[
+ ]]>
+ </source>
+
+ <p>
+ Since this application contains no logic, there is no associated Java source.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/hello-world.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/hello-world.xml?rev=887688&r1=887687&r2=887688&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/hello-world.xml (original)
+++ incubator/pivot/trunk/tutorials/www/hello-world.xml Sun Dec 6 15:01:41 2009
@@ -22,5 +22,195 @@
</properties>
<body>
+ <p>
+ Below is the output of the traditional "hello world" application written in Pivot:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.HelloJava"
+ width="240" height="80">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ This version of the application was written entirely in Java and is shown below; a WTKX
+ implementation is demonstrated next:
+ </p>
+
+ <source type="java" location="org/apache/pivot/tutorials/HelloJava.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials;
+
+ import java.awt.Color;
+ import java.awt.Font;
+
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.wtk.Application;
+ import org.apache.pivot.wtk.DesktopApplicationContext;
+ import org.apache.pivot.wtk.Display;
+ import org.apache.pivot.wtk.HorizontalAlignment;
+ import org.apache.pivot.wtk.Label;
+ import org.apache.pivot.wtk.VerticalAlignment;
+ import org.apache.pivot.wtk.Window;
+
+ public class HelloJava implements Application {
+ private Window window = null;
+
+ @Override
+ public void startup(Display display, Map<String, String> properties) {
+ Label label = new Label();
+ label.setText("Hello World!");
+ label.getStyles().put("font", new Font("Arial", Font.BOLD, 24));
+ label.getStyles().put("color", Color.RED);
+ label.getStyles().put("horizontalAlignment",
+ HorizontalAlignment.CENTER);
+ label.getStyles().put("verticalAlignment",
+ VerticalAlignment.CENTER);
+
+ window = new Window();
+ window.setContent(label);
+ window.setTitle("Hello World!");
+ window.setMaximized(true);
+ window.open(display);
+ }
+
+ @Override
+ public boolean shutdown(boolean optional) {
+ if (window != null) {
+ window.close();
+ }
+
+ return false;
+ }
+
+ @Override
+ public void suspend() {
+ }
+
+ @Override
+ public void resume() {
+ }
+
+ public static void main(String[] args) {
+ DesktopApplicationContext.main(HelloJava.class, args);
+ }
+ }
+ ]]>
+ </source>
+
+ <p>
+ The program demonstrates some of the fundamental features of the Pivot platform: the
+ <tt>Application</tt> interface, the <tt>Window</tt> class, and styles.
+ </p>
+
+ <h3>The Application Interface</h3>
+ <p>
+ The Application interface is the entry point into a Pivot application. It is similar to
+ the <tt>main()</tt> method used in C and Java programming or the lifecycle methods used
+ in traditional Java applet development. It defines the following four methods:
+ </p>
+
+ <ul>
+ <li>
+ <tt>startup()</tt> - called when an application is starting up
+ </li>
+ <li>
+ <tt>shutdown()</tt> - called when a running application is shutting down
+ </li>
+ <li>
+ <tt>suspend()</tt> - called when an application is temporarily deactivated
+ </li>
+ <li>
+ <tt>resume()</tt> - called when a suspended application is resumed
+ </li>
+ </ul>
+
+ <p>
+ However, unlike <tt>main()</tt> or the applet lifecycle methods, which require a
+ separate code base for each environment, <tt>Application</tt> defines a single
+ interface that is used for both web deployment or desktop execution, allowing the same
+ program to run unmodified in either environment.
+ </p>
+
+ <p>
+ A Pivot application can be run in the browser using the <tt><applet></tt> tag, as
+ shown below; the class name of the Pivot application is specified by the
+ "applicationClassName" applet parameter (see
+ <a href="http://java.sun.com/javase/6/docs/technotes/guides/jweb/deployment_advice.html#deplToolkit">this article</a>
+ for more information on how to deploy Java applets):
+ </p>
+
+ <source type="html">
+ <![CDATA[
+ <applet code="org.apache.pivot.wtk.BrowserApplicationContext$HostApplet"
+ archive="lib/pivot-core-[version].jar,lib/pivot-wtk-[version].jar,lib/pivot-wtk-terra-[version].jar,lib/pivot-tutorials-[version].jar"
+ width="160" height="80">
+ <param name="applicationClassName" value="org.apache.pivot.tutorials.HelloJava">
+ </applet>
+ ]]>
+ </source>
+
+ <p>
+ The same application can be run from the command line using the following syntax (minus
+ the line breaks) on UNIX-based systems; the class name is the first argument to the
+ DesktopApplicationContext loader application:
+ </p>
+
+ <p>
+ <tt>java -cp pivot-core-<i>[version]</i>.jar:pivot-wtk-<i>[version]</i>.jar:
+ pivot-wtk-terra-<i>[version]</i>.terra.jar:pivot-tutorials-<i>[version]</i>.jar
+ org.apache.pivot.wtk.DesktopApplicationContext org.apache.pivot.tutorials.HelloJava</tt>
+ </p>
+
+ <p>
+ and the following on Windows systems:
+ </p>
+
+ <p>
+ <tt>java -cp pivot-core-<i>[version]</i>.jar;pivot-wtk-<i>[version]</i>.jar;
+ pivot-wtk-terra<i>[version]</i>.terra.jar;pivot-tutorials-<i>[version]</i>.jar
+ org.apache.pivot.wtk.DesktopApplicationContext org.apache.pivot.tutorials.HelloJava</tt>
+ </p>
+
+ <p>
+ The application itself defines a convenience <tt>main()</tt> method that delegates to
+ <tt>DesktopApplicationContext.main()</tt>; this allows Pivot applications to be bundled
+ as executable JARs and makes launching applications from within an IDE easier.
+ </p>
+
+ <h3>The Window Class</h3>
+ <p>
+ A window is the top-level entry point into an application's user interface. Almost all
+ Pivot applications will use at least one window.
+ </p>
+
+ <p>
+ The window in the sample application is an instance of <tt>Window</tt>, the most basic
+ window type. It is simply an undecorated area of the screen into which other components
+ may be placed. Other window types, such as <tt>Dialog</tt> and <tt>Frame</tt>, add
+ additional features and behaviors such as title bars and modality.
+ </p>
+
+ <p>
+ The window used by "Hello World" is "maximized": it automatically fills the entire area
+ of the display. A maximized, decorationless window is commonly used as a top-level
+ application window, particularly for applications that will be primarily run in a web
+ browser. However, windows can also be given an explicit size, can be resized by the
+ user, or can take on the default size of their content. Windows are discussed in more
+ detail in the <a href="windows.html">Windows</a> section.
+ </p>
+
+ <h3>Styles</h3>
+ <p>
+ Styles are a means of customizing a component's appearance. Style properties are
+ defined by a component's skin and are accessed via a component's styles collection. For
+ example, the example application sets the font, color, and alignment styles on the
+ "Hello World" label. Though skins are not required to provide styling support, most
+ will provide similar capabilities.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/hello-wtkx.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/hello-wtkx.xml?rev=887688&r1=887687&r2=887688&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/hello-wtkx.xml (original)
+++ incubator/pivot/trunk/tutorials/www/hello-wtkx.xml Sun Dec 6 15:01:41 2009
@@ -22,5 +22,144 @@
</properties>
<body>
+ <p>
+ Below is the output of the "hello world" application written using WTKX. Note that,
+ with the exception of the actual text, it is identical to the output of the Java
+ version:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.HelloWTKX"
+ width="240" height="80">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ The following is the Java source code for the WTKX version. The content of the user
+ interface is defined entirely by the WTKX source file. It is loaded using an instance
+ of the <tt>WTKXSerializer</tt> class defined in the <tt>org.apache.pivot.wtkx</tt>
+ package.
+ </p>
+
+ <source type="java" location="org/apache/pivot/tutorials/HelloWTKX.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials;
+
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.wtk.Application;
+ import org.apache.pivot.wtk.DesktopApplicationContext;
+ import org.apache.pivot.wtk.Display;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class HelloWTKX implements Application {
+ private Window window = null;
+
+ @Override
+ public void startup(Display display, Map<String, String> properties)
+ throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "hello.wtkx");
+ window.open(display);
+ }
+
+ @Override
+ public boolean shutdown(boolean optional) {
+ if (window != null) {
+ window.close();
+ }
+
+ return false;
+ }
+
+ @Override
+ public void suspend() {
+ }
+
+ @Override
+ public void resume() {
+ }
+
+ public static void main(String[] args) {
+ DesktopApplicationContext.main(HelloWTKX.class, args);
+ }
+ } ]]>
+ </source>
+
+ <p>
+ The WTKX that is used to create the UI is shown below:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/hello.wtkx">
+ <![CDATA[
+ <Window title="Hello WTKX!" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <Label text="Hello WTKX!"
+ styles="{font:'Arial bold 24', color:'#ff0000',
+ horizontalAlignment:'center', verticalAlignment:'center'}"/>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ Most Pivot applications will be constructed this way, declaring the structure of the
+ UI in WTKX rather than creating it programmatically in code. However, event handlers,
+ which allow an application to respond to user input, are always defined in code (either
+ Java or a compatible JVM scripting language). For example, the following WTKX produces
+ output very similar to the previous two versions, using a combination of WTKX and
+ JavaScript:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/hello_javascript.wtkx">
+ <![CDATA[
+ <Window title="Hello JavaScript!" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <windowStateListeners>
+ <wtkx:script>
+ importPackage(org.apache.pivot.wtk);
+
+ function windowOpened(window) {
+ var label = new Label();
+ label.setText("Hello JavaScript!");
+ label.getStyles().put("font", "Arial BOLD 24");
+ label.getStyles().put("color", "#ff0000");
+ label.getStyles().put("horizontalAlignment", HorizontalAlignment.CENTER);
+ label.getStyles().put("verticalAlignment", VerticalAlignment.CENTER);
+
+ window.setContent(label);
+ }
+ </wtkx:script>
+ </windowStateListeners>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ The actual output is shown below:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.HelloJavaScript"
+ width="240" height="80">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ Though many of the examples in this tutorial implement event handlers in Java, some use
+ script code when it is more concise or convenient to do so. Scripting is discussed in
+ more detail in the <a href="scripting.html">Scripting</a> section.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/index.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/index.xml?rev=887688&r1=887687&r2=887688&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/index.xml (original)
+++ incubator/pivot/trunk/tutorials/www/index.xml Sun Dec 6 15:01:41 2009
@@ -69,6 +69,7 @@
<document-item id="layout-containers">
<document-item id="flow-panes"/>
<document-item id="box-panes"/>
+ <document-item id="grid-panes"/>
<document-item id="table-panes"/>
<document-item id="borders"/>
<document-item id="stack-panes"/>
Modified: incubator/pivot/trunk/tutorials/www/platform_overview.html
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/platform_overview.html?rev=887688&r1=887687&r2=887688&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/platform_overview.html (original)
+++ incubator/pivot/trunk/tutorials/www/platform_overview.html Sun Dec 6 15:01:41 2009
@@ -46,7 +46,7 @@
<p>The classes in each category are packaged and distributed in a corresponding library or set of libraries:</p>
-<h3>pivot-core.jar</h3>
+<h3>pivot-core-[version].jar</h3>
<ul>
<li><tt>org.apache.pivot.beans</tt> - Classes that provide access to the Java bean properties of an object via a dictionary interface.</li>
@@ -62,7 +62,7 @@
<li><tt>org.apache.pivot.xml</tt> - Classes for working with XML data.</li>
</ul>
-<h3>pivot-wtk.jar</h3>
+<h3>pivot-wtk-[version].jar</h3>
<ul>
<li><tt>org.apache.pivot.wtk</tt> - Classes that define the structure and behavior of WTK user interface components.</li>
@@ -77,32 +77,32 @@
<li><tt>org.apache.pivot.wtkx</tt> - Provides support for loading WTK components from XML.</li>
</ul>
-<h3>pivot-wtk.terra.jar</h3>
+<h3>pivot-wtk-terra-[version].jar</h3>
<ul>
<li><tt>org.apache.pivot.wtk.skin.terra</tt> - Defines skin classes for the default "Terra" theme.</li>
</ul>
-<h3>pivot-web.jar</h3>
+<h3>pivot-web-[version].jar</h3>
<ul>
<li><tt>org.apache.pivot.web</tt> - Classes for communicating with HTTP-based web services.</li>
</ul>
-<h3>pivot-web.server.jar</h3>
+<h3>pivot-web-server-[version].jar</h3>
<ul>
<li><tt>org.apache.pivot.web.server</tt> - Classes to facilitate access to and development of web query services.</li>
</ul>
-<h3>pivot-charts.jar</h3>
+<h3>pivot-charts-[version].jar</h3>
<ul>
<li><tt>org.apache.pivot.charts</tt> - A collection of components for use in charting applications.</li>
<li><tt>org.apache.pivot.charts.content</tt> - Classes representing chart data.</li>
</ul>
-<h3>pivot-tools.jar</h3>
+<h3>pivot-tools-[version].jar</h3>
<ul>
<li><tt>org.apache.pivot.tools.json</tt> - Utility applications for working with JSON data.</li>
Modified: incubator/pivot/trunk/tutorials/www/table-panes.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/table-panes.xml?rev=887688&r1=887687&r2=887688&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/table-panes.xml (original)
+++ incubator/pivot/trunk/tutorials/www/table-panes.xml Sun Dec 6 15:01:41 2009
@@ -74,7 +74,7 @@
</p>
<application class="org.apache.pivot.tutorials.layout.SimpleTablePanes"
- width="560" height="320">
+ width="560" height="340">
<libraries>
<library>core</library>
<library>wtk</library>
@@ -231,14 +231,15 @@
</source>
<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.
+ 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.
</p>
- <application class="org.apache.pivot.tutorials.layout.TablePanes" width="560" height="320">
+ <application class="org.apache.pivot.tutorials.layout.TablePanes"
+ width="560" height="340">
<libraries>
<library>core</library>
<library>wtk</library>