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/15 17:49:32 UTC
svn commit: r890881 - in /incubator/pivot/trunk/tutorials:
src/org/apache/pivot/tutorials/boundedrange/
src/org/apache/pivot/tutorials/colorchoosers/ www/
Author: tvolkert
Date: Tue Dec 15 16:49:31 2009
New Revision: 890881
URL: http://svn.apache.org/viewvc?rev=890881&view=rev
Log:
PIVOT-235 :: Added color chooser tutorial
Added:
incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/colorchoosers/
incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/colorchoosers/color_choosers.js (with props)
incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/colorchoosers/color_choosers.wtkx (with props)
Modified:
incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.js
incubator/pivot/trunk/tutorials/www/color-choosers.xml
incubator/pivot/trunk/tutorials/www/scroll-bars.xml
Modified: 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=890881&r1=890880&r2=890881&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.js (original)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/boundedrange/scroll_bars.js Tue Dec 15 16:49:31 2009
@@ -1,7 +1,31 @@
+/*
+ * 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.
+ */
+
+/**
+ * Called when the main app window is opened.
+ */
function init() {
ranges.selection = weekButton;
}
+/**
+ * Updates the scroll bar's extent and block increment based on the selected
+ * range (in the ranges button group).
+ */
function updateRange() {
var amount;
@@ -19,6 +43,9 @@
scrollBar.blockIncrement = 2 * amount;
}
+/**
+ * Updates the "timeline" label based on the scroll bar's value and extent.
+ */
function updateLabel() {
var first = scrollBar.value + 1;
var last = scrollBar.value + scrollBar.extent;
Added: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/colorchoosers/color_choosers.js
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/colorchoosers/color_choosers.js?rev=890881&view=auto
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/colorchoosers/color_choosers.js (added)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/colorchoosers/color_choosers.js Tue Dec 15 16:49:31 2009
@@ -0,0 +1,78 @@
+/*
+ * 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.
+ */
+
+/**
+ * Called when the main app window is opened.
+ */
+function init() {
+ colorChooser.selectedColor = "#59a2b0";
+}
+
+/**
+ * Converts a hex string into a Color instance.
+ */
+function hexToColor(hex) {
+ if (!hex.startsWith("#")) {
+ hex = "#" + hex;
+ }
+
+ return java.awt.Color.decode(hex);
+}
+
+/**
+ * Converts a Color instance into a hex string.
+ */
+function colorToHex(color) {
+ var result = "";
+
+ var primaries = ["red", "green", "blue"];
+ for (var i = 0, n = primaries.length; i < n; i++) {
+ var value = color[primaries[i]].toString(16);
+ if (value.length == 1) {
+ // Pad the value with a leading zero
+ value = "0" + value;
+ }
+ result += value;
+ }
+
+ return result;
+}
+
+/**
+ * Called when the selected color changes.
+ */
+function onColorChange() {
+ var color = colorChooser.selectedColor;
+ sampleBorder.styles.put("backgroundColor", color);
+ hexInput.text = colorToHex(color);
+}
+
+/**
+ * Called when the hex input changes its focus state.
+ */
+function onInputFocusChange() {
+ if (!hexInput.focused) {
+ try {
+ colorChooser.selectedColor = hexToColor(hexInput.text);
+ } catch (ex) {
+ var color = colorChooser.selectedColor;
+ if (color) {
+ hexInput.text = colorToHex(color);
+ }
+ }
+ }
+}
Propchange: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/colorchoosers/color_choosers.js
------------------------------------------------------------------------------
svn:eol-style = native
Added: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/colorchoosers/color_choosers.wtkx
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/colorchoosers/color_choosers.wtkx?rev=890881&view=auto
==============================================================================
--- incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/colorchoosers/color_choosers.wtkx (added)
+++ incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/colorchoosers/color_choosers.wtkx Tue Dec 15 16:49:31 2009
@@ -0,0 +1,74 @@
+<?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="Color Choosers" maximized="true"
+ WindowStateListener.windowOpened="init()"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <wtkx:script src="color_choosers.js"/>
+
+ <content>
+ <Border>
+ <content>
+ <BoxPane styles="{padding:4, spacing:12}">
+ <Border styles="{color:10}">
+ <content>
+ <ColorChooser wtkx:id="colorChooser"
+ ColorChooserSelectionListener.selectedColorChanged="onColorChange()">
+ </ColorChooser>
+ </content>
+ </Border>
+ <Form>
+ <sections>
+ <Form.Section>
+ <Border Form.label="Selected Color" styles="{padding:1}">
+ <content>
+ <Border wtkx:id="sampleBorder" preferredWidth="100"
+ preferredHeight="14" styles="{thickness:0}">
+ <content>
+ <Label/>
+ </content>
+ </Border>
+ </content>
+ </Border>
+ <TextInput wtkx:id="hexInput" Form.label="HTML Notation"
+ ComponentStateListener.focusedChanged="onInputFocusChange()">
+ <componentKeyListeners>
+ <wtkx:script>
+ <![CDATA[
+ importClass(org.apache.pivot.wtk.Component);
+ importClass(org.apache.pivot.wtk.Keyboard);
+
+ function keyPressed(component, keyCode, keyLocation) {
+ if (keyCode == Keyboard.KeyCode.TAB ||
+ keyCode == Keyboard.KeyCode.ENTER) {
+ Component.clearFocus();
+ }
+ }
+ ]]>
+ </wtkx:script>
+ </componentKeyListeners>
+ </TextInput>
+ </Form.Section>
+ </sections>
+ </Form>
+ </BoxPane>
+ </content>
+ </Border>
+ </content>
+</Window>
Propchange: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/colorchoosers/color_choosers.wtkx
------------------------------------------------------------------------------
svn:eol-style = native
Propchange: incubator/pivot/trunk/tutorials/src/org/apache/pivot/tutorials/colorchoosers/color_choosers.wtkx
------------------------------------------------------------------------------
svn:mime-type = text/xml
Modified: incubator/pivot/trunk/tutorials/www/color-choosers.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/color-choosers.xml?rev=890881&r1=890880&r2=890881&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/color-choosers.xml (original)
+++ incubator/pivot/trunk/tutorials/www/color-choosers.xml Tue Dec 15 16:49:31 2009
@@ -19,11 +19,165 @@
<document id="color-choosers">
<properties>
<title>Color Choosers</title>
+ <explore>ColorChooser</explore>
</properties>
<body>
<p>
- This section is not yet complete.
+ Color choosers, as the name implies, are used to allow the user to select a color. They
+ present the user with a color spectrum from which the user can select a standard RGB
+ color.
+ </p>
+
+ <p>
+ The following example shows a color chooser and will show the user the HTML
+ representation of the color they have chosen.
+ </p>
+
+ <application class="org.apache.pivot.wtk.ScriptApplication" width="420" height="197">
+ <libraries>
+ <library>core</library>
+ <library>wtk</library>
+ <library>wtk-terra</library>
+ <library>tutorials</library>
+ </libraries>
+ <startup-properties>
+ <src>org/apache/pivot/tutorials/colorchoosers/color_choosers.wtkx</src>
+ </startup-properties>
+ </application>
+
+ <p>The WTKX for this example is shown below:</p>
+
+ <source type="xml" location="org/apache/pivot/tutorials/colorchoosers/color_choosers.wtkx">
+ <![CDATA[
+ <Window title="Color Choosers" maximized="true"
+ WindowStateListener.windowOpened="init()"
+ xmlns:wtkx="http://pivot.apache.org/wtkx"
+ xmlns="org.apache.pivot.wtk">
+ <wtkx:script src="color_choosers.js"/>
+
+ <content>
+ <Border>
+ <content>
+ <BoxPane styles="{padding:4, spacing:12}">
+ <Border styles="{color:10}">
+ <content>
+ <ColorChooser wtkx:id="colorChooser"
+ ColorChooserSelectionListener.selectedColorChanged="onColorChange()">
+ </ColorChooser>
+ </content>
+ </Border>
+ <Form>
+ <sections>
+ <Form.Section>
+ <Border Form.label="Selected Color" styles="{padding:1}">
+ <content>
+ <Border wtkx:id="sampleBorder" preferredWidth="100"
+ preferredHeight="14" styles="{thickness:0}">
+ <content>
+ <Label/>
+ </content>
+ </Border>
+ </content>
+ </Border>
+ <TextInput wtkx:id="hexInput" Form.label="HTML Notation"
+ ComponentStateListener.focusedChanged="onInputFocusChange()">
+ <componentKeyListeners>
+ <wtkx:script>
+ importClass(org.apache.pivot.wtk.Component);
+ importClass(org.apache.pivot.wtk.Keyboard);
+
+ function keyPressed(component, keyCode, keyLocation) {
+ if (keyCode == Keyboard.KeyCode.TAB ||
+ keyCode == Keyboard.KeyCode.ENTER) {
+ Component.clearFocus();
+ }
+ }
+ </wtkx:script>
+ </componentKeyListeners>
+ </TextInput>
+ </Form.Section>
+ </sections>
+ </Form>
+ </BoxPane>
+ </content>
+ </Border>
+ </content>
+ </Window>
+ ]]>
+ </source>
+
+ <p>The JavaScript for this example, which lives in an external script file, is below:</p>
+
+ <source type="js" location="org/apache/pivot/tutorials/colorchoosers/color_choosers.js">
+ <![CDATA[
+ /**
+ * Called when the main app window is opened.
+ */
+ function init() {
+ colorChooser.selectedColor = "#59a2b0";
+ }
+
+ /**
+ * Converts a hex string into a Color instance.
+ */
+ function hexToColor(hex) {
+ if (!hex.startsWith("#")) {
+ hex = "#" + hex;
+ }
+
+ return java.awt.Color.decode(hex);
+ }
+
+ /**
+ * Converts a Color instance into a hex string.
+ */
+ function colorToHex(color) {
+ var result = "";
+
+ var primaries = ["red", "green", "blue"];
+ for (var i = 0, n = primaries.length; i < n; i++) {
+ var value = color[primaries[i]].toString(16);
+ if (value.length == 1) {
+ // Pad the value with a leading zero
+ value = "0" + value;
+ }
+ result += value;
+ }
+
+ return result;
+ }
+
+ /**
+ * Called when the selected color changes.
+ */
+ function onColorChange() {
+ var color = colorChooser.selectedColor;
+ sampleBorder.styles.put("backgroundColor", color);
+ hexInput.text = colorToHex(color);
+ }
+
+ /**
+ * Called when the hex input changes its focus state.
+ */
+ function onInputFocusChange() {
+ if (!hexInput.focused) {
+ try {
+ colorChooser.selectedColor = hexToColor(hexInput.text);
+ } catch (ex) {
+ var color = colorChooser.selectedColor;
+ if (color) {
+ hexInput.text = colorToHex(color);
+ }
+ }
+ }
+ }
+ ]]>
+ </source>
+
+ <p>
+ Since this example is written entirely in WTKX and script, there is no associated Java
+ source.
</p>
</body>
</document>
Modified: incubator/pivot/trunk/tutorials/www/scroll-bars.xml
URL: http://svn.apache.org/viewvc/incubator/pivot/trunk/tutorials/www/scroll-bars.xml?rev=890881&r1=890880&r2=890881&view=diff
==============================================================================
--- incubator/pivot/trunk/tutorials/www/scroll-bars.xml (original)
+++ incubator/pivot/trunk/tutorials/www/scroll-bars.xml Tue Dec 15 16:49:31 2009
@@ -140,10 +140,17 @@
<source type="js" location="org/apache/pivot/tutorials/boundedrange/scroll_bars.js">
<![CDATA[
+ /**
+ * Called when the main app window is opened.
+ */
function init() {
ranges.selection = weekButton;
}
+ /**
+ * Updates the scroll bar's extent and block increment based on the selected
+ * range (in the ranges button group).
+ */
function updateRange() {
var amount;
@@ -161,6 +168,9 @@
scrollBar.blockIncrement = 2 * amount;
}
+ /**
+ * Updates the "timeline" label based on the scroll bar's value and extent.
+ */
function updateLabel() {
var first = scrollBar.value + 1;
var last = scrollBar.value + scrollBar.extent;