You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pivot.apache.org by gb...@apache.org on 2009/12/06 02:51:42 UTC
svn commit: r887628 - in /incubator/pivot/trunk/tutorials/www:
file-browsing.xml file_browsing.html flow-panes.xml flow_panes.html
Author: gbrown
Date: Sun Dec 6 01:51:41 2009
New Revision: 887628
URL: http://svn.apache.org/viewvc?rev=887628&view=rev
Log:
Continue migrating tutorial content to XML.
Removed:
incubator/pivot/trunk/tutorials/www/file_browsing.html
incubator/pivot/trunk/tutorials/www/flow_panes.html
Modified:
incubator/pivot/trunk/tutorials/www/file-browsing.xml
incubator/pivot/trunk/tutorials/www/flow-panes.xml
Modified: incubator/pivot/trunk/tutorials/www/file-browsing.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/file-browsing.xml?rev=887628&r1=887627&r2=887628&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/file-browsing.xml (original)
+++ incubator/pivot/trunk/tutorials/www/file-browsing.xml Sun Dec 6 01:51:41 2009
@@ -22,5 +22,179 @@
</properties>
<body>
+ <p>Pivot includes support for easily adding local file system access to an application. The following example demonstrates the use of the <tt>FileBrowserSheet</tt> class:</p>
+
+ <application class="org.apache.pivot.tutorials.filebrowsing.FileBrowsing"
+ width="640" height="480" signed="true">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ It allows the user to browse the local file system using one of four supported modes:
+ </p>
+
+ <ul>
+ <li><p><b>Open</b> - select a single file to open</p></li>
+ <li><p><b>Open Multiple</b> - select multiple files to open</p></li>
+ <li><p><b>Save As</b> - select a file name to save as</p></li>
+ <li><p><b>Save To</b> - select a folder to save to</p></li>
+ </ul>
+
+ <p>
+ The WTKX source for the application is as follows:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/filebrowsing/file_browsing.wtkx">
+ <![CDATA[
+ <Window title="File Browser Sheets" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <wtkx:define>
+ <ButtonGroup wtkx:id="fileBrowserSheetModeGroup"/>
+ </wtkx:define>
+
+ <content>
+ <Border styles="{padding:6}">
+ <content>
+ <BoxPane orientation="vertical" styles="{spacing:6}">
+ <Label text="Mode:" styles="{font:{bold:true}}"/>
+
+ <RadioButton buttonData="Open" buttonGroup="$fileBrowserSheetModeGroup" selected="true">
+ <userData mode="open"/>
+ </RadioButton>
+ <RadioButton buttonData="Open Multiple" buttonGroup="$fileBrowserSheetModeGroup">
+ <userData mode="open_multiple"/>
+ </RadioButton>
+ <RadioButton buttonData="Save As" buttonGroup="$fileBrowserSheetModeGroup">
+ <userData mode="save_as"/>
+ </RadioButton>
+ <RadioButton buttonData="Save To" buttonGroup="$fileBrowserSheetModeGroup">
+ <userData mode="save_to"/>
+ </RadioButton>
+
+ <PushButton wtkx:id="openSheetButton" buttonData="Open Sheet"/>
+ </BoxPane>
+ </content>
+ </Border>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ The Java source code is shown below. When the user presses the "Open Sheet" button,
+ it creates a <tt>FileBrowserSheet</tt> using the selected mode and opens the sheet.
+ When the sheet is closed, it simply displays an alert to the user reflecting the
+ selection:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/filebrowsing/FileBrowsing.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.filebrowsing;
+
+ import java.io.File;
+
+ import org.apache.pivot.collections.ArrayList;
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.collections.Sequence;
+ 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.FileBrowserSheet;
+ import org.apache.pivot.wtk.ListView;
+ import org.apache.pivot.wtk.MessageType;
+ import org.apache.pivot.wtk.PushButton;
+ import org.apache.pivot.wtk.Sheet;
+ import org.apache.pivot.wtk.SheetCloseListener;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtkx.WTKX;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class FileBrowsing implements Application {
+ private Window window = null;
+
+ @WTKX private ButtonGroup fileBrowserSheetModeGroup = null;
+ @WTKX private PushButton openSheetButton = null;
+
+ @Override
+ public void startup(Display display, Map<String, String> properties)
+ throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+
+ window = (Window)wtkxSerializer.readObject(getClass().getResource("file_browsing.wtkx"));
+ wtkxSerializer.bind(this, FileBrowsing.class);
+
+ openSheetButton.getButtonPressListeners().add(new ButtonPressListener() {
+ @Override
+ public void buttonPressed(Button button) {
+ Button selection = fileBrowserSheetModeGroup.getSelection();
+
+ String mode = (String)selection.getUserData().get("mode");
+ final FileBrowserSheet fileBrowserSheet =
+ new FileBrowserSheet(FileBrowserSheet.Mode.valueOf(mode.toUpperCase()));
+
+ fileBrowserSheet.open(window, new SheetCloseListener() {
+ @Override
+ public void sheetClosed(Sheet sheet) {
+ if (sheet.getResult()) {
+ Sequence<File> selectedFiles = fileBrowserSheet.getSelectedFiles();
+
+ ListView listView = new ListView();
+ listView.setListData(new ArrayList<File>(selectedFiles));
+ listView.setSelectMode(ListView.SelectMode.NONE);
+ listView.getStyles().put("backgroundColor", null);
+
+ Alert.alert(MessageType.INFO, "You selected:", listView, window);
+ } else {
+ Alert.alert(MessageType.INFO, "You didn't select anything.", 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(FileBrowsing.class, args);
+ }
+ }
+ ]]>
+ </source>
+
+ <p>
+ Note that, internally, <tt>FileBrowserSheet</tt> uses an instance of the
+ <tt>org.apache.pivot.wtk.FileBrowser</tt> class to perform the actual file system
+ navigation. It is actually possible to use this component directly within an
+ application to create a custom file browser; however, a discussion of the
+ <tt>FileBrowser</tt> class is outside the scope of this tutorial.
+ </p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/flow-panes.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/flow-panes.xml?rev=887628&r1=887627&r2=887628&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/flow-panes.xml (original)
+++ incubator/pivot/trunk/tutorials/www/flow-panes.xml Sun Dec 6 01:51:41 2009
@@ -22,5 +22,188 @@
</properties>
<body>
+ <p>
+ Flow panes arrange components in a horizontal line, wrapping when the contents don't
+ fit on a single line. Components may be horizontally aligned to left, right, or center
+ when there is space left over within a given line, and may optionally be vertically
+ aligned by to their baselines.
+ </p>
+
+ <p>
+ The following example demonstrates the use of the <tt>FlowPane</tt> container. The
+ buttons on the right can be used to modify the alignment properties. A
+ <tt>BaselineDecorator</tt> is used to highlight the flow pane's baseline. This
+ decorator draws a red line across a component's baseline. If the component does not
+ have a baseline, it draws a blue line across the component's vertical midpoint:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.layout.FlowPanes"
+ width="360" height="240">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ The WTKX source for this example is shown below:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/layout/flow_panes.wtkx">
+ <![CDATA[
+ <Window title="Flow Panes" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns:effects="org.apache.pivot.wtk.effects"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <SplitPane splitRatio="0.75">
+ <left>
+ <Border styles="{padding:4}">
+ <content>
+ <BoxPane orientation="vertical" styles="{fill:true}">
+ <FlowPane wtkx:id="flowPane" styles="{padding:2}">
+ <decorators>
+ <effects:BaselineDecorator/>
+ </decorators>
+
+ <PushButton buttonData="0" styles="{minimumAspectRatio:1.5}"/>
+ <PushButton buttonData="1" styles="{minimumAspectRatio:1.5}"/>
+ <PushButton buttonData="2" styles="{minimumAspectRatio:1.5}"/>
+ <PushButton buttonData="3" preferredWidth="20" preferredHeight="20"/>
+ <PushButton buttonData="4" preferredWidth="30" preferredHeight="30"/>
+ <PushButton buttonData="5" preferredWidth="40" preferredHeight="40"/>
+ <PushButton buttonData="6" styles="{minimumAspectRatio:1.5}"/>
+ <PushButton buttonData="7" styles="{minimumAspectRatio:1.5}"/>
+ </FlowPane>
+ </BoxPane>
+ </content>
+ </Border>
+ </left>
+ <right>
+ <Border styles="{padding:{top:2, left:6}}">
+ <content>
+ <BoxPane orientation="vertical">
+ <Label text="Alignment" styles="{font:{bold:true}}"/>
+
+ <wtkx:define>
+ <ButtonGroup wtkx:id="alignment"/>
+ </wtkx:define>
+ <RadioButton wtkx:id="leftRadioButton" buttonData="Left" buttonGroup="$alignment" selected="true"/>
+ <RadioButton wtkx:id="rightRadioButton" buttonData="Right" buttonGroup="$alignment"/>
+ <RadioButton wtkx:id="centerRadioButton" buttonData="Center" buttonGroup="$alignment"/>
+
+ <BoxPane styles="{padding:{top:6}}">
+ <Checkbox wtkx:id="alignToBaselineCheckbox" buttonData="Align to baseline"/>
+ </BoxPane>
+ </BoxPane>
+ </content>
+ </Border>
+ </right>
+ </SplitPane>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ The Java source is as follows. It wires up the event handlers that respond to changes
+ in the radio buttons' state:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/layout/FlowPanes.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.layout;
+
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.wtk.Application;
+ import org.apache.pivot.wtk.Button;
+ import org.apache.pivot.wtk.ButtonStateListener;
+ import org.apache.pivot.wtk.Checkbox;
+ import org.apache.pivot.wtk.DesktopApplicationContext;
+ import org.apache.pivot.wtk.Display;
+ import org.apache.pivot.wtk.FlowPane;
+ import org.apache.pivot.wtk.HorizontalAlignment;
+ import org.apache.pivot.wtk.RadioButton;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class FlowPanes implements Application {
+ private Window window = null;
+ private FlowPane flowPane = null;
+ private RadioButton leftRadioButton = null;
+ private RadioButton rightRadioButton = null;
+ private RadioButton centerRadioButton = null;
+ private Checkbox alignToBaselineCheckbox = null;
+
+ @Override
+ public void startup(Display display, Map<String, String> properties) throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "flow_panes.wtkx");
+ flowPane = (FlowPane)wtkxSerializer.get("flowPane");
+ leftRadioButton = (RadioButton)wtkxSerializer.get("leftRadioButton");
+ rightRadioButton = (RadioButton)wtkxSerializer.get("rightRadioButton");
+ centerRadioButton = (RadioButton)wtkxSerializer.get("centerRadioButton");
+ alignToBaselineCheckbox = (Checkbox)wtkxSerializer.get("alignToBaselineCheckbox");
+
+ ButtonStateListener buttonStateListener = new ButtonStateListener() {
+ @Override
+ public void stateChanged(Button button, Button.State previousState) {
+ updateFlowPaneState();
+ }
+ };
+
+ leftRadioButton.getButtonStateListeners().add(buttonStateListener);
+ rightRadioButton.getButtonStateListeners().add(buttonStateListener);
+ centerRadioButton.getButtonStateListeners().add(buttonStateListener);
+ alignToBaselineCheckbox.getButtonStateListeners().add(buttonStateListener);
+
+ updateFlowPaneState();
+
+ 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 updateFlowPaneState() {
+ HorizontalAlignment alignment = null;
+
+ if (leftRadioButton.isSelected()) {
+ alignment = HorizontalAlignment.LEFT;
+ } else if (rightRadioButton.isSelected()) {
+ alignment = HorizontalAlignment.RIGHT;
+ } else if (centerRadioButton.isSelected()) {
+ alignment = HorizontalAlignment.CENTER;
+ }
+
+ if (alignment != null) {
+ flowPane.getStyles().put("alignment", alignment);
+ }
+
+ flowPane.getStyles().put("alignToBaseline", alignToBaselineCheckbox.isSelected());
+ }
+
+ public static void main(String[] args) {
+ DesktopApplicationContext.main(FlowPanes.class, args);
+ }
+ }
+ ]]>
+ </source>
</body>
</document>