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/09 03:32:36 UTC
svn commit: r888681 [1/2] - in /incubator/pivot/trunk/tutorials:
src/org/apache/pivot/tutorials/lists/ www/
Author: gbrown
Date: Wed Dec 9 02:32:34 2009
New Revision: 888681
URL: http://svn.apache.org/viewvc?rev=888681&view=rev
Log:
Continue migrating tutorial content to XML.
Removed:
incubator/pivot/trunk/tutorials/www/effects.html
incubator/pivot/trunk/tutorials/www/effects.transitions.html
incubator/pivot/trunk/tutorials/www/list_buttons.html
incubator/pivot/trunk/tutorials/www/lists.html
incubator/pivot/trunk/tutorials/www/localization.html
incubator/pivot/trunk/tutorials/www/menu_bars.html
incubator/pivot/trunk/tutorials/www/menu_buttons.html
incubator/pivot/trunk/tutorials/www/menus.html
Modified:
incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/lists/list_views.wtkx
incubator/pivot/trunk/tutorials/www/effects.transitions.xml
incubator/pivot/trunk/tutorials/www/effects.xml
incubator/pivot/trunk/tutorials/www/labels-and-image-views.xml
incubator/pivot/trunk/tutorials/www/layout-containers.xml
incubator/pivot/trunk/tutorials/www/link-buttons.xml
incubator/pivot/trunk/tutorials/www/list-buttons.xml
incubator/pivot/trunk/tutorials/www/lists.xml
incubator/pivot/trunk/tutorials/www/localization.xml
incubator/pivot/trunk/tutorials/www/menu-bars.xml
incubator/pivot/trunk/tutorials/www/menu-buttons.xml
incubator/pivot/trunk/tutorials/www/menus.xml
Modified: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/lists/list_views.wtkx
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/lists/list_views.wtkx?rev=888681&r1=888680&r2=888681&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/lists/list_views.wtkx (original)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/lists/list_views.wtkx Wed Dec 9 02:32:34 2009
@@ -20,25 +20,29 @@
xmlns:wtkx="http://pivot.apache.org/wtkx"
xmlns="org.apache.pivot.wtk">
<content>
- <BoxPane styles="{padding:4, spacing:4}">
- <Border styles="{color:10}">
- <content>
- <ScrollPane preferredWidth="80" preferredHeight="110"
- horizontalScrollBarPolicy="fill"
- verticalScrollBarPolicy="fill_to_capacity">
- <view>
- <ListView wtkx:id="listView" selectMode="multi"
- listData="['One', 'Two', 'Three', 'Four', 'Five',
- 'Six', 'Seven', 'Eight', 'Nine', 'Ten']"/>
- </view>
- </ScrollPane>
- </content>
- </Border>
- <BoxPane orientation="vertical" preferredWidth="120" styles="{fill:true}">
- <Label text="You selected:"/>
- <Label wtkx:id="selectionLabel" styles="{wrapText:true}"/>
- </BoxPane>
- </BoxPane>
+ <Border>
+ <content>
+ <BoxPane styles="{padding:4, spacing:4}">
+ <Border styles="{color:10}">
+ <content>
+ <ScrollPane preferredWidth="80" preferredHeight="110"
+ horizontalScrollBarPolicy="fill"
+ verticalScrollBarPolicy="fill_to_capacity">
+ <view>
+ <ListView wtkx:id="listView" selectMode="multi"
+ listData="['One', 'Two', 'Three', 'Four', 'Five',
+ 'Six', 'Seven', 'Eight', 'Nine', 'Ten']"/>
+ </view>
+ </ScrollPane>
+ </content>
+ </Border>
+ <BoxPane orientation="vertical" preferredWidth="120" styles="{fill:true}">
+ <Label text="You selected:"/>
+ <Label wtkx:id="selectionLabel" styles="{wrapText:true}"/>
+ </BoxPane>
+ </BoxPane>
+ </content>
+ </Border>
</content>
</Window>
Modified: incubator/pivot/trunk/tutorials/www/effects.transitions.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/effects.transitions.xml?rev=888681&r1=888680&r2=888681&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/effects.transitions.xml (original)
+++ incubator/pivot/trunk/tutorials/www/effects.transitions.xml Wed Dec 9 02:32:34 2009
@@ -22,5 +22,240 @@
</properties>
<body>
+ <p>
+ Transitions are used to execute a set of operations over a given period of time,
+ producing an animation effect. For example, they are used to slide sheets in and out of
+ view, fade menu items, and "slide" from one card to another in a card pane.
+ </p>
+
+ <p>
+ Because transitions are often very specific to the item on which they operate, Pivot
+ does not include any stock transitions. However, it is very easy to create one. The
+ following application demonstrates the use of a "collapse transition" that causes a
+ button to shrink and fade as it is removed from its parent container:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.effects.Transitions"
+ width="180" height="40">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ <startup-properties>
+ <src>org/apache/pivot/tutorials/buttons/link_buttons.wtkx</src>
+ </startup-properties>
+ </application>
+
+ <p>The WTKX source for the example is shown below. It simply creates a box pane containing several push buttons:</p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/effects/transitions.wtkx">
+ <![CDATA[
+ <Window title="Transitions" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <BoxPane styles="{padding:4, spacing:4}">
+ <PushButton wtkx:id="button1" buttonData="One"/>
+ <PushButton wtkx:id="button2" buttonData="Two"/>
+ <PushButton wtkx:id="button3" buttonData="Three"/>
+ <PushButton wtkx:id="button4" buttonData="Four"/>
+ </BoxPane>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ The Java source for the application is below. It attaches a button press listener to
+ each button that starts the collapse transition when the button is pressed (or reverses
+ it if one is already running):
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/effects/Transitions.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.effects;
+
+ 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.Component;
+ import org.apache.pivot.wtk.DesktopApplicationContext;
+ import org.apache.pivot.wtk.Display;
+ import org.apache.pivot.wtk.PushButton;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtk.effects.Transition;
+ import org.apache.pivot.wtk.effects.TransitionListener;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class Transitions implements Application {
+ private Window window = null;
+ private PushButton button1 = null;
+ private PushButton button2 = null;
+ private PushButton button3 = null;
+ private PushButton button4 = null;
+
+ private CollapseTransition collapseTransition = null;
+
+ public static int TRANSITION_DURATION = 250;
+ public static int TRANSITION_RATE = 30;
+
+ @Override
+ public void startup(Display display, Map<String, String> properties)
+ throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "transitions.wtkx");
+ button1 = (PushButton)wtkxSerializer.get("button1");
+ button2 = (PushButton)wtkxSerializer.get("button2");
+ button3 = (PushButton)wtkxSerializer.get("button3");
+ button4 = (PushButton)wtkxSerializer.get("button4");
+
+ ButtonPressListener buttonPressListener = new ButtonPressListener() {
+ @Override
+ public void buttonPressed(final Button button) {
+ if (collapseTransition == null) {
+ collapseTransition = new CollapseTransition(button, TRANSITION_DURATION, TRANSITION_RATE);
+
+ TransitionListener transitionListener = new TransitionListener() {
+ @Override
+ public void transitionCompleted(Transition transition) {
+ CollapseTransition collapseTransition = (CollapseTransition)transition;
+
+ if (!transition.isReversed()) {
+ Component component = collapseTransition.getComponent();
+ component.getParent().remove(component);
+ }
+
+ Transitions.this.collapseTransition = null;
+ }
+ };
+
+ collapseTransition.start(transitionListener);
+ } else {
+ collapseTransition.reverse();
+
+ if (collapseTransition.getComponent() != button) {
+ collapseTransition.end();
+ }
+ }
+ }
+ };
+
+ button1.getButtonPressListeners().add(buttonPressListener);
+ button2.getButtonPressListeners().add(buttonPressListener);
+ button3.getButtonPressListeners().add(buttonPressListener);
+ button4.getButtonPressListeners().add(buttonPressListener);
+
+ 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(Transitions.class, args);
+ }
+ }
+ ]]>
+ </source>
+
+ <p>
+ Finally, the source for the transition itself is shown below:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/effects/CollapseTransition.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.effects;
+
+ import org.apache.pivot.wtk.Component;
+ import org.apache.pivot.wtk.effects.FadeDecorator;
+ import org.apache.pivot.wtk.effects.Transition;
+ import org.apache.pivot.wtk.effects.TransitionListener;
+ import org.apache.pivot.wtk.effects.easing.Easing;
+ import org.apache.pivot.wtk.effects.easing.Quadratic;
+
+ public class CollapseTransition extends Transition {
+ private Component component;
+ private int initialWidth;
+ private Easing easing = new Quadratic();
+ private FadeDecorator fadeDecorator = new FadeDecorator();
+
+ public CollapseTransition(Component component, int duration, int rate) {
+ super(duration, rate, false);
+
+ this.component = component;
+ initialWidth = component.getWidth();
+ }
+
+ public Component getComponent() {
+ return component;
+ }
+
+ @Override
+ public void start(TransitionListener transitionListener) {
+ component.getDecorators().add(fadeDecorator);
+
+ super.start(transitionListener);
+ }
+
+ @Override
+ public void stop() {
+ component.getDecorators().remove(fadeDecorator);
+
+ super.stop();
+ }
+
+ @Override
+ protected void update() {
+ float percentComplete = getPercentComplete();
+
+ if (percentComplete < 1.0f) {
+ int duration = getDuration();
+ int width = (int)(initialWidth * (1.0f - percentComplete));
+
+ width = (int)easing.easeInOut(getElapsedTime(), initialWidth, width - initialWidth, duration);
+
+ component.setPreferredWidth(width);
+
+ fadeDecorator.setOpacity(1.0f - percentComplete);
+ component.repaint();
+ }
+ }
+ }
+ ]]>
+ </source>
+
+ <p>
+ In the transition's <tt>start()</tt> method, it attaches a fade decorator to the
+ component, which is later used by the <tt>update()</tt> method to produce the fade
+ part of the effect. The decorator is removed in <tt>stop()</tt>.
+ </p>
+
+ <p>
+ The <tt>update()</tt> method is called periodically to update the state of the
+ transition. In this example, it will be called 30 times per second for a duration of
+ 250 milliseconds. Each time <tt>update()</tt> is called, the transition adjusts the
+ opacity of the fade decorator to the inverse of the completion percentage and sets the
+ component's preferred width to the given percentage of the component's initial width
+ when the transition started. When the transition is complete, the opacity value will be
+ zero, as will its preferred width. It is then removed from the parent box pane by the
+ transition listener that had been passed to the <tt>start()</tt> method.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/effects.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/effects.xml?rev=888681&r1=888680&r2=888681&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/effects.xml (original)
+++ incubator/pivot/trunk/tutorials/www/effects.xml Wed Dec 9 02:32:34 2009
@@ -22,5 +22,141 @@
</properties>
<body>
+ <p>
+ The term "effects" refers to Pivot's support for customizing the appearance or behavior
+ of a component, often over a timed interval producing an "animation". Pivot's primary
+ support for effects is provided by two types of classes: decorators and transitions.
+ </p>
+
+ <p>
+ Decorators allow an application alter the appearance of a component beyond what is
+ supported by the component's styles or any custom renderers the component might
+ support. For example, a decorator could be used to blur the main window of an
+ application when a modal dialog is open, or render the image shown by an image view in
+ grayscale rather than full color.
+ </p>
+
+ <p>
+ The following example demonstrates a number of stock Pivot decorators by attaching the
+ selected decorator to an <tt>ImageView</tt> component:
+ </p>
+
+ <application class="org.apache.pivot.wtk.ScriptApplication"
+ width="640" height="490">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ <startup-properties>
+ <src>org/apache/pivot/tutorials/effects/decorators.wtkx</src>
+ </startup-properties>
+ </application>
+
+ <p>
+ The WTKX source for the example is shown below (there is no associated Java source):
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/effects/decorators.wtkx">
+ <![CDATA[
+ <Window title="Decorators" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns:effects="org.apache.pivot.wtk.effects"
+ xmlns="org.apache.pivot.wtk">
+ <wtkx:define>
+ <effects:BlurDecorator wtkx:id="blurDecorator"/>
+ <effects:FadeDecorator wtkx:id="fadeDecorator" opacity="0.33"/>
+ <effects:GrayscaleDecorator wtkx:id="grayscaleDecorator"/>
+ <effects:ReflectionDecorator wtkx:id="reflectionDecorator"/>
+ <effects:SaturationDecorator wtkx:id="saturationDecorator" multiplier="2.5"/>
+ <effects:ShadeDecorator wtkx:id="shadeDecorator" color="#ff0000" opacity="0.33"/>
+ <effects:WatermarkDecorator wtkx:id="watermarkDecorator" text="Watermark"
+ font="Arial BOLD 24" opacity="0.33"/>
+ </wtkx:define>
+
+ <content>
+ <TablePane>
+ <columns>
+ <TablePane.Column width="1*"/>
+ <TablePane.Column width="-1"/>
+ </columns>
+ <rows>
+ <TablePane.Row>
+ <Border styles="{padding:2}">
+ <content>
+ <BoxPane preferredWidth="480" preferredHeight="480"
+ styles="{horizontalAlignment:'center', verticalAlignment:'top', padding:6}">
+ <ImageView wtkx:id="imageView" image="org/apache/pivot/tutorials/IMG_0725_2.jpg"/>
+ </BoxPane>
+ </content>
+ </Border>
+
+ <BoxPane orientation="vertical" styles="{padding:6, spacing:6}">
+ <wtkx:define>
+ <ButtonGroup wtkx:id="decoratorButtonGroup">
+ <buttonGroupListeners>
+ <wtkx:script>
+ function selectionChanged(buttonGroup) {
+ var selection = buttonGroup.getSelection();
+
+ if (selection != null) {
+ var decorator = selection.getUserData().get("decorator");
+ imageView.getDecorators().removeAll();
+
+ if (decorator != null) {
+ imageView.getDecorators().add(decorator);
+ }
+ }
+ }
+ </wtkx:script>
+ </buttonGroupListeners>
+ </ButtonGroup>
+ </wtkx:define>
+
+ <RadioButton buttonData="None" buttonGroup="$decoratorButtonGroup" selected="true"/>
+
+ <RadioButton buttonData="Blur" buttonGroup="$decoratorButtonGroup">
+ <userData decorator="$blurDecorator"/>
+ </RadioButton>
+
+ <RadioButton buttonData="Fade" buttonGroup="$decoratorButtonGroup">
+ <userData decorator="$fadeDecorator"/>
+ </RadioButton>
+
+ <RadioButton buttonData="Grayscale" buttonGroup="$decoratorButtonGroup">
+ <userData decorator="$grayscaleDecorator"/>
+ </RadioButton>
+
+ <RadioButton buttonData="Reflection" buttonGroup="$decoratorButtonGroup">
+ <userData decorator="$reflectionDecorator"/>
+ </RadioButton>
+
+ <RadioButton buttonData="Saturation" buttonGroup="$decoratorButtonGroup">
+ <userData decorator="$saturationDecorator"/>
+ </RadioButton>
+
+ <RadioButton buttonData="Shade" buttonGroup="$decoratorButtonGroup">
+ <userData decorator="$shadeDecorator"/>
+ </RadioButton>
+
+ <RadioButton buttonData="Watermark" buttonGroup="$decoratorButtonGroup">
+ <userData decorator="$watermarkDecorator"/>
+ </RadioButton>
+ </BoxPane>
+ </TablePane.Row>
+ </rows>
+ </TablePane>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ Notice that decorators are allowed to paint outside of a component's bounds (which a
+ component generally is not). This allows decorators to be used to create the reflection
+ effect shown in the example, or to paint a drop shadow (in fact, the drop shadows that
+ appear beneath Pivot windows are produced by the <tt>DropShadowDecorator</tt> class).
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/labels-and-image-views.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/labels-and-image-views.xml?rev=888681&r1=888680&r2=888681&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/labels-and-image-views.xml (original)
+++ incubator/pivot/trunk/tutorials/www/labels-and-image-views.xml Wed Dec 9 02:32:34 2009
@@ -23,12 +23,12 @@
<body>
<p>
- This section introduces two of the least complex but most common Pivot components:
- <tt>Label</tt> and <tt>ImageView</tt>. Labels are used to present a block of static,
- optionally wrapped, text, and image views are used to display a static graphic. The
+ This section introduces two of the least complex but most common Pivot components:
+ <tt>Label</tt> and <tt>ImageView</tt>. Labels are used to present a block of static,
+ optionally wrapped, text, and image views are used to display a static graphic. The
applet below shows an <tt>ImageView</tt> followed by a <tt>Label</tt>:
</p>
-
+
<application class="org.apache.pivot.tutorials.labels.Labels"
width="120" height="40">
<libraries>
@@ -40,11 +40,11 @@
</application>
<p>
- Below is the WTKX source used to generate the applet's contents. Note that the
- <tt>ImageView</tt> element defines a cursor attribute with a value of "crosshair" (move
+ Below is the WTKX source used to generate the applet's contents. Note that the
+ <tt>ImageView</tt> element defines a cursor attribute with a value of "crosshair" (move
the mouse pointer over the image to see the effect):
</p>
-
+
<source type="xml" location="org/apache/pivot/tutorials/labels/labels.wtkx">
<![CDATA[
<Window title="Labels" maximized="true"
@@ -59,85 +59,85 @@
</Window>
]]>
</source>
-
+
<p>
- Also note that the example uses a <tt>BoxPane</tt> to arrange the components
- horizontally. <tt>BoxPane</tt> is discussed in more detail in the
+ Also note that the example uses a <tt>BoxPane</tt> to arrange the components
+ horizontally. <tt>BoxPane</tt> is discussed in more detail in the
<a href="layout-containers.html">Layout Containers</a> section.
</p>
-
+
<p>
- Finally, note that, while the graphic used in this example is a static bitmap
- (represented by the <tt>org.apache.pivot.wtk.media.Picture</tt> class),
- <tt>ImageView</tt> is also capable of presenting vector graphic images, represented by
- the <tt>org.apache.pivot.wtk.media.Drawing</tt> class. Drawings are discussed in more
+ Finally, note that, while the graphic used in this example is a static bitmap
+ (represented by the <tt>org.apache.pivot.wtk.media.Picture</tt> class),
+ <tt>ImageView</tt> is also capable of presenting vector graphic images, represented by
+ the <tt>org.apache.pivot.wtk.media.Drawing</tt> class. Drawings are discussed in more
detail in the <a href="drawing.html">Drawing</a> section.
</p>
-
+
<p>
- The application code used in this example is not significantly different from the code
- used in the "Hello, World!" example. It simply loads the WTKX file and opens the
+ The application code used in this example is not significantly different from the code
+ used in the "Hello, World!" example. It simply loads the WTKX file and opens the
window:
</p>
-
+
<source type="xml" location="org/apache/pivot/tutorials/labels/labels.wtkx">
<![CDATA[
package org.apache.pivot.tutorials.labels;
-
+
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 Labels 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, "labels.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(Labels.class, args);
}
}
]]>
</source>
-
+
<p>
- In fact, because this application does not include any special logic, it could actually
- have been launched using the <tt>org.apache.pivot.wtk.ScriptApplication</tt> class.
- This class, which is included with the Pivot platform, implements the
- <tt>Application</tt> interface and takes the name of a WTKX file to launch as a startup
- property. The WTKX file is expected to contain a root element representing a
+ In fact, because this application does not include any special logic, it could actually
+ have been launched using the <tt>org.apache.pivot.wtk.ScriptApplication</tt> class.
+ This class, which is included with the Pivot platform, implements the
+ <tt>Application</tt> interface and takes the name of a WTKX file to launch as a startup
+ property. The WTKX file is expected to contain a root element representing a
<tt>Window</tt> subclass.
</p>
-
+
<p>
- The class is named <tt>ScriptApplication</tt> because it is often used to launch
- applications whose logic is defined entirely in script; however, it can actually be
- used to launch any application whose main window is defined in a single WTKX file. Many
+ The class is named <tt>ScriptApplication</tt> because it is often used to launch
+ applications whose logic is defined entirely in script; however, it can actually be
+ used to launch any application whose main window is defined in a single WTKX file. Many
of the examples in the following sections are launched using this class.
</p>
</body>
Modified: incubator/pivot/trunk/tutorials/www/layout-containers.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/layout-containers.xml?rev=888681&r1=888680&r2=888681&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/layout-containers.xml (original)
+++ incubator/pivot/trunk/tutorials/www/layout-containers.xml Wed Dec 9 02:32:34 2009
@@ -23,70 +23,70 @@
<body>
<p>
- Layout containers are used primarily to arrange other components on the screen. Layout
+ Layout containers are used primarily to arrange other components on the screen. Layout
containers include:
</p>
-
+
<ul>
<li>
<p>
- <a href="flow_panes.html"><b>FlowPane</b></a> - Arranges components in a
+ <a href="flow_panes.html"><b>FlowPane</b></a> - Arranges components in a
horizontal line, wrapping when contents don't fit on a single line.
</p>
</li>
<li>
<p>
- <a href="box_panes.html"><b>BoxPane</b></a> - Arranges components in a line,
+ <a href="box_panes.html"><b>BoxPane</b></a> - Arranges components in a line,
either vertically or horizontally.
</p>
</li>
<li>
<p>
- <a href="grid_panes.html"><b>GridPane</b></a> - Arranges components in a
- two-dimensional grid where each cell is given the same size, based on the
+ <a href="grid_panes.html"><b>GridPane</b></a> - Arranges components in a
+ two-dimensional grid where each cell is given the same size, based on the
available width and height.
</p>
</li>
<li>
<p>
- <a href="table_panes.html"><b>TablePane</b></a> - Arranges components in a
+ <a href="table_panes.html"><b>TablePane</b></a> - Arranges components in a
two-dimensional table structure, optionally spanning table cells.
</p>
</li>
<li>
<p>
- <a href="borders.html"><b>Border</b></a> - Container with an optional title
+ <a href="borders.html"><b>Border</b></a> - Container with an optional title
that draws a border around a single content component.
</p>
</li>
<li>
<p>
- <a href="stack_panes.html"><b>StackPane</b></a> - Arranges components in
+ <a href="stack_panes.html"><b>StackPane</b></a> - Arranges components in
layers, like a stack of transparencies.
</p>
</li>
<li>
<p>
- <a href="split_panes.html"><b>SplitPane</b></a> - Provides a draggable divider
- between two components allowing a user to dynamically change the size of
+ <a href="split_panes.html"><b>SplitPane</b></a> - Provides a draggable divider
+ between two components allowing a user to dynamically change the size of
each; may be horizontal or vertical.
</p>
</li>
<li>
<p>
- <a href="forms.html"><b>Form</b></a> - Arranges components in a "form" layout
- with labels to the left and optional flag messages (e.g. to alert a user to
+ <a href="forms.html"><b>Form</b></a> - Arranges components in a "form" layout
+ with labels to the left and optional flag messages (e.g. to alert a user to
input errors) to the right.
</p>
</li>
<li>
<p>
- <a href="panels.html"><b>Panel</b></a> - Performs no layout, allowing the
+ <a href="panels.html"><b>Panel</b></a> - Performs no layout, allowing the
application to specify absolute component positions and sizes.
</p>
</li>
</ul>
-
+
<p>
Each of these are discussed in detail in the following sections.
</p>
Modified: incubator/pivot/trunk/tutorials/www/link-buttons.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/link-buttons.xml?rev=888681&r1=888680&r2=888681&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/link-buttons.xml (original)
+++ incubator/pivot/trunk/tutorials/www/link-buttons.xml Wed Dec 9 02:32:34 2009
@@ -23,7 +23,7 @@
<body>
<p>The following example demonstrates use of the <tt>LinkButton</tt> class in a Pivot application. Clicking the links allows the user to navigate between two "pages", each containing a single image:</p>
-
+
<application class="org.apache.pivot.wtk.ScriptApplication"
width="360" height="360">
<libraries>
@@ -37,8 +37,10 @@
</startup-properties>
</application>
- <p>The WTKX source for the example is below:</p>
-
+ <p>
+ The WTKX source for the example is below:
+ </p>
+
<source type="xml" location="org/apache/pivot/tutorials/buttons/link_buttons.wtkx">
<![CDATA[
<Window title="Link Buttons" maximized="true"
@@ -53,7 +55,7 @@
<buttonData>
<content:ButtonData text="Next" icon="@resultset_next.png"/>
</buttonData>
-
+
<buttonPressListeners>
<wtkx:script>
function buttonPressed(button) {
@@ -63,14 +65,14 @@
</buttonPressListeners>
</LinkButton>
</BoxPane>
-
+
<BoxPane orientation="vertical" styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
<ImageView image="org/apache/pivot/tutorials/IMG_0767_2.jpg"/>
<LinkButton>
<buttonData>
<content:ButtonData text="Previous" icon="@resultset_previous.png"/>
</buttonData>
-
+
<buttonPressListeners>
<wtkx:script>
function buttonPressed(button) {
@@ -85,37 +87,37 @@
</Window>
]]>
</source>
-
+
<p>
- This example uses the <tt>CardPane</tt> layout container. A card pane lays out its
- components like a stack of cards, only one of which is visible at a time.
- <tt>CardPane</tt> is discussed in more detail in the
+ This example uses the <tt>CardPane</tt> layout container. A card pane lays out its
+ components like a stack of cards, only one of which is visible at a time.
+ <tt>CardPane</tt> is discussed in more detail in the
<a href="navigation-containers.html">Navigation Containers</a> section.
</p>
-
+
<p>
- This example demonstrates another means of defining event handlers in WTKX: within an
- element that refers to a listener list property of its parent element. The
- <tt><buttonPressListeners></tt> element of each <tt>LinkButton</tt> contains
- script code that will be executed in response to a button press. In this case, the
- handlers simply set the selected index of the card pane is assigned to each link
- button. However, it is possible to define more complex logic in a handler declared
- this way, and element-based event handlers such as this are often used when the event
- logic is more complex than can be represented in a single line (such as might be used
+ This example demonstrates another means of defining event handlers in WTKX: within an
+ element that refers to a listener list property of its parent element. The
+ <tt><buttonPressListeners></tt> element of each <tt>LinkButton</tt> contains
+ script code that will be executed in response to a button press. In this case, the
+ handlers simply set the selected index of the card pane is assigned to each link
+ button. However, it is possible to define more complex logic in a handler declared
+ this way, and element-based event handlers such as this are often used when the event
+ logic is more complex than can be represented in a single line (such as might be used
in an attribute-based handler).
</p>
-
+
<p>
- Though it is not obvious from this example, other listener methods can also be defined
- within the same script block (if, for example, the <tt>ButtonPressListener</tt>
- interface declared additional methods). However, in such cases, callers are not
- required to provide implementations for all listener methods, only the ones they are
+ Though it is not obvious from this example, other listener methods can also be defined
+ within the same script block (if, for example, the <tt>ButtonPressListener</tt>
+ interface declared additional methods). However, in such cases, callers are not
+ required to provide implementations for all listener methods, only the ones they are
interested in (similar to using an <tt>Adapter</tt> class in Java code).
</p>
-
+
<p>
- Since all of the logic for this application is implemented in script, there is no Java
+ Since all of the logic for this application is implemented in script, there is no Java
source associated with this example.
- </p>
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/list-buttons.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/list-buttons.xml?rev=888681&r1=888680&r2=888681&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/list-buttons.xml (original)
+++ incubator/pivot/trunk/tutorials/www/list-buttons.xml Wed Dec 9 02:32:34 2009
@@ -22,5 +22,161 @@
</properties>
<body>
+ <p>The following example demonstrates use of the <tt>ListButton</tt> component. Selecting an image name from the drop-down shows the corresponding image file in the image view on the right.</p>
+
+ <application class="org.apache.pivot.tutorials.lists.ListButtons"
+ width="480" height="340">
+ <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. Like the previous example, list data is
+ specified as an attribute containing a JSON array of strings; this value is used to
+ load the image displayed to the right of the list button. Like <tt>ListView</tt>,
+ <tt>ListButtons</tt> can also be populated programmatically using instances of
+ <tt>ListItem</tt>.
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/lists/list_buttons.wtkx">
+ <![CDATA[
+ <Window title="List Buttons" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <TablePane styles="{showHorizontalGridLines: true, showVerticalGridLines:true,
+ horizontalSpacing:1, verticalSpacing:1}">
+ <columns>
+ <TablePane.Column width="-1"/>
+ <TablePane.Column width="1*"/>
+ </columns>
+ <rows>
+ <TablePane.Row height="340">
+ <BoxPane orientation="vertical" styles="{verticalAlignment:'top', padding: 4}">
+ <Label text="Picture:"/>
+ <ListButton wtkx:id="listButton"
+ listData="['IMG_0725_2.jpg', 'IMG_0735_2.jpg', 'IMG_0767_2.jpg']"/>
+ </BoxPane>
+
+ <ImageView wtkx:id="imageView" styles="{backgroundColor:'#404040'}"/>
+ </TablePane.Row>
+ </rows>
+ </TablePane>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ The Java source for the example is below:
+ </p>
+
+ <source type="java" location="org/apache/pivot/tutorials/lists/ListButtons.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.lists;
+
+ import java.net.URL;
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.util.ThreadUtilities;
+ import org.apache.pivot.util.concurrent.TaskExecutionException;
+ import org.apache.pivot.wtk.Application;
+ import org.apache.pivot.wtk.ApplicationContext;
+ import org.apache.pivot.wtk.DesktopApplicationContext;
+ import org.apache.pivot.wtk.Display;
+ import org.apache.pivot.wtk.ImageView;
+ import org.apache.pivot.wtk.ListButton;
+ import org.apache.pivot.wtk.ListButtonSelectionListener;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtk.media.Image;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class ListButtons implements Application {
+ private Window window = null;
+ private ListButton listButton = null;
+ private ImageView imageView = null;
+
+ private ListButtonSelectionListener listButtonSelectionListener =
+ new ListButtonSelectionListener() {
+ @Override
+ public void selectedIndexChanged(ListButton listButton, int previousIndex) {
+ int index = listButton.getSelectedIndex();
+
+ if (index != -1) {
+ String item = (String)listButton.getListData().get(index);
+
+ // Get the image URL for the selected item
+ ClassLoader classLoader = ThreadUtilities.getClassLoader();
+ URL imageURL = classLoader.getResource("org/apache/pivot/tutorials/" + item);
+
+ // If the image has not been added to the resource cache yet,
+ // add it
+ Image image = (Image)ApplicationContext.getResourceCache().get(imageURL);
+
+ if (image == null) {
+ try {
+ image = Image.load(imageURL);
+ } catch (TaskExecutionException exception) {
+ throw new RuntimeException(exception);
+ }
+
+ ApplicationContext.getResourceCache().put(imageURL, image);
+ }
+
+ // Update the image
+ imageView.setImage(image);
+ }
+ }
+ };
+
+ @Override
+ public void startup(Display display, Map<String, String> properties) throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "list_buttons.wtkx");
+ listButton = (ListButton)wtkxSerializer.get("listButton");
+ imageView = (ImageView)wtkxSerializer.get("imageView");
+
+ listButton.getListButtonSelectionListeners().add(listButtonSelectionListener);
+ listButton.setSelectedIndex(0);
+
+ 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(ListButtons.class, args);
+ }
+ }
+ ]]>
+ </source>
+
+ <p>
+ Note that this example makes use of the global resource cache to store the loaded
+ images. This cache can be used to store any kind of application-specific data that may
+ be expensive to load. Entries are keyed by the URL from which they were retrieved, and,
+ once placed in the cache, are available to all code within the application. When the
+ list button's selection changes, the application first looks for an image in the
+ resource cache; if it is not found, it is loaded and added to the cache. It is then set
+ as the "image" property of the image view and displayed.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/lists.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/lists.xml?rev=888681&r1=888680&r2=888681&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/lists.xml (original)
+++ incubator/pivot/trunk/tutorials/www/lists.xml Wed Dec 9 02:32:34 2009
@@ -22,5 +22,188 @@
</properties>
<body>
+ <p>
+ List components in Pivot include <tt>ListView</tt> and <tt>ListButton</tt>.
+ <tt>ListView</tt> is a (often scrollable) list of items of which one or more may be
+ selected. <tt>ListButton</tt> is a popup list of items of which only one may be
+ selected at a time. It is often used in place of a group of radio buttons, particularly
+ when space is limited.
+ </p>
+
+ <p>
+ <tt>ListButton</tt> is discussed in the next section. The following example
+ demonstrates the <tt>ListView</tt> component. Multiple items may be selected at a time,
+ and list selections are reflected in the label to the right.
+ </p>
+
+ <application class="org.apache.pivot.tutorials.lists.ListViews"
+ width="216" height="122">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ The WTKX source for the example follows. Note that the list view is itself contained
+ within a <tt>ScrollPane</tt>. List views do not support scrolling internally. This
+ allows a UI designer to place a list view within an application and have the list view
+ simply grow to accommodate its contents, rather than requiring the designer to specify
+ a fixed height for the list in advance. However, if the designer knows that the list
+ will be long and that it is likely to scroll, it can be placed in a scroll pane.
+ <tt>ScrollPane</tt> is discussed in more detail in the
+ <a href="navigation_containers.html">Navigation Containers</a> section.
+ </p>
+
+ <p>
+ Also note that the list's contents are specified in the WTKX document itself, as a JSON
+ array of strings in the <tt>listData</tt> attribute. Any type of object can actually be
+ used as a list item, provided that the list view has been given a renderer that is
+ capable of painting it. However, they are most often specified as strings (as in this
+ example) or as instances of <tt>org.apache.pivot.wtk.content.ListItem</tt>, both of
+ which the default renderer is capable of presenting.
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/lists/list_views.wtkx">
+ <![CDATA[
+ <Window title="List Views" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <Border>
+ <content>
+ <BoxPane styles="{padding:4, spacing:4}">
+ <Border styles="{color:10}">
+ <content>
+ <ScrollPane preferredWidth="80" preferredHeight="110"
+ horizontalScrollBarPolicy="fill"
+ verticalScrollBarPolicy="fill_to_capacity">
+ <view>
+ <ListView wtkx:id="listView" selectMode="multi"
+ listData="['One', 'Two', 'Three', 'Four', 'Five',
+ 'Six', 'Seven', 'Eight', 'Nine', 'Ten']"/>
+ </view>
+ </ScrollPane>
+ </content>
+ </Border>
+ <BoxPane orientation="vertical" preferredWidth="120" styles="{fill:true}">
+ <Label text="You selected:"/>
+ <Label wtkx:id="selectionLabel" styles="{wrapText:true}"/>
+ </BoxPane>
+ </BoxPane>
+ </content>
+ </Border>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ The Java code for the example also uses the list data to populate the label component
+ as the list selection changes. A <tt>ListView</tt>'s selection is represented by a
+ sorted list of <tt>org.apache.pivot.wtk.Span</tt> objects that contain the currently
+ selected ranges; the application retrieves the list of currently selected ranges and
+ then constructs the label's text by appending each selected item to the string:
+ </p>
+
+ <source type="java" location="org/apache/pivot/tutorials/lists/ListViews.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.lists;
+
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.collections.Sequence;
+ 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.ListView;
+ import org.apache.pivot.wtk.ListViewSelectionListener;
+ import org.apache.pivot.wtk.Span;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class ListViews implements Application {
+ private Window window = null;
+ private Label selectionLabel = null;
+ private ListView listView = null;
+
+ private ListViewSelectionListener listViewSelectionListener =
+ new ListViewSelectionListener() {
+ @Override
+ public void selectedRangeAdded(ListView listView, int rangeStart, int rangeEnd) {
+ updateSelection(listView);
+ }
+
+ @Override
+ public void selectedRangeRemoved(ListView listView, int rangeStart, int rangeEnd) {
+ updateSelection(listView);
+ }
+
+ @Override
+ public void selectedRangesChanged(ListView listView, Sequence<Span> previousSelectedRanges) {
+ updateSelection(listView);
+ }
+
+ private void updateSelection(ListView listView) {
+ String selectionText = "";
+
+ Sequence<Span> selectedRanges = listView.getSelectedRanges();
+ for (int i = 0, n = selectedRanges.getLength(); i < n; i++) {
+ Span selectedRange = selectedRanges.get(i);
+
+ for (int j = selectedRange.start;
+ j <= selectedRange.end;
+ j++) {
+ if (selectionText.length() > 0) {
+ selectionText += ", ";
+ }
+
+ String text = (String)listView.getListData().get(j);
+ selectionText += text;
+ }
+ }
+
+ selectionLabel.setText(selectionText);
+ }
+ };
+
+ @Override
+ public void startup(Display display, Map<String, String> properties)
+ throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "list_views.wtkx");
+ selectionLabel = (Label)wtkxSerializer.get("selectionLabel");
+ listView = (ListView)wtkxSerializer.get("listView");
+
+ listView.getListViewSelectionListeners().add(listViewSelectionListener);
+
+ 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(ListViews.class, args);
+ }
+ }
+ ]]>
+ </source>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/localization.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/localization.xml?rev=888681&r1=888680&r2=888681&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/localization.xml (original)
+++ incubator/pivot/trunk/tutorials/www/localization.xml Wed Dec 9 02:32:34 2009
@@ -22,5 +22,213 @@
</properties>
<body>
+ <p>
+ In Java, any translatable text is generally stored in a set of localized property files
+ called "resource bundles". The appropriate file is loaded at runtime for either the
+ default locale or an explicitly selected non-default locale. While it is possible to
+ use standard Java resource bundles in a Pivot application, Pivot adds support for
+ JSON-based resource bundles that are slightly more flexible the built-in
+ properties-based bundles. JSON resource bundles allow developers to more easily work
+ with UTF-8 encoded resource strings, and also natively support hierarchical data, which
+ can only be simulated when using properties files.
+ </p>
+
+ <p>
+ The following application provides a simple demonstration of localization in Pivot:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.localization.Localization"
+ width="320" height="240">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ The following resource bundles are provided; if your default system locale is among
+ these, you should see a localized version of the application. Otherwise, the default
+ locale ("en") will be used:
+ </p>
+
+ <ul>
+ <li>Localization.json</li>
+ <li>Localization_cn.json</li>
+ <li>Localization_de.json</li>
+ <li>Localization_it.json</li>
+ <li>Localization_ph.json</li>
+ </ul>
+
+ <p>
+ The resource bundle for the default locale is shown below:
+ </p>
+
+ <source type="jscript">
+ <![CDATA[
+ { firstName: "First name",
+ lastName: "Last name",
+ street: "Street",
+ city: "City",
+ state: "State",
+ postalCode: "Zip",
+ country: "Country"
+ }
+ ]]>
+ </source>
+
+ <p>
+ The WTKX source for the application is as follows. Note the use of the "%" prefix in
+ the form label attributes. This prefix is known as the "resource resolution operator"
+ in WTKX. As the WTKX is read, attribute values that begin with the "%" character are
+ replaced by the corresponding values defined in the resource bundle:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/localization/localization.wtkx">
+ <![CDATA[
+ <Window title="Localization" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <windowStateListeners>
+ <wtkx:script>
+ function windowOpened(window) {
+ window.requestFocus();
+ }
+ </wtkx:script>
+ </windowStateListeners>
+
+ <content>
+ <Border styles="{padding:6}">
+ <content>
+ <Form>
+ <sections>
+ <Form.Section>
+ <TextInput Form.label="%firstName"/>
+ <TextInput Form.label="%lastName"/>
+ <TextInput Form.label="%street"/>
+ <TextInput Form.label="%city"/>
+ <TextInput Form.label="%state" textSize="4"/>
+ <TextInput Form.label="%postalCode"/>
+ <TextInput Form.label="%country"/>
+ </Form.Section>
+ </sections>
+ </Form>
+ </content>
+ </Border>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ The Java source for the application is shown below:
+ </p>
+
+ <source type="java" location="org/apache/pivot/tutorials/localization/Localization.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.localization;
+
+ import java.awt.Font;
+ import java.awt.GraphicsEnvironment;
+ import java.util.Locale;
+
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.util.Resources;
+ import org.apache.pivot.wtk.Application;
+ import org.apache.pivot.wtk.DesktopApplicationContext;
+ import org.apache.pivot.wtk.Display;
+ import org.apache.pivot.wtk.Theme;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class Localization implements Application {
+ private Window window = null;
+
+ public static final String LANGUAGE_KEY = "language";
+
+ @Override
+ public void startup(Display display, Map<String, String> properties) throws Exception {
+ String language = properties.get(LANGUAGE_KEY);
+ if (language != null) {
+ Locale.setDefault(new Locale(language));
+ }
+
+ Resources resources = new Resources(getClass().getName(), "UTF-8");
+
+ Theme theme = Theme.getTheme();
+ Font font = theme.getFont();
+
+ // Search for a font that can support the sample string
+ String sampleResource = resources.getString("firstName");
+ if (font.canDisplayUpTo(sampleResource) != -1) {
+ Font[] fonts = GraphicsEnvironment.getLocalGraphicsEnvironment().getAllFonts();
+
+ for (int i = 0; i < fonts.length; i++) {
+ if (fonts[i].canDisplayUpTo(sampleResource) == -1) {
+ theme.setFont(fonts[i].deriveFont(Font.PLAIN, 12));
+ break;
+ }
+ }
+ }
+
+ WTKXSerializer wtkxSerializer = new WTKXSerializer(resources);
+
+ window = (Window)wtkxSerializer.readObject(this, "localization.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(Localization.class, args);
+ }
+ }
+ ]]>
+ </source>
+
+ <p>
+ Note that the application accepts a startup property named "language" to allow a caller
+ to override the default locale. The following example shows the application loaded with
+ "language" value of "de" (the applet is signed to allow the code to set the locale):
+ </p>
+
+ <application class="org.apache.pivot.tutorials.localization.Localization"
+ width="320" height="240">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ <startup-properties>
+ <language>de</language>
+ </startup-properties>
+ </application>
+
+ <p>
+ Notice that the <tt>startup()</tt> method includes code to search for a font that can
+ display a sample set of characters obtained from the "firstName" resource. This is
+ because all fonts are not guaranteed to include support for all possible Unicode
+ characters. If the current theme font is not capable of displaying the sample string,
+ this block of code attempts to identify and set one that can. This code must be
+ executed prior to constructing any user interface elements so that the correct font
+ will be used.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/menu-bars.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/menu-bars.xml?rev=888681&r1=888680&r2=888681&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/menu-bars.xml (original)
+++ incubator/pivot/trunk/tutorials/www/menu-bars.xml Wed Dec 9 02:32:34 2009
@@ -22,5 +22,341 @@
</properties>
<body>
+ <p>
+ Menu bars are generally used to provide convenient access to major application
+ features. They act as a repository for top-level hierarchical menus, keeping the menus
+ out of sight until they are needed.
+ </p>
+
+ <p>
+ Like all other components, menu bars can actually be placed anywhere in an
+ application's user interface. However, they are most often located at the top of an
+ application's main window. Pivot provides framework-level support for simplifying the
+ task of defining a menu bar positioned in this way. The <tt>Frame</tt> class defines
+ a "menuBar" property that is handled specially by the application using the
+ <tt>configureMenuBar()</tt> and <tt>cleanupMenuBar()</tt> methods of the
+ <tt>MenuHandler</tt> interface. These methods are called by the framework as the focus
+ changes within a window, to allow the application to customize the contents of the menu
+ bar based on the currently focused component.
+ </p>
+
+ <p>
+ The example application below shows a menu bar containing two common top-level menu
+ items: "File" and "Edit" (note that the applet is signed since it makes use of the
+ <tt>FileBrowserSheet</tt> component, which requires access to the local file system):
+ </p>
+
+ <application class="org.apache.pivot.tutorials.menus.MenuBars"
+ width="640" height="480">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ Each sub-menu item is associated with an <tt>Action</tt> that is executed when the
+ item is selected. For example, the action attached to the "File > Open" menu item
+ simulates opening a document by showing a file browser sheet and adding a new tab to
+ the application's tab pane. Each component in the "document" has a menu handler
+ attached to it that configures the menu contents as appropriate for the current
+ selection. When a text input component has the focus, the "Paste" menu item is enabled.
+ If text is selected in the text input, the "Cut" and "Copy" menu items are also
+ enabled.
+ </p>
+
+ <p>
+ The WTKX source for this example is shown below. It creates the initial menu structure
+ as well as the tab pane that will host the simulated documents. Note that it also
+ defines a set of "action mappings" in the root frame's "actionMappings" sequence.
+ Action mappings associate keystrokes with actions; when a keystroke matching an action
+ in the sequence is processed by the window, the action is invoked. Action mappings are
+ often called "keyboard shortcuts".
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/menus/menu_bars.wtkx">
+ <![CDATA[
+ <Frame title="Menu Bars" maximized="true"
+ styles="{padding:{top:0, left:4, bottom:4, right:4}, showWindowControls:false}"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns:content="org.apache.pivot.wtk.content"
+ xmlns="org.apache.pivot.wtk">
+ <actionMappings>
+ <Window.ActionMapping action="cut" keyStroke="CTRL-X"/>
+ <Window.ActionMapping action="copy" keyStroke="CTRL-C"/>
+ <Window.ActionMapping action="paste" keyStroke="CTRL-V"/>
+ </actionMappings>
+
+ <menuBar>
+ <MenuBar>
+ <items>
+ <MenuBar.Item buttonData="File">
+ <menu>
+ <Menu>
+ <sections>
+ <Menu.Section>
+ <Menu.Item action="fileNew">
+ <buttonData>
+ <content:ButtonData text="New"/>
+ </buttonData>
+ </Menu.Item>
+ <Menu.Item action="fileOpen">
+ <buttonData>
+ <content:ButtonData text="Open"/>
+ </buttonData>
+ </Menu.Item>
+ </Menu.Section>
+ </sections>
+ </Menu>
+ </menu>
+ </MenuBar.Item>
+
+ <MenuBar.Item buttonData="Edit">
+ <menu>
+ <Menu>
+ <sections>
+ <Menu.Section>
+ <Menu.Item action="cut">
+ <buttonData>
+ <content:MenuItemData text="Cut"
+ keyboardShortcut="CTRL-X"/>
+ </buttonData>
+ </Menu.Item>
+ <Menu.Item action="copy">
+ <buttonData>
+ <content:MenuItemData text="Copy"
+ keyboardShortcut="CTRL-C"/>
+ </buttonData>
+ </Menu.Item>
+ <Menu.Item action="paste">
+ <buttonData>
+ <content:MenuItemData text="Paste"
+ keyboardShortcut="CTRL-V"/>
+ </buttonData>
+ </Menu.Item>
+ </Menu.Section>
+ </sections>
+ </Menu>
+ </menu>
+ </MenuBar.Item>
+ </items>
+ </MenuBar>
+ </menuBar>
+
+ <content>
+ <Border styles="{backgroundColor:null, padding:2}">
+ <content>
+ <TabPane wtkx:id="tabPane"/>
+ </content>
+ </Border>
+ </content>
+ </Frame>
+ ]]>
+ </source>
+
+ <p>
+ The Java source for the example is shown below. In the constructor, the application's
+ actions are created and added to the global action dictionary. Then, in
+ <tt>startup()</tt>, the application's user interface is loaded and the main window
+ opened. Note that, since the WTKX file refers to the actions by ID, it is essential
+ that the actions be available before the WTKX is read.
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/menus/MenuBars.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.menus;
+
+ import java.io.IOException;
+
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.serialization.SerializationException;
+ import org.apache.pivot.wtk.Action;
+ import org.apache.pivot.wtk.Application;
+ import org.apache.pivot.wtk.Border;
+ import org.apache.pivot.wtk.Component;
+ import org.apache.pivot.wtk.DesktopApplicationContext;
+ import org.apache.pivot.wtk.Display;
+ import org.apache.pivot.wtk.FileBrowserSheet;
+ import org.apache.pivot.wtk.MenuBar;
+ import org.apache.pivot.wtk.MenuHandler;
+ import org.apache.pivot.wtk.PushButton;
+ import org.apache.pivot.wtk.TabPane;
+ import org.apache.pivot.wtk.TextInput;
+ import org.apache.pivot.wtk.TextInputSelectionListener;
+ import org.apache.pivot.wtk.TextInputTextListener;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class MenuBars implements Application {
+ private Window window = null;
+ private TabPane tabPane = null;
+ private FileBrowserSheet fileBrowserSheet = null;
+
+ private MenuHandler menuHandler = new MenuHandler.Adapter() {
+ TextInputTextListener textInputTextListener = new TextInputTextListener() {
+ @Override
+ public void textChanged(TextInput textInput) {
+ updateActionState(textInput);
+ }
+ };
+
+ TextInputSelectionListener textInputSelectionListener = new TextInputSelectionListener() {
+ @Override
+ public void selectionChanged(TextInput textInput, int previousSelectionStart,
+ int previousSelectionLength) {
+ updateActionState(textInput);
+ }
+ };
+
+ @Override
+ public void configureMenuBar(Component component, MenuBar menuBar) {
+ if (component instanceof TextInput) {
+ TextInput textInput = (TextInput)component;
+
+ updateActionState(textInput);
+ Action.getNamedActions().get("paste").setEnabled(true);
+
+ textInput.getTextInputTextListeners().add(textInputTextListener);
+ textInput.getTextInputSelectionListeners().add(textInputSelectionListener);
+ } else {
+ Action.getNamedActions().get("cut").setEnabled(false);
+ Action.getNamedActions().get("copy").setEnabled(false);
+ Action.getNamedActions().get("paste").setEnabled(false);
+ }
+ }
+
+ @Override
+ public void cleanupMenuBar(Component component, MenuBar menuBar) {
+ if (component instanceof TextInput) {
+ TextInput textInput = (TextInput)component;
+ textInput.getTextInputTextListeners().remove(textInputTextListener);
+ textInput.getTextInputSelectionListeners().remove(textInputSelectionListener);
+ }
+ }
+
+ private void updateActionState(TextInput textInput) {
+ Action.getNamedActions().get("cut").setEnabled(textInput.getSelectionLength() > 0);
+ Action.getNamedActions().get("copy").setEnabled(textInput.getSelectionLength() > 0);
+ }
+ };
+
+ public MenuBars() {
+ Action.getNamedActions().put("fileNew", new Action() {
+ @Override
+ public void perform() {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ Component tab;
+ try {
+ tab = new Border((Component)wtkxSerializer.readObject(this, "document.wtkx"));
+
+ TextInput textInput1 = (TextInput)wtkxSerializer.get("textInput1");
+ textInput1.setMenuHandler(menuHandler);
+
+ TextInput textInput2 = (TextInput)wtkxSerializer.get("textInput2");
+ textInput2.setMenuHandler(menuHandler);
+
+ PushButton pushButton = (PushButton)wtkxSerializer.get("pushButton");
+ pushButton.setMenuHandler(menuHandler);
+ } catch (IOException exception) {
+ throw new RuntimeException(exception);
+ } catch (SerializationException exception) {
+ throw new RuntimeException(exception);
+ }
+
+ tabPane.getTabs().add(tab);
+ TabPane.setLabel(tab, "Document " + tabPane.getTabs().getLength());
+ tabPane.setSelectedIndex(tabPane.getTabs().getLength() - 1);
+ }
+ });
+
+ Action.getNamedActions().put("fileOpen", new Action() {
+ @Override
+ public void perform() {
+ fileBrowserSheet.open(window);
+ }
+ });
+
+ Action.getNamedActions().put("cut", new Action(false) {
+ @Override
+ public void perform() {
+ TextInput textInput = (TextInput)window.getFocusDescendant();
+ textInput.cut();
+ }
+ });
+
+ Action.getNamedActions().put("copy", new Action(false) {
+ @Override
+ public void perform() {
+ TextInput textInput = (TextInput)window.getFocusDescendant();
+ textInput.copy();
+ }
+ });
+
+ Action.getNamedActions().put("paste", new Action(false) {
+ @Override
+ public void perform() {
+ TextInput textInput = (TextInput)window.getFocusDescendant();
+ textInput.paste();
+ }
+ });
+ }
+
+ @Override
+ public void startup(Display display, Map<String, String> properties)
+ throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "menu_bars.wtkx");
+
+ tabPane = (TabPane)wtkxSerializer.get("tabPane");
+
+ fileBrowserSheet = new FileBrowserSheet(FileBrowserSheet.Mode.OPEN);
+
+ 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(MenuBars.class, args);
+ }
+ }
+ ]]>
+ </source>
+
+ <p>
+ The class also defines an anonymous inner implementation of the <tt>MenuHandler</tt>
+ interface that is used to configure the menu bar based on the focused component. In
+ <tt>configureMenuBar()</tt>, the actions associated with the "cut", "copy", and "paste"
+ operations are enabled and disabled as appropriate. Listeners are also added to the
+ focused component (if it is a <tt>TextInput</tt>) to ensure that the action's state
+ accurately reflects the current selection. The listeners are removed in
+ <tt>cleanupMenuBar()</tt>, if necessary.
+ </p>
+
+ <p>
+ Note that menu bar configuration via <tt>MenuHandler</tt> isn't limited to enabling or
+ disabling actions - new menu items can be dynamically created, menu item selection
+ state can be changed, etc. However, unlike context menus, the framework does not
+ automatically clean up any changes made to the menu bar. It is up to the application
+ to ensure that the menu bar remains in a consistent state using the
+ <tt>configureMenuBar()</tt> and <tt>cleanupMenuBar()</tt> methods.
+ </p>
</body>
</document>