You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by jm...@apache.org on 2014/08/09 05:58:44 UTC
[1/5] move some sample spark examples into the component explorer
Repository: flex-utilities
Updated Branches:
refs/heads/develop 9835c32ea -> 84e898f48
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/NumberInterpolatorWrapping.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/NumberInterpolatorWrapping.as b/TourDeFlex/TourDeFlex3/src/spark/layouts/NumberInterpolatorWrapping.as
new file mode 100644
index 0000000..8613d7b
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/NumberInterpolatorWrapping.as
@@ -0,0 +1,110 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+import spark.effects.interpolation.IInterpolator;
+
+public class NumberInterpolatorWrapping implements IInterpolator
+{
+ private var _rangeBegin:Number;
+ private var _rangeEnd:Number;
+ public function NumberInterpolatorWrapping(rangeBegin:Number, rangeEnd:Number)
+ {
+ _rangeBegin = rangeBegin;
+ _rangeEnd = rangeEnd;
+ }
+
+ /**
+ * Returns the type that an implementor can handle
+ */
+ public function get interpolatedType():Class
+ {
+ return Number;
+ }
+
+ /**
+ * Given an elapsed fraction of an animation between 0 and 1,
+ * and start and end values, this function returns some value
+ * based on whatever interpolation the implementor chooses to
+ * provide.
+ */
+ public function interpolate(fraction:Number, startValue:Object, endValue:Object):Object
+ {
+ if (fraction == 0)
+ return startValue;
+ else if (fraction == 1)
+ return endValue;
+ var start:Number = Number(startValue);
+ var end:Number = Number(endValue);
+
+ if (Math.abs(end - start) < Math.abs(_rangeEnd - _rangeBegin) - Math.abs(end - start))
+ {
+ return start + fraction * (end - start);
+ }
+ else
+ {
+ var result:Number;
+ if (start < end)
+ {
+ result = start - fraction * (_rangeEnd - _rangeBegin - Math.abs(start - end));
+ if (result < _rangeBegin)
+ result += _rangeEnd - _rangeBegin;
+ return result;
+ }
+ else
+ {
+ result = start + fraction * (_rangeEnd - _rangeBegin - Math.abs(start - end));
+ if (result > _rangeEnd)
+ result -= _rangeEnd - _rangeBegin;
+ return result;
+ }
+ }
+ }
+
+ public function increment(baseValue:Object, incrementValue:Object):Object
+ {
+ var result:Number = Number(baseValue) + Number(incrementValue);
+ // This won't handle situations where we're adding more than
+ // the range itself, but since this will only be called when
+ // the user submits a 'byValue' that large, it seems unlikely
+ // at the very least
+ if (result > _rangeEnd)
+ result = _rangeBegin + (result - _rangeEnd);
+ return result;
+ }
+
+ public function decrement(baseValue:Object, decrementValue:Object):Object
+ {
+ var result:Number = Number(baseValue) - Number(decrementValue);
+ // This won't handle situations where we're subtracting more than
+ // the range itself, but since this will only be called when
+ // the user submits a 'byValue' that large, it seems unlikely
+ // at the very least
+ if (result < _rangeBegin)
+ result = _rangeEnd + (_rangeBegin - result);
+ return result;
+ }
+
+ public function getLength(startValue:Number, endValue:Number):Number
+ {
+ return Math.min( Math.abs(startValue - endValue), Math.abs(_rangeEnd - _rangeBegin - Math.abs(startValue - endValue)));
+ }
+
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/WheelLayout.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/WheelLayout.as b/TourDeFlex/TourDeFlex3/src/spark/layouts/WheelLayout.as
new file mode 100644
index 0000000..1ce4bb6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/WheelLayout.as
@@ -0,0 +1,516 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+
+import flash.geom.Matrix;
+import flash.geom.Matrix3D;
+import flash.geom.Point;
+import flash.geom.Rectangle;
+import flash.geom.Vector3D;
+
+import mx.core.ILayoutElement;
+import mx.core.IVisualElement;
+
+import spark.components.supportClasses.GroupBase;
+import spark.core.NavigationUnit;
+import spark.layouts.supportClasses.LayoutBase;
+
+public class WheelLayout extends LayoutBase
+{
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ public function WheelLayout()
+ {
+ super();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Properties
+ //
+ //--------------------------------------------------------------------------
+
+ //----------------------------------
+ // gap
+ //----------------------------------
+
+ private var _gap:Number = 0;
+
+ /**
+ * The gap between the items
+ */
+ public function get gap():Number
+ {
+ return _gap;
+ }
+
+ public function set gap(value:Number):void
+ {
+ _gap = value;
+ var layoutTarget:GroupBase = target;
+ if (layoutTarget)
+ {
+ layoutTarget.invalidateSize();
+ layoutTarget.invalidateDisplayList();
+ }
+ }
+
+ //----------------------------------
+ // axisAngle
+ //----------------------------------
+
+ /**
+ * @private
+ * The total width of all items, including gap space.
+ */
+ private var _totalWidth:Number;
+
+ /**
+ * @private
+ * Cache which item is currently in view, to facilitate scrollposition delta calculations
+ */
+ private var _centeredItemIndex:int = 0;
+ private var _centeredItemCircumferenceBegin:Number = 0;
+ private var _centeredItemCircumferenceEnd:Number = 0;
+ private var _centeredItemDegrees:Number = 0;
+
+ /**
+ * The axis to tilt the 3D wheel
+ */
+ private var _axis:Vector3D = new Vector3D(0, 1, 0.1);
+
+ /**
+ * The angle to tilt the axis of the wheel
+ */
+ public function set axisAngle(value:Number):void
+ {
+ _axis = new Vector3D(0, Math.cos(Math.PI * value /180), Math.sin(Math.PI * value /180));
+ var layoutTarget:GroupBase = target;
+ if (layoutTarget)
+ {
+ layoutTarget.invalidateSize();
+ layoutTarget.invalidateDisplayList();
+ }
+ }
+
+ /**
+ * @private
+ * Given the radius of the sphere, return the radius of the
+ * projected sphere. Uses the projection matrix of the
+ * layout target to calculate.
+ */
+ private function projectSphere(radius:Number, radius1:Number):Number
+ {
+ var fl:Number = target.transform.perspectiveProjection.focalLength;
+ var alpha:Number = Math.asin( radius1 / (radius + fl) );
+ return fl * Math.tan(alpha) * 2;
+ }
+
+ /**
+ * @private
+ * Given the totalWidth, maxHeight and maxHalfWidthDiagonal, calculate the bounds of the items
+ * on screen. Uses the projection matrix of the layout target to calculate.
+ */
+ private function projectBounds(totalWidth:Number, maxWidth:Number, maxHeight:Number, maxHalfWidthDiagonal:Number):Point
+ {
+ // Use the the total width as a circumference of an imaginary circle which we will use to
+ // align the items in 3D:
+ var radius:Number = _totalWidth * 0.5 / Math.PI;
+
+ // Now since we are going to arrange all the items along circle, middle of the item being the tangent point,
+ // we need to calculate the minimum bounding circle. It is easily calculated from the maximum width item:
+ var boundingRadius:Number = Math.sqrt(radius * radius + 0.25 * maxWidth * maxWidth);
+
+ var projectedBoundsW:Number = _axis.z * _axis.z * (maxHalfWidthDiagonal + 2 * radius) +
+ projectSphere(radius, boundingRadius ) * _axis.y * _axis.y;
+
+ var projectedBoundsH:Number = Math.abs(_axis.z) * (maxHalfWidthDiagonal + 2 * radius) +
+ maxHeight * _axis.y * _axis.y;
+
+ return new Point(projectedBoundsW + 10, projectedBoundsH + 10);
+ }
+
+ /**
+ * @private
+ * Iterates through all the items, calculates the projected bounds on screen, updates _totalWidth member variable.
+ */
+ private function calculateBounds():Point
+ {
+ // Calculate total width:
+ _totalWidth = 0;
+
+ var maxHeight:Number = 0;
+ var maxWidth:Number = 0;
+ var maxD:Number = 0;
+
+ // Add up all the widths
+ var iter:LayoutIterator = new LayoutIterator(target);
+ var el:ILayoutElement;
+ while (el = iter.nextElement())
+ {
+ var preferredWidth:Number = el.getPreferredBoundsWidth(false /*postTransform*/);
+ var preferredHeight:Number = el.getPreferredBoundsHeight(false /*postTransform*/);
+
+ // Add up item width
+ _totalWidth += preferredWidth;
+
+ // Max up item size
+ maxWidth = Math.max(maxWidth, preferredWidth);
+ maxHeight = Math.max(maxHeight, preferredHeight);
+
+ maxD = Math.max(maxD, Math.sqrt(preferredWidth * preferredWidth / 4 +
+ preferredHeight * preferredHeight));
+ }
+
+ // Add up the gap
+ _totalWidth += gap * iter.numVisited;
+
+ // Project
+ return projectBounds(_totalWidth, maxWidth, maxHeight, maxD);
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods: LayoutBase
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override public function set target(value:GroupBase):void
+ {
+ // Make sure that if layout is swapped out, we clean up
+ if (!value && target)
+ {
+ target.maintainProjectionCenter = false;
+
+ var iter:LayoutIterator = new LayoutIterator(target);
+ var el:ILayoutElement;
+ while (el = iter.nextElement())
+ {
+ el.setLayoutMatrix(new Matrix(), false /*triggerLayout*/);
+ }
+ }
+
+ super.target = value;
+
+ // Make sure we turn on projection the first time the layout
+ // gets assigned to the group
+ if (target)
+ target.maintainProjectionCenter = true;
+ }
+
+ override public function measure():void
+ {
+ var bounds:Point = calculateBounds();
+
+ target.measuredWidth = bounds.x;
+ target.measuredHeight = bounds.y;
+ }
+
+ override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ // Get the bounds, this will also update _totalWidth
+ var bounds:Point = calculateBounds();
+
+ // Update the content size
+ target.setContentSize(_totalWidth + unscaledWidth, bounds.y);
+ var radius:Number = _totalWidth * 0.5 / Math.PI;
+ var gap:Number = this.gap;
+ _centeredItemDegrees = Number.MAX_VALUE;
+
+ var scrollPosition:Number = target.horizontalScrollPosition;
+ var totalWidthSoFar:Number = 0;
+ // Subtract the half width of the first element from totalWidthSoFar:
+ var iter:LayoutIterator = new LayoutIterator(target);
+ var el:ILayoutElement = iter.nextElement();
+ if (!el)
+ return;
+ totalWidthSoFar -= el.getPreferredBoundsWidth(false /*postTransform*/) / 2;
+
+ // Set the 3D Matrix for all the elements:
+ iter.reset();
+ while (el = iter.nextElement())
+ {
+ // Size the item, no need to position it, since we'd set the computed matrix
+ // which defines the position.
+ el.setLayoutBoundsSize(NaN, NaN, false /*postTransform*/);
+ var elementWidth:Number = el.getLayoutBoundsWidth(false /*postTransform*/);
+ var elementHeight:Number = el.getLayoutBoundsHeight(false /*postTransform*/);
+ var degrees:Number = 360 * (totalWidthSoFar + elementWidth/2 - scrollPosition) / _totalWidth;
+
+ // Remember which item is centered, this is used during scrolling
+ var curDegrees:Number = degrees % 360;
+ if (Math.abs(curDegrees) < Math.abs(_centeredItemDegrees))
+ {
+ _centeredItemDegrees = curDegrees;
+ _centeredItemIndex = iter.curIndex;
+ _centeredItemCircumferenceBegin = totalWidthSoFar - gap;
+ _centeredItemCircumferenceEnd = totalWidthSoFar + elementWidth + gap;
+ }
+
+ // Calculate and set the 3D Matrix
+ var m:Matrix3D = new Matrix3D();
+ m.appendTranslation(-elementWidth/2, -elementHeight/2 + radius * _axis.z, -radius * _axis.y );
+ m.appendRotation(-degrees, _axis);
+ m.appendTranslation(unscaledWidth/2, unscaledHeight/2, radius * _axis.y);
+ el.setLayoutMatrix3D(m, false /*triggerLayout*/);
+
+ // Update the layer for a correct z-order
+ if (el is IVisualElement)
+ IVisualElement(el).depth = Math.abs( Math.floor(180 - Math.abs(degrees % 360)) );
+
+ // Move on to next item
+ totalWidthSoFar += elementWidth + gap;
+ }
+ }
+
+ private function scrollPositionFromCenterToNext(next:Boolean):Number
+ {
+ var iter:LayoutIterator = new LayoutIterator(target, _centeredItemIndex);
+ var el:ILayoutElement = next ? iter.nextElementWrapped() : iter.prevElementWrapped();
+ if (!el)
+ return 0;
+
+ var elementWidth:Number = el.getLayoutBoundsWidth(false /*postTransform*/);
+
+ var value:Number;
+ if (next)
+ {
+ if (_centeredItemDegrees > 0.1)
+ return (_centeredItemCircumferenceEnd + _centeredItemCircumferenceBegin) / 2;
+
+ value = _centeredItemCircumferenceEnd + elementWidth/2;
+ if (value > _totalWidth)
+ value -= _totalWidth;
+ }
+ else
+ {
+ if (_centeredItemDegrees < -0.1)
+ return (_centeredItemCircumferenceEnd + _centeredItemCircumferenceBegin) / 2;
+
+ value = _centeredItemCircumferenceBegin - elementWidth/2;
+ if (value < 0)
+ value += _totalWidth;
+ }
+ return value;
+ }
+
+ override protected function scrollPositionChanged():void
+ {
+ if (target)
+ target.invalidateDisplayList();
+ }
+
+ override public function getHorizontalScrollPositionDelta(navigationUnit:uint):Number
+ {
+ var g:GroupBase = target;
+ if (!g || g.numElements == 0)
+ return 0;
+
+ var value:Number;
+
+ switch (navigationUnit)
+ {
+ case NavigationUnit.LEFT:
+ {
+ value = target.horizontalScrollPosition - 30;
+ if (value < 0)
+ value += _totalWidth;
+ return value - target.horizontalScrollPosition;
+ }
+
+ case NavigationUnit.RIGHT:
+ {
+ value = target.horizontalScrollPosition + 30;
+ if (value > _totalWidth)
+ value -= _totalWidth;
+ return value - target.horizontalScrollPosition;
+ }
+
+ case NavigationUnit.PAGE_LEFT:
+ return scrollPositionFromCenterToNext(false) - target.horizontalScrollPosition;
+
+ case NavigationUnit.PAGE_RIGHT:
+ return scrollPositionFromCenterToNext(true) - target.horizontalScrollPosition;
+
+ case NavigationUnit.HOME:
+ return 0;
+
+ case NavigationUnit.END:
+ return _totalWidth;
+
+ default:
+ return 0;
+ }
+ }
+
+ /**
+ * @private
+ */
+ override public function getScrollPositionDeltaToElement(index:int):Point
+ {
+ var layoutTarget:GroupBase = target;
+ if (!layoutTarget)
+ return null;
+
+ var gap:Number = this.gap;
+ var totalWidthSoFar:Number = 0;
+ var iter:LayoutIterator = new LayoutIterator(layoutTarget);
+
+ var el:ILayoutElement = iter.nextElement();
+ if (!el)
+ return null;
+ totalWidthSoFar -= el.getLayoutBoundsWidth(false /*postTransform*/) / 2;
+
+ iter.reset();
+ while (null != (el = iter.nextElement()) && iter.curIndex <= index)
+ {
+ var elementWidth:Number = el.getLayoutBoundsWidth(false /*postTransform*/);
+ totalWidthSoFar += gap + elementWidth;
+ }
+ return new Point(totalWidthSoFar - elementWidth / 2 -gap - layoutTarget.horizontalScrollPosition, 0);
+ }
+
+ /**
+ * @private
+ */
+ override public function updateScrollRect(w:Number, h:Number):void
+ {
+ var g:GroupBase = target;
+ if (!g)
+ return;
+
+ if (clipAndEnableScrolling)
+ {
+ // Since scroll position is reflected in our 3D calculations,
+ // always set the top-left of the srcollRect to (0,0).
+ g.scrollRect = new Rectangle(0, verticalScrollPosition, w, h);
+ }
+ else
+ g.scrollRect = null;
+ }
+}
+}
+
+import mx.core.ILayoutElement;
+
+import spark.components.supportClasses.GroupBase;
+
+class LayoutIterator
+{
+ private var _curIndex:int;
+ private var _numVisited:int = 0;
+ private var totalElements:int;
+ private var _target:GroupBase;
+ private var _loopIndex:int = -1;
+ private var _useVirtual:Boolean;
+
+ public function get curIndex():int
+ {
+ return _curIndex;
+ }
+
+ public function LayoutIterator(target:GroupBase, index:int=-1):void
+ {
+ totalElements = target.numElements;
+ _target = target;
+ _curIndex = index;
+ _useVirtual = _target.layout.useVirtualLayout;
+ }
+
+ public function nextElement():ILayoutElement
+ {
+ while (_curIndex < totalElements - 1)
+ {
+ var el:ILayoutElement = _useVirtual ? _target.getVirtualElementAt(++_curIndex) :
+ _target.getElementAt(++_curIndex);
+ if (el && el.includeInLayout)
+ {
+ ++_numVisited;
+ return el;
+ }
+ }
+ return null;
+ }
+
+ public function prevElement():ILayoutElement
+ {
+ while (_curIndex > 0)
+ {
+ var el:ILayoutElement = _useVirtual ? _target.getVirtualElementAt(--_curIndex) :
+ _target.getElementAt(--_curIndex);
+ if (el && el.includeInLayout)
+ {
+ ++_numVisited;
+ return el;
+ }
+ }
+ return null;
+ }
+
+ public function nextElementWrapped():ILayoutElement
+ {
+ if (_loopIndex == -1)
+ _loopIndex = _curIndex;
+ else if (_loopIndex == _curIndex)
+ return null;
+
+ var el:ILayoutElement = nextElement();
+ if (el)
+ return el;
+ else if (_curIndex == totalElements - 1)
+ _curIndex = -1;
+ return nextElement();
+ }
+
+ public function prevElementWrapped():ILayoutElement
+ {
+ if (_loopIndex == -1)
+ _loopIndex = _curIndex;
+ else if (_loopIndex == _curIndex)
+ return null;
+
+ var el:ILayoutElement = prevElement();
+ if (el)
+ return el;
+ else if (_curIndex == 0)
+ _curIndex = totalElements;
+ return prevElement();
+ }
+
+ public function reset():void
+ {
+ _curIndex = -1;
+ _numVisited = 0;
+ _loopIndex = -1;
+ }
+
+ public function get numVisited():int
+ {
+ return _numVisited;
+ }
+}
+
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/assets/xdslider.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/assets/xdslider.png b/TourDeFlex/TourDeFlex3/src/spark/layouts/assets/xdslider.png
new file mode 100644
index 0000000..8d49a7a
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/layouts/assets/xdslider.png differ
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/data/catalog.xml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/data/catalog.xml b/TourDeFlex/TourDeFlex3/src/spark/layouts/data/catalog.xml
new file mode 100644
index 0000000..ecf9bc6
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/data/catalog.xml
@@ -0,0 +1,193 @@
+<?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.
+
+-->
+
+<catalog>
+
+ <product productId="1">
+ <name>Nokia 6010</name>
+ <color></color>
+ <description>Easy to use without sacrificing style, the Nokia 6010 phone offers functional voice communication supported by text messaging, multimedia messaging, mobile internet, games and more</description>
+ <price>99.99</price>
+ <image>assets/pic/Nokia_6010.gif</image>
+ <series>6000</series>
+ <triband>false</triband>
+ <camera>false</camera>
+ <video>false</video>
+ <highlight1>MMS</highlight1>
+ <highlight2>Large color display</highlight2>
+ </product>
+
+ <product productId="2">
+ <name>Nokia 3100</name>
+ <color>Blue</color>
+ <description>Light up the night with a glow-in-the-dark cover - when it's charged with light you can easily find your phone in the dark. When you get a call, the Nokia 3100 phone flashes in tune with your ringing tone. And when you snap on a Nokia Xpress-on™ gaming cover*, you'll get luminescent light effects in time to the gaming action.</description>
+ <price>139</price>
+ <image>assets/pic/Nokia_3100_blue.gif</image>
+ <series>3000</series>
+ <triband>true</triband>
+ <camera>false</camera>
+ <video>false</video>
+ <highlight1>Glow-in-the-dark</highlight1>
+ <highlight2>Flashing lights</highlight2>
+ </product>
+
+ <product productId="3">
+ <name>Nokia 3100</name>
+ <color>Pink</color>
+ <description>Light up the night with a glow-in-the-dark cover - when it's charged with light you can easily find your phone in the dark. When you get a call, the Nokia 3100 phone flashes in tune with your ringing tone. And when you snap on a Nokia Xpress-on™ gaming cover*, you'll get luminescent light effects in time to the gaming action.</description>
+ <price>139</price>
+ <image>assets/pic/Nokia_3100_pink.gif</image>
+ <series>3000</series>
+ <triband>true</triband>
+ <camera>false</camera>
+ <video>false</video>
+ <highlight1>Glow-in-the-dark</highlight1>
+ <highlight2>Flashing lights</highlight2>
+ </product>
+
+ <product productId="4">
+ <name>Nokia 3120</name>
+ <color></color>
+ <description>Designed for both business and pleasure, the elegant Nokia 3120 phone offers a pleasing mix of features. Enclosed within its chic, compact body, you will discover the benefits of tri-band compatibility, a color screen, MMS, XHTML browsing, cheerful screensavers, and much more.</description>
+ <price>159.99</price>
+ <image>assets/pic/Nokia_3120.gif</image>
+ <series>3000</series>
+ <triband>true</triband>
+ <camera>false</camera>
+ <video>false</video>
+ <highlight1>Multimedia messaging</highlight1>
+ <highlight2>Animated screensavers</highlight2>
+ </product>
+
+ <product productId="5">
+ <name>Nokia 3220</name>
+ <color></color>
+ <description>The Nokia 3220 phone is a fresh new cut on some familiar ideas - animate your MMS messages with cute characters, see the music with lights that flash in time with your ringing tone, download wallpapers and screensavers with matching color schemes for the interface.</description>
+ <price>159.99</price>
+ <image>assets/pic/Nokia_3220.gif</image>
+ <series>3000</series>
+ <triband>false</triband>
+ <camera>true</camera>
+ <video>false</video>
+ <highlight1>MIDI tones</highlight1>
+ <highlight2>Cut-out covers</highlight2>
+ </product>
+
+ <product productId="6">
+ <name>Nokia 3650</name>
+ <color></color>
+ <description>Messaging is more personal, versatile and fun with the Nokia 3650 camera phone. Capture experiences as soon as you see them and send the photos you take to you friends and family.</description>
+ <price>199.99</price>
+ <image>assets/pic/Nokia_3650.gif</image>
+ <series>3000</series>
+ <triband>false</triband>
+ <camera>true</camera>
+ <video>true</video>
+ <highlight1>Infrared or Bluetooth</highlight1>
+ <highlight2>Built-in XHTML browser</highlight2>
+ </product>
+
+ <product productId="7">
+ <name>Nokia 6820</name>
+ <color></color>
+ <description>Messaging just got a whole lot smarter. The Nokia 6820 messaging device puts the tools you need for rich communication - full messaging keyboard, digital camera, mobile email, MMS, SMS, and Instant Messaging - right at your fingertips, in a small, sleek device.</description>
+ <price>299.99</price>
+ <image>assets/pic/Nokia_6820.gif</image>
+ <series>6000</series>
+ <triband>true</triband>
+ <camera>true</camera>
+ <video>false</video>
+ <highlight1>Messaging keyboard</highlight1>
+ <highlight2>Bluetooth </highlight2>
+ </product>
+
+ <product productId="8">
+ <name>Nokia 6670</name>
+ <color></color>
+ <description>Classic business tools meet your creative streak in the Nokia 6670 imaging smartphone. It has a Netfront Web browser with PDF support, document viewer applications for email attachments, a direct printing application, and a megapixel still camera that also shoots up to 10 minutes of video.</description>
+ <price>309.99</price>
+ <image>assets/pic/Nokia_6670.gif</image>
+ <series>6000</series>
+ <triband>false</triband>
+ <camera>true</camera>
+ <video>true</video>
+ <highlight1>PDF support</highlight1>
+ <highlight2>4x digital zoom</highlight2>
+ </product>
+
+ <product productId="9">
+ <name>Nokia 6620</name>
+ <color></color>
+ <description>Shoot a basket. Shoot a movie. Video phones from Nokia... the perfect way to save and share life’s playful moments. Feel connected.</description>
+ <price>329.99</price>
+ <image>assets/pic/Nokia_6620.gif</image>
+ <series>6000</series>
+ <triband>false</triband>
+ <camera>true</camera>
+ <video>true</video>
+ <highlight1>Bluetooth technology</highlight1>
+ <highlight2>Up to 10 minutes video</highlight2>
+ </product>
+
+ <product productId="10">
+ <name>Nokia 3230</name>
+ <color>Silver</color>
+ <description>Get creative with the Nokia 3230 smartphone. Create your own ringing tones, print your mobile images, play multiplayer games over a wireless Bluetooth connection, and browse HTML and xHTML Web pages. Plus, with a 32 MB MMC card and expandable memory, you'll have lots of space to be creative.</description>
+ <price>369</price>
+ <image>assets/pic/Nokia_3230_black.gif</image>
+ <series>3000</series>
+ <triband>false</triband>
+ <camera>true</camera>
+ <video>true</video>
+ <highlight1>1.3 megapixel</highlight1>
+ <highlight2>Expandable memory</highlight2>
+ </product>
+
+ <product productId="11">
+ <name>Nokia 3230</name>
+ <color>Bronze</color>
+ <description>Get creative with the Nokia 3230 smartphone. Create your own ringing tones, print your mobile images, play multiplayer games over a wireless Bluetooth connection, and browse HTML and xHTML Web pages. Plus, with a 32 MB MMC card and expandable memory, you'll have lots of space to be creative.</description>
+ <price>369</price>
+ <image>assets/pic/Nokia_3230_bronze.gif</image>
+ <series>3000</series>
+ <triband>false</triband>
+ <camera>true</camera>
+ <video>true</video>
+ <highlight1>1.3 megapixel</highlight1>
+ <highlight2>Expandable memory</highlight2>
+ </product>
+
+ <product productId="12">
+ <name>Nokia 6630</name>
+ <color></color>
+ <description>Not only is the Nokia 6630 imaging smartphone a 1.3 megapixel digital imaging device (1.3 megapixel camera sensor, effective resolution 1.23 megapixels for image capture, image size 1280 x 960 pixels), it's also a portable office and a modern rich-media machine.</description>
+ <price>379</price>
+ <image>assets/pic/Nokia_6630.gif</image>
+ <series>6000</series>
+ <triband>false</triband>
+ <camera>true</camera>
+ <video>true</video>
+ <highlight1>1.3 megapixel</highlight1>
+ <highlight2>6x smooth digital zoom</highlight2>
+ </product>
+
+
+
+</catalog>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/layouts/FilteredTileLayout.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/layouts/FilteredTileLayout.as b/TourDeFlex/TourDeFlex3/src/spark/layouts/layouts/FilteredTileLayout.as
new file mode 100644
index 0000000..6c01c2c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/layouts/FilteredTileLayout.as
@@ -0,0 +1,260 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package layouts
+{
+ import mx.collections.ICollectionView;
+ import mx.effects.Parallel;
+ import mx.events.EffectEvent;
+
+ import spark.components.supportClasses.GroupBase;
+ import spark.components.supportClasses.ItemRenderer;
+ import spark.effects.Fade;
+ import spark.effects.Move;
+ import spark.layouts.supportClasses.LayoutBase;
+
+ public class FilteredTileLayout extends LayoutBase
+ {
+ public var filteredItems:ICollectionView;
+
+ public var fadeOutDuration:Number = 400;
+
+ public var moveDuration:Number = 400;
+
+ public var fadeInDuration:Number = 400;
+
+ private var _target:GroupBase;
+
+ private var _containerWidth:Number;
+
+ private var fadeOutEffects:Parallel;
+ private var fadeInEffects:Parallel;
+ private var moveEffects:Parallel;
+
+ private var _horizontalGap:Number = 10;
+
+ private var _verticalGap:Number = 10;
+
+ private var _tileWidth:Number = 100;
+
+ private var _tileHeight:Number = 100;
+
+ public function set horizontalGap(value:Number):void
+ {
+ _horizontalGap = value;
+ if (target) target.invalidateDisplayList();
+ }
+
+ public function set verticalGap(value:Number):void
+ {
+ _verticalGap = value;
+ if (target) target.invalidateDisplayList();
+ }
+
+ public function set tileWidth(value:Number):void
+ {
+ _tileWidth = value;
+ if (target) target.invalidateDisplayList();
+ }
+
+ public function set tileHeight(value:Number):void
+ {
+ _tileHeight = value;
+ if (target) target.invalidateDisplayList();
+ }
+
+ public function filter():void
+ {
+ // Prevent updateDisplayList() from being executed while we are animating tiles
+ _target.autoLayout = false;
+
+ // No filter has been applied. Keep showing all the items in the dataProvider
+ if (filteredItems == null) return;
+
+ var count:int = _target.numElements;
+
+ // No items in the dataProvider: Nothing to show.
+ if (count == 0) return;
+
+ var x:int = 0;
+ var y:int = 0;
+
+ fadeOutEffects = new Parallel();
+ fadeInEffects = new Parallel();
+ moveEffects = new Parallel();
+
+ for (var i:int = 0; i < count; i++)
+ {
+ var itemRenderer:ItemRenderer = _target.getElementAt(i) as ItemRenderer;
+
+ if (filteredItems.contains(itemRenderer.data))
+ {
+ // The element is part of the selection: calculate its x and y values
+ if (x + _tileWidth > _containerWidth)
+ {
+ x = 0;
+ y += _tileHeight + _verticalGap;
+ }
+
+ if (itemRenderer.visible == false)
+ {
+ trace("FadeIn: " + itemRenderer.data.name);
+ // if the element was hidden, set its new x and y values (without Move animation) and register it for FadeIn animation
+ itemRenderer.visible = true;
+ itemRenderer.setLayoutBoundsPosition(x, y);
+ var fadeIn:Fade = new Fade(itemRenderer);
+ fadeIn.alphaTo = 1;
+ fadeInEffects.addChild(fadeIn);
+ }
+ else
+ {
+ trace("Move: " + itemRenderer.data.name);
+ // the element was already visible: register it for Move animation
+ if (itemRenderer.x != x || itemRenderer.y != y)
+ {
+ var move:Move = new Move(itemRenderer);
+ move.xTo = x;
+ move.yTo = y;
+ moveEffects.addChild(move);
+ }
+ }
+ x += _tileWidth + _horizontalGap;
+ }
+ else
+ {
+ if (itemRenderer.alpha == 1)
+ {
+ trace("FadeOut: " + itemRenderer.data.name);
+ // the element is filtered out: register it for FadeOut animation
+ var fadeOut:Fade = new Fade(itemRenderer);
+ fadeOut.alphaTo = 0;
+ fadeOutEffects.addChild(fadeOut);
+ }
+ }
+ }
+ fadeOutTiles();
+ }
+
+ private function fadeOutTiles(event:EffectEvent = null):void
+ {
+ trace("fadeOutTiles");
+ if (fadeOutEffects.children.length > 0) {
+ fadeOutEffects.duration = fadeOutDuration;
+ fadeOutEffects.addEventListener(EffectEvent.EFFECT_END, moveTiles)
+ fadeOutEffects.play();
+ }
+ else
+ {
+ moveTiles();
+ }
+ }
+
+ private function moveTiles(event:EffectEvent = null):void
+ {
+ // Undesired behaviors may happen if we leave tiles with alpha=0 in the display list while performing other animations
+ setInvisibleTiles();
+
+ trace("moveTiles");
+ if (moveEffects.children.length > 0) {
+ moveEffects.duration = moveDuration;
+ moveEffects.addEventListener(EffectEvent.EFFECT_END, fadeInTiles)
+ moveEffects.play();
+ }
+ else
+ {
+ fadeInTiles();
+ }
+ }
+
+ private function fadeInTiles(event:EffectEvent = null):void
+ {
+ trace("fadeInTiles");
+ if (fadeInEffects.children.length > 0) {
+ fadeInEffects.duration = fadeInDuration;
+ moveEffects.addEventListener(EffectEvent.EFFECT_END, fadeInTilesEnd)
+ fadeInEffects.play();
+ }
+ else
+ {
+ fadeInTilesEnd();
+ }
+ }
+
+ private function fadeInTilesEnd(event:EffectEvent = null):void
+ {
+ _target.autoLayout = true;
+ }
+
+ private function setInvisibleTiles():void
+ {
+ var count:int = _target.numElements;
+
+ if (count == 0) return;
+
+ for (var i:int = 0; i < count; i++)
+ {
+ var itemRenderer:ItemRenderer = _target.getElementAt(i) as ItemRenderer;
+ if (!filteredItems.contains(itemRenderer.data))
+ {
+ trace("Removing from layout: " + itemRenderer.data.name);
+ itemRenderer.visible = false;
+ }
+ }
+ }
+
+ override public function updateDisplayList(containerWidth:Number, containerHeight:Number):void
+ {
+ trace("updateDisplaylist");
+
+ _target = target;
+ _containerWidth = containerWidth;
+
+ var count:int = target.numElements;
+ if (count == 0) return;
+
+ var x:int=0;
+ var y:int=0;
+
+ for (var i:int = 0; i < count; i++)
+ {
+ var itemRenderer:ItemRenderer = _target.getElementAt(i) as ItemRenderer;
+
+ itemRenderer.setLayoutBoundsSize(_tileWidth, _tileHeight);
+
+ if (filteredItems && filteredItems.contains(itemRenderer.data))
+ {
+ // The element is part of the selection: calculate its x and y values
+ if (x + _tileWidth > containerWidth)
+ {
+ x = 0;
+ y += _tileHeight + _verticalGap;
+ }
+ itemRenderer.setLayoutBoundsPosition(x, y);
+ itemRenderer.alpha = 1;
+ x += _tileWidth + _horizontalGap;
+ }
+ else
+ {
+ itemRenderer.alpha = 0;
+ }
+
+ }
+ }
+
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/renderers/PhoneRenderer.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/renderers/PhoneRenderer.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/renderers/PhoneRenderer.mxml
new file mode 100644
index 0000000..9e17279
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/renderers/PhoneRenderer.mxml
@@ -0,0 +1,61 @@
+<?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.
+
+-->
+<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ autoDrawBackground="false" width="100" height="100" clipAndEnableScrolling="false"
+ depth="0" depth.hovered="1">
+
+ <fx:Declarations>
+ <mx:CurrencyFormatter id="cf"/>
+ </fx:Declarations>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="hovered" />
+ </s:states>
+
+ <s:transitions>
+ <s:Transition fromState="normal" toState="hovered" autoReverse="true">
+ <s:Parallel>
+ <s:Rotate3D target="{image}" angleXFrom="0" angleXTo="0" angleZFrom="0" autoCenterTransform="true" angleYTo="360" angleYFrom="0" autoCenterProjection="true" angleZTo="0"/>
+ <s:Fade target="{group}" startDelay="320"/>
+ </s:Parallel>
+ </s:Transition>
+ </s:transitions>
+
+ <mx:Image id="image" source="{data.image}" horizontalCenter="0"
+ width="50" height="94"/>
+
+ <s:Group id="group" top="0" bottom="0" left="0" right="0" visible.normal="false">
+
+ <s:Rect id="rect" left="0" right="0" top="0" bottom="0" radiusX="4" radiusY="4">
+ <s:fill>
+ <s:SolidColor color="black" alpha="0.5"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:Label text="{data.name}" verticalCenter="-20" horizontalCenter="0" color="white"/>
+ <s:Label text="{data.color}" verticalCenter="0" horizontalCenter="0" color="white"/>
+ <s:Label text="{cf.format(data.price)}" verticalCenter="20" horizontalCenter="0" color="white"/>
+
+ </s:Group>
+
+</s:ItemRenderer>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/skins/TDFPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/skins/TDFPanelSkin.mxml
new file mode 100644
index 0000000..f9151dc
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/skins/TDFPanelSkin.mxml
@@ -0,0 +1,171 @@
+<?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.
+
+-->
+
+
+<!--- Custom Spark Panel Skin created for Tour de Flex.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
+ blendMode.disabled="layer">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Panel")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ /* Define the skin elements that should not be colorized.
+ For panel, border and title backround are skinned, but the content area and title text are not. */
+ static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+ static private const contentFill:Array = [];
+
+ /**
+ * @inheritDoc
+ */
+ override public function get contentItems():Array {return contentFill};
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ <s:State name="normalWithControlBar" />
+ <s:State name="disabledWithControlBar" />
+ </s:states>
+
+ <!-- drop shadow -->
+ <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11"
+ angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+
+ <!-- layer 1: border -->
+ <s:Rect left="0" right="0" top="0" bottom="0">
+ <s:stroke>
+ <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 2: background fill -->
+ <!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
+ <s:Rect left="0" right="0" bottom="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: contents -->
+ <!--- contains the vertical stack of titlebar content and controlbar -->
+ <s:Group left="1" right="1" top="1" bottom="1" >
+ <s:layout>
+ <s:VerticalLayout gap="0" horizontalAlign="justify" />
+ </s:layout>
+
+ <s:Group id="topGroup" >
+ <!-- layer 0: title bar fill -->
+ <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
+ <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
+ <s:fill>
+ <s:SolidColor color="0x000000" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: title bar highlight -->
+ <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xEAEAEA" />
+ <s:GradientEntry color="0xD9D9D9" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- layer 2: title bar divider -->
+ <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+ <s:fill>
+ <s:SolidColor color="0xC0C0C0" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: text -->
+ <!--- Defines the appearance of the PanelSkin class's title bar. -->
+ <!-- Note: The title text display has been slightly modified for Tour de Flex. -->
+ <s:Label id="titleDisplay" lineBreak="explicit"
+ left="9" top="1" bottom="0" minHeight="30"
+ verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
+ </s:Label>
+ </s:Group>
+
+ <!--
+ Note: setting the minimum size to 0 here so that changes to the host component's
+ size will not be thwarted by this skin part's minimum size. This is a compromise,
+ more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+ -->
+ <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+ </s:Group>
+
+ <s:Group id="bottomGroup" minWidth="0" minHeight="0"
+ includeIn="normalWithControlBar, disabledWithControlBar" >
+
+ <!-- layer 0: control bar background -->
+ <!-- Note: We are skinning this to be the gradient in case we do specify control
+ bar content, but it will only display if there's a controlBarContent
+ property specified.-->
+ <s:Rect left="0" right="0" bottom="0" top="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: control bar divider line -->
+ <s:Rect left="0" right="0" top="0" height="1" >
+ <s:fill>
+ <s:SolidColor color="0xCDCDCD" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 2: control bar -->
+ <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+ </s:Group>
+ </s:Group>
+ </s:Group>
+</s:SparkSkin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/states/AnimateShaderTransitionEffect.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/states/AnimateShaderTransitionEffect.mxml b/TourDeFlex/TourDeFlex3/src/spark/states/AnimateShaderTransitionEffect.mxml
new file mode 100644
index 0000000..22397bd
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/states/AnimateShaderTransitionEffect.mxml
@@ -0,0 +1,58 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ backgroundColor="0x000000" viewSourceURL="srcview/index.html">
+
+ <s:states>
+ <s:State name="default"/>
+ <s:State name="flipped"/>
+ </s:states>
+
+ <s:transitions>
+ <s:Transition id="t1">
+ <s:AnimateTransitionShader
+ target="{holder}"
+ duration="1000"
+ shaderByteCode="@Embed(source='assets/twist.pbj', mimeType='application/octet-stream')"/>
+ </s:Transition>
+ </s:transitions>
+
+ <s:HGroup left="190" top="7">
+ <s:Group id="holder">
+ <s:BitmapImage
+ source="@Embed('assets/back.png')"
+ visible="true" visible.flipped="false"/>
+ <s:BitmapImage
+ source="@Embed('assets/c1.png')"
+ visible="false" visible.flipped="true"/>
+ </s:Group>
+ </s:HGroup>
+ <s:VGroup top="10" right="5" width="30%">
+ <s:Label text="AnimateShaderTransition Sample" fontSize="18" color="#B7B6B6"/>
+ <s:Label color="#FFFFFF" width="200" verticalAlign="justify"
+ text="AnimateShaderTransition animates a shader between two images. Click the button below to see the effect."/>
+ <s:Button id="playButton"
+ label="Play Animation"
+ click="currentState = (currentState == 'flipped') ? 'default' : 'flipped';" />
+ </s:VGroup>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/states/assets/back.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/states/assets/back.png b/TourDeFlex/TourDeFlex3/src/spark/states/assets/back.png
new file mode 100644
index 0000000..19367fb
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/states/assets/back.png differ
[3/5] git commit: [flex-utilities] [refs/heads/develop] - move some
sample spark examples into the component explorer
Posted by jm...@apache.org.
move some sample spark examples into the component explorer
Project: http://git-wip-us.apache.org/repos/asf/flex-utilities/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-utilities/commit/051a1e55
Tree: http://git-wip-us.apache.org/repos/asf/flex-utilities/tree/051a1e55
Diff: http://git-wip-us.apache.org/repos/asf/flex-utilities/diff/051a1e55
Branch: refs/heads/develop
Commit: 051a1e5582fb16dd5334844560db2600e9844386
Parents: 9835c32
Author: Justin Mclean <jm...@apache.org>
Authored: Sat Aug 9 13:57:56 2014 +1000
Committer: Justin Mclean <jm...@apache.org>
Committed: Sat Aug 9 13:57:56 2014 +1000
----------------------------------------------------------------------
TourDeFlex/TourDeFlex3/build.xml | 29 ++
TourDeFlex/TourDeFlex3/src/explorer.xml | 301 ++++++-----
.../src/spark/containers/SampleHGroup.mxml | 98 ++++
.../src/spark/containers/SampleVGroup.mxml | 97 ++++
.../SampleVerticalHorizontalAlign.mxml | 83 +++
.../spark/containers/skins/TDFPanelSkin.mxml | 171 ++++++
.../src/spark/controls/ComboBoxExample.mxml | 66 +++
.../src/spark/controls/DataGroupExample.mxml | 134 +++++
.../src/spark/controls/MenuExample.mxml | 90 ++++
.../spark/controls/RichEditableTextExample.mxml | 100 ++++
.../src/spark/controls/skins/TDFPanelSkin.mxml | 171 ++++++
.../spark/css/CSSDescendantSelectorExample.mxml | 74 +++
.../spark/css/CSSTypeClassSelectorExample.mxml | 72 +++
.../src/spark/css/skins/TDFPanelSkin.mxml | 171 ++++++
.../src/spark/effects/Move3DExample.mxml | 99 ++++
.../src/spark/effects/assets/ApacheFlexLogo.png | Bin 0 -> 71228 bytes
.../src/spark/effects/skins/TDFPanelSkin.mxml | 170 ++++++
.../src/spark/fxg/BitmapImageExample.mxml | 72 +++
.../src/spark/fxg/EclipseExample.mxml | 46 ++
.../TourDeFlex3/src/spark/fxg/LineExample.mxml | 96 ++++
.../TourDeFlex3/src/spark/fxg/RectExample.mxml | 87 ++++
.../src/spark/fxg/RichTextExample.mxml | 58 +++
.../src/spark/fxg/skins/TDFPanelSkin.mxml | 170 ++++++
.../itemRenderers/ItemRenderer1Example.mxml | 61 +++
.../itemRenderers/ItemRenderer2Example.mxml | 75 +++
.../src/spark/itemRenderers/data/list.xml | 96 ++++
.../itemRenderers/renderers/ImageRenderer1.mxml | 56 ++
.../itemRenderers/renderers/ImageRenderer2.mxml | 54 ++
.../spark/itemRenderers/skins/TDFPanelSkin.mxml | 170 ++++++
.../layouts/CustomLayoutAnimatedExample.mxml | 106 ++++
.../layouts/CustomLayoutFlickrWheelExample.mxml | 83 +++
.../spark/layouts/CustomLayoutFlowExample.mxml | 85 +++
.../layouts/CustomLayoutHBaselineExample.mxml | 118 +++++
.../src/spark/layouts/FlickrThumbnail.mxml | 80 +++
.../src/spark/layouts/FlowLayout1.as | 195 +++++++
.../src/spark/layouts/HBaselineLayout.as | 199 +++++++
.../spark/layouts/NumberInterpolatorWrapping.as | 110 ++++
.../src/spark/layouts/WheelLayout.as | 516 +++++++++++++++++++
.../src/spark/layouts/assets/xdslider.png | Bin 0 -> 359 bytes
.../src/spark/layouts/data/catalog.xml | 193 +++++++
.../spark/layouts/layouts/FilteredTileLayout.as | 260 ++++++++++
.../spark/layouts/renderers/PhoneRenderer.mxml | 61 +++
.../src/spark/layouts/skins/TDFPanelSkin.mxml | 171 ++++++
.../states/AnimateShaderTransitionEffect.mxml | 58 +++
.../src/spark/states/assets/back.png | Bin 0 -> 121035 bytes
45 files changed, 5070 insertions(+), 132 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/build.xml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/build.xml b/TourDeFlex/TourDeFlex3/build.xml
index b220bbb..8d2b919 100644
--- a/TourDeFlex/TourDeFlex3/build.xml
+++ b/TourDeFlex/TourDeFlex3/build.xml
@@ -176,6 +176,35 @@
<compile-mxml example="/mx/validators/StringValidatorExample"/>
<compile-mxml example="/mx/validators/ZipCodeValidatorExample"/>
+ <!-- Spark examples -->
+ <compile-mxml example="/spark/controls/ComboBoxExample"/>
+ <compile-mxml example="/spark/controls/DataGroupExample"/>
+ <compile-mxml example="/spark/controls/MenuExample"/>
+ <compile-mxml example="/spark/controls/RichEditableTextExample"/>
+
+ <compile-mxml example="/spark/css/CSSDescendantSelectorExample"/>
+ <compile-mxml example="/spark/css/CSSTypeClassSelectorExample"/>
+
+ <compile-mxml example="/spark/layouts/CustomLayoutAnimatedExample"/>
+ <compile-mxml example="/spark/layouts/CustomLayoutFlickrWheelExample"/>
+ <compile-mxml example="/spark/layouts/CustomLayoutFlowExample"/>
+ <compile-mxml example="/spark/layouts/CustomLayoutHBaselineExample"/>
+
+ <compile-mxml example="/spark/itemRenderers/ItemRenderer1Example"/>
+ <compile-mxml example="/spark/itemRenderers/ItemRenderer2Example"/>
+
+ <compile-mxml example="/spark/fxg/BitmapImageExample"/>
+ <compile-mxml example="/spark/fxg/ElipseExample"/>
+ <compile-mxml example="/spark/fxg/LineExample"/>
+ <compile-mxml example="/spark/fxg/RectExample"/>
+ <compile-mxml example="/spark/fxg/RichTextExample"/>
+
+ <compile-mxml example="/spark/containers/SampleHGroup"/>
+ <compile-mxml example="/spark/containers/SampleVGroup"/>
+ <compile-mxml example="/spark/containers/SampleVerticalHorizontalAlign"/>
+
+ <compile-mxml example="/spark/effects/Move3DExample"/>
+
<!-- Explorer shell -->
<compile-mxml example="/explorer"/>
<compile-mxml example="/loaderPanel"/>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/explorer.xml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/explorer.xml b/TourDeFlex/TourDeFlex3/src/explorer.xml
index 7062167..625cc44 100755
--- a/TourDeFlex/TourDeFlex3/src/explorer.xml
+++ b/TourDeFlex/TourDeFlex3/src/explorer.xml
@@ -21,190 +21,227 @@
<node label="MX Framework Components">
<node label="Visual Components">
<node label="General Controls">
- <node label="Alert" app="controls/SimpleAlert" />
- <node label="ColorPicker" app="controls/ColorPickerExample" />
- <node label="ComboBox" app="controls/SimpleComboBox" />
- <node label="DataGrid" app="controls/SimpleDataGrid" />
- <node label="HorizontalList" app="controls/HorizontalListExample" />
- <node label="HRule" app="controls/SimpleHRule" />
- <node label="HScrollBar" app="controls/HScrollBarExample" />
- <node label="HSlider" app="controls/SimpleImageHSlider" />
- <node label="List" app="controls/SimpleList" />
- <node label="NumericStepper" app="controls/NumericStepperExample" />
- <node label="ProgressBar" app="controls/SimpleProgressBar" />
- <node label="Spacer" app="controls/SpacerExample" />
- <node label="TabBar" app="controls/TabBarExample" />
- <node label="TileList" app="controls/TileListExample" />
- <node label="Tree" app="controls/TreeExample" />
- <node label="VRule" app="controls/SimpleVRule" />
- <node label="VScrollBar" app="controls/VScrollBarExample" />
- <node label="VSlider" app="controls/SimpleImageVSlider" />
+ <node label="Alert" app="mx/controls/SimpleAlert" />
+ <node label="ColorPicker" app="mx/controls/ColorPickerExample" />
+ <node label="ComboBox" app="mx/controls/SimpleComboBox" />
+ <node label="DataGrid" app="mx/controls/SimpleDataGrid" />
+ <node label="HorizontalList" app="mx/controls/HorizontalListExample" />
+ <node label="HRule" app="mx/controls/SimpleHRule" />
+ <node label="HScrollBar" app="mx/controls/HScrollBarExample" />
+ <node label="HSlider" app="mx/controls/SimpleImageHSlider" />
+ <node label="List" app="mx/controls/SimpleList" />
+ <node label="NumericStepper" app="mx/controls/NumericStepperExample" />
+ <node label="ProgressBar" app="mx/controls/SimpleProgressBar" />
+ <node label="Spacer" app="mx/controls/SpacerExample" />
+ <node label="TabBar" app="mx/controls/TabBarExample" />
+ <node label="TileList" app="mx/controls/TileListExample" />
+ <node label="Tree" app="mx/controls/TreeExample" />
+ <node label="VRule" app="mx/controls/SimpleVRule" />
+ <node label="VScrollBar" app="mx/controls/VScrollBarExample" />
+ <node label="VSlider" app="mx/controls/SimpleImageVSlider" />
</node>
<node label="Button Controls">
- <node label="Button" app="controls/ButtonExample" />
- <node label="ButtonBar" app="controls/ButtonBarExample" />
- <node label="CheckBox" app="controls/CheckBoxExample" />
- <node label="LinkBar" app="controls/LinkBarExample" />
- <node label="LinkButton" app="controls/LinkButtonExample" />
- <node label="PopUpButton" app="controls/PopUpButtonExample" />
- <node label="RadioButton" app="controls/RadioButtonExample" />
- <node label="RadioButtonGroup" app="controls/RadioButtonGroupExample" />
- <node label="ToggleButtonBar" app="controls/ToggleButtonBarExample" />
+ <node label="Button" app="mx/controls/ButtonExample" />
+ <node label="ButtonBar" app="mx/controls/ButtonBarExample" />
+ <node label="CheckBox" app="mx/controls/CheckBoxExample" />
+ <node label="LinkBar" app="mx/controls/LinkBarExample" />
+ <node label="LinkButton" app="mx/controls/LinkButtonExample" />
+ <node label="PopUpButton" app="mx/controls/PopUpButtonExample" />
+ <node label="RadioButton" app="mx/controls/RadioButtonExample" />
+ <node label="RadioButtonGroup" app="mx/controls/RadioButtonGroupExample" />
+ <node label="ToggleButtonBar" app="mx/controls/ToggleButtonBarExample" />
</node>
<node label="Date Controls">
- <node label="DateChooser" app="controls/DateChooserExample" />
- <node label="DateField" app="controls/DateFieldExample" />
+ <node label="DateChooser" app="mx/controls/DateChooserExample" />
+ <node label="DateField" app="mx/controls/DateFieldExample" />
</node>
<node label="Loader Controls">
- <node label="Image" app="controls/SimpleImage" />
- <node label="SWFLoader" app="controls/SimpleLoader" src="controls/Local.mxml" />
- <node label="VideoDisplay" app="controls/VideoDisplayExample" />
+ <node label="Image" app="mx/controls/SimpleImage" />
+ <node label="SWFLoader" app="mx/controls/SimpleLoader" src="controls/Local.mxml" />
+ <node label="VideoDisplay" app="mx/controls/VideoDisplayExample" />
</node>
<node label="Menu Controls">
- <node label="Menu" app="controls/SimpleMenuExample" />
- <node label="MenuBar" app="controls/MenuBarExample" />
- <node label="PopUpMenuButton" app="controls/PopUpButtonMenuExample" />
+ <node label="Menu" app="mx/controls/SimpleMenuExample" />
+ <node label="MenuBar" app="mx/controls/MenuBarExample" />
+ <node label="PopUpMenuButton" app="mx/controls/PopUpButtonMenuExample" />
</node>
<node label="Text Controls">
- <node label="Label" app="controls/LabelExample" />
- <node label="RichTextEditor" app="controls/RichTextEditorExample" />
- <node label="Text" app="controls/TextExample" />
- <node label="TextArea" app="controls/TextAreaExample" />
- <node label="TextInput" app="controls/TextInputExample" />
+ <node label="Label" app="mx/controls/LabelExample" />
+ <node label="RichTextEditor" app="mx/controls/RichTextEditorExample" />
+ <node label="Text" app="mx/controls/TextExample" />
+ <node label="TextArea" app="mx/controls/TextAreaExample" />
+ <node label="TextInput" app="mx/controls/TextInputExample" />
</node>
<node label="Containers">
- <node label="Application" app="core/SimpleApplicationExample" />
- <node label="Accordion" app="containers/AccordionExample" />
- <node label="ApplicationControlBar" app="containers/SimpleApplicationControlBarExample" />
- <node label="Box" app="containers/SimpleBoxExample" />
- <node label="Canvas" app="containers/SimpleCanvasExample" />
- <node label="ControlBar" app="containers/SimpleControlBarExample" />
- <node label="DividedBox" app="containers/DividedBoxExample" />
- <node label="Form, FormHeading, FormItem" app="containers/FormExample" />
- <node label="Grid, GridItem, GridRow" app="containers/GridLayoutExample" />
- <node label="HBox" app="containers/HBoxExample" />
- <node label="HDividedBox" app="containers/HDividedBoxExample" />
- <node label="Panel" app="containers/SimplePanelExample" />
- <node label="TabNavigator" app="containers/TabNavigatorExample" />
- <node label="Tile" app="containers/TileLayoutExample" />
- <node label="TitleWindow" app="containers/TitleWindowApp"
+ <node label="Application" app="mx/core/SimpleApplicationExample" />
+ <node label="Accordion" app="mx/containers/AccordionExample" />
+ <node label="ApplicationControlBar" app="mx/containers/SimpleApplicationControlBarExample" />
+ <node label="Box" app="mx/containers/SimpleBoxExample" />
+ <node label="Canvas" app="mx/containers/SimpleCanvasExample" />
+ <node label="ControlBar" app="mx/containers/SimpleControlBarExample" />
+ <node label="DividedBox" app="mx/containers/DividedBoxExample" />
+ <node label="Form, FormHeading, FormItem" app="mx/containers/FormExample" />
+ <node label="Grid, GridItem, GridRow" app="mx/containers/GridLayoutExample" />
+ <node label="HBox" app="mx/containers/HBoxExample" />
+ <node label="HDividedBox" app="mx/containers/HDividedBoxExample" />
+ <node label="Panel" app="mx/containers/SimplePanelExample" />
+ <node label="TabNavigator" app="mx/containers/TabNavigatorExample" />
+ <node label="Tile" app="mx/containers/TileLayoutExample" />
+ <node label="TitleWindow" app="mx/containers/TitleWindowApp"
src="containers/SimpleTitleWindowExample.mxml" />
- <node label="VBox" app="containers/VBoxExample" />
- <node label="VDividedBox" app="containers/VDividedBoxExample" />
- <node label="ViewStack" app="containers/ViewStackExample" />
+ <node label="VBox" app="mx/containers/VBoxExample" />
+ <node label="VDividedBox" app="mx/containers/VDividedBoxExample" />
+ <node label="ViewStack" app="mx/containers/ViewStackExample" />
</node>
<node label="Repeater Control">
- <node label="Repeater" app="core/RepeaterExample" />
+ <node label="Repeater" app="mx/core/RepeaterExample" />
</node>
</node>
<node label="Print Controls">
- <node label="FlexPrintJob, PrintDataGrid" app="printing/PrintDataGridExample"
+ <node label="FlexPrintJob, PrintDataGrid" app="mx/printing/PrintDataGridExample"
src="printing/FormPrintView.mxml&printing/FormPrintHeader.mxml&printing/FormPrintFooter.mxml" />
</node>
<node label="Validators and Formatters">
<node label="Validators">
- <node label="CreditCardValidator" app="validators/CreditCardValidatorExample" />
- <node label="CurrencyValidator" app="validators/CurrencyValidatorExample" />
- <node label="DateValidator" app="validators/DateValidatorExample" />
- <node label="EmailValidator" app="validators/EmailValidatorExample" />
- <node label="NumberValidator" app="validators/NumberValidatorExample" />
- <node label="PhoneNumberValidator" app="validators/PhoneNumberValidatorExample" />
- <node label="RegExpValidator" app="validators/RegExValidatorExample" />
- <node label="SocialSecurityValidator" app="validators/SocialSecurityValidatorExample" />
- <node label="StringValidator" app="validators/StringValidatorExample" />
- <node label="Validator" app="validators/SimpleValidatorExample" />
- <node label="ZipCodeValidator" app="validators/ZipCodeValidatorExample" />
+ <node label="CreditCardValidator" app="mx/validators/CreditCardValidatorExample" />
+ <node label="CurrencyValidator" app="mx/validators/CurrencyValidatorExample" />
+ <node label="DateValidator" app="mx/validators/DateValidatorExample" />
+ <node label="EmailValidator" app="mx/validators/EmailValidatorExample" />
+ <node label="NumberValidator" app="mx/validators/NumberValidatorExample" />
+ <node label="PhoneNumberValidator" app="mx/validators/PhoneNumberValidatorExample" />
+ <node label="RegExpValidator" app="mx/validators/RegExValidatorExample" />
+ <node label="SocialSecurityValidator" app="mx/validators/SocialSecurityValidatorExample" />
+ <node label="StringValidator" app="mx/validators/StringValidatorExample" />
+ <node label="Validator" app="mx/validators/SimpleValidatorExample" />
+ <node label="ZipCodeValidator" app="mx/validators/ZipCodeValidatorExample" />
</node>
<node label="Formatters">
- <node label="CurrencyFormatter" app="formatters/CurrencyFormatterExample" />
- <node label="DateFormatter" app="formatters/DateFormatterExample" />
- <node label="Formatter" app="formatters/SimpleFormatterExample" />
- <node label="NumberFormatter" app="formatters/NumberFormatterExample" />
- <node label="PhoneFormatter" app="formatters/PhoneFormatterExample" />
- <node label="SwitchSymbolFormatter" app="formatters/SwitchSymbolFormatterExample" />
- <node label="ZipCodeFormatter" app="formatters/ZipCodeFormatterExample" />
+ <node label="CurrencyFormatter" app="mx/formatters/CurrencyFormatterExample" />
+ <node label="DateFormatter" app="mx/formatters/DateFormatterExample" />
+ <node label="Formatter" app="mx/formatters/SimpleFormatterExample" />
+ <node label="NumberFormatter" app="mx/formatters/NumberFormatterExample" />
+ <node label="PhoneFormatter" app="mx/formatters/PhoneFormatterExample" />
+ <node label="SwitchSymbolFormatter" app="mx/formatters/SwitchSymbolFormatterExample" />
+ <node label="ZipCodeFormatter" app="mx/formatters/ZipCodeFormatterExample" />
</node>
</node>
<node label="Effects, View States, and Transitions">
<node label="Effects">
- <node label="AddItemActionEffect" app="effects/AddItemActionEffectExample" />
- <node label="AnimateProperty" app="effects/AnimatePropertyEffectExample" />
- <node label="Blur" app="effects/BlurEffectExample" />
- <node label="Dissolve" app="effects/DissolveEffectExample" />
- <node label="Effect" app="effects/SimpleEffectExample" />
- <node label="Fade" app="effects/FadeEffectExample" />
- <node label="Glow" app="effects/GlowEffectExample" />
- <node label="Iris" app="effects/IrisEffectExample" />
- <node label="Move" app="effects/MoveEffectExample" />
- <node label="Parallel" app="effects/ParallelEffectExample" />
- <node label="Pause" app="effects/PauseEffectExample" />
- <node label="RemoveItemActionEffect" app="effects/AddItemActionEffectExample" />
- <node label="Resize" app="effects/ResizeEffectExample" />
- <node label="Rotate" app="effects/RotateEffectExample" />
- <node label="Sequence" app="effects/SequenceEffectExample" />
- <node label="SoundEffect" app="effects/SoundEffectExample" />
- <node label="WipeDown" app="effects/WipeDownExample" />
- <node label="WipeLeft" app="effects/WipeLeftExample" />
- <node label="WipeRight" app="effects/WipeRightExample" />
- <node label="WipeUp" app="effects/WipeUpExample" />
- <node label="Zoom" app="effects/ZoomEffectExample" />
+ <node label="AddItemActionEffect" app="mx/effects/AddItemActionEffectExample" />
+ <node label="AnimateProperty" app="mx/effects/AnimatePropertyEffectExample" />
+ <node label="Blur" app="mx/effects/BlurEffectExample" />
+ <node label="Dissolve" app="mx/effects/DissolveEffectExample" />
+ <node label="Effect" app="mx/effects/SimpleEffectExample" />
+ <node label="Fade" app="mx/effects/FadeEffectExample" />
+ <node label="Glow" app="mx/effects/GlowEffectExample" />
+ <node label="Iris" app="mx/effects/IrisEffectExample" />
+ <node label="Move" app="mx/effects/MoveEffectExample" />
+ <node label="Parallel" app="mx/effects/ParallelEffectExample" />
+ <node label="Pause" app="mx/effects/PauseEffectExample" />
+ <node label="RemoveItemActionEffect" app="mx/effects/AddItemActionEffectExample" />
+ <node label="Resize" app="mx/effects/ResizeEffectExample" />
+ <node label="Rotate" app="mx/effects/RotateEffectExample" />
+ <node label="Sequence" app="mx/effects/SequenceEffectExample" />
+ <node label="SoundEffect" app="mx/effects/SoundEffectExample" />
+ <node label="WipeDown" app="mx/effects/WipeDownExample" />
+ <node label="WipeLeft" app="mx/effects/WipeLeftExample" />
+ <node label="WipeRight" app="mx/effects/WipeRightExample" />
+ <node label="WipeUp" app="mx/effects/WipeUpExample" />
+ <node label="Zoom" app="mx/effects/ZoomEffectExample" />
</node>
<node label="View States">
- <node label="State" app="states/StatesExample" />
+ <node label="State" app="mx/states/StatesExample" />
</node>
<node label="Transitions">
- <node label="Transition" app="states/TransitionExample" />
+ <node label="Transition" app="mx/states/TransitionExample" />
</node>
</node>
<node label="Datavisualization Components">
<node label="Charts">
<node label="Chart Controls">
- <node label="AreaChart" app="charts/Line_AreaChartExample" />
- <node label="AxisRenderer" app="charts/HLOCChartExample" />
- <node label="BarChart" app="charts/Column_BarChartExample" />
- <node label="BubbleChart" app="charts/BubbleChartExample" />
- <node label="CandlestickChart" app="charts/CandlestickChartExample" />
- <node label="CategoryAxis" app="charts/HLOCChartExample" />
- <node label="ColumnChart" app="charts/Column_BarChartExample" />
- <node label="DateTimeAxis" app="charts/DateTimeAxisExample" />
- <node label="GridLines" app="charts/GridLinesExample" />
- <node label="HLOCChart" app="charts/HLOCChartExample" />
- <node label="Legend" app="charts/PlotChartExample" />
- <node label="LinearAxis" app="charts/HLOCChartExample" />
- <node label="LineChart" app="charts/Line_AreaChartExample" />
- <node label="LogAxis" app="charts/LogAxisExample" />
- <node label="PieChart" app="charts/PieChartExample" />
- <node label="PlotChart" app="charts/PlotChartExample" />
+ <node label="AreaChart" app="mx/charts/Line_AreaChartExample" />
+ <node label="AxisRenderer" app="mx/charts/HLOCChartExample" />
+ <node label="BarChart" app="mx/charts/Column_BarChartExample" />
+ <node label="BubbleChart" app="mx/charts/BubbleChartExample" />
+ <node label="CandlestickChart" app="mx/charts/CandlestickChartExample" />
+ <node label="CategoryAxis" app="mx/charts/HLOCChartExample" />
+ <node label="ColumnChart" app="mx/charts/Column_BarChartExample" />
+ <node label="DateTimeAxis" app="mx/charts/DateTimeAxisExample" />
+ <node label="GridLines" app="mx/charts/GridLinesExample" />
+ <node label="HLOCChart" app="mx/charts/HLOCChartExample" />
+ <node label="Legend" app="mx/charts/PlotChartExample" />
+ <node label="LinearAxis" app="mx/charts/HLOCChartExample" />
+ <node label="LineChart" app="mx/charts/Line_AreaChartExample" />
+ <node label="LogAxis" app="mx/charts/LogAxisExample" />
+ <node label="PieChart" app="mx/charts/PieChartExample" />
+ <node label="PlotChart" app="mx/charts/PlotChartExample" />
</node>
<node label="Chart Series">
- <node label="AreaSeries" app="charts/Line_AreaChartExample" />
- <node label="BarSeries" app="charts/Column_BarChartExample" />
- <node label="BubbleSeries" app="charts/BubbleChartExample" />
- <node label="CandlestickSeries" app="charts/CandlestickChartExample" />
- <node label="ColumnSeries" app="charts/Column_BarChartExample" />
- <node label="HLOCSeries" app="charts/HLOCChartExample" />
- <node label="LineSeries" app="charts/Line_AreaChartExample" />
- <node label="PieSeries" app="charts/PieChartExample" />
- <node label="PlotSeries" app="charts/PlotChartExample" />
+ <node label="AreaSeries" app="mx/charts/Line_AreaChartExample" />
+ <node label="BarSeries" app="mx/charts/Column_BarChartExample" />
+ <node label="BubbleSeries" app="mx/charts/BubbleChartExample" />
+ <node label="CandlestickSeries" app="mx/charts/CandlestickChartExample" />
+ <node label="ColumnSeries" app="mx/charts/Column_BarChartExample" />
+ <node label="HLOCSeries" app="mx/charts/HLOCChartExample" />
+ <node label="LineSeries" app="mx/charts/Line_AreaChartExample" />
+ <node label="PieSeries" app="mx/charts/PieChartExample" />
+ <node label="PlotSeries" app="mx/charts/PlotChartExample" />
</node>
= <node label="Chart Effects">
- <node label="SeriesInterpolate" app="charts/SeriesInterpolateExample" />
- <node label="SeriesSlide" app="charts/SeriesSlideExample" />
- <node label="SeriesZoom" app="charts/SeriesZoomExample" />
+ <node label="SeriesInterpolate" app="mx/charts/SeriesInterpolateExample" />
+ <node label="SeriesSlide" app="mx/charts/SeriesSlideExample" />
+ <node label="SeriesZoom" app="mx/charts/SeriesZoomExample" />
</node>
</node>
<node label="AdancedDataGrid">
- <node label="AdvancedDataGrid" app="controls/AdvancedDataGridExample" />
+ <node label="AdvancedDataGrid" app="mx/controls/AdvancedDataGridExample" />
</node>
<node label="OLAPDataGrid">
- <node label="OLAPDataGrid" app="controls/OLAPDataGridExample" />
+ <node label="OLAPDataGrid" app="mx/controls/OLAPDataGridExample" />
</node>
<node label="Printing">
- <node label="ADG Printing" app="printing/AdvancedPrintDataGridExample" />
+ <node label="ADG Printing" app="mx/printing/AdvancedPrintDataGridExample" />
</node>
</node>
</node>
<node label="Spark Framework Components">
+ <node label="Advanced CSS">
+ <node label="Descendant Selector" app="spark/css/CSSDescendantSelectorExample" />
+ <node label="Type + Class Selector" app="spark/css/CSSTypeClassSelectorExample" />
+ </node>
+ <node label="Item Renderers">
+ <node label="Scale Image" app="spark/itemRenderers/ItemRenderer1Example" />
+ <node label="3D Rotate" app="spark/itemRenderers/ItemRenderer2Example" />
+ </node>
+ <node label="Effects">
+ <node label="Move 3D" app="spark/effects/Move3DExample" />
+ </node>
+ <node label="Visual Components">
+ <node label="Containers">
+ <node label="HGroup" app="spark/containers/SampleHGroup" />
+ <node label="VGroup" app="spark/containers/SampleVGroup" />
+ <node label="Vertical Horizontal Align" app="spark/containers/SampleVerticalHorizontalAlign" />
+ </node>
+ <node label="FXG">
+ <node label="Image" app="spark/fxg/BitmapImageExample" />
+ <node label="Elipse" app="spark/fxg/EclipseExample" />
+ <node label="Line" app="spark/fxg/LineExample" />
+ <node label="Rectangle" app="spark/fxg/RectExample" />
+ <node label="RichText" app="spark/fxg/RichTextExample" />
+ </node>
+ <node label="General Controls">
+ <node label="ComboBox" app="spark/controls/ComboBoxExample" />
+ <node label="DataGroup" app="spark/controls/DataGroupExample" />
+ <node label="Menu" app="spark/controls/MenuExample" />
+ <node label="Rich Editable Text" app="spark/controls/RichEditableTextExample" />
+ </node>
+ <node label="Layouts">
+ <node label="Animated" app="spark/layouts/CustomLayoutAnimatedExample" />
+ <node label="Baseline" app="spark/layouts/CustomLayoutHBaselineExample" />
+ <node label="Image Wheel" app="spark/layouts/CustomLayoutFlickrWheelExample" />
+ <node label="Text Flow" app="spark/layouts/CustomLayoutFlowExample" />
+ </node>
+ </node>
</node>
</node>
</compTree>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml
new file mode 100644
index 0000000..1e76815
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleHGroup.mxml
@@ -0,0 +1,98 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
+
+ <fx:Declarations>
+ <!-- Place non-visual elements (e.g., services, value objects) here -->
+ </fx:Declarations>
+
+ <fx:Script>
+ <![CDATA[
+ import skins.TDFPanelSkin;
+
+ private function applyProperties():void
+ {
+ this.mainHGroup.paddingTop = this.padTop.value;
+ this.mainHGroup.paddingLeft = this.padLeft.value;
+ this.mainHGroup.paddingRight = this.padRight.value;
+ this.mainHGroup.paddingBottom = this.padBottom.value;
+ this.mainHGroup.gap = this.gap.value;
+ }
+ ]]>
+ </fx:Script>
+
+ <s:Panel skinClass="skins.TDFPanelSkin" title="HGroup" width="100%" height="100%">
+
+ <s:HGroup left="300" top="25" id="mainHGroup">
+ <s:Rect width="100" height="75">
+ <s:fill>
+ <s:SolidColor color="0xd54f4f"/>
+ </s:fill>
+ </s:Rect>
+ <s:Rect width="100" height="75">
+ <s:fill>
+ <s:SolidColor color="0x2f977d"/>
+ </s:fill>
+ </s:Rect>
+ <s:Rect width="100" height="75">
+ <s:fill>
+ <s:SolidColor color="0xfffca2"/>
+ </s:fill>
+ </s:Rect>
+ </s:HGroup>
+
+ <s:VGroup top="10" left="15">
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Gap:"/>
+ <s:NumericStepper id="gap" maximum="400"/>
+ </s:HGroup>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Padding Top:"/>
+ <s:NumericStepper id="padTop" maximum="400"/>
+ </s:HGroup>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Padding Left:"/>
+ <s:NumericStepper id="padLeft" maximum="400"/>
+ </s:HGroup>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Padding Right:"/>
+ <s:NumericStepper id="padRight" maximum="400"/>
+ </s:HGroup>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Padding Bottom:"/>
+ <s:NumericStepper id="padBottom" maximum="400"/>
+ </s:HGroup>
+
+ <s:Button label="Apply Properties" click="this.applyProperties()"/>
+ <s:Label width="75%" horizontalCenter="0" color="#323232"
+ text="The HGroup container is an instance of the Group container that uses the HorizontalLayout class. You can use
+ the properties of the HGroup class to modify the characteristics of the HorizontalLayout class."/>
+ </s:VGroup>
+
+
+ </s:Panel>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml
new file mode 100644
index 0000000..4ebd23d
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVGroup.mxml
@@ -0,0 +1,97 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
+
+ <fx:Declarations>
+ <!-- Place non-visual elements (e.g., services, value objects) here -->
+ </fx:Declarations>
+
+ <fx:Script>
+ <![CDATA[
+ import skins.TDFPanelSkin;
+
+ private function applyProperties():void
+ {
+ this.mainVGroup.paddingTop = this.padTop.value;
+ this.mainVGroup.paddingLeft = this.padLeft.value;
+ this.mainVGroup.paddingRight = this.padRight.value;
+ this.mainVGroup.paddingBottom = this.padBottom.value;
+ this.mainVGroup.gap = this.gap.value;
+ }
+ ]]>
+ </fx:Script>
+
+ <s:Panel skinClass="skins.TDFPanelSkin" title="VGroup Sample" width="100%" height="100%">
+ <s:HGroup width="100%" height="100%" top="10" left="10">
+ <s:VGroup top="10" left="10" width="172">
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Gap:"/>
+ <s:NumericStepper id="gap" maximum="400"/>
+ </s:HGroup>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Padding Top:"/>
+ <s:NumericStepper id="padTop" maximum="400"/>
+ </s:HGroup>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Padding Left:"/>
+ <s:NumericStepper id="padLeft" maximum="400"/>
+ </s:HGroup>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Padding Right:"/>
+ <s:NumericStepper id="padRight" maximum="400"/>
+ </s:HGroup>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Padding Bottom:"/>
+ <s:NumericStepper id="padBottom" maximum="400"/>
+ </s:HGroup>
+
+ <s:Button label="Apply Properties" click="this.applyProperties()"/>
+ </s:VGroup>
+ <s:VGroup left="300" top="10" id="mainVGroup">
+ <s:Rect width="100" height="75">
+ <s:fill>
+ <s:SolidColor color="0xd54f4f"/>
+ </s:fill>
+ </s:Rect>
+ <s:Rect width="100" height="75">
+ <s:fill>
+ <s:SolidColor color="0x2f977d"/>
+ </s:fill>
+ </s:Rect>
+ <s:Rect width="100" height="75">
+ <s:fill>
+ <s:SolidColor color="0xfffca2"/>
+ </s:fill>
+ </s:Rect>
+ </s:VGroup>
+ <mx:Spacer width="10"/>
+ <s:Label width="40%" horizontalCenter="0" color="#323232"
+ text="The VGroup container is an instance of the Group container that uses the VerticalLayout class. You can use the properties of the VGroup class to modify the characteristics of the VerticalLayout class." height="100%"/>
+
+ </s:HGroup>
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml
new file mode 100644
index 0000000..a30bc57
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/SampleVerticalHorizontalAlign.mxml
@@ -0,0 +1,83 @@
+<?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.
+
+-->
+<!-- http://evtimmy.com/2010/01/verticalalign-for-vgroup-and-horizontalalign-for-hgroup/ -->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="0x323232" color="0xFFFFFF" viewSourceURL="srcview/index.html">
+
+ <s:VGroup verticalAlign="middle" width="526" height="230" top="57" left="10">
+ <s:HGroup verticalAlign="middle" height="100%" color="0x000000">
+ <s:Label text="VGroup" rotation="-90" color="0xFF0000"/>
+ <s:BorderContainer minWidth="0" minHeight="0">
+ <s:VGroup height="{heightSlider.value}"
+ verticalAlign="{verticalAlignChoice.selectedItem}"
+ gap="0">
+ <s:Label text="Lorem ipsum dolor sit amet, " height="22" verticalAlign="middle"/>
+ <s:Label text="consectetur adipiscing elit." height="22" verticalAlign="middle"/>
+
+ </s:VGroup>
+ </s:BorderContainer>
+
+ <s:Label text="VGroup in Scroller" rotation="-90" color="0xFF0000"/>
+ <s:BorderContainer minWidth="0" minHeight="0">
+ <s:Scroller height="{heightSlider.value}">
+ <s:VGroup verticalAlign="{verticalAlignChoice.selectedItem}"
+ gap="0">
+ <s:Label text="Lorem ipsum dolor sit amet, " height="22" verticalAlign="middle"/>
+ <s:Label text="consectetur adipiscing elit." height="22" verticalAlign="middle"/>
+
+ </s:VGroup>
+ </s:Scroller>
+ </s:BorderContainer>
+
+ <s:Label text="List" rotation="-90" color="0xFF0000"/>
+
+ <s:List minWidth="0" minHeight="0" height="{heightSlider.value+2}">
+ <s:layout>
+ <s:VerticalLayout requestedMinRowCount="0"
+ verticalAlign="{verticalAlignChoice.selectedItem}"
+ gap="0"/>
+ </s:layout>
+ <s:ArrayCollection>
+ <fx:String>Lorem ipsum dolor sit amet, </fx:String>
+ <fx:String>consectetur adipiscing elit.</fx:String>
+ </s:ArrayCollection>
+ </s:List>
+ </s:HGroup>
+ </s:VGroup>
+
+ <s:HGroup horizontalAlign="center" paddingTop="10" paddingLeft="10">
+ <s:HGroup>
+ <s:Label text="VerticalAlign:"/>
+ <s:DropDownList id="verticalAlignChoice" requireSelection="true" color="0x000000">
+ <s:dataProvider>
+ <s:ArrayCollection source="{'top bottom middle'.split(' ')}"/>
+ </s:dataProvider>
+ </s:DropDownList>
+ </s:HGroup>
+ <s:HGroup>
+ <s:Label text="Height:"/>
+ <s:HSlider id="heightSlider" minimum="0" maximum="425" value="100" width="300"/>
+ </s:HGroup>
+ </s:HGroup>
+ <s:Label right="7" top="26" width="200"
+ text="This sample show the use of the verticalAlign and horizontalAlign properties for use with a VGroup and
+HGroup accordingly."/>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/containers/skins/TDFPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/containers/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/containers/skins/TDFPanelSkin.mxml
new file mode 100644
index 0000000..f9151dc
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/containers/skins/TDFPanelSkin.mxml
@@ -0,0 +1,171 @@
+<?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.
+
+-->
+
+
+<!--- Custom Spark Panel Skin created for Tour de Flex.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
+ blendMode.disabled="layer">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Panel")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ /* Define the skin elements that should not be colorized.
+ For panel, border and title backround are skinned, but the content area and title text are not. */
+ static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+ static private const contentFill:Array = [];
+
+ /**
+ * @inheritDoc
+ */
+ override public function get contentItems():Array {return contentFill};
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ <s:State name="normalWithControlBar" />
+ <s:State name="disabledWithControlBar" />
+ </s:states>
+
+ <!-- drop shadow -->
+ <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11"
+ angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+
+ <!-- layer 1: border -->
+ <s:Rect left="0" right="0" top="0" bottom="0">
+ <s:stroke>
+ <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 2: background fill -->
+ <!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
+ <s:Rect left="0" right="0" bottom="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: contents -->
+ <!--- contains the vertical stack of titlebar content and controlbar -->
+ <s:Group left="1" right="1" top="1" bottom="1" >
+ <s:layout>
+ <s:VerticalLayout gap="0" horizontalAlign="justify" />
+ </s:layout>
+
+ <s:Group id="topGroup" >
+ <!-- layer 0: title bar fill -->
+ <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
+ <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
+ <s:fill>
+ <s:SolidColor color="0x000000" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: title bar highlight -->
+ <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xEAEAEA" />
+ <s:GradientEntry color="0xD9D9D9" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- layer 2: title bar divider -->
+ <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+ <s:fill>
+ <s:SolidColor color="0xC0C0C0" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: text -->
+ <!--- Defines the appearance of the PanelSkin class's title bar. -->
+ <!-- Note: The title text display has been slightly modified for Tour de Flex. -->
+ <s:Label id="titleDisplay" lineBreak="explicit"
+ left="9" top="1" bottom="0" minHeight="30"
+ verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
+ </s:Label>
+ </s:Group>
+
+ <!--
+ Note: setting the minimum size to 0 here so that changes to the host component's
+ size will not be thwarted by this skin part's minimum size. This is a compromise,
+ more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+ -->
+ <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+ </s:Group>
+
+ <s:Group id="bottomGroup" minWidth="0" minHeight="0"
+ includeIn="normalWithControlBar, disabledWithControlBar" >
+
+ <!-- layer 0: control bar background -->
+ <!-- Note: We are skinning this to be the gradient in case we do specify control
+ bar content, but it will only display if there's a controlBarContent
+ property specified.-->
+ <s:Rect left="0" right="0" bottom="0" top="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: control bar divider line -->
+ <s:Rect left="0" right="0" top="0" height="1" >
+ <s:fill>
+ <s:SolidColor color="0xCDCDCD" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 2: control bar -->
+ <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+ </s:Group>
+ </s:Group>
+ </s:Group>
+</s:SparkSkin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml
new file mode 100644
index 0000000..7276b06
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/ComboBoxExample.mxml
@@ -0,0 +1,66 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.ArrayCollection;
+
+ import skins.TDFPanelSkin;
+
+ [Bindable]
+ public var cards:ArrayCollection = new ArrayCollection(
+ [ {label:"Visa", data:1},
+ {label:"MasterCard", data:2},
+ {label:"American Express", data:3} ]);
+
+ private function changeHandler(event:Event):void {
+
+ myLabel.text = "You selected: " + ComboBox(event.target).selectedItem.label;
+ myData.text = "Data: " + ComboBox(event.target).selectedItem.data;
+ }
+ ]]>
+ </fx:Script>
+
+ <s:Panel title="ComboBox Sample" skinClass="skins.TDFPanelSkin"
+ height="100%" width="100%">
+
+ <s:HGroup top="20" horizontalCenter="0" >
+ <s:VGroup>
+ <s:Label width="200" color="0x336699" text="Select credit card type:"/>
+ <s:ComboBox dataProvider="{cards}" width="150" color="0x000000"
+ change="changeHandler(event);" selectedIndex="0"/>
+
+ </s:VGroup>
+ <mx:Spacer width="20"/>
+ <s:VGroup>
+ <s:Label id="myLabel" text="You selected:" fontWeight="bold"/>
+ <s:Label id="myData" text="Data:" fontWeight="bold"/>
+ </s:VGroup>
+
+ </s:HGroup>
+ <s:Label color="#323232" width="75%" bottom="20" horizontalCenter="0"
+ text="The ComboBox component is similar to a DropDownList but includes a TextInput instead of a Label. A user can type into the TextInput and the drop-down will scroll to and highlight the closest match.
+Users are allowed to type in an item not found in the dataProvider. With this behavior, a ComboBox acts as a list of suggested values, while a DropDownList acts as a list of possible values. "/>
+
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml
new file mode 100644
index 0000000..28c1e46
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/DataGroupExample.mxml
@@ -0,0 +1,134 @@
+<?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.
+
+-->
+<!-- Simple example to demonstrate a DataGroup with a virtualized layout.
+ Written by Flex 4 Team
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.ArrayCollection;
+
+ import skins.TDFPanelSkin;
+
+ public function generateDataProvider(nItems:int = 10000):ArrayCollection {
+ var ac:ArrayCollection = new ArrayCollection();
+
+ var sources:Array = ['San Francisco', 'New York', 'Vancouver', 'Denver', 'Hong Kong'];
+ var destinations:Array = ['London', 'Houston', 'Orlando', 'Los Angeles', 'Seattle'];
+ var airlines:Array = ['Green Jet', 'Orange Jet', 'Yellow Jet', 'Blue Jet', 'Red Jet'];
+ var dates:Array = ['March 23-29', 'April 23-29', 'May 1-3', 'May 10-13', 'June 6'];
+
+ // create a collection of random flights
+ for (var i:int = 0; i < nItems; i++){
+ var temp:Object = new Object();
+ var random:int = Math.random() * 5;
+
+ temp.start = sources[random];
+ temp.end = destinations[random];
+ temp.details = dates[random] + ', ' + airlines[random] + " (Flight " + i + ")";
+ ac.addItem(temp);
+ }
+
+ return ac;
+
+ }
+ ]]>
+ </fx:Script>
+
+ <s:Panel title="DataGroup with Virtual Layout"
+ width="100%" height="100%"
+ skinClass="skins.TDFPanelSkin">
+
+ <s:Scroller horizontalCenter="0" top="10">
+ <s:DataGroup width="600" height="123" clipAndEnableScrolling="true" dataProvider="{generateDataProvider(9000)}">
+ <s:layout>
+ <s:VerticalLayout gap="1" useVirtualLayout="true" />
+ </s:layout>
+ <s:itemRenderer>
+ <fx:Component>
+ <s:ItemRenderer width="600" height="20">
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="hovered" />
+ <s:State name="selected" />
+ </s:states>
+
+ <fx:Script>
+ <![CDATA[
+ override public function set data(value:Object):void {
+ super.data = value;
+
+ if (data == null) // a renderer's data is set to null when it goes out of view
+ return;
+
+ txtStart.text = data.start;
+ txtEnd.text = data.end;
+ txtDetails.text = data.details;
+ }
+ ]]>
+ </fx:Script>
+
+ <s:transitions>
+ <mx:Transition fromState="normal" toState="hovered">
+ <s:Animate target="{flightPlan}" duration="200">
+ <s:SimpleMotionPath property="width" />
+ </s:Animate>
+ </mx:Transition>
+ <mx:Transition fromState="hovered" toState="normal">
+ <s:Animate target="{flightPlan}" duration="200" >
+ <s:SimpleMotionPath property="width" />
+ </s:Animate>
+ </mx:Transition>
+ </s:transitions>
+
+ <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#E1ECF4" />
+ </s:fill>
+ </s:Rect>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Group id="flightPlan" height="20" width="300" width.hovered="330">
+ <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
+ <s:fill>
+ <s:SolidColor color="#65A3CE" color.hovered="#65A3FF" />
+ </s:fill>
+ </s:Rect>
+ <s:Label id="txtStart" color="#FFFFFF" fontWeight="bold" left="20" verticalCenter="2" />
+ <s:Label id="txtEnd" color="#FFFFFF" fontWeight="bold" right="20" verticalCenter="2" textAlign="right" />
+ </s:Group>
+ <s:Label id="txtDetails" color="#32353f" fontSize="11" />
+ </s:HGroup>
+ </s:ItemRenderer>
+ </fx:Component>
+ </s:itemRenderer>
+ </s:DataGroup>
+ </s:Scroller>
+ <s:Label width="90%" horizontalCenter="0" color="#323232" bottom="40"
+ text="Apache Flex DataGroups support virtualization. Virtualization is an optimization for layout and rendering
+that reduces the footprint and startup time for containers with large numbers of items. This sample shows how
+virtualization can be achieved by only creating enough objects for the items currently being displayed. The
+useVirtualLayout property should be set on the layout object to achieve virtualization."/>
+ </s:Panel>
+
+</s:Application>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
new file mode 100644
index 0000000..d2e6d08
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/MenuExample.mxml
@@ -0,0 +1,90 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+ <fx:Script>
+ <![CDATA[
+ import mx.controls.Menu;
+ import mx.events.FlexEvent;
+ import mx.events.MenuEvent;
+
+ import skins.TDFPanelSkin;
+
+ protected var myMenu:Menu;
+
+ protected function showHandler(event:MouseEvent):void
+ {
+ myMenu = Menu.createMenu(null, myMenuData, false);
+ myMenu.labelField="@label";
+ myMenu.show(90, 35);
+ myMenu.addEventListener(MenuEvent.CHANGE,onMenuChange);
+ }
+
+ protected function hideHandler(event:MouseEvent):void
+ {
+ myMenu.hide();
+ }
+
+ protected function onMenuChange(event:MenuEvent):void
+ {
+ lblSelected.text = event.label;
+ }
+
+ ]]>
+ </fx:Script>
+
+
+ <fx:Declarations>
+ <fx:XML format="e4x" id="myMenuData">
+ <root>
+ <menuitem label="MenuItem A" >
+ <menuitem label="SubMenuItem A-1" enabled="false"/>
+ <menuitem label="SubMenuItem A-2"/>
+ </menuitem>
+ <menuitem label="MenuItem B" type="check" toggled="true"/>
+ <menuitem label="MenuItem C" type="check" toggled="false"/>
+ <menuitem type="separator"/>
+ <menuitem label="MenuItem D" >
+ <menuitem label="SubMenuItem D-1" type="radio"
+ groupName="one"/>
+ <menuitem label="SubMenuItem D-2" type="radio"
+ groupName="one" toggled="true"/>
+ <menuitem label="SubMenuItem D-3" type="radio"
+ groupName="one"/>
+ </menuitem>
+ </root>
+ </fx:XML>
+ </fx:Declarations>
+
+ <s:Panel title="Menu Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+ <s:HGroup bottom="15" horizontalCenter="0" verticalAlign="middle">
+ <s:Button label="Show Menu" click="showHandler(event)" />
+ <s:Button label="Hide Menu" click="hideHandler(event)" />
+ <s:Label text="Menu Item Selected:" fontWeight="bold" fontSize="12" color="0x336699"/>
+ <s:Label id="lblSelected" />
+ </s:HGroup>
+ <s:Label width="220" color="#323232" top="15" right="50"
+ text="The Menu control is a pop-up control that contains a menu of individually selectable choices. You use ActionScript
+ to create a Menu control that pops up in response to a user action, typically as part of an event listener."/>
+
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
new file mode 100644
index 0000000..e9f419d
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/RichEditableTextExample.mxml
@@ -0,0 +1,100 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ preinitialize="init();" viewSourceURL="srcview/index.html">
+
+ <!-- Based on samples from Peter DeHaan's blog: http://blog.flexexamples.com/ -->
+
+ <fx:Script>
+ import flashx.textLayout.elements.Configuration;
+ import flashx.textLayout.elements.TextFlow;
+ import flashx.textLayout.formats.TextDecoration;
+ import flashx.textLayout.formats.TextLayoutFormat;
+
+ import spark.events.TextOperationEvent;
+
+ [Bindable]
+ protected static var lineCount:uint = 0;
+
+ protected function richEdTxt_changeHandler(evt:TextOperationEvent):void {
+ lineCount = richEdTxt.mx_internal::textContainerManager.numLines;
+ lineCnt.text = lineCount.toString();
+ }
+
+ protected function init():void {
+ var cfg:Configuration = TextFlow.defaultConfiguration;
+
+ var normalTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkNormalFormat);
+ normalTLF.color = 0xFF0000;
+
+ var hoverTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkHoverFormat);
+ hoverTLF.color = 0xFF00FF;
+ hoverTLF.textDecoration = TextDecoration.NONE;
+
+ var activeTLF:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkActiveFormat);
+ activeTLF.color = 0x00FF00;
+
+ cfg.defaultLinkNormalFormat = normalTLF;
+ cfg.defaultLinkHoverFormat = hoverTLF;
+ cfg.defaultLinkActiveFormat = activeTLF;
+ TextFlow.defaultConfiguration = cfg;
+ }
+ </fx:Script>
+ <fx:Style>
+ @namespace s "library://ns.adobe.com/flex/spark";
+ @namespace mx "library://ns.adobe.com/flex/mx";
+
+ s|VGroup s|Label {
+ fontWeight: "bold";
+ }
+ </fx:Style>
+ <s:Panel width="100%" height="100%"
+ skinClass="skins.TDFPanelSkin"
+ title="RichEditableText Sample">
+
+ <s:VGroup id="vgrp" width="100%" height="100%" top="10" left="15">
+ <s:HGroup>
+ <s:Label text="Uneditable text with formatted link:"/>
+ <s:RichEditableText editable="false">
+ <s:content>
+ <s:p>The quick brown <s:a href="http://www.adobe.com/">fox</s:a> jumps over the lazy dog.</s:p>
+ </s:content>
+ </s:RichEditableText>
+ </s:HGroup>
+ <s:HGroup>
+ <s:Label text="Editable text:"/>
+ <s:RichEditableText id="richEdTxt" widthInChars="20" heightInLines="10"
+ change="richEdTxt_changeHandler(event);" backgroundColor="0xCCCCCC" text="Hello world!">
+ </s:RichEditableText>
+ </s:HGroup>
+ <s:HGroup>
+ <s:Label text="Line Count of editable text:"/>
+ <s:Label id="lineCnt"/>
+ </s:HGroup>
+
+ </s:VGroup>
+ <s:Label width="266" height="180" right="10" top="38" color="0x323232" text="RichEditableText is a low-level UIComponent for displaying, scrolling, selecting, and editing richly-formatted text.
+The rich text can contain clickable hyperlinks and inline graphics that are either embedded or loaded from URLs. RichEditableText does not have scrollbars, but it implements
+the IViewport interface for programmatic scrolling so that it can be controlled by a Scroller, which does provide scrollbars. It also supports vertical scrolling with the mouse wheel." />
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/controls/skins/TDFPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/controls/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/TDFPanelSkin.mxml
new file mode 100644
index 0000000..f9151dc
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/controls/skins/TDFPanelSkin.mxml
@@ -0,0 +1,171 @@
+<?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.
+
+-->
+
+
+<!--- Custom Spark Panel Skin created for Tour de Flex.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
+ blendMode.disabled="layer">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Panel")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ /* Define the skin elements that should not be colorized.
+ For panel, border and title backround are skinned, but the content area and title text are not. */
+ static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+ static private const contentFill:Array = [];
+
+ /**
+ * @inheritDoc
+ */
+ override public function get contentItems():Array {return contentFill};
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ <s:State name="normalWithControlBar" />
+ <s:State name="disabledWithControlBar" />
+ </s:states>
+
+ <!-- drop shadow -->
+ <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11"
+ angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+
+ <!-- layer 1: border -->
+ <s:Rect left="0" right="0" top="0" bottom="0">
+ <s:stroke>
+ <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 2: background fill -->
+ <!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
+ <s:Rect left="0" right="0" bottom="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: contents -->
+ <!--- contains the vertical stack of titlebar content and controlbar -->
+ <s:Group left="1" right="1" top="1" bottom="1" >
+ <s:layout>
+ <s:VerticalLayout gap="0" horizontalAlign="justify" />
+ </s:layout>
+
+ <s:Group id="topGroup" >
+ <!-- layer 0: title bar fill -->
+ <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
+ <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
+ <s:fill>
+ <s:SolidColor color="0x000000" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: title bar highlight -->
+ <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xEAEAEA" />
+ <s:GradientEntry color="0xD9D9D9" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- layer 2: title bar divider -->
+ <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+ <s:fill>
+ <s:SolidColor color="0xC0C0C0" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: text -->
+ <!--- Defines the appearance of the PanelSkin class's title bar. -->
+ <!-- Note: The title text display has been slightly modified for Tour de Flex. -->
+ <s:Label id="titleDisplay" lineBreak="explicit"
+ left="9" top="1" bottom="0" minHeight="30"
+ verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
+ </s:Label>
+ </s:Group>
+
+ <!--
+ Note: setting the minimum size to 0 here so that changes to the host component's
+ size will not be thwarted by this skin part's minimum size. This is a compromise,
+ more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+ -->
+ <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+ </s:Group>
+
+ <s:Group id="bottomGroup" minWidth="0" minHeight="0"
+ includeIn="normalWithControlBar, disabledWithControlBar" >
+
+ <!-- layer 0: control bar background -->
+ <!-- Note: We are skinning this to be the gradient in case we do specify control
+ bar content, but it will only display if there's a controlBarContent
+ property specified.-->
+ <s:Rect left="0" right="0" bottom="0" top="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: control bar divider line -->
+ <s:Rect left="0" right="0" top="0" height="1" >
+ <s:fill>
+ <s:SolidColor color="0xCDCDCD" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 2: control bar -->
+ <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+ </s:Group>
+ </s:Group>
+ </s:Group>
+</s:SparkSkin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml
new file mode 100644
index 0000000..e66c90e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSDescendantSelectorExample.mxml
@@ -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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" width="680" height="275" viewSourceURL="srcview/index.html">
+
+ <fx:Style>
+ @namespace s "library://ns.adobe.com/flex/spark";
+ @namespace mx "library://ns.adobe.com/flex/mx";
+
+ s|ButtonBar s|ToggleButton:upAndSelected,
+ s|ButtonBar s|ToggleButton:overAndSelected,
+ s|ButtonBar s|ToggleButton:downAndSelected,
+
+ s|ButtonBar s|ToggleButton:disabledAndSelected {
+ baseColor: #FF6633;
+ color: #FFFFCC;
+ }
+
+ s|ButtonBar {
+ baseColor: #FFFFCC;
+ }
+
+ s|Button {
+ baseColor: #000000;
+ color: #269d6c;
+ }
+
+ s|VGroup s|Label {
+ fontWeight: "bold";
+ color: #336699;
+ }
+
+ s|VGroup mx|Text {
+ color: #0A436B;
+ fontWeight: "bold";
+ }
+ </fx:Style>
+
+ <s:Panel title="Advanced CSS: Descendant Selector Example" height="100%" width="100%" skinClass="skins.TDFPanelSkin">
+ <s:Group width="50%" height="50%">
+ <s:ButtonBar id="viewMenu" requireSelection="true" x="10" y="10">
+ <s:dataProvider>
+ <mx:ArrayCollection source="['Home', 'Events', 'Rooms', 'Dining']" />
+ </s:dataProvider>
+ </s:ButtonBar>
+ <s:Button label="Click Me!" x="12" y="48"/>
+ <s:Label x="10" y="90" text="Only text in the VGroup below has bold content." />
+ <s:VGroup x="10" y="109">
+ <s:Label text="This text component has the style setting referring to the Spark Label component." />
+ <mx:Text text="This text component has a style setting with a reference to a Halo Text component."/>
+ </s:VGroup>
+ </s:Group>
+ <s:Label width="200" color="0x323232" text="Descendant selectors can be used to specifically qualify the component you
+want to style via the namespace and component. See the Style settings in the code for reference." x="440" y="10"/>
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml
new file mode 100644
index 0000000..3a0b598
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/css/CSSTypeClassSelectorExample.mxml
@@ -0,0 +1,72 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" width="680" height="275">
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+
+ List.blueTheme {
+ selectionColor: #7FACF6;
+ }
+
+ List.greenTheme {
+ selectionColor: #00CF3F;
+ }
+
+ Panel.blueTheme {
+ contentBackgroundColor: #9abbdc;
+
+ }
+
+ .blueTheme {
+ focusColor: #3D73EF;
+ symbolColor: #2A3982;
+
+ }
+ </fx:Style>
+
+ <s:Panel title="Advanced CSS: Type+Class Selector Sample" height="100%" width="100%"
+ styleName="blueTheme" skinClass="skins.TDFPanelSkin">
+ <s:HGroup horizontalCenter="0" top="15">
+ <s:Label width="270" color="0x323232" text="This Panel has a styleName, but the Lists and Panel have some different styles defined in a Type+Class selector. See the style section for the styles applied."/>
+ <s:ComboBox selectedIndex="0">
+ <s:ArrayCollection source="[Monday,Tuesday,Wednesday,Thursday,Friday]"/>
+ </s:ComboBox>
+ <s:VGroup horizontalCenter="0" top="8">
+ <s:Label text="Text:"/>
+ <s:TextInput text="some text" styleName="blueTheme"/>
+ <s:Label text="Units:"/>
+ <s:NumericStepper styleName="blueTheme"/>
+ <s:List id="carList" selectedIndex="2" styleName="blueTheme">
+ <s:dataProvider>
+ <mx:ArrayCollection source="[Civic, M3, Prius, Blazer, Tahoe]" />
+ </s:dataProvider>
+ </s:List>
+ </s:VGroup>
+ <s:List id="fruitList" selectedIndex="2" styleName="greenTheme">
+ <s:dataProvider>
+ <mx:ArrayCollection source="[Apples,Bananas,Grapes]" />
+ </s:dataProvider>
+ </s:List>
+ </s:HGroup>
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml
new file mode 100644
index 0000000..539c4fb
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/css/skins/TDFPanelSkin.mxml
@@ -0,0 +1,171 @@
+<?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.
+
+-->
+
+
+<!--- Custom Spark Panel Skin created for Tour de Flex.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
+ blendMode.disabled="layer">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Panel")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ /* Define the skin elements that should not be colorized.
+ For panel, border and title backround are skinned, but the content area and title text are not. */
+ static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+ static private const contentFill:Array = [];
+
+ /**
+ * @inheritDoc
+ */
+ override public function get contentItems():Array {return contentFill};
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ <s:State name="normalWithControlBar" />
+ <s:State name="disabledWithControlBar" />
+ </s:states>
+
+ <!-- drop shadow -->
+ <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11"
+ angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+
+ <!-- layer 1: border -->
+ <s:Rect left="0" right="0" top="0" bottom="0">
+ <s:stroke>
+ <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 2: background fill -->
+ <!-- This layer was modified for Tour de Flex samples to have a gradient border at the bottom. -->
+ <s:Rect left="0" right="0" bottom="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: contents -->
+ <!--- contains the vertical stack of titlebar content and controlbar -->
+ <s:Group left="1" right="1" top="1" bottom="1" >
+ <s:layout>
+ <s:VerticalLayout gap="0" horizontalAlign="justify" />
+ </s:layout>
+
+ <s:Group id="topGroup" >
+ <!-- layer 0: title bar fill -->
+ <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
+ <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
+ <s:fill>
+ <s:SolidColor color="0x000000" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: title bar highlight -->
+ <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xEAEAEA" />
+ <s:GradientEntry color="0xD9D9D9" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- layer 2: title bar divider -->
+ <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+ <s:fill>
+ <s:SolidColor color="0xC0C0C0" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: text -->
+ <!--- Defines the appearance of the PanelSkin class's title bar. -->
+ <!-- Note: The title text display has been slightly modified for Tour de Flex. -->
+ <s:Label id="titleDisplay" lineBreak="explicit"
+ left="9" top="1" bottom="0" minHeight="30"
+ verticalAlign="middle" fontWeight="bold" color="#E2E2E2"/>
+
+ </s:Group>
+
+ <!--
+ Note: setting the minimum size to 0 here so that changes to the host component's
+ size will not be thwarted by this skin part's minimum size. This is a compromise,
+ more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+ -->
+ <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+ </s:Group>
+
+ <s:Group id="bottomGroup" minWidth="0" minHeight="0"
+ includeIn="normalWithControlBar, disabledWithControlBar" >
+
+ <!-- layer 0: control bar background -->
+ <!-- Note: We are skinning this to be the gradient in case we do specify control
+ bar content, but it will only display if there's a controlBarContent
+ property specified.-->
+ <s:Rect left="0" right="0" bottom="0" top="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: control bar divider line -->
+ <s:Rect left="0" right="0" top="0" height="1" >
+ <s:fill>
+ <s:SolidColor color="0xCDCDCD" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 2: control bar -->
+ <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+ </s:Group>
+ </s:Group>
+ </s:Group>
+</s:SparkSkin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml
new file mode 100644
index 0000000..fda6db2
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/Move3DExample.mxml
@@ -0,0 +1,99 @@
+<?xml version="1.0"?>
+<!--
+
+ 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.
+
+-->
+<s:Application
+ xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:s="library://ns.adobe.com/flex/spark">
+
+ <fx:Style>
+ @namespace "library://ns.adobe.com/flex/spark";
+ Label {
+ baseColor: #000000;
+ fontFamily: "Arial";
+ fontWeight: "bold";
+ fontSize: "11";
+ advancedAntiAliasing: true;
+ }
+
+ </fx:Style>
+
+ <fx:Declarations>
+ <s:Move3D id="moveEffect" target="{targetImg}"
+ xFrom="{targetImg.x}" xBy="{Number(xVal.text)}"
+ yFrom="{targetImg.y}" yBy="{Number(yVal.text)}"
+ zFrom="{targetImg.z}" zBy="{Number(zVal.text)}"
+ duration="{duration.value}"
+ repeatCount="{repeatCnt.value}" repeatBehavior="{chkReverse.selected?'reverse':'loop'}"
+ effectStart="this.targetImg.alpha=.7" effectEnd="this.targetImg.alpha=1.0;"/>
+ </fx:Declarations>
+
+ <!-- Note: A custom panel skin is used for the Tour de Flex samples and is included in the
+ source tabs for each sample. -->
+ <s:Panel width="100%" height="100%"
+ horizontalCenter="0"
+ title="Move3D Effect Sample"
+ skinClass="skins.TDFPanelSkin">
+
+ <s:HGroup left="10" top="5" width="100%" height="100%" horizontalCenter="0">
+ <s:VGroup width="40%">
+
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Move X By" verticalAlign="bottom"/>
+ <s:TextInput id="xVal" text="40" widthInChars="3"/>
+ </s:HGroup>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Move Y By" verticalAlign="bottom"/>
+ <s:TextInput id="yVal" text="40" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Move Z By" verticalAlign="bottom"/>
+ <s:TextInput id="zVal" text="-150" widthInChars="3"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Repeat Num" verticalAlign="bottom"/>
+ <s:NumericStepper id="repeatCnt" width="35"
+ value="2" minimum="1"/>
+ </s:HGroup>
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Duration" verticalAlign="bottom"/>
+ <s:NumericStepper id="duration" width="58"
+ minimum="100" maximum="9999"
+ value="1000"
+ snapInterval="100" />
+ </s:HGroup>
+ <s:CheckBox id="chkReverse" label="Repeat in Reverse?" selected="true"/>
+ <s:Button id="playButton"
+ label="Move Image" click="moveEffect.play();"/>
+ </s:VGroup>
+ <s:HGroup horizontalCenter="0" height="30%" verticalAlign="middle" width="40%">
+ <s:BitmapImage id="targetImg" source="@Embed(source='assets/ApacheFlexLogo.png')"/>
+ </s:HGroup>
+ <s:VGroup top="0" right="5" horizontalAlign="right" width="30%">
+ <s:Label text="Move3D Effect Sample" fontSize="18" color="#B7B6B6"/>
+ <s:Label color="#323232" width="200" verticalAlign="justify"
+ text="The Move3D class moves a target object in three dimensions around the transform center. A scale of
+2.0 means the object has been magnified by a factor of 2, and a scale of 0.5 means the object has been
+reduced by a factor of 2. A scale value of 0.0 is invalid."/>
+ </s:VGroup>
+ </s:HGroup>
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexLogo.png
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexLogo.png b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexLogo.png
new file mode 100644
index 0000000..4ff037f
Binary files /dev/null and b/TourDeFlex/TourDeFlex3/src/spark/effects/assets/ApacheFlexLogo.png differ
[2/5] move some sample spark examples into the component explorer
Posted by jm...@apache.org.
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml
new file mode 100644
index 0000000..4b06e54
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/effects/skins/TDFPanelSkin.mxml
@@ -0,0 +1,170 @@
+<?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.
+
+-->
+
+
+<!--- Custom Spark Panel Skin created for Tour de Flex.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
+ blendMode.disabled="layer">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Panel")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ /* Define the skin elements that should not be colorized.
+ For panel, border and title backround are skinned, but the content area and title text are not. */
+ static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+ static private const contentFill:Array = [];
+
+ /**
+ * @inheritDoc
+ */
+ override public function get contentItems():Array {return contentFill};
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ <s:State name="normalWithControlBar" />
+ <s:State name="disabledWithControlBar" />
+ </s:states>
+
+ <!-- drop shadow -->
+ <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11"
+ angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+
+ <!-- layer 1: border -->
+ <s:Rect left="0" right="0" top="0" bottom="0">
+ <s:stroke>
+ <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 2: background fill -->
+ <s:Rect left="0" right="0" bottom="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: contents -->
+ <!--- contains the vertical stack of titlebar content and controlbar -->
+ <s:Group left="1" right="1" top="1" bottom="1" >
+ <s:layout>
+ <s:VerticalLayout gap="0" horizontalAlign="justify" />
+ </s:layout>
+
+ <s:Group id="topGroup" >
+ <!-- layer 0: title bar fill -->
+ <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
+ <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
+ <s:fill>
+ <s:SolidColor color="0x000000" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: title bar highlight -->
+ <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xEAEAEA" />
+ <s:GradientEntry color="0xD9D9D9" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- layer 2: title bar divider -->
+ <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+ <s:fill>
+ <s:SolidColor color="0xC0C0C0" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: text -->
+ <!--- Defines the appearance of the PanelSkin class's title bar. -->
+ <!-- Note: The title text display has been slightly modified for Tour de Flex. -->
+ <s:Label id="titleDisplay" lineBreak="explicit"
+ left="9" top="1" bottom="0" minHeight="30"
+ verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
+ </s:Label>
+ </s:Group>
+
+ <!--
+ Note: setting the minimum size to 0 here so that changes to the host component's
+ size will not be thwarted by this skin part's minimum size. This is a compromise,
+ more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+ -->
+ <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+ </s:Group>
+
+ <s:Group id="bottomGroup" minWidth="0" minHeight="0"
+ includeIn="normalWithControlBar, disabledWithControlBar" >
+
+ <!-- layer 0: control bar background -->
+ <!-- Note: We are skinning this to be the gradient in case we do specify control
+ bar content, but it will only display if there's a controlBarContent
+ property specified.-->
+ <s:Rect left="0" right="0" bottom="0" top="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: control bar divider line -->
+ <s:Rect left="0" right="0" top="0" height="1" >
+ <s:fill>
+ <s:SolidColor color="0xCDCDCD" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 2: control bar -->
+ <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+ </s:Group>
+ </s:Group>
+ </s:Group>
+</s:SparkSkin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml
new file mode 100644
index 0000000..8ba04d8
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/BitmapImageExample.mxml
@@ -0,0 +1,72 @@
+<?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.
+
+-->
+<!-- BitmapGraphicExample.mxml -->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+ width="694" height="277">
+ <s:Panel title="BitmapImage Sample"
+ width="100%" height="100%"
+ horizontalCenter="0" verticalCenter="0" skinClass="skins.TDFPanelSkin">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="15" paddingRight="15" paddingTop="15" paddingBottom="15"/>
+ </s:layout>
+ <s:VGroup>
+ <s:ComboBox id="fillModes" selectedItem="repeat">
+ <s:dataProvider>
+ <s:ArrayCollection>
+ <fx:String>scale</fx:String>
+ <fx:String>clip</fx:String>
+ <fx:String>repeat</fx:String>
+ </s:ArrayCollection>
+ </s:dataProvider>
+ </s:ComboBox>
+ <s:ComboBox id="blends" selectedItem="normal">
+ <s:dataProvider>
+ <s:ArrayCollection>
+ <fx:String>add</fx:String>
+ <fx:String>alpha</fx:String>
+ <fx:String>difference</fx:String>
+ <fx:String>erase</fx:String>
+ <fx:String>hardlight</fx:String>
+ <fx:String>invert</fx:String>
+ <fx:String>layer</fx:String>
+ <fx:String>lighten</fx:String>
+ <fx:String>multiply</fx:String>
+ <fx:String>normal</fx:String>
+ <fx:String>overlay</fx:String>
+ <fx:String>screen</fx:String>
+ <fx:String>shader</fx:String>
+ <fx:String>subtract</fx:String>
+ </s:ArrayCollection>
+ </s:dataProvider>
+ </s:ComboBox>
+ <s:CheckBox id="cbSmooth" label="Smooth?"/>
+ </s:VGroup>
+
+ <!-- Single image, scaled to fit specified dimensions. -->
+ <s:Graphic x="150" y="0">
+ <s:BitmapImage id="bg2" source="@Embed('assets/AirIcon12x12.gif')" width="120" height="120" fillMode="{fillModes.selectedItem}"
+ smooth="{cbSmooth.selected}" blendMode="{blends.selectedItem}"/>
+ </s:Graphic>
+
+
+ <s:Label color="0x323232" width="200" text="A BitmapImage element defines a rectangular region in its parent element's coordinate space, filled with bitmap data drawn from a source file."/>
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml
new file mode 100644
index 0000000..0e89a7b
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/EclipseExample.mxml
@@ -0,0 +1,46 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
+ <s:Panel title="Ellipse Graphic Sample" skinClass="skins.TDFPanelSkin"
+ width="100%" height="100%">
+
+ <s:Graphic horizontalCenter="0" verticalCenter="0">
+ <s:Ellipse height="100" width="250">
+ <s:stroke>
+ <s:SolidColorStroke color="0x000000" weight="5"/>
+ </s:stroke>
+ <s:fill>
+ <s:RadialGradient>
+ <s:entries>
+ <s:GradientEntry color="0x336699" ratio="0.33" alpha="0.8"/>
+ <s:GradientEntry color="0x339999" ratio="0.66" alpha="0.8"/>
+ <s:GradientEntry color="0x323232" ratio="0.99" alpha="0.8"/>
+ </s:entries>
+ </s:RadialGradient>
+ </s:fill>
+ </s:Ellipse>
+ </s:Graphic>
+ <s:Label right="25" top="10" width="270" color="0x323232" text="The Ellipse class is a filled graphic element that draws an ellipse. Graphic
+objects are placed in a Graphic tag which defines the root of an FXG document."/>
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml
new file mode 100644
index 0000000..9d5368a
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/LineExample.mxml
@@ -0,0 +1,96 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
+
+ <s:Panel title="Line Graphic Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+ <s:Group left="133" top="100">
+
+ <s:Line xFrom="0" xTo="0" yFrom="0" yTo="100">
+ <!-- Define the border color of the line. -->
+ <s:stroke>
+ <s:SolidColorStroke color="0x000000" weight="1" joints="miter"/>
+ </s:stroke>
+ </s:Line>
+
+ <s:Line xFrom="6" xTo="6" yFrom="0" yTo="100" >
+ <s:stroke>
+ <s:SolidColorStroke color="0x000000" weight="1" joints="miter"/>
+ </s:stroke>
+ </s:Line>
+
+ <s:Line xFrom="12" xTo="12" yFrom="0" yTo="100">
+ <s:stroke>
+ <s:SolidColorStroke color="0x000000" weight="2" joints="miter"/>
+ </s:stroke>
+ </s:Line>
+
+ <s:Line xFrom="20" xTo="20" yFrom="0" yTo="100">
+ <s:stroke>
+ <s:SolidColorStroke color="0x000000" weight="3" joints="miter"/>
+ </s:stroke>
+ </s:Line>
+
+ <s:Line xFrom="30" xTo="30" yFrom="0" yTo="100">
+ <s:stroke>
+ <s:SolidColorStroke color="0x000000" weight="5" joints="miter"/>
+ </s:stroke>
+ </s:Line>
+
+ <s:Line xFrom="43" xTo="43" yFrom="0" yTo="100">
+ <s:stroke>
+ <s:SolidColorStroke color="0x000000" weight="8" joints="miter"/>
+ </s:stroke>
+ </s:Line>
+
+ <s:Line xFrom="58" xTo="58" yFrom="0" yTo="100">
+ <s:stroke>
+ <s:SolidColorStroke color="0x000000" weight="13" joints="miter"/>
+ </s:stroke>
+ </s:Line>
+
+ <s:Line xFrom="84" xTo="84" yFrom="0" yTo="100">
+ <s:stroke>
+ <s:SolidColorStroke color="0x000000" weight="21" joints="miter"/>
+ </s:stroke>
+ </s:Line>
+
+ <s:Line xFrom="123" xTo="123" yFrom="0" yTo="100" >
+ <s:stroke>
+ <s:SolidColorStroke color="0x000000" weight="34" joints="bevel" />
+ </s:stroke>
+ </s:Line>
+ <s:Line xFrom="168" xTo="168" yFrom="0" yTo="100" x="3" y="0">
+ <s:stroke>
+ <s:SolidColorStroke color="0x000000" weight="45"/>
+ </s:stroke>
+ </s:Line>
+ <s:Line xFrom="210" xTo="210" yFrom="0" yTo="100" x="19" y="0">
+ <s:stroke>
+ <s:SolidColorStroke color="0x000000" weight="60"/>
+ </s:stroke>
+ </s:Line>
+ </s:Group>
+ <s:Label color="0x323232" right="20" top="15" width="250" text="The Line class is a graphic element that draws a line between two points.
+The default stroke for a line is undefined; therefore, if you do not specify the stroke, the line is invisible."/>
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml
new file mode 100644
index 0000000..a131ac2
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/RectExample.mxml
@@ -0,0 +1,87 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+ <fx:Script>
+ <![CDATA[
+ import skins.TDFPanelSkin;
+ ]]>
+ </fx:Script>
+
+ <s:Panel title="Rect Graphic Sample" skinClass="skins.TDFPanelSkin"
+ width="100%" height="100%">
+
+
+ <s:Group left="15" top="20">
+ <s:Graphic x="0" y="0">
+ <!-- Draw rectangle with square corners. -->
+ <s:Rect height="100" width="150">
+ <s:stroke>
+ <s:SolidColorStroke color="0x000000" weight="2"/>
+ </s:stroke>
+ <s:fill>
+ <s:SolidColor color="0x336699"/>
+ </s:fill>
+ </s:Rect>
+ </s:Graphic>
+
+ <s:Graphic x="250" y="0">
+ <!-- Draw rectangle with rounded corners. -->
+ <s:Rect height="100" width="150" radiusX="25" radiusY="25">
+ <s:stroke>
+ <s:SolidColorStroke color="0x336699" weight="2"/>
+ </s:stroke>
+ <s:fill>
+ <s:RadialGradient>
+ <s:entries>
+ <s:GradientEntry color="0x336699" alpha="0.5"/>
+ <s:GradientEntry color="0x323232" alpha="0.5"/>
+ <s:GradientEntry color="0xE2E2E2" alpha="0.5"/>
+ </s:entries>
+ </s:RadialGradient>
+ </s:fill>
+ </s:Rect>
+ </s:Graphic>
+
+ <s:Graphic x="500" y="0">
+ <s:Rect height="100" width="150">
+ <s:stroke>
+ <s:LinearGradientStroke weight="6" rotation="90">
+ <s:GradientEntry color="0x323232" alpha="0.8"/>
+ <s:GradientEntry color="0x336699" alpha="0.8"/>
+ </s:LinearGradientStroke>
+ </s:stroke>
+ <s:fill>
+ <s:RadialGradient>
+ <s:entries>
+ <s:GradientEntry color="0x336699"/>
+ <s:GradientEntry color="0x323232"/>
+ <s:GradientEntry color="0xE2E2E2"/>
+ </s:entries>
+ </s:RadialGradient>
+ </s:fill>
+ </s:Rect>
+ </s:Graphic>
+
+ </s:Group>
+ <s:Label top="165" horizontalCenter="0" width="40%" text="The Rect class is a filled graphic element that draws a rectangle."/>
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml
new file mode 100644
index 0000000..f7aacd3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/RichTextExample.mxml
@@ -0,0 +1,58 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx">
+
+ <s:Panel title="RichText Sample" width="100%" height="100%" skinClass="skins.TDFPanelSkin">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="8" paddingRight="8" paddingTop="8"/>
+ </s:layout>
+ <s:Group left="10" right="10" top="10" bottom="10">
+ <s:RichText x="0" y="0" width="75" fontFamily="Times" fontSize="15" textRotation="rotate90">
+ <s:content>Hello World!</s:content>
+ </s:RichText>
+
+ <s:Group x="100" y="0">
+ <s:RichText width="100" textAlign="justify" paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
+ <s:content>Hello World! This is a justified paragraph of text in a RichText control. It has a border around it drawn by a Rect inside a Group.</s:content>
+ </s:RichText>
+ <s:Rect width="100%" height="100%">
+ <s:stroke>
+ <s:SolidColorStroke color="blue"/>
+ </s:stroke>
+ </s:Rect>
+ </s:Group>
+
+ <s:Group x="225" y="0" >
+ <s:RichText width="140" height="120" columnCount="2" columnGap="10">
+ <s:content><s:span fontWeight="bold">Hello World!</s:span> This is a paragraph of text in 2 columns. It is about 20 words long, which should be enough to cause a few line breaks.</s:content>
+ </s:RichText>
+ <s:Rect width="100%" height="100%">
+ <s:stroke>
+ <s:SolidColorStroke color="blue"/>
+ </s:stroke>
+ </s:Rect>
+ </s:Group>
+ </s:Group>
+ <s:Label width="270" color="0x323232" text="RichText is a low-level UIComponent that can display one or more lines of richly-formatted text and embedded images. For performance reasons, it does not support scrolling, selection, editing, clickable hyperlinks, or images loaded from URLs. If you need those capabilities, see the RichEditableText class."/>
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml
new file mode 100644
index 0000000..4b06e54
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/fxg/skins/TDFPanelSkin.mxml
@@ -0,0 +1,170 @@
+<?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.
+
+-->
+
+
+<!--- Custom Spark Panel Skin created for Tour de Flex.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
+ blendMode.disabled="layer">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Panel")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ /* Define the skin elements that should not be colorized.
+ For panel, border and title backround are skinned, but the content area and title text are not. */
+ static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+ static private const contentFill:Array = [];
+
+ /**
+ * @inheritDoc
+ */
+ override public function get contentItems():Array {return contentFill};
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ <s:State name="normalWithControlBar" />
+ <s:State name="disabledWithControlBar" />
+ </s:states>
+
+ <!-- drop shadow -->
+ <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11"
+ angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+
+ <!-- layer 1: border -->
+ <s:Rect left="0" right="0" top="0" bottom="0">
+ <s:stroke>
+ <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 2: background fill -->
+ <s:Rect left="0" right="0" bottom="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: contents -->
+ <!--- contains the vertical stack of titlebar content and controlbar -->
+ <s:Group left="1" right="1" top="1" bottom="1" >
+ <s:layout>
+ <s:VerticalLayout gap="0" horizontalAlign="justify" />
+ </s:layout>
+
+ <s:Group id="topGroup" >
+ <!-- layer 0: title bar fill -->
+ <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
+ <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
+ <s:fill>
+ <s:SolidColor color="0x000000" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: title bar highlight -->
+ <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xEAEAEA" />
+ <s:GradientEntry color="0xD9D9D9" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- layer 2: title bar divider -->
+ <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+ <s:fill>
+ <s:SolidColor color="0xC0C0C0" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: text -->
+ <!--- Defines the appearance of the PanelSkin class's title bar. -->
+ <!-- Note: The title text display has been slightly modified for Tour de Flex. -->
+ <s:Label id="titleDisplay" lineBreak="explicit"
+ left="9" top="1" bottom="0" minHeight="30"
+ verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
+ </s:Label>
+ </s:Group>
+
+ <!--
+ Note: setting the minimum size to 0 here so that changes to the host component's
+ size will not be thwarted by this skin part's minimum size. This is a compromise,
+ more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+ -->
+ <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+ </s:Group>
+
+ <s:Group id="bottomGroup" minWidth="0" minHeight="0"
+ includeIn="normalWithControlBar, disabledWithControlBar" >
+
+ <!-- layer 0: control bar background -->
+ <!-- Note: We are skinning this to be the gradient in case we do specify control
+ bar content, but it will only display if there's a controlBarContent
+ property specified.-->
+ <s:Rect left="0" right="0" bottom="0" top="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: control bar divider line -->
+ <s:Rect left="0" right="0" top="0" height="1" >
+ <s:fill>
+ <s:SolidColor color="0xCDCDCD" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 2: control bar -->
+ <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+ </s:Group>
+ </s:Group>
+ </s:Group>
+</s:SparkSkin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml
new file mode 100644
index 0000000..c83b860
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer1Example.mxml
@@ -0,0 +1,61 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ applicationComplete="srv.send()">
+
+
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.ArrayCollection;
+ import mx.rpc.events.ResultEvent;
+
+ import skins.TDFPanelSkin;
+
+ [Bindable]
+ private var employees:ArrayCollection;
+
+ private function resultHandler(event:ResultEvent):void
+ {
+ employees = event.result.list.employee as ArrayCollection;
+ }
+
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:HTTPService id="srv" url="./data/list.xml" result="resultHandler(event)"/>
+ </fx:Declarations>
+
+ <s:Panel width="100%" height="100%" title="Custom Item Renderer with Animation" skinClass="skins.TDFPanelSkin">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="100" paddingRight="10" paddingTop="10" paddingBottom="10"/>
+ </s:layout>
+ <s:DataGroup dataProvider="{employees}" width="300" itemRenderer="renderers.ImageRenderer1">
+ <s:layout>
+ <s:TileLayout horizontalGap="0" verticalGap="0"/>
+ </s:layout>
+ </s:DataGroup>
+ <s:Label color="0x323232" width="200" text="The item renderer on this DataGroup uses the Spark Animate to scale the image
+when hovered over each item. See the ImageRenderer1.mxml source for more information."/>
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml
new file mode 100644
index 0000000..f4c8548
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/ItemRenderer2Example.mxml
@@ -0,0 +1,75 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ applicationComplete="srv.send()">
+
+ <fx:Style>
+
+ @namespace s "library://ns.adobe.com/flex/spark";
+ @namespace mx "library://ns.adobe.com/flex/halo";
+
+ @font-face {
+ src: url("assets/MyriadPro-Semibold.otf");
+ fontFamily: "main";
+ }
+
+ s|Application {
+ font-family: main;
+ font-size: 14;
+ }
+
+ </fx:Style>
+
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.ArrayCollection;
+ import mx.rpc.events.ResultEvent;
+
+ [Bindable]
+ private var employees:ArrayCollection;
+
+ private function resultHandler(event:ResultEvent):void
+ {
+ employees = event.result.list.employee as ArrayCollection;
+ }
+
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:HTTPService id="srv" url="./data/list.xml" result="resultHandler(event)"/>
+ </fx:Declarations>
+ <s:Panel width="100%" height="100%" title="Custom Item Renderer with Animation" skinClass="skins.TDFPanelSkin">
+ <s:layout>
+ <s:HorizontalLayout paddingTop="2" paddingLeft="50" paddingRight="8"/>
+ </s:layout>
+
+ <s:DataGroup dataProvider="{employees}" width="440" itemRenderer="renderers.ImageRenderer2" horizontalCenter="0" verticalCenter="0">
+ <s:layout>
+ <s:TileLayout />
+ </s:layout>
+ </s:DataGroup>
+ <s:Label color="0x323232" width="200" text="The item renderer on this DataGroup uses effects to provide a
+Spark 3D rotation effect when hovered over each item. See the ImageRenderer2.mxml source for more information. This sample also
+shows the use of a special font for the text."/>
+ </s:Panel>
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/data/list.xml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/data/list.xml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/data/list.xml
new file mode 100644
index 0000000..376bb2c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/data/list.xml
@@ -0,0 +1,96 @@
+<?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.
+
+-->
+<list>
+ <employee employeeId="1">
+ <firstName>Michael</firstName>
+ <lastName>Scott</lastName>
+ <image>assets/scott.jpg</image>
+ </employee>
+ <employee employeeId="2">
+ <firstName>Pam</firstName>
+ <lastName>Beesly</lastName>
+ <image>assets/beesly.jpg</image>
+ </employee>
+ <employee employeeId="3">
+ <firstName>Andy</firstName>
+ <lastName>Bernard</lastName>
+ <image>assets/bernard.jpg</image>
+ </employee>
+ <employee employeeId="3">
+ <firstName>Creed</firstName>
+ <lastName>Bratton</lastName>
+ <image>assets/bratton.jpg</image>
+ </employee>
+ <employee employeeId="3">
+ <firstName>Toby</firstName>
+ <lastName>Flenderson</lastName>
+ <image>assets/flenderson.jpg</image>
+ </employee>
+ <employee employeeId="3">
+ <firstName>Jim</firstName>
+ <lastName>Halpert</lastName>
+ <image>assets/halpert.jpg</image>
+ </employee>
+ <employee employeeId="3">
+ <firstName>Ryan</firstName>
+ <lastName>Howard</lastName>
+ <image>assets/howard.jpg</image>
+ </employee>
+ <employee employeeId="3">
+ <firstName>Stanley</firstName>
+ <lastName>Hudson</lastName>
+ <image>assets/hudson.jpg</image>
+ </employee>
+ <employee employeeId="3">
+ <firstName>Kelly</firstName>
+ <lastName>Kapoor</lastName>
+ <image>assets/kapoor.jpg</image>
+ </employee>
+ <employee employeeId="3">
+ <firstName>Phyllis</firstName>
+ <lastName>Lapin</lastName>
+ <image>assets/lapin.jpg</image>
+ </employee>
+ <employee employeeId="3">
+ <firstName>Kevin</firstName>
+ <lastName>Malone</lastName>
+ <image>assets/malone.jpg</image>
+ </employee>
+ <employee employeeId="3">
+ <firstName>Angela</firstName>
+ <lastName>Martin</lastName>
+ <image>assets/martin.jpg</image>
+ </employee>
+ <employee employeeId="3">
+ <firstName>Oscar</firstName>
+ <lastName>Martinez</lastName>
+ <image>assets/martinez.jpg</image>
+ </employee>
+ <employee employeeId="3">
+ <firstName>Meredith</firstName>
+ <lastName>Palmer</lastName>
+ <image>assets/palmer.jpg</image>
+ </employee>
+ <employee employeeId="3">
+ <firstName>Dwight</firstName>
+ <lastName>Schrute</lastName>
+ <image>assets/schrute.jpg</image>
+ </employee>
+</list>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer1.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer1.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer1.mxml
new file mode 100644
index 0000000..f6f1dd5
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer1.mxml
@@ -0,0 +1,56 @@
+<?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.
+
+-->
+<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ autoDrawBackground="false"
+ depth="0" depth.hovered="1">
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="hovered" />
+ </s:states>
+
+ <s:postLayoutTransformOffsets>
+ <mx:TransformOffsets id="offsets" x.hovered="-40" y.hovered="-40" scaleX.hovered="2" scaleY.hovered="2" />
+ </s:postLayoutTransformOffsets>
+
+ <s:transitions>
+ <mx:Transition fromState="normal" toState="hovered" autoReverse="true">
+ <s:Animate target="{offsets}" duration="200">
+ <s:SimpleMotionPath property="scaleX" />
+ <s:SimpleMotionPath property="scaleY" />
+ <s:SimpleMotionPath property="x" />
+ <s:SimpleMotionPath property="y" />
+ </s:Animate>
+ </mx:Transition>
+ <mx:Transition fromState="hovered" toState="normal" autoReverse="true">
+ <s:Animate target="{offsets}" duration="200">
+ <s:SimpleMotionPath property="scaleX" />
+ <s:SimpleMotionPath property="scaleY" />
+ <s:SimpleMotionPath property="x" />
+ <s:SimpleMotionPath property="y" />
+ </s:Animate>
+ </mx:Transition>
+ </s:transitions>
+
+ <mx:Image id="image" source="{data.image}" width="60" height="60" horizontalCenter="0" verticalCenter="0"/>
+
+</s:ItemRenderer>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer2.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer2.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer2.mxml
new file mode 100644
index 0000000..2152cd3
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/renderers/ImageRenderer2.mxml
@@ -0,0 +1,54 @@
+<?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.
+
+-->
+<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ autoDrawBackground="false"
+ depth="0" depth.hovered="1">
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="hovered" />
+ </s:states>
+
+ <s:transitions>
+ <s:Transition fromState="normal" toState="hovered" autoReverse="true">
+ <s:Parallel>
+ <s:Rotate3D target="{image}" angleYFrom="0" angleYTo="360" autoCenterProjection="true" autoCenterTransform="true" duration="400"/>
+ <s:Fade target="{image}" startDelay="400" duration="200"/>
+ <s:Fade target="{group}" startDelay="400" duration="200"/>
+ </s:Parallel>
+ </s:Transition>
+ </s:transitions>
+
+ <s:Rect id="rect" left="0" right="0" top="0" bottom="0">
+ <s:fill>
+ <s:SolidColor color="black" alpha="0.7"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:Group id="group" left="0" right="0" top="0" bottom="0" visible.normal="false">
+ <s:Label text="{data.firstName}" verticalCenter="-10" horizontalCenter="0" color="white"/>
+ <s:Label text="{data.lastName}" verticalCenter="10" horizontalCenter="0" color="white"/>
+ </s:Group>
+
+ <mx:Image id="image" source="{data.image}" width="70" height="70" horizontalCenter="0" verticalCenter="0" visible.hovered="false"/>
+
+</s:ItemRenderer>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/skins/TDFPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/skins/TDFPanelSkin.mxml b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/skins/TDFPanelSkin.mxml
new file mode 100644
index 0000000..4b06e54
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/itemRenderers/skins/TDFPanelSkin.mxml
@@ -0,0 +1,170 @@
+<?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.
+
+-->
+
+
+<!--- Custom Spark Panel Skin created for Tour de Flex.
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"
+ blendMode.disabled="layer">
+
+ <fx:Metadata>
+ <![CDATA[
+ /**
+ * @copy spark.skins.spark.ApplicationSkin#hostComponent
+ */
+ [HostComponent("spark.components.Panel")]
+ ]]>
+ </fx:Metadata>
+
+ <fx:Script>
+ /* Define the skin elements that should not be colorized.
+ For panel, border and title backround are skinned, but the content area and title text are not. */
+ static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "bgFill"];
+
+ /**
+ * @copy spark.skins.SparkSkin#colorizeExclusions
+ */
+ override public function get colorizeExclusions():Array {return exclusions;}
+
+ /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+ static private const contentFill:Array = [];
+
+ /**
+ * @inheritDoc
+ */
+ override public function get contentItems():Array {return contentFill};
+ </fx:Script>
+
+ <s:states>
+ <s:State name="normal" />
+ <s:State name="disabled" />
+ <s:State name="normalWithControlBar" />
+ <s:State name="disabledWithControlBar" />
+ </s:states>
+
+ <!-- drop shadow -->
+ <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11"
+ angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+
+ <!-- layer 1: border -->
+ <s:Rect left="0" right="0" top="0" bottom="0">
+ <s:stroke>
+ <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
+ </s:stroke>
+ </s:Rect>
+
+
+ <!-- layer 2: background fill -->
+ <s:Rect left="0" right="0" bottom="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: contents -->
+ <!--- contains the vertical stack of titlebar content and controlbar -->
+ <s:Group left="1" right="1" top="1" bottom="1" >
+ <s:layout>
+ <s:VerticalLayout gap="0" horizontalAlign="justify" />
+ </s:layout>
+
+ <s:Group id="topGroup" >
+ <!-- layer 0: title bar fill -->
+ <!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
+ <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
+ <s:fill>
+ <s:SolidColor color="0x000000" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: title bar highlight -->
+ <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
+ <s:stroke>
+ <s:LinearGradientStroke rotation="90" weight="1">
+ <s:GradientEntry color="0xEAEAEA" />
+ <s:GradientEntry color="0xD9D9D9" />
+ </s:LinearGradientStroke>
+ </s:stroke>
+ </s:Rect>
+
+ <!-- layer 2: title bar divider -->
+ <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+ <s:fill>
+ <s:SolidColor color="0xC0C0C0" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 3: text -->
+ <!--- Defines the appearance of the PanelSkin class's title bar. -->
+ <!-- Note: The title text display has been slightly modified for Tour de Flex. -->
+ <s:Label id="titleDisplay" lineBreak="explicit"
+ left="9" top="1" bottom="0" minHeight="30"
+ verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
+ </s:Label>
+ </s:Group>
+
+ <!--
+ Note: setting the minimum size to 0 here so that changes to the host component's
+ size will not be thwarted by this skin part's minimum size. This is a compromise,
+ more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+ -->
+ <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+ </s:Group>
+
+ <s:Group id="bottomGroup" minWidth="0" minHeight="0"
+ includeIn="normalWithControlBar, disabledWithControlBar" >
+
+ <!-- layer 0: control bar background -->
+ <!-- Note: We are skinning this to be the gradient in case we do specify control
+ bar content, but it will only display if there's a controlBarContent
+ property specified.-->
+ <s:Rect left="0" right="0" bottom="0" top="0" height="15">
+ <s:fill>
+ <s:LinearGradient rotation="90">
+ <s:GradientEntry color="0xE2E2E2" />
+ <s:GradientEntry color="0x000000" />
+ </s:LinearGradient>
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 1: control bar divider line -->
+ <s:Rect left="0" right="0" top="0" height="1" >
+ <s:fill>
+ <s:SolidColor color="0xCDCDCD" />
+ </s:fill>
+ </s:Rect>
+
+ <!-- layer 2: control bar -->
+ <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="0" minWidth="0" minHeight="0">
+ <s:layout>
+ <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
+ </s:layout>
+ </s:Group>
+ </s:Group>
+ </s:Group>
+</s:SparkSkin>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml
new file mode 100644
index 0000000..9b89803
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutAnimatedExample.mxml
@@ -0,0 +1,106 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ applicationComplete="srv.send()" xmlns:local="*" xmlns:layouts="layouts.*"
+ backgroundColor="0x323232" color="0xFFFFFF">
+
+ <fx:Style>
+
+ @namespace s "library://ns.adobe.com/flex/spark";
+ @namespace mx "library://ns.adobe.com/flex/mx";
+
+
+ s|Application {
+ font-family: main;
+ font-size: 14;
+ }
+
+ </fx:Style>
+
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.ArrayCollection;
+ import mx.rpc.events.ResultEvent;
+
+ [Bindable]
+ private var items:ArrayCollection;
+
+ [Bindable]
+ private var filteredItems:ArrayCollection;
+
+ [Bindable]
+ private var _maxPrice:Number = 1000;
+
+ [Bindable]
+ private var _camera:Boolean = false;
+
+ [Bindable]
+ private var _video:Boolean = false;
+
+ [Bindable]
+ private var _triband:Boolean = false;
+
+
+ private function resultHandler(event:ResultEvent):void
+ {
+ items = event.result.catalog.product as ArrayCollection;
+ filteredItems = new ArrayCollection(items.source);
+ filteredItems.filterFunction = filter;
+ }
+
+ private function selectionChange():void
+ {
+ filteredItems.refresh();
+ filterLayout.filter();
+ }
+
+ private function filter(item:Object):Boolean
+ {
+ return (item.price <= _maxPrice) &&
+ (!_camera || item.camera) &&
+ (!_video || item.video) &&
+ (!_triband || item.triband);
+ }
+
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:HTTPService id="srv" url="data/catalog.xml" result="resultHandler(event)"/>
+ </fx:Declarations>
+
+ <s:HGroup verticalAlign="middle" paddingLeft="8" left="50" top="5">
+ <s:Label text="Max Price:"/>
+ <s:HSlider id="priceSlider" minimum="0" maximum="1000" snapInterval="100" value="@{_maxPrice}" change="selectionChange()"/>
+ <mx:Spacer width="20"/>
+ <s:CheckBox label="Camera" selected="@{_camera}" change="selectionChange()"/>
+ <s:CheckBox label="Video" selected="@{_video}" change="selectionChange()"/>
+ <s:CheckBox label="Triband" selected="@{_triband}" change="selectionChange()"/>
+ </s:HGroup>
+
+ <s:DataGroup dataProvider="{items}" itemRenderer="renderers.PhoneRenderer" top="50" left="0" right="0" horizontalCenter="0">
+ <s:layout>
+ <layouts:FilteredTileLayout id="filterLayout" filteredItems="{filteredItems}" />
+ </s:layout>
+ </s:DataGroup>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml
new file mode 100644
index 0000000..5a0895e
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlickrWheelExample.mxml
@@ -0,0 +1,83 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:my="*" minWidth="600" minHeight="350"
+ applicationComplete="requestPhotos()" backgroundColor="0x323232">
+
+ <fx:Script>
+ <![CDATA[
+ import mx.collections.ArrayCollection;
+ import mx.rpc.events.ResultEvent;
+
+ import spark.components.Group;
+ import spark.components.supportClasses.GroupBase;
+ import spark.effects.animation.MotionPath;
+
+ [Bindable]
+ private var photoFeed:ArrayCollection;
+
+ private function requestPhotos():void {
+ var params:Object = new Object();
+ params.format = 'rss_200_enc';
+ params.tags = searchTerms.text;
+ photoService.send(params);
+ }
+
+ private function photoHandler(event:ResultEvent):void {
+ photoFeed = event.result.rss.channel.item as ArrayCollection;
+ }
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <s:HTTPService id="photoService"
+ url="http://api.flickr.com/services/feeds/photos_public.gne"
+ result="photoHandler(event)" />
+ </fx:Declarations>
+
+ <s:layout>
+ <s:VerticalLayout paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"/>
+ </s:layout>
+
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Flickr tags or search terms:" color="0xFFFFFF"/>
+ <s:TextInput id="searchTerms"
+ enter="requestPhotos()" text="bugs" />
+ <s:Button label="Search"
+ click="requestPhotos()" />
+ <!-- The slider to control the axis angle -->
+ <s:HSlider id="axisSlider" minimum="-90" maximum="90"
+ value="10" liveDragging="true" width="300"/>
+ </s:HGroup>
+
+ <s:List width="700" height="225"
+ dataProvider="{photoFeed}"
+ itemRenderer="FlickrThumbnail"
+ id="theList">
+
+ <s:layout>
+ <my:WheelLayout gap="20" axisAngle="{axisSlider.value}"/>
+ </s:layout>
+ </s:List>
+
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml
new file mode 100644
index 0000000..a3a6dab
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutFlowExample.mxml
@@ -0,0 +1,85 @@
+<?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.
+
+-->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/halo"
+ xmlns:my="*">
+
+ <s:Panel width="100%" height="100%" title="Custom Layout - Flow Layout" skinClass="skins.TDFPanelSkin">
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center"
+ paddingTop="10" gap="10"/>
+ </s:layout>
+
+ <!-- The drop-down to select vertical alignment -->
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Vertical align"/>
+ <s:DropDownList id="vAlign" requireSelection="true" color="0x000000">
+ <s:ArrayCollection>
+ <fx:String>bottom</fx:String>
+ <fx:String>middle</fx:String>
+ <fx:String>top</fx:String>
+ </s:ArrayCollection>
+ </s:DropDownList>
+ </s:HGroup>
+
+ <!-- The drop-down to select vertical alignment -->
+ <s:HGroup verticalAlign="middle">
+ <s:Label text="Horizontal align"/>
+ <s:DropDownList id="hAlign" requireSelection="true">
+ <s:ArrayCollection>
+ <fx:String>left</fx:String>
+ <fx:String>center</fx:String>
+ <fx:String>right</fx:String>
+ </s:ArrayCollection>
+ </s:DropDownList>
+ </s:HGroup>
+
+ <!-- The slider to control the list width -->
+ <s:HGroup verticalAlign="bottom">
+ <s:Label text="Container width"/>
+ <s:HSlider id="widthSlider" minimum="10" maximum="400"
+ value="200" liveDragging="true"/>
+ </s:HGroup>
+
+ <!-- The slider to control the horizontal gap -->
+ <s:HGroup verticalAlign="bottom">
+ <s:Label text="Horizontal gap"/>
+ <s:HSlider id="hGapSlider" minimum="0" maximum="50"
+ value="10" liveDragging="true"/>
+ </s:HGroup>
+
+ <!-- A Spark List -->
+ <s:List id="list1" width="{widthSlider.value}" height="112"
+ selectedIndex="7"
+ dataProvider="{new ArrayCollection(
+ 'The quick fox jumped over the lazy sleepy\n\dog'.split(' '))}">
+
+ <!-- Configure the layout to be the FlowLayout -->
+ <s:layout>
+ <my:FlowLayout1 horizontalAlign="{hAlign.selectedItem}"
+ verticalAlign="{vAlign.selectedItem}"
+ horizontalGap="{hGapSlider.value}"/>
+ </s:layout>
+ </s:List>
+ </s:Panel>
+
+</s:Application>
+
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml
new file mode 100644
index 0000000..23ec216
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/CustomLayoutHBaselineExample.mxml
@@ -0,0 +1,118 @@
+<?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.
+
+-->
+<!-- http://evtimmy.com/2010/02/extending-horizontallayout-to-support-baseline-align-to-text/ -->
+<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ xmlns:local="*">
+ <fx:Script>
+ <![CDATA[
+ import mx.events.FlexEvent;
+
+ import skins.TDFPanelSkin;
+
+ protected function update(event:Event):void
+ {
+ globalBaseline.top = theLayout.actualBaseline;
+ checkBoxBaseline.top = checkBox.y + checkBox.baselinePosition;
+ labelBaseline.top = label.y + label.baselinePosition;
+ labelBaseline.left = label.x;
+ buttonBaseline.top = button.y + button.baselinePosition;
+ buttonBaseline.left = button.x;
+ }
+
+ ]]>
+ </fx:Script>
+
+ <s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="CustomLayout with HBaselineLayout">
+
+ <!-- Controls -->
+ <s:HGroup left="14" top="5">
+ <s:VGroup>
+ <s:CheckBox label="Checkbox" id="showCheckBox" selected="true"/>
+ <s:CheckBox label="Label" id="showLabel" selected="true"/>
+ <s:CheckBox label="Button " id="showButton" selected="true"/>
+ <s:CheckBox label="Layout " id="showLayout" selected="true"/>
+ </s:VGroup>
+
+ <s:TileGroup requestedColumnCount="2">
+ <s:CheckBox id="baseline1Check" label="Offset Checkbox baseline" selected="true"/>
+ <s:HSlider id="baseline1Slider" minimum="-100" maximum="100" enabled="{baseline1Check.selected}" width="160"/>
+ <s:CheckBox id="baseline2Check" label="Offset Label baseline" selected="true"/>
+ <s:HSlider id="baseline2Slider" minimum="-100" maximum="100" enabled="{baseline2Check.selected}" width="160"/>
+ <s:CheckBox id="baseline3Check" label="Offset Button baseline" selected="true"/>
+ <s:HSlider id="baseline3Slider" minimum="-100" maximum="100" enabled="{baseline3Check.selected}" width="160"/>
+ <s:CheckBox id="baseline4Check" label="Offset Layout baseline"/>
+ <s:HSlider id="baseline4Slider" minimum="-100" maximum="100" enabled="{baseline4Check.selected}" width="160" value="15"/>
+ <s:CheckBox id="buttonHeightCheck" label="Override Button height" selected="true"/>
+ <s:HSlider id="buttonHeightSlider" minimum="21" maximum="150" enabled="{buttonHeightCheck.selected}" width="160" value="21"/>
+ </s:TileGroup>
+ </s:HGroup>
+
+
+ <s:Group id="container" updateComplete="update(event)" top="138" horizontalCenter="0">
+ <s:layout>
+ <local:HBaselineLayout id="theLayout" verticalAlign="baseline"
+ globalBaseline="{baseline4Check.selected ? baseline4Slider.value : NaN}"/>
+ </s:layout>
+ <s:CheckBox id="checkBox" label="One check box" move="update(event)"
+ baseline="{baseline1Check.selected ? baseline1Slider.value : 0}"/>
+ <s:Label id="label" text="...and some random text..." move="update(event)"
+ baseline="{baseline2Check.selected ? baseline2Slider.value : 0}"/>
+ <s:Button id="button" label="and a Button!" move="update(event)"
+ height="{buttonHeightCheck.selected ? buttonHeightSlider.value : 21}"
+ baseline="{baseline3Check.selected ? baseline3Slider.value : 0}"/>
+ <!-- visual guides for the baselines -->
+ <s:Group includeInLayout="false">
+ <s:Line width="{container.width}" id="globalBaseline" top="{theLayout.actualBaseline}"
+ visible="{showLayout.selected}">
+ <s:stroke>
+ <s:SolidColorStroke color="0x00FF00" weight="2"/>
+ </s:stroke>
+ </s:Line>
+
+ <s:Line width="{checkBox.width-1}" id="checkBoxBaseline"
+ visible="{showCheckBox.selected}">
+ <s:stroke>
+ <s:SolidColorStroke color="0xFF0000" alpha="0.5" weight="2"/>
+ </s:stroke>
+ </s:Line>
+
+ <s:Line width="{label.width-1}" id="labelBaseline"
+ visible="{showLabel.selected}">
+ <s:stroke>
+ <s:SolidColorStroke color="0x0000FF" alpha="0.5" weight="2"/>
+ </s:stroke>
+ </s:Line>
+
+ <s:Line width="{button.width-1}" id="buttonBaseline"
+ visible="{showButton.selected}">
+ <s:stroke>
+ <s:SolidColorStroke color="0xFF00FF" alpha="0.5" weight="2"/>
+ </s:stroke>
+ </s:Line>
+ </s:Group>
+ </s:Group>
+ <s:Label right="14" top="7" color="0x323232" width="200"
+ text="This sample shows how you can create a custom layout to extend the HorizontalLayout to provide
+ baseline alignment functionality."/>
+ </s:Panel>
+
+</s:Application>
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml b/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml
new file mode 100644
index 0000000..8667a8f
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/FlickrThumbnail.mxml
@@ -0,0 +1,80 @@
+<?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.
+
+-->
+<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:s="library://ns.adobe.com/flex/spark"
+ xmlns:mx="library://ns.adobe.com/flex/mx" click="itemrenderer1_clickHandler(event)">
+
+ <fx:Script>
+ <![CDATA[
+ import spark.components.supportClasses.GroupBase;
+ import spark.effects.Animate;
+ import spark.effects.animation.MotionPath;
+ import spark.effects.animation.SimpleMotionPath;
+ protected function itemrenderer1_clickHandler(event:MouseEvent):void
+ {
+ var g:GroupBase = parent as GroupBase;
+ var p:Point = g.layout.getScrollPositionDeltaToElement(this.itemIndex);
+ if (p)
+ {
+ var startX:Number = g.horizontalScrollPosition;
+ var startY:Number = g.verticalScrollPosition;
+ var anim:Animate = new Animate();
+ anim.motionPaths = new <MotionPath>[
+ new SimpleMotionPath("horizontalScrollPosition", startX, startX + p.x, 500),
+ new SimpleMotionPath("verticalScrollPosition", startY, startY + p.y, 500)
+ ];
+
+ var interpolator:NumberInterpolatorWrapping = new NumberInterpolatorWrapping(0, g.contentWidth - g.width);
+ var scrollLength:Number = interpolator.getLength(startX, startX + p.x);
+ anim.interpolator = interpolator;
+ anim.duration = Math.max(550, Math.min(2500, scrollLength * 2));
+
+ anim.play([g]);
+ }
+ }
+ ]]>
+ </fx:Script>
+
+
+ <s:states>
+ <s:State name="normal"/>
+ <s:State name="hovered"/>
+ <s:State name="selected"/>
+ </s:states>
+
+ <s:Rect id="border" left="0" right="0" top="0" bottom="0">
+ <s:fill>
+ <s:SolidColor color="0xDFDFDF" color.hovered="0xFF0000" color.selected="0x00FF00"/>
+ </s:fill>
+ </s:Rect>
+
+ <s:Group left="1" right="1" top="1" bottom="1">
+ <s:layout>
+ <s:VerticalLayout horizontalAlign="center"/>
+ </s:layout>
+
+ <mx:Image
+ width="75" height="75"
+ source="{data.thumbnail.url}" />
+ <s:Label text="{data.credit}" maxWidth="100" textAlign="center"/>
+ </s:Group>
+
+</s:ItemRenderer>
+
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/FlowLayout1.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/FlowLayout1.as b/TourDeFlex/TourDeFlex3/src/spark/layouts/FlowLayout1.as
new file mode 100644
index 0000000..9462285
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/FlowLayout1.as
@@ -0,0 +1,195 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+import mx.core.ILayoutElement;
+
+import spark.components.supportClasses.GroupBase;
+import spark.layouts.supportClasses.LayoutBase;
+
+public class FlowLayout1 extends LayoutBase
+{
+
+ //---------------------------------------------------------------
+ //
+ // Class properties
+ //
+ //---------------------------------------------------------------
+
+ //---------------------------------------------------------------
+ // horizontalGap
+ //---------------------------------------------------------------
+
+ private var _horizontalGap:Number = 10;
+
+ public function set horizontalGap(value:Number):void
+ {
+ _horizontalGap = value;
+
+ // We must invalidate the layout
+ var layoutTarget:GroupBase = target;
+ if (layoutTarget)
+ layoutTarget.invalidateDisplayList();
+ }
+
+ //---------------------------------------------------------------
+ // verticalAlign
+ //---------------------------------------------------------------
+
+ private var _verticalAlign:String = "bottom";
+
+ public function set verticalAlign(value:String):void
+ {
+ _verticalAlign = value;
+
+ // We must invalidate the layout
+ var layoutTarget:GroupBase = target;
+ if (layoutTarget)
+ layoutTarget.invalidateDisplayList();
+ }
+
+ //---------------------------------------------------------------
+ // horizontalAlign
+ //---------------------------------------------------------------
+
+ private var _horizontalAlign:String = "left"; // center, right
+
+ public function set horizontalAlign(value:String):void
+ {
+ _horizontalAlign = value;
+
+ // We must invalidate the layout
+ var layoutTarget:GroupBase = target;
+ if (layoutTarget)
+ layoutTarget.invalidateDisplayList();
+ }
+
+ //---------------------------------------------------------------
+ //
+ // Class methods
+ //
+ //---------------------------------------------------------------
+
+ override public function updateDisplayList(containerWidth:Number,
+ containerHeight:Number):void
+ {
+ var element:ILayoutElement;
+ var layoutTarget:GroupBase = target;
+ var count:int = layoutTarget.numElements;
+ var hGap:Number = _horizontalGap;
+
+ // The position for the current element
+ var x:Number = 0;
+ var y:Number = 0;
+ var elementWidth:Number;
+ var elementHeight:Number;
+
+ var vAlign:Number = 0;
+ switch (_verticalAlign)
+ {
+ case "middle" : vAlign = 0.5; break;
+ case "bottom" : vAlign = 1; break;
+ }
+
+ // Keep track of per-row height, maximum row width
+ var maxRowWidth:Number = 0;
+
+ // loop through the elements
+ // while we can start a new row
+ var rowStart:int = 0;
+ while (rowStart < count)
+ {
+ // The row always contains the start element
+ element = useVirtualLayout ? layoutTarget.getVirtualElementAt(rowStart) :
+ layoutTarget.getElementAt(rowStart);
+
+ var rowWidth:Number = element.getPreferredBoundsWidth();
+ var rowHeight:Number = element.getPreferredBoundsHeight();
+
+ // Find the end of the current row
+ var rowEnd:int = rowStart;
+ while (rowEnd + 1 < count)
+ {
+ element = useVirtualLayout ? layoutTarget.getVirtualElementAt(rowEnd + 1) :
+ layoutTarget.getElementAt(rowEnd + 1);
+
+ // Since we haven't resized the element just yet, get its preferred size
+ elementWidth = element.getPreferredBoundsWidth();
+ elementHeight = element.getPreferredBoundsHeight();
+
+ // Can we add one more element to this row?
+ if (rowWidth + hGap + elementWidth > containerWidth)
+ break;
+
+ rowWidth += hGap + elementWidth;
+ rowHeight = Math.max(rowHeight, elementHeight);
+ rowEnd++;
+ }
+
+ x = 0;
+ switch (_horizontalAlign)
+ {
+ case "center" : x = Math.round(containerWidth - rowWidth) / 2; break;
+ case "right" : x = containerWidth - rowWidth;
+ }
+
+ // Keep track of the maximum row width so that we can
+ // set the correct contentSize
+ maxRowWidth = Math.max(maxRowWidth, x + rowWidth);
+
+ // Layout all the elements within the row
+ for (var i:int = rowStart; i <= rowEnd; i++)
+ {
+ element = useVirtualLayout ? layoutTarget.getVirtualElementAt(i) :
+ layoutTarget.getElementAt(i);
+
+ // Resize the element to its preferred size by passing
+ // NaN for the width and height constraints
+ element.setLayoutBoundsSize(NaN, NaN);
+
+ // Find out the element's dimensions sizes.
+ // We do this after the element has been already resized
+ // to its preferred size.
+ elementWidth = element.getLayoutBoundsWidth();
+ elementHeight = element.getLayoutBoundsHeight();
+
+ // Calculate the position within the row
+ var elementY:Number = Math.round((rowHeight - elementHeight) * vAlign);
+
+ // Position the element
+ element.setLayoutBoundsPosition(x, y + elementY);
+
+ x += hGap + elementWidth;
+ }
+
+ // Next row will start with the first element after the current row's end
+ rowStart = rowEnd + 1;
+
+ // Update the position to the beginning of the row
+ x = 0;
+ y += rowHeight;
+ }
+
+ // Set the content size which determines the scrolling limits
+ // and is used by the Scroller to calculate whether to show up
+ // the scrollbars when the the scroll policy is set to "auto"
+ layoutTarget.setContentSize(maxRowWidth, y);
+ }
+}
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/051a1e55/TourDeFlex/TourDeFlex3/src/spark/layouts/HBaselineLayout.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/spark/layouts/HBaselineLayout.as b/TourDeFlex/TourDeFlex3/src/spark/layouts/HBaselineLayout.as
new file mode 100644
index 0000000..5d87ce7
--- /dev/null
+++ b/TourDeFlex/TourDeFlex3/src/spark/layouts/HBaselineLayout.as
@@ -0,0 +1,199 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+package {
+
+import mx.core.ILayoutElement;
+import mx.events.PropertyChangeEvent;
+import mx.formatters.NumberBase;
+
+import spark.components.supportClasses.GroupBase;
+import spark.layouts.HorizontalLayout;
+
+public class HBaselineLayout extends HorizontalLayout
+{
+ public function HBaselineLayout()
+ {
+ super();
+ }
+
+ //----------------------------------
+ // globalBaseline
+ //----------------------------------
+
+ [Inspectable(category="General")]
+
+ private var _globalBaseline:Number = NaN;
+ public function get globalBaseline():Number
+ {
+ return _globalBaseline;
+ }
+
+ public function set globalBaseline(value:Number):void
+ {
+ _globalBaseline = value;
+ var target:GroupBase = this.target;
+ if (target)
+ {
+ target.invalidateSize();
+ target.invalidateDisplayList();
+ }
+ }
+
+ //----------------------------------
+ // actualBaseline
+ //----------------------------------
+
+ private var _actualBaseline:Number;
+
+ [Bindable("propertyChange")]
+ [Inspectable(category="General")]
+
+ public function get actualBaseline():Number
+ {
+ return _actualBaseline;
+ }
+
+ private function setActualBaseline(value:Number):void
+ {
+ if (value == _actualBaseline)
+ return;
+
+ var oldValue:Number = _actualBaseline;
+ _actualBaseline = value;
+ dispatchEvent(PropertyChangeEvent.createUpdateEvent(this, "actualBaseline", oldValue, value));
+ }
+
+ //----------------------------------
+ // verticalAlign
+ //----------------------------------
+
+ [Inspectable(category="General", enumeration="top,bottom,middle,justify,contentJustify,baseline", defaultValue="top")]
+ override public function get verticalAlign():String
+ {
+ return super.verticalAlign;
+ }
+
+ /**
+ * @private
+ */
+ override public function measure():void
+ {
+ super.measure();
+
+ var target:GroupBase = this.target;
+ if (!target || verticalAlign != "baseline")
+ return;
+
+ measureBaseline(true /*usePreferredSize*/);
+ if (!isNaN(_globalBaseline))
+ measuredBaselineTop = _globalBaseline;
+
+ // The measured height is the sum of the space above and below the baseline
+ if (isNaN(paddingTop))
+ measuredBaselineTop += paddingTop;
+ if (isNaN(paddingBottom))
+ measuredBaselineBottom += paddingBottom;
+ target.measuredHeight = Math.round(measuredBaselineTop + measuredBaselineBottom);
+ }
+
+ /**
+ * @private
+ */
+ override public function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+ {
+ super.updateDisplayList(unscaledWidth, unscaledHeight);
+
+ var target:GroupBase = this.target;
+ if (!target || verticalAlign != "baseline")
+ return;
+
+ measureBaseline(false /*usePreferredSize*/);
+ if (!isNaN(_globalBaseline))
+ measuredBaselineTop = _globalBaseline;
+
+ if (isNaN(paddingTop))
+ measuredBaselineTop += paddingTop;
+
+ // Adjust the position of the elements
+ var contentHeight:Number = 0;
+ var count:int = target.numElements;
+ for (var i:int = 0; i < count; i++)
+ {
+ var element:ILayoutElement = target.getElementAt(i);
+ if (!element || !element.includeInLayout)
+ continue;
+
+ var elementBaseline:Number = element.baseline as Number;
+ if (isNaN(elementBaseline))
+ elementBaseline = 0;
+
+ var baselinePosition:Number = element.baselinePosition;
+ var y:Number = measuredBaselineTop + (elementBaseline - baselinePosition);
+ element.setLayoutBoundsPosition(element.getLayoutBoundsX(), y);
+ contentHeight = Math.max(contentHeight, element.getLayoutBoundsHeight() + y);
+ }
+
+ // Adjust the content height
+ if (isNaN(paddingBottom))
+ contentHeight += paddingBottom;
+ target.setContentSize(target.contentWidth, contentHeight);
+
+ // Update the baseline
+ setActualBaseline(measuredBaselineTop);
+ }
+
+ private var measuredBaselineTop:Number = 0; // How much space is needed above the baseline to fit all the elements
+ private var measuredBaselineBottom:Number = 0; // How much space is needed below the baseline to fit all the elements
+
+ /**
+ * @private
+ */
+ private function measureBaseline(usePreferredSize:Boolean):void
+ {
+ var elementBaseline:Number = 0; // The current element's explicit baseline constraint
+ var elementBaselineTop:Number = 0; // The portiono of the current element that's above the baseline
+ var elementBaselineBottom:Number = 0; // The portion of the current element that's below the baseline
+
+ measuredBaselineTop = 0;
+ measuredBaselineBottom = 0;
+
+ var count:int = target.numElements;
+ for (var i:int = 0; i < count; i++)
+ {
+ var element:ILayoutElement = target.getElementAt(i);
+ if (!element || !element.includeInLayout)
+ continue;
+
+ var elementHeight:Number = usePreferredSize ? element.getPreferredBoundsHeight() :
+ element.getLayoutBoundsHeight();
+ elementBaseline = element.baseline as Number;
+ if (isNaN(elementBaseline))
+ elementBaseline = 0;
+
+ var baselinePosition:Number = element.baselinePosition;
+
+ elementBaselineTop = baselinePosition - elementBaseline;
+ elementBaselineBottom = elementHeight - elementBaselineTop;
+
+ measuredBaselineTop = Math.max(elementBaselineTop, measuredBaselineTop);
+ measuredBaselineBottom = Math.max(elementBaselineBottom, measuredBaselineBottom);
+ }
+ }
+}
+}
\ No newline at end of file
[4/5] git commit: [flex-utilities] [refs/heads/develop] - fix title
Posted by jm...@apache.org.
fix title
Project: http://git-wip-us.apache.org/repos/asf/flex-utilities/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-utilities/commit/88a9fd6f
Tree: http://git-wip-us.apache.org/repos/asf/flex-utilities/tree/88a9fd6f
Diff: http://git-wip-us.apache.org/repos/asf/flex-utilities/diff/88a9fd6f
Branch: refs/heads/develop
Commit: 88a9fd6f86003ec5e743d1cfd0923b686fc32016
Parents: 051a1e5
Author: Justin Mclean <jm...@apache.org>
Authored: Sat Aug 9 13:58:11 2014 +1000
Committer: Justin Mclean <jm...@apache.org>
Committed: Sat Aug 9 13:58:11 2014 +1000
----------------------------------------------------------------------
TourDeFlex/TourDeFlex3/src/explorer.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/88a9fd6f/TourDeFlex/TourDeFlex3/src/explorer.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/explorer.html b/TourDeFlex/TourDeFlex3/src/explorer.html
index 1ccd093..3d00e24 100755
--- a/TourDeFlex/TourDeFlex3/src/explorer.html
+++ b/TourDeFlex/TourDeFlex3/src/explorer.html
@@ -17,7 +17,7 @@
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<title>Apache Flex 4 Component Explorer</title>
+<title>Apache Flex Tour De Flex Component Explorer</title>
<script src="AC_OETags.js" language="javascript"></script>
<style>
body { margin: 0px; overflow:hidden }
[5/5] git commit: [flex-utilities] [refs/heads/develop] - fix path to
image
Posted by jm...@apache.org.
fix path to image
Project: http://git-wip-us.apache.org/repos/asf/flex-utilities/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-utilities/commit/84e898f4
Tree: http://git-wip-us.apache.org/repos/asf/flex-utilities/tree/84e898f4
Diff: http://git-wip-us.apache.org/repos/asf/flex-utilities/diff/84e898f4
Branch: refs/heads/develop
Commit: 84e898f48f6c7eed609b69faa66d1a1c91bc028a
Parents: 88a9fd6
Author: Justin Mclean <jm...@apache.org>
Authored: Sat Aug 9 13:58:26 2014 +1000
Committer: Justin Mclean <jm...@apache.org>
Committed: Sat Aug 9 13:58:26 2014 +1000
----------------------------------------------------------------------
TourDeFlex/TourDeFlex3/src/explorer.mxml | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/84e898f4/TourDeFlex/TourDeFlex3/src/explorer.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex3/src/explorer.mxml b/TourDeFlex/TourDeFlex3/src/explorer.mxml
index 702ee01..a27025a 100755
--- a/TourDeFlex/TourDeFlex3/src/explorer.mxml
+++ b/TourDeFlex/TourDeFlex3/src/explorer.mxml
@@ -56,7 +56,7 @@
</fx:Declarations>
<mx:HBox width="100%">
- <mx:Image source="./controls/assets/ApacheFlexIcon.png" />
+ <mx:Image source="./mx/controls/assets/ApacheFlexIcon.png" />
<mx:Label text="{FULL_TITLE}" fontSize="20" fontWeight="bold" />
</mx:HBox>
<mx:HDividedBox width="100%" height="100%">