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/04 18:29:55 UTC
svn commit: r887282 - in /incubator/pivot/trunk/tutorials:
.settings/org.eclipse.core.resources.prefs www/accordions.html
www/accordions.xml www/activity-indicators.xml www/activity_indicators.html
Author: gbrown
Date: Fri Dec 4 17:29:54 2009
New Revision: 887282
URL: http://svn.apache.org/viewvc?rev=887282&view=rev
Log:
Update accordion and activity indicator tutorial XML.
Removed:
incubator/pivot/trunk/tutorials/www/accordions.html
incubator/pivot/trunk/tutorials/www/activity_indicators.html
Modified:
incubator/pivot/trunk/tutorials/.settings/org.eclipse.core.resources.prefs
incubator/pivot/trunk/tutorials/www/accordions.xml
incubator/pivot/trunk/tutorials/www/activity-indicators.xml
Modified: incubator/pivot/trunk/tutorials/.settings/org.eclipse.core.resources.prefs
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/.settings/org.eclipse.core.resources.prefs?rev=887282&r1=887281&r2=887282&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/.settings/org.eclipse.core.resources.prefs (original)
+++ incubator/pivot/trunk/tutorials/.settings/org.eclipse.core.resources.prefs Fri Dec 4 17:29:54 2009
@@ -1,7 +1,6 @@
-#Mon Oct 12 16:24:54 EDT 2009
+#Fri Dec 04 08:05:11 EST 2009
eclipse.preferences.version=1
encoding//src/org/apache/pivot/tutorials/localization/Localization.json=UTF-8
encoding//src/org/apache/pivot/tutorials/localization/Localization_de.json=UTF-8
encoding//src/org/apache/pivot/tutorials/stocktracker/StockTracker.json=UTF-8
encoding//src/org/apache/pivot/tutorials/stocktracker/StockTracker_fr.json=UTF-8
-encoding//www/stock_tracker.localization.html=UTF-8
Modified: incubator/pivot/trunk/tutorials/www/accordions.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/accordions.xml?rev=887282&r1=887281&r2=887282&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/accordions.xml (original)
+++ incubator/pivot/trunk/tutorials/www/accordions.xml Fri Dec 4 17:29:54 2009
@@ -22,5 +22,218 @@
</properties>
<body>
+ <p>
+ Accordions serve a similar purpose to tab panes and card panes, only showing one
+ of a collection of components at a time. Like tab panes, accordions provide built-in
+ navigation support. However, rather than representing the content as a stack of
+ components, they are presented like the folds of an accordion, with headers for
+ navigating between panels.
+ </p>
+ <p>
+ The following application demonstrates the use of the <tt>Accordion</tt> component.
+ It is a simplified online checkout process consisting of three pages - shipping
+ info, payment info, and order summary:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.navigation.Accordions" width="260" height="380">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ Note that, like <tt>TabPane</tt>, the default behavior of an accordion is to allow
+ the user to freely navigate between panels. However, in this example, the user is
+ only allowed to progress forward in the accordion by pressing the "Next" button.
+ This restriction is imposed programmatically by the application, since the content
+ of a subsequent page in such a checkout process may depend on the user's entries on
+ a previous page. The user may freely navigate backward at any point, however.
+ The last panel simulates the order confirmation by displaying an
+ <a href="activity_indicators.html">activity indicator</a>.
+ </p>
+
+ <p>
+ The WTKX source for the example is shown below. It includes a number of external WTKX
+ files that define the content of each panel:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/navigation/accordions.wtkx">
+ <![CDATA[
+ <Window title="Accordions" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <Accordion wtkx:id="accordion" styles="{padding:0}">
+ <panels>
+ <wtkx:include wtkx:id="shippingPanel" src="shipping.wtkx" Accordion.label="Shipping Information"/>
+ <wtkx:include wtkx:id="paymentPanel" src="payment.wtkx" Accordion.label="Payment Information"/>
+ <wtkx:include wtkx:id="summaryPanel" src="summary.wtkx" Accordion.label="Summary & Confirmation"/>
+ </panels>
+ </Accordion>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ The Java source is as follows. The primary logic for maintaining the enabled state
+ of the panels is defined in the <tt>updateAccordion()</tt> method; an
+ <tt>AccordionSelectionListener</tt> is used to enable or disable panels when a
+ selection change transition is about to occur, rather than waiting until it is
+ complete, to provide a smoother user experience:
+ </p>
+
+ <source type="java" location="org/apache/pivot/tutorials/navigation/Accordions.java">
+ <![CDATA[
+ package org.apache.pivot.tutorials.navigation;
+
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.collections.Sequence;
+ import org.apache.pivot.util.Vote;
+ import org.apache.pivot.wtk.Accordion;
+ import org.apache.pivot.wtk.AccordionSelectionListener;
+ import org.apache.pivot.wtk.ActivityIndicator;
+ 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.Label;
+ import org.apache.pivot.wtk.PushButton;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class Accordions implements Application {
+ private Window window = null;
+ private Accordion accordion = null;
+ private PushButton shippingNextButton = null;
+ private PushButton paymentNextButton = null;
+ private PushButton confirmOrderButton = null;
+ private ActivityIndicator activityIndicator = null;
+ private Label processingOrderLabel = null;
+
+ private AccordionSelectionListener accordionSelectionListener = new AccordionSelectionListener() {
+ private int selectedIndex = -1;
+
+ @Override
+ public Vote previewSelectedIndexChange(Accordion accordion, int selectedIndex) {
+ this.selectedIndex = selectedIndex;
+
+ // Enable the next panel or disable the previous panel so the
+ // transition looks smoother
+ if (selectedIndex != -1) {
+ int previousSelectedIndex = accordion.getSelectedIndex();
+ if (selectedIndex > previousSelectedIndex) {
+ accordion.getPanels().get(selectedIndex).setEnabled(true);
+ } else {
+ accordion.getPanels().get(previousSelectedIndex).setEnabled(false);
+ }
+
+ }
+
+ return Vote.APPROVE;
+ }
+
+ @Override
+ public void selectedIndexChangeVetoed(Accordion accordion, Vote reason) {
+ if (reason == Vote.DENY
+ && selectedIndex != -1) {
+ Component panel = accordion.getPanels().get(selectedIndex);
+ panel.setEnabled(!panel.isEnabled());
+ }
+ }
+
+ @Override
+ public void selectedIndexChanged(Accordion accordion, int previousSelection) {
+ updateAccordion();
+ }
+ };
+
+ @Override
+ public void startup(Display display, Map<String, String> properties)
+ throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "accordions.wtkx");
+ accordion = (Accordion)wtkxSerializer.get("accordion");
+
+ accordion.getAccordionSelectionListeners().add(accordionSelectionListener);
+
+ ButtonPressListener nextButtonPressListener = new ButtonPressListener() {
+ @Override
+ public void buttonPressed(Button button) {
+ accordion.setSelectedIndex(accordion.getSelectedIndex() + 1);
+ }
+ };
+
+ shippingNextButton = (PushButton)wtkxSerializer.get("shippingPanel.nextButton");
+ shippingNextButton.getButtonPressListeners().add(nextButtonPressListener);
+
+ paymentNextButton = (PushButton)wtkxSerializer.get("paymentPanel.nextButton");
+ paymentNextButton.getButtonPressListeners().add(nextButtonPressListener);
+
+ confirmOrderButton = (PushButton)wtkxSerializer.get("summaryPanel.confirmOrderButton");
+ confirmOrderButton.getButtonPressListeners().add(new ButtonPressListener() {
+ @Override
+ public void buttonPressed(Button button) {
+ // Pretend to submit or cancel the order
+ activityIndicator.setActive(!activityIndicator.isActive());
+ processingOrderLabel.setVisible(activityIndicator.isActive());
+ updateConfirmOrderButton();
+ }
+ });
+
+ activityIndicator = (ActivityIndicator)wtkxSerializer.get("summaryPanel.activityIndicator");
+ processingOrderLabel = (Label)wtkxSerializer.get("summaryPanel.processingOrderLabel");
+
+ updateAccordion();
+ updateConfirmOrderButton();
+
+ 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 updateAccordion() {
+ int selectedIndex = accordion.getSelectedIndex();
+
+ Sequence<Component> panels = accordion.getPanels();
+ for (int i = 0, n = panels.getLength(); i < n; i++) {
+ panels.get(i).setEnabled(i <= selectedIndex);
+ }
+ }
+
+ private void updateConfirmOrderButton() {
+ if (activityIndicator.isActive()) {
+ confirmOrderButton.setButtonData("Cancel");
+ } else {
+ confirmOrderButton.setButtonData("Confirm Order");
+ }
+ }
+
+ public static void main(String[] args) {
+ DesktopApplicationContext.main(Accordions.class, args);
+ }
+ }
+ ]]>
+ </source>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/activity-indicators.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/activity-indicators.xml?rev=887282&r1=887281&r2=887282&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/activity-indicators.xml (original)
+++ incubator/pivot/trunk/tutorials/www/activity-indicators.xml Fri Dec 4 17:29:54 2009
@@ -22,5 +22,156 @@
</properties>
<body>
+ <p>
+ Activity indicators are used to present an indeterminate progress state. They inform
+ the user that a background task is in progress, but that the length of the task is
+ not known. For example, an application might use an activity indicator to reflect
+ network activity, a file load operation, or a long-running CPU operation. They are
+ often animated to simulate the appearance of progress and to let the user know that
+ the UI is still responsive.
+ </p>
+
+ <p>
+ In Pivot, activity indicators are represented by instances of the
+ <tt>ActivityIndicator</tt> component, shown below:
+ </p>
+
+ <application class="org.apache.pivot.tutorials.progress.ActivityIndicators" width="320" height="240">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ </application>
+
+ <p>
+ The WTKX for the example is shown below:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/navigation/progress/activity_indicators.wtkx">
+ <![CDATA[
+ <Window title="Activity Indicators" maximized="true"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <content>
+ <TablePane>
+ <columns>
+ <TablePane.Column width="1*"/>
+ </columns>
+ <rows>
+ <TablePane.Row height="1*">
+ <Border styles="{padding:2}">
+ <content>
+ <BoxPane styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
+ <ActivityIndicator wtkx:id="activityIndicator1"
+ preferredWidth="24" preferredHeight="24"/>
+ <ActivityIndicator wtkx:id="activityIndicator2" styles="{color:'#aa0000'}"
+ preferredWidth="48" preferredHeight="48"/>
+ <ActivityIndicator wtkx:id="activityIndicator3" styles="{color:16}"
+ preferredWidth="96" preferredHeight="96"/>
+ </BoxPane>
+ </content>
+ </Border>
+ </TablePane.Row>
+ <TablePane.Row height="-1">
+ <BoxPane styles="{horizontalAlignment:'center', padding:6}">
+ <PushButton wtkx:id="activityButton" styles="{minimumAspectRatio:3}"/>
+ </BoxPane>
+ </TablePane.Row>
+ </rows>
+ </TablePane>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>
+ Clicking the "Start" button activates the three sample indicators; clicking the
+ button again de-activates them. The button press handler simply toggles the "active"
+ property of the indicators:
+ </p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/navigation/progress/activity_indicators.wtkx">
+ <![CDATA[
+ package org.apache.pivot.tutorials.progress;
+
+ import org.apache.pivot.collections.Map;
+ import org.apache.pivot.wtk.ActivityIndicator;
+ 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.PushButton;
+ import org.apache.pivot.wtk.Window;
+ import org.apache.pivot.wtkx.WTKXSerializer;
+
+ public class ActivityIndicators implements Application {
+ private Window window = null;
+ private ActivityIndicator activityIndicator1 = null;
+ private ActivityIndicator activityIndicator2 = null;
+ private ActivityIndicator activityIndicator3 = null;
+ private PushButton activityButton = null;
+
+ @Override
+ public void startup(Display display, Map<String, String> properties)
+ throws Exception {
+ WTKXSerializer wtkxSerializer = new WTKXSerializer();
+ window = (Window)wtkxSerializer.readObject(this, "activity_indicators.wtkx");
+ activityIndicator1 = (ActivityIndicator)wtkxSerializer.get("activityIndicator1");
+ activityIndicator2 = (ActivityIndicator)wtkxSerializer.get("activityIndicator2");
+ activityIndicator3 = (ActivityIndicator)wtkxSerializer.get("activityIndicator3");
+ activityButton = (PushButton)wtkxSerializer.get("activityButton");
+
+ activityButton.getButtonPressListeners().add(new ButtonPressListener() {
+ @Override
+ public void buttonPressed(Button button) {
+ activityIndicator1.setActive(!activityIndicator1.isActive());
+ activityIndicator2.setActive(!activityIndicator2.isActive());
+ activityIndicator3.setActive(!activityIndicator3.isActive());
+ updateButtonData();
+ }
+ });
+
+ updateButtonData();
+
+ 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 updateButtonData() {
+ activityButton.setButtonData(activityIndicator1.isActive() ? "Stop" : "Start");
+ }
+
+ public static void main(String[] args) {
+ DesktopApplicationContext.main(ActivityIndicators.class, args);
+ }
+ }
+ ]]>
+ </source>
+
+ <p>
+ Note that activity indicators are scalable. They are drawn using the Java 2D API
+ and can be presented at different sizes without losing resolution. Also note that
+ the default activity indicator skin supports "color" and "backgroundColor" styles
+ to allow further customization of their appearance.
+ </p>
</body>
</document>