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/11 00:39:24 UTC
svn commit: r889468 [1/2] - in /incubator/pivot/trunk/tutorials:
src/org/apache/pivot/tutorials/boundedrange/
src/org/apache/pivot/tutorials/separators/ www/
Author: gbrown
Date: Thu Dec 10 23:39:22 2009
New Revision: 889468
URL: http://svn.apache.org/viewvc?rev=889468&view=rev
Log:
Finish migrating tutorial content to XML.
Removed:
incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/Spinners.java
incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/separators/Separators.java
incubator/pivot/trunk/tutorials/www/progress_indicators.html
incubator/pivot/trunk/tutorials/www/push_buttons.html
incubator/pivot/trunk/tutorials/www/radio_buttons.html
incubator/pivot/trunk/tutorials/www/rollups.html
incubator/pivot/trunk/tutorials/www/sample_application.html
incubator/pivot/trunk/tutorials/www/scripting.html
incubator/pivot/trunk/tutorials/www/scroll_bars.html
incubator/pivot/trunk/tutorials/www/scroll_panes.html
incubator/pivot/trunk/tutorials/www/separators.html
incubator/pivot/trunk/tutorials/www/sliders.html
incubator/pivot/trunk/tutorials/www/split_panes.html
incubator/pivot/trunk/tutorials/www/stack_panes.html
incubator/pivot/trunk/tutorials/www/stock_tracker.data_binding.html
incubator/pivot/trunk/tutorials/www/stock_tracker.events.html
incubator/pivot/trunk/tutorials/www/stock_tracker.html
Modified:
incubator/pivot/trunk/tutorials/www/progress-indicators.xml
incubator/pivot/trunk/tutorials/www/push-buttons.xml
incubator/pivot/trunk/tutorials/www/radio-buttons.xml
incubator/pivot/trunk/tutorials/www/rollups.xml
incubator/pivot/trunk/tutorials/www/sample-application.xml
incubator/pivot/trunk/tutorials/www/scripting.xml
incubator/pivot/trunk/tutorials/www/scroll-bars.xml
incubator/pivot/trunk/tutorials/www/scroll-panes.xml
incubator/pivot/trunk/tutorials/www/separators.xml
incubator/pivot/trunk/tutorials/www/sliders.xml
incubator/pivot/trunk/tutorials/www/spinners.xml
incubator/pivot/trunk/tutorials/www/split-panes.xml
incubator/pivot/trunk/tutorials/www/stack-panes.xml
incubator/pivot/trunk/tutorials/www/stock-tracker.data-binding.xml
incubator/pivot/trunk/tutorials/www/stock-tracker.events.xml
incubator/pivot/trunk/tutorials/www/stock-tracker.xml
Modified: incubator/pivot/trunk/tutorials/www/progress-indicators.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/progress-indicators.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/progress-indicators.xml (original)
+++ incubator/pivot/trunk/tutorials/www/progress-indicators.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,24 @@
</properties>
<body>
+ <p>
+ This section discusses components that are used to present progress information. Pivot
+ supports two types of progress indicator components:
+ </p>
+
+ <ul>
+ <li>
+ <p>
+ <a href="meters.html"><b>Meter</b></a> - Display state based on a known
+ completion percentage.
+ </p>
+ </li>
+ <li>
+ <p>
+ <a href="activity_indicators.html"><b>ActivityIndicator</b></a> - Present an
+ indeterminate progress state.
+ </p>
+ </li>
+ </ul>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/push-buttons.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/push-buttons.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/push-buttons.xml (original)
+++ incubator/pivot/trunk/tutorials/www/push-buttons.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,110 @@
</properties>
<body>
+ <p>
+ Below is an example of a Pivot <tt>PushButton</tt>. Clicking the button opens a simple
+ modal dialog informing the user that the button was clicked:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.buttons.PushButtons"
+ width="480" height="360">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ The WTKX source for the example is below:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/buttons/push_buttons.wtkx">
+ <![CDATA[
+ <Window title="Push Buttons" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <BoxPane styles="{padding:4, horizontalAlignment:'center',
+ verticalAlignment:'center'}">
+ <PushButton wtkx:id="pushButton" buttonData="Click Me!"/>
+ </BoxPane>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ The following is the Java source for the example. The application simply registers the
+ event listener that is called when the button is pressed, as an anonymous inner class
+ that implements <tt>ButtonPressListener</tt>:
+ </p>
+
+ <source type="java" location="org/apache/pivot/tutorials/buttons/PushButtons.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.buttons;
+
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.wtk.Alert;
+ 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.MessageType;
+ import org.apache.pivot.wtk.PushButton;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class PushButtons implements Application {
+ private Window window = null;
+ private PushButton pushButton = null;
+
+ @Override
+ public void startup(Display display, Map<String, String> properties) throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "push_buttons.wtkx");
+ pushButton = (PushButton)wtkxSerializer.get("pushButton");
+
+ // Add a button press listener
+ pushButton.getButtonPressListeners().add(new ButtonPressListener() {
+ @Override
+ public void buttonPressed(Button button) {
+ Alert.alert(MessageType.INFO, "You clicked me!", window);
+ }
+ });
+
+ 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(PushButtons.class, args);
+ }
+ }
+ ]]>
+ </source>
+
+ <p>
+ When called, the event handler method, <tt>buttonPressed()</tt>, uses a static method
+ of the <tt>Alert</tt> class to display the message to the user.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/radio-buttons.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/radio-buttons.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/radio-buttons.xml (original)
+++ incubator/pivot/trunk/tutorials/www/radio-buttons.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,122 @@
</properties>
<body>
+ <p>
+ The following example demonstrates how to use the <tt>RadioButton</tt> class in a
+ Pivot application:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.buttons.RadioButtons"
+ width="480" height="360">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ The WTKX source for the example is below:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/buttons/push_buttons.wtkx">
+ <![CDATA[
+ <Window title="Radio Buttons" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <BoxPane orientation="vertical" styles="{padding:4}">
+ <wtkx:define>
+ <ButtonGroup wtkx:id="numbers"/>
+ </wtkx:define>
+ <RadioButton wtkx:id="oneButton" buttonData="One" buttonGroup="$numbers" selected="true"/>
+ <RadioButton wtkx:id="twoButton" buttonData="Two" buttonGroup="$numbers"/>
+ <RadioButton wtkx:id="threeButton" buttonData="Three" buttonGroup="$numbers"/>
+ <PushButton wtkx:id="selectButton" buttonData="Select"/>
+ </BoxPane>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ The following is the Java source for the example. Like the push button example, the
+ application registers an event listener that is called when the button is pressed.
+ It also gets a reference to a button group named <tt>numbersGroup</tt>
+ (<tt>numbersGroup</tt> is defined as a final local variable so the handler method will
+ have access to it). When called, the handler gets a reference to the currently selected
+ button from the button group and displays an alert containing the data of the selected
+ button.
+ </p>
+
+ <source type="java" location="org/apache/pivot/tutorials/buttons/PushButtons.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.buttons;
+
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.wtk.Alert;
+ import org.apache.pivot.wtk.Application;
+ import org.apache.pivot.wtk.Button;
+ import org.apache.pivot.wtk.ButtonGroup;
+ import org.apache.pivot.wtk.ButtonPressListener;
+ import org.apache.pivot.wtk.DesktopApplicationContext;
+ import org.apache.pivot.wtk.Display;
+ import org.apache.pivot.wtk.MessageType;
+ import org.apache.pivot.wtk.PushButton;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class RadioButtons implements Application {
+ private Window window = null;
+ private PushButton selectButton = null;
+
+ @Override
+ public void startup(Display display, Map<String, String> properties)
+ throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "radio_buttons.wtkx");
+ selectButton = (PushButton)wtkxSerializer.get("selectButton");
+
+ // Get a reference to the button group
+ final ButtonGroup numbersGroup = (ButtonGroup)wtkxSerializer.get("numbers");
+
+ // Add a button press listener
+ selectButton.getButtonPressListeners().add(new ButtonPressListener() {
+ @Override
+ public void buttonPressed(Button button) {
+ String message = "You selected \""
+ + numbersGroup.getSelection().getButtonData()
+ + "\".";
+ Alert.alert(MessageType.INFO, message, window);
+ }
+ });
+
+ 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(RadioButtons.class, args);
+ }
+ }
+ ]]>
+ </source>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/rollups.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/rollups.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/rollups.xml (original)
+++ incubator/pivot/trunk/tutorials/www/rollups.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,124 @@
</properties>
<body>
+ <p>
+ Rollups are conceptually similar to Expanders. Like expanders, rollups also allow the
+ user to expand or collapse a region of the screen to make more room for other content.
+ However, rather than a defining a titled, rectangular region, Rollups supports a
+ configurable "header" component; when collapsed, only the header is visible.
+ Additionally, rollups can be nested to create the appearance of a "tree"
+ structure.
+ </p>
+
+ <p>
+ The first three rollups in the example below present the same content as in the
+ Expanders example. The fourth includes an example of nested rollups:
+ </p>
+
+ <application class="org.apache.pivot.wtk.ScriptApplication"
+ width="480" height="360">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ <startup-properties>
+ <src>org/apache/pivot/tutorials/navigation/rollups.wtkx</src>
+ </startup-properties>
+ </application>
+
+ <p>
+ The WTKX source for this example is as follows. Note that the "fill" style is set
+ to <tt>true</tt> on the nested rollups - this allows the rollup content to wrap:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/navigation/rollups.wtkx">
+ <![CDATA[
+ <Window title="Rollups" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <Border styles="{padding:6}">
+ <content>
+ <ScrollPane horizontalScrollBarPolicy="fill">
+ <view>
+ <BoxPane orientation="vertical" styles="{fill:true,
+ padding:{left:2, right:2}}">
+ <Rollup expanded="true">
+ <heading>
+ <Label text="Stocks" styles="{font:{bold:true}, color:13}"/>
+ </heading>
+ <content>
+ <wtkx:include src="stocks.wtkx"/>
+ </content>
+ </Rollup>
+ <Rollup>
+ <heading>
+ <Label text="Weather" styles="{font:{bold:true}, color:13}"/>
+ </heading>
+ <content>
+ <wtkx:include src="weather.wtkx"/>
+ </content>
+ </Rollup>
+ <Rollup>
+ <heading>
+ <Label text="Calendar" styles="{font:{bold:true}, color:13}"/>
+ </heading>
+ <content>
+ <Calendar/>
+ </content>
+ </Rollup>
+ <Rollup styles="{fill:true}">
+ <heading>
+ <Label text="Nested" styles="{font:{bold:true}, color:13}"/>
+ </heading>
+ <content>
+ <BoxPane orientation="vertical" styles="{fill:true}">
+ <Rollup styles="{fill:true}">
+ <heading>
+ <Label text="Level 1"/>
+ </heading>
+ <content>
+ <Label text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
+ styles="{wrapText:true}"/>
+ </content>
+ </Rollup>
+
+ <Rollup styles="{fill:true}">
+ <heading>
+ <Label text="Level 2"/>
+ </heading>
+ <content>
+ <Label text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
+ styles="{wrapText:true}"/>
+ </content>
+ </Rollup>
+
+ <Rollup styles="{fill:true}">
+ <heading>
+ <Label text="Level 3"/>
+ </heading>
+ <content>
+ <Label text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."
+ styles="{wrapText:true}"/>
+ </content>
+ </Rollup>
+ </BoxPane>
+ </content>
+ </Rollup>
+ </BoxPane>
+ </view>
+ </ScrollPane>
+ </content>
+ </Border>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ Since this example contains no logic, there is no associated Java source.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/sample-application.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/sample-application.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/sample-application.xml (original)
+++ incubator/pivot/trunk/tutorials/www/sample-application.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,19 @@
</properties>
<body>
+ <p>
+ The following is a sample application written to demonstrate a number of commonly used
+ Pivot components:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.KitchenSink"
+ width="800" height="600">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/scripting.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/scripting.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/scripting.xml (original)
+++ incubator/pivot/trunk/tutorials/www/scripting.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,298 @@
</properties>
<body>
+ <p>
+ Because Pivot requires a minimum of Java 6 update 10, Pivot applications can take
+ advantage of the JVM scripting support provided by the <tt>javax.script</tt> package
+ included with JDK versions 1.6 and later. While these APIs can be used on their own to
+ script Pivot applications, Pivot includes platform support for easily embedding script
+ code in WTKX files.
+ </p>
+
+ <p>
+ Script blocks can be defined in WTKX files in three different ways:
+ </p>
+
+ <ul>
+ <li>
+ Inline in a <tt><wtkx:script></tt> tag
+ </li>
+ <li>
+ As an external file included by a <tt><wtkx:script></tt> with a <tt>src</tt>
+ attribute
+ </li>
+ <li>
+ In an event listener attribute
+ </li>
+ <li>
+ In a <tt><wtkx:script></tt> tag defined in an event listener element
+ </li>
+ </ul>
+
+ <p>
+ Though the first and last methods may seem similar, they are actually handled slightly
+ differently. All four methods are discussed in more detail below.
+ </p>
+
+ <p>
+ The following application demonstrate's Pivot's scripting support:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.scripting.Scripting"
+ width="480" height="360">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ This application is completely contrived - it doesn't present any practical example,
+ but instead serves only to demonstrate the various means of using scripting in a WTKX
+ file. The Java source code for the application is shown below:
+ </p>
+
+ <source type="java" location="org/apache/pivot/tutorials/scripting/Scripting.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.scripting;
+
+ import org.apache.pivot.collections.List;
+ 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.Window;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class Scripting implements Application {
+ public static class MyButtonPressListener implements ButtonPressListener {
+ @Override
+ public void buttonPressed(Button button) {
+ System.out.println("[Java] A button was clicked.");
+ }
+ }
+
+ private Window window = null;
+
+ private String foo;
+ private List<?> listData;
+
+ @Override
+ public void startup(Display display, Map<String, String> properties)
+ throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ wtkxSerializer.put("bar", "12345");
+
+ window = (Window)wtkxSerializer.readObject(this, "scripting.wtkx");
+ foo = (String)wtkxSerializer.get("foo");
+ listData = (List<?>)wtkxSerializer.get("listData");
+
+ System.out.println("foo = " + foo);
+ System.out.println("listData.getLength() = " + listData.getLength());
+
+ 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(Scripting.class, args);
+ }
+ }
+ ]]>
+ </source>
+
+ <p>
+ Notice how the <tt>startup()</tt> method calls <tt>put()</tt> on the
+ <tt>WTKXSerializer</tt> instance. <tt>WTKXSerializer</tt>'s dictionary methods allow a
+ caller to manipulate the script namespace before the WTKX is loaded and retrieve values
+ from it afterwards. In this example, the "bar" variable is pre-populated with the value
+ "12345", which is later written to the console by script defined in "scripting.wtkx".
+ Similarly, the values of "foo" and "listData" are obtained from the serializer and
+ written to the console after the WTKX file has been read.
+ </p>
+
+ <p>
+ The WTKX source is shown below:
+ </p>
+
+ <source type="java" location="org/apache/pivot/tutorials/scripting/Scripting.java">
+ <![CDATA[
+ <Window wtkx:id="window" title="Scripting Demo" maximized="true"
+ WindowStateListener.windowOpened="java.lang.System.out.println('Window opened: ' + x)"
+ WindowStateListener.windowClosed="java.lang.System.out.println('Window closed: ' + y)"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns:scripting="org.apache.pivot.demos.scripting"
+ xmlns="org.apache.pivot.wtk">
+ <?language javascript?>
+
+ <wtkx:script>
+ importClass(java.lang.System);
+ importPackage(org.apache.pivot.wtk);
+ System.out.println("bar = " + bar);
+
+ var x = 10;
+ var y = 20;
+
+ function buttonClicked() {
+ Prompt.prompt("y = " + y, window);
+ }
+ </wtkx:script>
+
+ <wtkx:script src="example.js"/>
+
+ <content>
+ <Border styles="{padding:2}">
+ <content>
+ <BoxPane orientation="vertical" styles="{padding:6}">
+ <PushButton buttonData="Click Me!">
+ <buttonPressListeners>
+ <wtkx:script>
+ importPackage(org.apache.pivot.wtk);
+ function buttonPressed(button) {
+ Prompt.prompt("x = " + x, button.getWindow());
+ }
+ </wtkx:script>
+ </buttonPressListeners>
+ </PushButton>
+
+ <PushButton buttonData="No, Click Me!"
+ ButtonPressListener.buttonPressed="buttonClicked()"/>
+
+ <Border styles="{color:10}">
+ <content>
+ <ListView listData="$listData" selectedIndex="0"/>
+ </content>
+ </Border>
+ </BoxPane>
+ </content>
+ </Border>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ This code demonstrates the various means by which script code can be used in WTKX:
+ </p>
+
+ <ul>
+ <li>
+ <p>
+ <i>Inline in a <tt><wtkx:script></tt> tag.</i> The first
+ <tt><wtkx:script></tt> tag defines its content inline. This code is
+ executed as it is processed by the WTKX serializer. This example first outputs
+ the "bar" value set by the application, then declares two variables
+ (<tt>x</tt> and <tt>y</tt>) and a function (<tt>buttonClicked()</tt>. These
+ values are visible to all other script code declared within the page.
+ </p>
+ </li>
+ <li>
+ <p>
+ <i>As an external file included by a <tt><wtkx:script></tt> with a
+ <tt>src</tt> attribute.</i> The second <tt><wtkx:script></tt> tag
+ includes an externally defined script into the page. The contents of the script
+ are defined in "example.js", which is shown below. Any previously defined
+ values will be visible to the script, and any variables declared by the script
+ will be visible to other script blocks declared by the page.
+ </p>
+ </li>
+ <li>
+ <p>
+ <i>In an event listener attribute.</i> Event listeners can be declared in
+ attributes, using a syntax similar to that used for static property setters.
+ The attribute name for an event listener consists of the name of the interface
+ that defines the event plus the name of the event, separated by a period. The
+ WTKX source contains several examples of attribute-based listeners:
+ </p>
+ <ul>
+ <li>
+ <tt>WindowStateListener.windowOpened</tt>
+ </li>
+ <li>
+ <tt>WindowStateListener.windowClosed</tt>
+ </li>
+ <li>
+ <tt>ButtonPressListener.buttonPressed</tt>
+ </li>
+ </ul>
+ </li>
+ <li>
+ <p>
+ <i>In a <tt><wtkx:script></tt> tag defined in an event listener
+ element.</i> Attribute-based event handlers are convenient for simple one-line
+ listeners, but are not particuarly well suited to anything much more complex.
+ Pivot also provides the ability to define event listeners within a listener
+ list element. For example, the <tt>buttonPressListeners</tt> sub-element of
+ the "Click Me!" push button defines a <tt>buttonPressed()</tt> function that
+ is invoked when the corresponding button press event is fired by the button.
+ Because the script for element-based listeners doesn't need to fit within a
+ single XML attribute, more sophisticated handler code can be defined, while
+ still maintaining proximity to the element to which the handler applies.
+ </p>
+ <p>
+ Though it isn't obvious from this simple example, script-based event handlers
+ are not required to provide implementations for every method defined by the
+ listener interface. Any omitted methods are simply processed by a default no-op
+ handler.
+ </p>
+ </li>
+ </ul>
+
+ <p>
+ Note that a special scope is created for event listener scripts that is local to the
+ listener; although all page-level variables remain visible to the listener code, any
+ variables defined within the listener (including functions) are only visible within
+ that block. This prevents listener script from "polluting" the global page namespace.
+ While this is generally not an issue for attribute-based listeners (which tend to be
+ focused and short), can easily become an issue for element-based listeners, which may
+ declare multiple functions with the same name (for example, when multiple button press
+ handlers are defined within the same page).
+ </p>
+
+ <p>
+ The "example.js" file is defined as follows:
+ </p>
+
+ <source type="jscript" location="org/apache/pivot/tutorials/scripting/example.js">
+ <![CDATA[
+ importClass(java.lang.System);
+ importPackage(org.apache.pivot.collections);
+
+ System.out.println("Executing external script block; x = " + x);
+
+ var foo = "ABCDE";
+
+ var listData = new ArrayList();
+ listData.add("One");
+ listData.add("Two");
+ listData.add("Three");
+ ]]>
+ </source>
+
+ <p>
+ This script declares the "foo" value that is later output by the Java application code,
+ and also defines the list data that is used by the example <tt>ListView</tt> defined by
+ the WTKX file.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/scroll-bars.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/scroll-bars.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/scroll-bars.xml (original)
+++ incubator/pivot/trunk/tutorials/www/scroll-bars.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,8 @@
</properties>
<body>
+ <p>
+ This section is not yet complete.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/scroll-panes.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/scroll-panes.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/scroll-panes.xml (original)
+++ incubator/pivot/trunk/tutorials/www/scroll-panes.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,83 @@
</properties>
<body>
+ <p>
+ Scroll panes are a type of viewport that facilitates scrolling by presenting a
+ vertical or horizontal scroll bar that the user can drag to access the obscured parts
+ of the view. They are often used to wrap data-driven components containing a lot of
+ items (such as a <a href="table_views.html">TableView</a> displaying a long list of
+ database query results), or to wrap long forms.
+ </p>
+
+ <p>
+ The following example demonstrates the use of a scroll pane to display a large
+ image:
+ </p>
+
+ <application class="org.apache.pivot.wtk.ScriptApplication"
+ width="420" height="240">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ <startup-properties>
+ <src>org/apache/pivot/tutorials/navigation/scroll_panes.wtkx</src>
+ </startup-properties>
+ </application>
+
+ <p>
+ The WTKX source for this example is shown below:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/navigation/scroll_panes.wtkx">
+ <![CDATA[
+ <Window title="Scroll Panes" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns:navigation="org.apache.pivot.tutorials.navigation"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <Border styles="{color:10}">
+ <content>
+ <ScrollPane>
+ <view>
+ <ImageView image="org/apache/pivot/tutorials/IMG_1147.jpg"
+ tooltipText="Pemaquid Point Lighthouse, Bristol ME"/>
+ </view>
+
+ <columnHeader>
+ <navigation:Ruler orientation="horizontal"/>
+ </columnHeader>
+
+ <rowHeader>
+ <navigation:Ruler orientation="vertical"/>
+ </rowHeader>
+ </ScrollPane>
+ </content>
+ </Border>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ In addition to the view (an <tt>ImageView</tt>, in this example), scroll panes also
+ support the concept of row and column "header" components. A column header remains
+ fixed vertically at the top of the scroll pane but scrolls horizontally with the view,
+ and a row header is fixed horizontally at the left of the scroll pane but scrolls
+ vertically with the view.
+ </p>
+
+ <p>
+ The column header is commonly used to display a <tt>TableViewHeader</tt> component for
+ a <tt>TableView</tt>, discussed in more detail in the <a href="table-views.html">Table
+ Views</a> section. In this example, the header components are set to instances of a
+ custom <tt>Ruler</tt> component that displays a tick mark every 5 pixels.
+ </p>
+
+ <p>
+ Since this example contains no logic, there is no associated Java source.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/separators.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/separators.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/separators.xml (original)
+++ incubator/pivot/trunk/tutorials/www/separators.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,51 @@
</properties>
<body>
+ <p>
+ Separators are simple components that are similar to a horizontal rule in HTML. They
+ have an optional heading and are generally used to partition content, as shown in the
+ sample application below:
+ </p>
+
+ <application class="org.apache.pivot.wtk.ScriptApplication"
+ width="420" height="240">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ <startup-properties>
+ <src>org/apache/pivot/tutorials/separators/separators.wtkx</src>
+ </startup-properties>
+ </application>
+
+ <p>
+ The WTKX for this sample is as follows. Note that the box pane sets the "fill" style to
+ true; otherwise, the separator would not grow to fill the horizontal space:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/separators/separators.wtkx">
+ <![CDATA[
+ <Window title="Separators" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <BoxPane orientation="vertical" styles="{padding:4, spacing:10, fill:true}">
+ <Separator heading="Section 1"/>
+ <Label text="This is the content of section 1."/>
+ <Separator heading="Section 2"/>
+ <Label text="This is the content of section 2."/>
+ <Separator heading="Section 3"/>
+ <Label text="This is the content of section 3."/>
+ </BoxPane>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ Since this example contains no logic, there is no associated Java source.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/sliders.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/sliders.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/sliders.xml (original)
+++ incubator/pivot/trunk/tutorials/www/sliders.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,111 @@
</properties>
<body>
+ <p>
+ Sliders allow a user to interactively select one of a range of values by dragging the
+ mouse. The following example demonstrates the use of the <tt>Slider</tt> component. It
+ allows the user to select a value from 0 - 255 and displays the value in a
+ <tt>Label</tt> component:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.boundedrange.Sliders"
+ width="160" height="30">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ The WTKX source for the example is as follows:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/boundedrange/sliders.wtkx">
+ <![CDATA[
+ <Window title="Sliders" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <BoxPane styles="{verticalAlignment:'center'}">
+ <Slider wtkx:id="slider" range="{start:0, end:255}" value="0"/>
+ <Label wtkx:id="label"/>
+ </BoxPane>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ The Java source loads the WTKX and attaches a <tt>SliderValueListener</tt> to the
+ slider. When the slider value changes, the <tt>updateLabel()</tt> method is called to
+ set the current value:
+ </p>
+
+ <source type="java" location="org/apache/pivot/tutorials/boundedrange/Sliders.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.boundedrange;
+
+ 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.Label;
+ import org.apache.pivot.wtk.Slider;
+ import org.apache.pivot.wtk.SliderValueListener;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class Sliders implements Application {
+ private Window window = null;
+ private Slider slider = null;
+ private Label label = null;
+
+ @Override
+ public void startup(Display display, Map<String, String> properties) throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "sliders.wtkx");
+ slider = (Slider)wtkxSerializer.get("slider");
+ label = (Label)wtkxSerializer.get("label");
+
+ slider.getSliderValueListeners().add(new SliderValueListener() {
+ @Override
+ public void valueChanged(Slider slider, int previousValue) {
+ updateLabel();
+ }
+ });
+
+ updateLabel();
+ window.open(display);
+ }
+
+ @Override
+ public boolean shutdown(boolean optional) {
+ if (window != null) {
+ window.close();
+ }
+
+ return false;
+ }
+
+ @Override
+ public void suspend() {
+ }
+
+ @Override
+ public void resume() {
+ }
+
+ private void updateLabel() {
+ label.setText(Integer.toString(slider.getValue()));
+ }
+
+ public static void main(String[] args) {
+ DesktopApplicationContext.main(Sliders.class, args);
+ }
+ }
+ ]]>
+ </source>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/spinners.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/spinners.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/spinners.xml (original)
+++ incubator/pivot/trunk/tutorials/www/spinners.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,71 @@
</properties>
<body>
+ <p>
+ <tt>Spinner</tt> is a component that provides a means of cycling through a list of
+ items. The items are defined by the spinner's model data, specified via the
+ "spinnerData" property. Spinners behave similarly to a single-select
+ <tt>ListView</tt> or a <tt>ListButton</tt>, allowing a user to select one of the items
+ in the list. However, unlike list views and list buttons, spinners only present a
+ single item at a time.
+ </p>
+
+ <p>
+ Note that spinners may be "circular". When a spinner's "circular" property is set to
+ <tt>true</tt>, the spinner's selection will wrap when it reaches the first or last
+ item in the list. In the following example, the first spinner is circular, and the
+ second is not:
+ </p>
+
+ <application class="org.apache.pivot.wtk.ScriptApplication"
+ width="160" height="30">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ <startup-properties>
+ <src>org/apache/pivot/tutorials/boundedrange/spinners.wtkx</src>
+ </startup-properties>
+ </application>
+
+ <p>
+ Because spinner data is specified using an instance of the <tt>List</tt> interface,
+ spinners are quite flexible. The second spinner in the above example uses an instance
+ of <tt>NumericSpinnerData</tt> as its model. This class is a lightweight means of
+ representing a list of numeric value options: it doesn't actually store the values as
+ a list in memory - it simply calculates the appropriate value for a given index using
+ its lower and upper bounds and increment value.
+ </p>
+
+ <p>
+ The WTKX for this example is shown below:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/boundedrange/spinners.wtkx">
+ <![CDATA[
+ <Window title="Spinners" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns:content="org.apache.pivot.wtk.content"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <BoxPane styles="{verticalAlignment:'center'}">
+ <Spinner spinnerData="['One', 'Two', 'Three', 'Four', 'Five']"
+ circular="true" preferredWidth="80" selectedIndex="0"/>
+ <Spinner preferredWidth="40" selectedIndex="0">
+ <spinnerData>
+ <content:NumericSpinnerData lowerBound="0" upperBound="9" increment="1"/>
+ </spinnerData>
+ </Spinner>
+ </BoxPane>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ Since this example contains no logic, there is no associated Java source.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/split-panes.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/split-panes.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/split-panes.xml (original)
+++ incubator/pivot/trunk/tutorials/www/split-panes.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,223 @@
</properties>
<body>
+ <p>
+ TODO
+ </p>
+
+ <application class="org.apache.pivot.wtk.ScriptApplication"
+ width="320" height="240">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ <startup-properties>
+ <src>org/apache/pivot/tutorials/layout/split_panes.wtkx</src>
+ </startup-properties>
+ </application>
+
+ <p>
+ The WTKX for this example is shown below:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/boundedrange/spinners.wtkx">
+ <![CDATA[
+ <Window title="Split Panes" maximized="true"
+ WindowStateListener.windowOpened="init();"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns:collections="org.apache.pivot.collections"
+ xmlns:content="org.apache.pivot.wtk.content"
+ xmlns="org.apache.pivot.wtk">
+ <wtkx:script>
+ function init() {
+ spinner.setSelectedIndex(3);
+ primaryColorListButton.setSelectedIndex(0);
+ secondaryColorListButton.setSelectedIndex(1);
+ orientationListButton.setSelectedIndex(0);
+ }
+ </wtkx:script>
+
+ <content>
+ <SplitPane wtkx:id="splitPane" orientation="horizontal" splitRatio="0.6">
+ <splitPaneListeners>
+ <wtkx:script>
+ function splitRatioChanged(splitPane, previousSplitRatio) {
+ var value = Math.floor(splitPane.getSplitRatio() * 100);
+ label.setText(value + "%");
+ }
+ </wtkx:script>
+ </splitPaneListeners>
+ <left>
+ <Border>
+ <content>
+ <Panel styles="{backgroundColor:'#f7f5ed'}"/>
+ </content>
+ </Border>
+ </left>
+ <right>
+ <Border styles="{padding:{top:10}}">
+ <content>
+ <BoxPane orientation="vertical" styles="{fill:true,
+ horizontalAlignment:'right'}">
+ <Label text="Properties" styles="{padding:{left:10}, font:{bold:true}}"/>
+ <BoxPane orientation="vertical" styles="{horizontalAlignment:'right'}">
+ <Form styles="{horizontalSpacing:18, rightAlignLabels:true}">
+ <sections>
+ <Form.Section>
+ <Label wtkx:id="label" Form.label="Split Ratio"
+ minimumPreferredWidth="100"/>
+ <ListButton wtkx:id="orientationListButton"
+ Form.label="Orientation"
+ listData="['Horizontal', 'Vertical']">
+ <listButtonSelectionListeners>
+ <wtkx:script>
+ function selectedIndexChanged(listButton,
+ previousSelectedIndex) {
+ var orientation = listButton.getSelectedItem();
+ splitPane.setOrientation(orientation);
+ }
+ </wtkx:script>
+ </listButtonSelectionListeners>
+ </ListButton>
+ <BoxPane Form.label="Flags" orientation="vertical"
+ styles="{spacing:10}">
+ <Checkbox buttonData="Locked">
+ <buttonStateListeners>
+ <wtkx:script>
+ function stateChanged(button, previousState) {
+ splitPane.setLocked(button.isSelected());
+ }
+ </wtkx:script>
+ </buttonStateListeners>
+ </Checkbox>
+ </BoxPane>
+ </Form.Section>
+ </sections>
+ </Form>
+ </BoxPane>
+ <Separator/>
+ <Label text="Styles" styles="{padding:{left:10}, font:{bold:true}}"/>
+ <BoxPane orientation="vertical" styles="{horizontalAlignment:'right'}">
+ <Form styles="{horizontalSpacing:18, rightAlignLabels:true}">
+ <sections>
+ <Form.Section>
+ <Spinner wtkx:id="spinner"
+ Form.label="Splitter Thickness"
+ styles="{sizeToContent:true}">
+ <spinnerSelectionListeners>
+ <wtkx:script>
+ function selectedIndexChanged(spinner,
+ previousSelectedIndex) {
+ var value = spinner.getSelectedItem();
+ splitPane.getStyles().put
+ ("splitterThickness", value);
+ }
+ </wtkx:script>
+ </spinnerSelectionListeners>
+ <spinnerData>
+ <content:NumericSpinnerData lowerBound="3"
+ upperBound="20" />
+ </spinnerData>
+ </Spinner>
+ <ListButton wtkx:id="primaryColorListButton"
+ Form.label="Splitter Handle Primary Color"
+ styles="{listSize:6}">
+ <listData>
+ <collections:ArrayList>
+ <content:ColorItem color="#000000"
+ name="Black"/>
+ <content:ColorItem color="#dddcd5"
+ name="Tan"/>
+ <content:ColorItem color="#14538b"
+ name="Blue"/>
+ <content:ColorItem color="#b0000f"
+ name="Red"/>
+ </collections:ArrayList>
+ </listData>
+ <dataRenderer>
+ <content:ListButtonColorItemRenderer/>
+ </dataRenderer>
+ <itemRenderer>
+ <content:ListViewColorItemRenderer/>
+ </itemRenderer>
+ <listButtonSelectionListeners>
+ <wtkx:script>
+ function selectedIndexChanged(listButton,
+ previousSelectedIndex) {
+ var colorItem = listButton.getSelectedItem();
+ splitPane.getStyles().put
+ ("splitterHandlePrimaryColor",
+ colorItem.getColor());
+ }
+ </wtkx:script>
+ </listButtonSelectionListeners>
+ </ListButton>
+ <ListButton wtkx:id="secondaryColorListButton"
+ Form.label="Splitter Handle Secondary Color"
+ styles="{listSize:6}">
+ <listData>
+ <collections:ArrayList>
+ <content:ColorItem color="#000000"
+ name="Black"/>
+ <content:ColorItem color="#dddcd5"
+ name="Tan"/>
+ <content:ColorItem color="#14538b"
+ name="Blue"/>
+ <content:ColorItem color="#b0000f"
+ name="Red"/>
+ </collections:ArrayList>
+ </listData>
+ <dataRenderer>
+ <content:ListButtonColorItemRenderer/>
+ </dataRenderer>
+ <itemRenderer>
+ <content:ListViewColorItemRenderer/>
+ </itemRenderer>
+ <listButtonSelectionListeners>
+ <wtkx:script>
+ function selectedIndexChanged(listButton,
+ previousSelectedIndex) {
+ var colorItem = listButton.getSelectedItem();
+ splitPane.getStyles().put
+ ("splitterHandleSecondaryColor",
+ colorItem.getColor());
+ }
+ </wtkx:script>
+ </listButtonSelectionListeners>
+ </ListButton>
+ <BoxPane Form.label="Flags" orientation="vertical"
+ minimumPreferredWidth="100"
+ styles="{spacing:10}">
+ <Checkbox buttonData="Use Shadow">
+ <buttonStateListeners>
+ <wtkx:script>
+ function stateChanged(button, previousState) {
+ splitPane.getStyles().put("useShadow",
+ button.isSelected());
+ }
+ </wtkx:script>
+ </buttonStateListeners>
+ </Checkbox>
+ </BoxPane>
+ </Form.Section>
+ </sections>
+ </Form>
+ </BoxPane>
+ </BoxPane>
+ </content>
+ </Border>
+ </right>
+ </SplitPane>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ Since this example is written entirely in WTKX and script, there is no associated Java
+ source.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/stack-panes.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/stack-panes.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/stack-panes.xml (original)
+++ incubator/pivot/trunk/tutorials/www/stack-panes.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,56 @@
</properties>
<body>
+ <p>
+ Stack panes arrange their children in layers, like a stack of transparencies.
+ Unlike <a href="card-panes.html">card panes</a>, which show only a single component at
+ a time, stack panes always display all of their child components. Components with a
+ higher z-index (position within the stack pane) are painted on top of components with
+ a lower z-index.
+ </p>
+
+ <p>
+ The following example shows a stack pane containing an image view and a label. The
+ label is layered on top of the image:
+ </p>
+
+ <application class="org.apache.pivot.wtk.ScriptApplication"
+ width="480" 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/stack_panes.wtkx</src>
+ </startup-properties>
+ </application>
+
+ <p>
+ The WTKX source for the example is as follows:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/layout/stack_panes.wtkx">
+ <![CDATA[
+ <Window title="Stack Panes" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <StackPane>
+ <ImageView image="@background.png"
+ styles="{fill:true, preserveAspectRatio:false}"/>
+ <Label text="StackPane Demo"
+ styles="{font:'Helvetica bold 64', color:'#ffffff', wrapText:true,
+ horizontalAlignment:'center', verticalAlignment:'center'}"/>
+ </StackPane>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ Since this example contains no logic, there is no associated Java source.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/stock-tracker.data-binding.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/stock-tracker.data-binding.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/stock-tracker.data-binding.xml (original)
+++ incubator/pivot/trunk/tutorials/www/stock-tracker.data-binding.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,241 @@
</properties>
<body>
+ <p>
+ Data binding is the process of automatically mapping values between a set of user
+ interface elements and an internal data representation; for example, from a order entry
+ form to a collection of database fields or vice versa. Data binding can help simplify
+ development by eliminating some or all of the tedious boilerplate code that often goes
+ along with this type of programming.
+ </p>
+
+ <p>
+ In Pivot, data binding is controlled by the <tt>load()</tt> and <tt>store()</tt>
+ methods of the <tt>Component</tt> class:
+ </p>
+
+ <p>
+ <tt>public void load(Dictionary<String, Object> context) {...}</tt><br/>
+ <tt>public void store(Dictionary<String, Object> context) {...}</tt><br/>
+ </p>
+
+ <p>
+ The <tt>Dictionary</tt> argument passed to these methods provides the "bind context":
+ a collection of name/value pairs representing the data to which the components are
+ bound. Each bindable component can be assigned a "bind key" that associates the
+ component with a value in the context. The default implementations do nothing;
+ components that support data binding override them to import data to the component
+ from the context during a load, and export data from the component to the context
+ during a store.
+ </p>
+
+ <p>
+ Data binding is most often supported by components that accept and present user input
+ (such as a text field), but it can also be implemented by read-only components, such
+ as labels and progress meters. Most components allow a caller to bind only to a single
+ value (such as the "text" property of a label), though some support additional bindings
+ (for example, a checked list view that allows a caller to bind to both its items'
+ checked and selected states).
+ </p>
+
+ <p>
+ It is important to note that it is not possible to bind to a container directly.
+ However, containers may act as nested bind contexts - when a bind key is assigned to a
+ container, it is assumed to point to a nested <tt>Dictionary</tt> instance representing
+ a subordinate bind context. This enables complex JSON object graphs returned from a
+ web query to be seamlessly mapped to a set of data-bound components arranged in a
+ non-trivial layout, for example.
+ </p>
+
+ <h2>Data Binding in the Stock Tracker Demo</h2>
+
+ <p>
+ The Stock Tracker demo isn't quite that sophisticated. It uses a single, flat bind
+ context to populate the fields in the quote detail view. The bind context is actually
+ the row data retrieved from the web query for the selected stock. This is why we
+ requested more data than we seemed to need from the GET query: the extra fields are
+ used to fill in the data in the detail form.
+ </p>
+
+ <p>
+ The bound components, in this case, are read-only labels - Stock Tracker uses a
+ one-way binding to map the retrieved quote data to the text property of each. We
+ specified the name of the key to use for each label in the
+ <tt>stocktracker.detail.wtkx</tt> file:
+ </p>
+
+ <source type="xml">
+ <![CDATA[
+ ...
+ <Label Form.label="%value" textKey="value"/>
+ ...
+ ]]>
+ </source>
+
+ <p>
+ The actual binding occurs when the selection changes in the table view; as we saw in
+ the <a href="stock_tracker.events.html">Event Handling</a> section, the selection
+ change handler calls the <tt>refreshDetail()</tt> method in response to a selection
+ change event. The code for this method is as follows:
+ </p>
+
+ <source type="java">
+ <![CDATA[
+ private void refreshDetail() {
+ int firstSelectedIndex = stocksTableView.getFirstSelectedIndex();
+ removeSymbolsButton.setEnabled(firstSelectedIndex != -1);
+
+ StockQuote stockQuote = null;
+ Form.setFlag(detailChangeLabel, (Form.Flag)null);
+
+ if (firstSelectedIndex != -1) {
+ int lastSelectedIndex = stocksTableView.getLastSelectedIndex();
+
+ if (firstSelectedIndex == lastSelectedIndex) {
+ List<StockQuote> tableData = (List<StockQuote>)stocksTableView.getTableData();
+ stockQuote = tableData.get(firstSelectedIndex);
+
+ if (stockQuote.getChange() < 0) {
+ Form.setFlag(detailChangeLabel, new Form.Flag(MessageType.ERROR));
+ }
+ }
+ }
+
+ if (stockQuote == null) {
+ detailRootPane.load(new HashMap<String, Object>());
+ } else {
+ StockQuoteView stockQuoteView = new StockQuoteView(stockQuote);
+ detailRootPane.load(stockQuoteView);
+ }
+ }
+
+ ]]>
+ </source>
+
+ <p>
+ The method does the following:
+ </p>
+
+ <ul>
+ <li>
+ <p>
+ Obtains the first selected index in the table (if more than one item is
+ selected, we don't want to show anything in the detail)
+ </p>
+ </li>
+ <li>
+ <p>
+ Clears the "flag" attribute from the detail change label (the <tt>Form</tt>
+ container allows a caller to tag fields with a flag value, for use in data
+ validation or just simple notification - here, a flag is used to indicate a
+ negative change in the stock value)
+ </p>
+ </li>
+ <li>
+ <p>
+ Gets a reference to the table view's data model and then to the data for the
+ selected row
+ </p>
+ </li>
+ <li>
+ <p>
+ If the change percentage is negative, shows a red "error" flag next to the
+ detail label
+ </p>
+ </li>
+ <li>
+ <p>
+ Wraps the row data in an instance of <tt>StockQuoteView</tt> and calls
+ <tt>load()</tt>, populating the form with data from the selected quote
+ </p>
+ </li>
+ </ul>
+
+ <p>
+ <tt>StockQuoteView</tt> is a "decorator" (in the
+ <a href="http://en.wikipedia.org/wiki/Design_pattern_(computer_science)">design
+ pattern</a> sense, not the WTK sense) - it ensures that it is formatted and presented
+ in a readable manner in the detail view:
+ </p>
+
+ <source type="java" location="org/apache/pivot/tutorials/stocktracker/StockQuoteView.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.stocktracker;
+
+ import java.text.DecimalFormat;
+
+ import org.apache.pivot.beans.BeanDictionary;
+
+ public class StockQuoteView extends BeanDictionary {
+ private static final DecimalFormat valueFormat = new DecimalFormat("$0.00");
+ private static final DecimalFormat changeFormat = new DecimalFormat("+0.00;-0.00");
+ private static final DecimalFormat volumeFormat = new DecimalFormat();
+
+ public StockQuoteView(StockQuote stockQuote) {
+ super(stockQuote);
+ }
+
+ @Override
+ public Object get(String key) {
+ if (key == null) {
+ throw new IllegalArgumentException("key is null.");
+ }
+
+ Object value = null;
+ StockQuote stockQuote = (StockQuote)getBean();
+
+ if (stockQuote == null) {
+ value = "";
+ } else {
+ value = super.get(key);
+
+ if (key.equals("value")
+ || key.equals("openingValue")
+ || key.equals("highValue")
+ || key.equals("lowValue")) {
+ try {
+ Float floatValue = (Float)value;
+ if (floatValue.isNaN()) {
+ value = "n/a";
+ } else {
+ value = valueFormat.format(floatValue);
+ }
+ } catch(Exception exception) {
+ value = "";
+ }
+ } else if (key.equals("change")) {
+ try {
+ value = changeFormat.format(value);
+ } catch(Exception exception) {
+ value = "";
+ }
+ } else if (key.equals("volume")) {
+ try {
+ value = volumeFormat.format(value);
+ } catch(Exception exception) {
+ value = "";
+ }
+ } else {
+ if (value != null) {
+ value = value.toString();
+ }
+ }
+ }
+
+ return value;
+ }
+ }
+ ]]>
+ </source>
+
+ <p>
+ Note that the <tt>load()</tt> method is actually called on the parent container of
+ the <tt>Form</tt>, rather than on the form itself. This is because we also want to
+ bind to the label that contains the company name, which is not a child of the
+ <tt>Form</tt>. A nested container does not automatically imply the existence of a
+ sub-context - sub-contexts are created only when a nested container is assigned its
+ own bind key. Because a bind key is not defined for it, the form simply inherits the
+ bind context that was passed to its parent.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/stock-tracker.events.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/stock-tracker.events.xml?rev=889468&r1=889467&r2=889468&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/stock-tracker.events.xml (original)
+++ incubator/pivot/trunk/tutorials/www/stock-tracker.events.xml Thu Dec 10 23:39:22 2009
@@ -22,5 +22,173 @@
</properties>
<body>
+ <p>
+ While WTKX is used to declare the <i>structure</i> of an application, the application's
+ <i>behavior</i> is defined in code (either Java or a JVM-compatible scripting language).
+ Most of this logic is executed in response to an "event" triggered by some external
+ source, such as user input or the completion of an asynchronous operation running in a
+ background thread.
+ </p>
+
+ <p>
+ In general, a Pivot application will load its user interface and wire up event handlers
+ in the <tt>startup()</tt> method of the main application class. This method, along with
+ the <tt>shutdown()</tt>, <tt>suspend()</tt>, and <tt>resume()</tt> methods, is defined
+ by the <tt>Application</tt> interface, which all Pivot applications must implement.
+ </p>
+
+ <h2>Loading the UI</h2>
+
+ <p>
+ The <tt>Application</tt> interface in the Stock Tracker demo is implemented by the
+ <tt>StockTracker</tt> class. The code in this file is referred to throughout the course
+ of this section. A snippet of code from <tt>StockTracker</tt>'s <tt>startup()</tt>
+ method is shown below:
+ </p>
+
+ <source type="java">
+ <![CDATA[
+ // Set the locale
+ String language = properties.get(LANGUAGE_PROPERTY_NAME);
+ if (language != null) {
+ Locale.setDefault(new Locale(language));
+ }
+
+ // Load and bind to the WTKX source
+ Resources resources = new Resources(this);
+ WTKXSerializer wtkxSerializer = new WTKXSerializer(resources);
+ window = (Window)wtkxSerializer.readObject(this, "stocktracker.wtkx");
+ wtkxSerializer.bind(this, StockTracker.class);
+ ]]>
+ </source>
+
+ <p>
+ This code does the following:
+ </p>
+
+ <ul>
+ <li>
+ <p>
+ Retrieves the "langauge" argument that was provided to the application context
+ when it was created - for desktop applications, this is a command-line
+ argument; in the browser, it is either passed via an applet parameter
+ </p>
+ </li>
+ <li>
+ <p>
+ Sets the default locale to an instance corresponding to the language
+ argument
+ </p>
+ </li>
+ <li>
+ <p>
+ Loads the application resources
+ </p>
+ </li>
+ <li>
+ <p>
+ Creates an instance of <tt>WTKXSerializer</tt> and loads the WTKX source
+ </p>
+ </li>
+ </ul>
+
+ <p>
+ Finally, the code calls the <tt>bind()</tt> method on the serializer, which associates
+ annotated member variables with corresponding IDs in the WTKX file:
+ </p>
+
+ <source type="java">
+ <![CDATA[
+ @WTKX private TableView stocksTableView;
+ @WTKX private TextInput symbolTextInput;
+ @WTKX private Button addSymbolButton;
+ @WTKX private Button removeSymbolsButton;
+ ...
+ ]]>
+ </source>
+
+ <p>
+ These annotations eliminate much of the boilerplate code required when loading WTKX
+ contents manually via an instance of <tt>WTKXSerializer</tt>. However, since they rely
+ on reflection code that may need to set private member variables, they can generally
+ only be used by trusted code, such as a locally installed application or a signed
+ applet or Web Start application.
+ </p>
+
+ <h2>Adding Event Listeners</h2>
+
+ <p>
+ At this point, the entire UI has been created, but it is not yet visible. Even if it
+ was, it wouldn't do much, since no event handlers have been added. The next thing
+ <tt>startup()</tt> does is add a number of event handlers:
+ </p>
+
+ <source type="java">
+ <![CDATA[
+ stocksTableView.getTableViewSelectionListeners().add(new TableViewSelectionListener.Adapter() {
+ public void selectedRangesChanged(TableView tableView, Sequence<Span> previousSelectedRanges) {
+ refreshDetail();
+ }
+ });
+ ...
+
+ addSymbolButton.getButtonPressListeners().add(new ButtonPressListener() {
+ public void buttonPressed(Button button) {
+ addSymbol();
+ }
+ });
+ ...
+ ]]>
+ </source>
+
+ <p>
+ A caller signals its interest in a particular event by implementing an interface that
+ defines an event handler method and adding itself as an event lister on the event
+ source. In the example above, two event handlers are created: a selection change
+ listener on the stock quote table view and a button press listener on the "add symbol"
+ button. Some listener interfaces, such as those shown here, define only a single event
+ handler method, but others define more than one and serve as a grouping of related
+ events. Interfaces with multiple handler methods generally define an inner Adapter
+ class that can be used to simplify subclassing, as shown above.
+ </p>
+
+ <p>
+ Note that, though these handlers are implemented as anonymous inner classes, this is
+ not required - any class that implements the appropriate listener interface can
+ register as a listener. It is also possible to define listeners in script within the
+ WTKX file itself; this is discussed in more detail in the
+ <a href="scripting.html">Scripting</a> section.
+ </p>
+
+ <h2>Displaying the Content</h2>
+
+ <p>
+ Finally, the window loaded from the WTKX files is opened, making the application
+ visible and allowing the user to begin interacting with it (note that the window's
+ "maximized" property is set to "true" in the WTKX file so that, when opened, the
+ window will be sized to fit the entire display area):
+ </p>
+
+ <source type="java">
+ <![CDATA[
+ window.open();
+
+ refreshTable();
+
+ ApplicationContext.setInterval(new Runnable() {
+ public void run() {
+ refreshTable();
+ }
+ }, REFRESH_INTERVAL);
+
+ symbolTextInput.requestFocus();
+ ]]>
+ </source>
+
+ <p>
+ The code then calls <tt>refreshTable()</tt> to load the stock quote data and sets a
+ timer interval to reload the data every 15 seconds. Finally, it sets the focus to the
+ symbol text input, so a user can easily add a new stock to track.
+ </p>
</body>
</document>