You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pivot.apache.org by tv...@apache.org on 2009/12/14 19:53:30 UTC

svn commit: r890438 - in /incubator/pivot/trunk: tutorials/src/org/apache/pivot/tutorials/boundedrange/ tutorials/www/ wtk/src/org/apache/pivot/wtk/

Author: tvolkert
Date: Mon Dec 14 18:53:13 2009
New Revision: 890438

URL: http://svn.apache.org/viewvc?rev=890438&view=rev
Log:
Added scroll bar tutorial and minor supporting functionality to scroll bar

Added:
    incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.js   (with props)
    incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.wtkx   (with props)
Modified:
    incubator/pivot/trunk/tutorials/www/calendars.xml
    incubator/pivot/trunk/tutorials/www/index.xml
    incubator/pivot/trunk/tutorials/www/scroll-bars.xml
    incubator/pivot/trunk/wtk/src/org/apache/pivot/wtk/ScrollBar.java

Added: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.js
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.js?rev=890438&view=auto
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.js (added)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.js Mon Dec 14 18:53:13 2009
@@ -0,0 +1,26 @@
+function init() {
+    ranges.selection = weekButton;
+}
+
+function updateRange() {
+    var amount;
+
+    if (ranges.selection == dayButton) {
+        amount = 1;
+    } else if (ranges.selection == weekButton) {
+        amount = 7;
+    } else if (ranges.selection == fortnightButton) {
+        amount = 14;
+    } else {
+        amount = 30;
+    }
+
+    scrollBar.extent = scrollBar.unitIncrement = amount;
+    scrollBar.blockIncrement = 2 * amount;
+}
+
+function updateLabel() {
+    var first = scrollBar.value + 1;
+    var last = scrollBar.value + scrollBar.extent;
+    label.setText("Days " + first + " through " + last);
+}

Propchange: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.js
------------------------------------------------------------------------------
    svn:eol-style = native

Added: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.wtkx
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.wtkx?rev=890438&view=auto
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.wtkx (added)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.wtkx Mon Dec 14 18:53:13 2009
@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to you under the Apache License,
+Version 2.0 (the "License"); you may not use this file except in
+compliance with the License.  You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<Window title="Scroll Bars" maximized="true"
+    WindowStateListener.windowOpened="init();"
+    xmlns:wtkx="http://pivot.apache.org/wtkx"
+    xmlns="org.apache.pivot.wtk">
+    <wtkx:script src="scroll_bars.js"/>
+
+    <content>
+        <Border>
+            <content>
+                <TablePane>
+                    <columns>
+                        <TablePane.Column width="1*"/>
+                    </columns>
+                    <rows>
+                        <TablePane.Row>
+                            <FlowPane styles="{padding:6}">
+                                <wtkx:define>
+                                    <ButtonGroup wtkx:id="ranges"
+                                        ButtonGroupListener.selectionChanged="updateRange();"/>
+                                </wtkx:define>
+                                <RadioButton wtkx:id="dayButton"
+                                    buttonGroup="$ranges" buttonData="Day"/>
+                                <RadioButton wtkx:id="weekButton"
+                                    buttonGroup="$ranges" buttonData="Week"/>
+                                <RadioButton wtkx:id="fortnightButton"
+                                    buttonGroup="$ranges" buttonData="Fortnight"/>
+                                <RadioButton wtkx:id="monthButton"
+                                    buttonGroup="$ranges" buttonData="Month"/>
+                            </FlowPane>
+                        </TablePane.Row>
+                        <TablePane.Row height="1*">
+                            <BoxPane orientation="vertical" styles="{horizontalAlignment:'center',
+                                verticalAlignment:'center'}">
+                                <Label wtkx:id="label"/>
+                            </BoxPane>
+                        </TablePane.Row>
+                        <TablePane.Row>
+                            <ScrollBar wtkx:id="scrollBar" start="0" end="60"
+                                ScrollBarListener.scopeChanged="updateLabel();"
+                                ScrollBarValueListener.valueChanged="updateLabel();"/>
+                        </TablePane.Row>
+                    </rows>
+                </TablePane>
+            </content>
+        </Border>
+    </content>
+</Window>

Propchange: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.wtkx
------------------------------------------------------------------------------
    svn:eol-style = native

Propchange: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.wtkx
------------------------------------------------------------------------------
    svn:mime-type = text/xml

Modified: incubator/pivot/trunk/tutorials/www/calendars.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/calendars.xml?rev=890438&r1=890437&r2=890438&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/calendars.xml (original)
+++ incubator/pivot/trunk/tutorials/www/calendars.xml Mon Dec 14 18:53:13 2009
@@ -25,8 +25,8 @@
         <p>
             Pivot supports two types of calendar components: a standalone <tt>Calendar</tt>
             component that can be used anywhere within an application's user interface, and a
-            <tt>CalendarButton</tt> component that, like a <a href="lists.html">list button</a>,
-            displays a popup calendar when pressed.
+            <tt>CalendarButton</tt> component that, like a <a href="list-buttons.html">list
+            button</a>, displays a popup calendar when pressed.
         </p>
 
         <p>

Modified: incubator/pivot/trunk/tutorials/www/index.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/index.xml?rev=890438&r1=890437&r2=890438&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/index.xml (original)
+++ incubator/pivot/trunk/tutorials/www/index.xml Mon Dec 14 18:53:13 2009
@@ -96,8 +96,8 @@
                 <document-item id="activity-indicators"/>
             </document-item>
             <document-item id="bounded-range-components">
-                <document-item id="scroll-bars"/>
                 <document-item id="sliders"/>
+                <document-item id="scroll-bars"/>
                 <document-item id="spinners"/>
             </document-item>
             <document-item id="calendars"/>

Modified: incubator/pivot/trunk/tutorials/www/scroll-bars.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/scroll-bars.xml?rev=890438&r1=890437&r2=890438&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/scroll-bars.xml (original)
+++ incubator/pivot/trunk/tutorials/www/scroll-bars.xml Mon Dec 14 18:53:13 2009
@@ -19,11 +19,154 @@
 <document id="scroll-bars">
     <properties>
         <title>Scroll Bars</title>
+        <explore>ScrollBar</explore>
     </properties>
 
     <body>
         <p>
-            This section is not yet complete.
+            Like sliders, scroll bars allow the user to interactively select from a range of values.
+            Unlike sliders, scroll bars are used to select a sub-range rather than an individual
+            value. The size of this sub-range is known as the scroll bar's "extent". The extent,
+            together with the start and end values of the outer range, comprise the scroll bar's
+            "scope", represented by the <tt>ScrollBar.Scope</tt> enum.
         </p>
+
+        <p>
+            Visually, a scroll bar is usually presented as a scroll "handle" within a larger
+            "track", with two buttons on either end of the track to move the handle. In this
+            metaphor, the track represents the outer range from which the user can select, and the
+            size of the handle represents the scroll bar's extent.
+        </p>
+
+        <p>
+            A scroll bar's value represents the start of the selected sub-range; its value plus its
+            extent represents the end of the sub-range. Using the visual metaphor above, the start
+            of the handle and the end of the handle represent the bounds of the selected sub-range.
+            Note that this means that the scroll bar's value plus its extend must never exceed its
+            scope; doing so would mean that the scroll bar's handle would have moved outside of the
+            track.
+        </p>
+
+        <p>
+            Finally, a scroll bar has a unit increment and a block increment. These values specify
+            how much to adjust the scroll bar's value when a user clicks on the buttons or within
+            the track, respectively.
+        </p>
+
+        <p>
+            Scroll bars are used within <a href="scroll-panes.html">scroll panes</a> and are most
+            often transparent to the application developer. However, they can be used directly just
+            like any other components.
+        </p>
+
+        <p>
+            The following application uses a scroll bar to represent a simple timeline. It is
+            written entirely in WTKX and script, so there's no associated Java source code.
+        </p>
+
+        <application class="org.apache.pivot.wtk.ScriptApplication"
+            width="550" height="200">
+            <libraries>
+                <library>core</library>
+                <library>wtk</library>
+                <library>wtk-terra</library>
+                <library>tutorials</library>
+            </libraries>
+            <startup-properties>
+                <src>org/apache/pivot/tutorials/boundedrange/scroll_bars.wtkx</src>
+            </startup-properties>
+        </application>
+
+        <p>
+            The WTKX source for this example is shown below:
+        </p>
+
+        <source type="xml" location="org/apache/pivot/tutorials/boundedrange/scroll_bars.wtkx">
+            <![CDATA[
+            <Window title="Scroll Bars" maximized="true"
+                WindowStateListener.windowOpened="init();"
+                xmlns:wtkx="http://pivot.apache.org/wtkx"
+                xmlns="org.apache.pivot.wtk">
+                <wtkx:script src="scroll_bars.js"/>
+
+                <content>
+                    <Border>
+                        <content>
+                            <TablePane>
+                                <columns>
+                                    <TablePane.Column width="1*"/>
+                                </columns>
+                                <rows>
+                                    <TablePane.Row>
+                                        <FlowPane styles="{padding:6}">
+                                            <wtkx:define>
+                                                <ButtonGroup wtkx:id="ranges"
+                                                    ButtonGroupListener.selectionChanged="updateRange();"/>
+                                            </wtkx:define>
+                                            <RadioButton wtkx:id="dayButton"
+                                                buttonGroup="$ranges" buttonData="Day"/>
+                                            <RadioButton wtkx:id="weekButton"
+                                                buttonGroup="$ranges" buttonData="Week"/>
+                                            <RadioButton wtkx:id="fortnightButton"
+                                                buttonGroup="$ranges" buttonData="Fortnight"/>
+                                            <RadioButton wtkx:id="monthButton"
+                                                buttonGroup="$ranges" buttonData="Month"/>
+                                        </FlowPane>
+                                    </TablePane.Row>
+                                    <TablePane.Row height="1*">
+                                        <BoxPane orientation="vertical" styles="{horizontalAlignment:'center',
+                                            verticalAlignment:'center'}">
+                                            <Label wtkx:id="label"/>
+                                        </BoxPane>
+                                    </TablePane.Row>
+                                    <TablePane.Row>
+                                        <ScrollBar wtkx:id="scrollBar" start="0" end="60"
+                                            ScrollBarListener.scopeChanged="updateLabel();"
+                                            ScrollBarValueListener.valueChanged="updateLabel();"/>
+                                    </TablePane.Row>
+                                </rows>
+                            </TablePane>
+                        </content>
+                    </Border>
+                </content>
+            </Window>
+            ]]>
+        </source>
+
+        <p>
+            This example places the script code in an external JavaScript file,
+            <tt>scroll_bars.js</tt> for readability. The source of the JavaScript is as follows:
+        </p>
+
+        <source type="js" location="org/apache/pivot/tutorials/boundedrange/scroll_bars.js">
+            <![CDATA[
+            function init() {
+                ranges.selection = weekButton;
+            }
+
+            function updateRange() {
+                var amount;
+
+                if (ranges.selection == dayButton) {
+                    amount = 1;
+                } else if (ranges.selection == weekButton) {
+                    amount = 7;
+                } else if (ranges.selection == fortnightButton) {
+                    amount = 14;
+                } else {
+                    amount = 30;
+                }
+
+                scrollBar.extent = scrollBar.unitIncrement = amount;
+                scrollBar.blockIncrement = 2 * amount;
+            }
+
+            function updateLabel() {
+                var first = scrollBar.value + 1;
+                var last = scrollBar.value + scrollBar.extent;
+                label.setText("Days " + first + " through " + last);
+            }
+            ]]>
+        </source>
     </body>
 </document>

Modified: incubator/pivot/trunk/wtk/src/org/apache/pivot/wtk/ScrollBar.java
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/wtk/src/org/apache/pivot/wtk/ScrollBar.java?rev=890438&r1=890437&r2=890438&view=diff
==============================================================================
--- incubator/pivot/trunk/wtk/src/org/apache/pivot/wtk/ScrollBar.java (original)
+++ incubator/pivot/trunk/wtk/src/org/apache/pivot/wtk/ScrollBar.java Mon Dec 14 18:53:13 2009
@@ -17,6 +17,8 @@
 package org.apache.pivot.wtk;
 
 import org.apache.pivot.collections.Dictionary;
+import org.apache.pivot.serialization.JSONSerializer;
+import org.apache.pivot.serialization.SerializationException;
 import org.apache.pivot.util.ListenerList;
 
 /**
@@ -32,11 +34,57 @@
         public final int end;
         public final int extent;
 
+        public static final String START_KEY = "start";
+        public static final String END_KEY = "end";
+        public static final String EXTENT_KEY = "extent";
+
         public Scope(int start, int end, int extent) {
             this.start = start;
             this.end = end;
             this.extent = extent;
         }
+
+        public Scope(Dictionary<String, ?> scope) {
+            if (scope == null) {
+                throw new IllegalArgumentException("scope is null.");
+            }
+
+            if (!scope.containsKey(START_KEY)) {
+                throw new IllegalArgumentException(START_KEY + " is required.");
+            }
+
+            if (!scope.containsKey(END_KEY)) {
+                throw new IllegalArgumentException(END_KEY + " is required.");
+            }
+
+            if (!scope.containsKey(EXTENT_KEY)) {
+                throw new IllegalArgumentException(EXTENT_KEY + " is required.");
+            }
+
+            start = (Integer)scope.get(START_KEY);
+            end = (Integer)scope.get(END_KEY);
+            extent = (Integer)scope.get(EXTENT_KEY);
+        }
+
+        @Override
+        public String toString() {
+            return ("{start: " + start + ", end: " + end + ", extent: " + extent + "}");
+        }
+
+        public static Scope decode(String value) {
+            if (value == null) {
+                throw new IllegalArgumentException();
+            }
+
+            Scope scope;
+            try {
+                scope = new Scope(JSONSerializer.parseMap(value));
+            } catch (SerializationException exception) {
+                throw new IllegalArgumentException(exception);
+            }
+
+            return scope;
+        }
     }
 
     private static class ScrollBarListenerList extends ListenerList<ScrollBarListener>
@@ -87,7 +135,7 @@
     private Orientation orientation;
     private int start = 0;
     private int end = 100;
-    private int extent = 100;
+    private int extent = 1;
     private int value = 0;
     private int unitIncrement = 1;
     private int blockIncrement = 1;
@@ -227,6 +275,22 @@
         setScope(scope.start, scope.end, scope.extent);
     }
 
+    public final void setScope(Dictionary<String, ?> scope) {
+        if (scope == null) {
+            throw new IllegalArgumentException("scope is null.");
+        }
+
+        setScope(new Scope(scope));
+    }
+
+    public final void setScope(String scope) {
+        if (scope == null) {
+            throw new IllegalArgumentException("scope is null.");
+        }
+
+        setScope(Scope.decode(scope));
+    }
+
     public int getValue() {
         return value;
     }