flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aha...@apache.org
Subject [1/4] add mx and spark versions of FlexStore
Date Thu, 28 Aug 2014 21:05:09 GMT
Repository: flex-examples
Updated Branches:
  refs/heads/develop a3a903137 -> c652cfba6


http://git-wip-us.apache.org/repos/asf/flex-examples/blob/c652cfba/FlexStore/spark/src/productsView/ProductCatalogPanelSkin.mxml
----------------------------------------------------------------------
diff --git a/FlexStore/spark/src/productsView/ProductCatalogPanelSkin.mxml b/FlexStore/spark/src/productsView/ProductCatalogPanelSkin.mxml
new file mode 100644
index 0000000..d7f4aea
--- /dev/null
+++ b/FlexStore/spark/src/productsView/ProductCatalogPanelSkin.mxml
@@ -0,0 +1,286 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+
+ADOBE SYSTEMS INCORPORATED
+Copyright 2008 Adobe Systems Incorporated
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file
+in accordance with the terms of the license agreement accompanying it.
+
+-->
+
+<!--- The default skin class for a Spark Panel container.  
+
+    @see spark.components.Panel
+
+    @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" 
+    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false" 
+    minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5" xmlns:productsView="productsView.*">
+    <fx:Metadata>[HostComponent("productsView.ProductCatalogPanel")]</fx:Metadata>
+    
+    <fx:Script fb:purpose="styling">
+        <![CDATA[
+		import mx.core.FlexVersion;
+		
+		/* Define the skin elements that should not be colorized. 
+        For panel, border and title background are skinned, but the content area, background, border, and title text are not. */
+        static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup", "border"];
+			
+		/* exclusions before Flex 4.5 for backwards-compatibility purposes */
+		static private const exclusions_4_0:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];
+		
+		/**
+		 * @private
+		 */
+		override public function get colorizeExclusions():Array 
+		{
+			// Since border is styleable via borderColor, no need to allow chromeColor to affect
+			// the border.  This is wrapped in a compatibility flag since this change was added  
+			// in Flex 4.5
+			if (FlexVersion.compatibilityVersion < FlexVersion.VERSION_4_5)
+			{
+				return exclusions_4_0;
+			}
+			
+			return exclusions;
+		}
+        
+        /**
+         * @private
+         */
+        override protected function initializationComplete():void
+        {
+            useChromeColor = true;
+            super.initializationComplete();
+        }
+        
+        /**
+         * @private
+         */
+        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+        {
+            if (getStyle("borderVisible") == true)
+            {
+                border.visible = true;
+                background.left = background.top = background.right = background.bottom = 1;
+                contents.left = contents.top = contents.right = contents.bottom = 1;
+            }
+            else
+            {
+                border.visible = false;
+                background.left = background.top = background.right = background.bottom = 0;
+                contents.left = contents.top = contents.right = contents.bottom = 0;
+            }
+            
+            dropShadow.visible = getStyle("dropShadowVisible");
+            
+            var cr:Number = getStyle("cornerRadius");
+            var withControls:Boolean = 
+                (currentState == "disabledWithControlBar" || 
+                 currentState == "normalWithControlBar");
+            
+            if (cornerRadius != cr)
+            {
+                cornerRadius = cr;
+                
+                dropShadow.tlRadius = cornerRadius;
+                dropShadow.trRadius = cornerRadius;
+                dropShadow.blRadius = withControls ? cornerRadius : 0;
+                dropShadow.brRadius = withControls ? cornerRadius : 0;
+                
+                setPartCornerRadii(topMaskRect, withControls); 
+                setPartCornerRadii(border, withControls); 
+                setPartCornerRadii(background, withControls);                
+            }
+            
+            if (bottomMaskRect) setPartCornerRadii(bottomMaskRect, withControls); 
+            
+            borderStroke.color = getStyle("borderColor");
+            borderStroke.alpha = getStyle("borderAlpha");
+            backgroundFill.color = getStyle("backgroundColor");
+            backgroundFill.alpha = getStyle("backgroundAlpha");
+            
+            super.updateDisplayList(unscaledWidth, unscaledHeight);
+        }
+        
+        /**
+         * @private
+         */  
+        private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void
+        {            
+            target.topLeftRadiusX = cornerRadius;
+            target.topRightRadiusX = cornerRadius;
+            target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
+            target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
+        }
+        
+        private var cornerRadius:Number;
+		]]>
+    </fx:Script>
+    
+    <s:states>
+        <s:State name="normal" />
+        <s:State name="disabled" />
+        <s:State name="normalWithControlBar" stateGroups="withControls" />
+        <s:State name="disabledWithControlBar" stateGroups="withControls" />
+    </s:states>
+    
+    <!-- drop shadow can't be hittable so it stays sibling of other graphics -->
+    <!--- @private -->
+    <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.32" distance="11" 
+                             angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
+    
+    <!-- drop shadow can't be hittable so all other graphics go in this group -->
+    <s:Group left="0" right="0" top="0" bottom="0">
+        
+        <!-- top group mask -->
+        <!--- @private -->
+        <s:Group left="1" top="1" right="1" bottom="1" id="topGroupMask" >
+            <!--- @private -->
+            <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
+                <s:fill>
+                    <s:SolidColor alpha="0"/>
+                </s:fill>
+            </s:Rect>
+        </s:Group>
+        
+        <!-- bottom group mask -->
+        <!--- @private -->
+        <s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask" 
+                 includeIn="normalWithControlBar, disabledWithControlBar">
+            <!--- @private -->
+            <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
+                <s:fill>
+                    <s:SolidColor alpha="0"/>
+                </s:fill>
+            </s:Rect>
+        </s:Group>
+        
+        <!-- layer 1: border -->
+        <!--- @private -->
+        <s:Rect id="border" left="0" right="0" top="0" bottom="0" >
+            <s:stroke>
+                <!--- @private -->
+                <s:SolidColorStroke id="borderStroke" weight="1" />
+            </s:stroke>
+        </s:Rect>
+        
+        <!-- layer 2: background fill -->
+        <!--- Defines the appearance of the PanelSkin class's background. -->
+        <s:Rect id="background" left="1" top="1" right="1" bottom="1">
+            <s:fill>
+                <!--- @private
+                      Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
+                <s:SolidColor id="backgroundFill" color="#FFFFFF"/>
+            </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" id="contents">
+            <s:layout>
+                <s:VerticalLayout gap="0" horizontalAlign="justify" />
+            </s:layout>
+            
+            <!--- @private -->
+            <s:Group id="topGroup" mask="{topGroupMask}">
+                
+                <!-- layer 0: title bar fill -->
+                <!--- @private -->
+                <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
+                    <s:fill>
+                        <s:LinearGradient rotation="90">
+                            <s:GradientEntry color="0xE2E2E2" />
+                            <s:GradientEntry color="0xD9D9D9" />
+                        </s:LinearGradient>
+                    </s:fill>
+                </s:Rect>
+                
+                <!-- layer 1: title bar highlight -->
+                <!--- @private -->
+                <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 -->
+                <!--- @private -->
+                <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 -->
+                <!--- @copy spark.components.Panel#titleDisplay -->
+                <s:Label id="titleDisplay" maxDisplayedLines="1"
+                         left="9" right="3" top="1" bottom="0" minHeight="30"
+                         verticalAlign="middle" textAlign="start" fontWeight="bold">
+                </s:Label>
+                <productsView:CatalogTitleButtons id="titleButtons" width="50%" right="0" top="6" />
+            </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
+            -->
+            <!--- @copy spark.components.SkinnableContainer#contentGroup -->
+            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+            </s:Group>
+            
+            <!--- @private -->
+            <s:Group id="bottomGroup" minWidth="0" minHeight="0"
+                     includeIn="normalWithControlBar, disabledWithControlBar" >
+                
+                <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
+
+                    <!-- layer 0: control bar divider line -->
+                    <s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
+                        <s:fill>
+                            <s:SolidColor color="0x000000" />
+                        </s:fill>
+                    </s:Rect>
+                    
+                    <!-- layer 1: control bar highlight -->
+                    <s:Rect left="0" right="0" top="1" bottom="0">
+                        <s:stroke>
+                            <s:LinearGradientStroke rotation="90" weight="1">
+                                <s:GradientEntry color="0xE5E5E5" />
+                                <s:GradientEntry color="0xD8D8D8" />
+                            </s:LinearGradientStroke>
+                        </s:stroke>
+                    </s:Rect>
+                    
+                    <!-- layer 2: control bar fill -->
+                    <s:Rect left="1" right="1" top="2" bottom="1">
+                        <s:fill>
+                            <s:LinearGradient rotation="90">
+                                <s:GradientEntry color="0xDADADA" />
+                                <s:GradientEntry color="0xC5C5C5" />
+                            </s:LinearGradient>
+                        </s:fill>
+                    </s:Rect>
+                </s:Group>
+                <!-- layer 3: control bar -->
+                <!--- @copy spark.components.Panel#controlBarGroup -->
+                <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
+                    <s:layout>
+                        <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
+                    </s:layout>
+                </s:Group>
+            </s:Group>
+        </s:Group>
+    </s:Group>
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/c652cfba/FlexStore/spark/src/productsView/ProductCatalogThumbnail.mxml
----------------------------------------------------------------------
diff --git a/FlexStore/spark/src/productsView/ProductCatalogThumbnail.mxml b/FlexStore/spark/src/productsView/ProductCatalogThumbnail.mxml
new file mode 100644
index 0000000..60c5821
--- /dev/null
+++ b/FlexStore/spark/src/productsView/ProductCatalogThumbnail.mxml
@@ -0,0 +1,195 @@
+<?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:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
+           xmlns:s="library://ns.adobe.com/flex/spark"
+    width="{COL_WIDTH_4}" height="{COL_HEIGHT_4}" height.compare="502"
+    width.x4cols="{COL_WIDTH_4}" height.x4cols="{COL_HEIGHT_4}"
+    width.x3cols="{COL_WIDTH_3}" height.x3cols="{COL_HEIGHT_3}"
+    width.x2cols="{COL_WIDTH_2}" height.x2cols="{COL_HEIGHT_2}"
+    
+    borderStyle="solid"
+    borderColor="#FFFFFF"
+    rollOver="rollOverHandler(event)"
+    rollOut="rollOutHandler(event)"
+    mouseDown="mouseDownHandler(event)"
+    mouseMove="mouseMoveHandler(event)"
+    mouseUp="mouseUpHandler(event)"
+    click="clickHandler(event)"
+    currentState="x4cols"
+    automationName="{product.name}"
+    >
+
+    <fx:Metadata>
+        [Event(name="purchase", type="samples.flexstore.ProductThumbEvent")]
+        [Event(name="compare", type="samples.flexstore.ProductThumbEvent")]
+        [Event(name="details", type="samples.flexstore.ProductThumbEvent")]
+    </fx:Metadata>
+
+    <fx:Script>
+        <![CDATA[
+
+		import mx.events.*;
+        import mx.core.*;
+        
+        import samples.flexstore.Product;
+        import samples.flexstore.ProductThumbEvent;
+        
+        public static const COL_WIDTH_4:int = 162;
+        public static const COL_HEIGHT_4:int = 122;
+        public static const COL_WIDTH_3:int = 217;
+        public static const COL_HEIGHT_3:int = 165;
+        public static const COL_WIDTH_2:int = 327;
+        public static const COL_HEIGHT_2:int = 250;
+        public static const COMPARE_WIDTH:int = 162;
+        public static const HORIZONTAL_GAP:int = 2;
+        public static const VERTICAL_GAP:int = 3;
+
+        [Bindable]
+        public var product:Product;
+
+        private function rollOverHandler(event:MouseEvent):void
+		{
+            setStyle("borderColor", "#CCCCCC");
+            setStyle("dropShadowEnabled", true);
+            buttons.visible = true;
+        }
+
+        private function rollOutHandler(event:MouseEvent):void
+		{
+            setStyle("borderColor", "#FFFFFF");
+            setStyle("dropShadowEnabled", false);
+			buttons.visible = false;
+        }
+
+        private var dragStartPoint:Point;
+
+        public function mouseDownHandler(event:MouseEvent):void
+        {
+            if (event.target != purchase &&
+                event.target != compare &&
+                event.target != details)
+            {
+                dragStartPoint = new Point(event.stageX, event.stageY);
+                dragStartPoint = globalToLocal(dragStartPoint);
+
+            }
+        }
+
+        public function mouseMoveHandler(event:MouseEvent):void
+        {
+            if (dragStartPoint != null)
+            {
+                var dragEvent:DragEvent = new DragEvent(DragEvent.DRAG_START, true);
+                dragEvent.localX = dragStartPoint.x;
+                dragEvent.localY = dragStartPoint.y;
+                dragEvent.buttonDown = true;
+                dispatchEvent(dragEvent);
+
+                rollOutHandler(event);
+
+                dragStartPoint = null;
+            }
+        }
+
+        public function mouseUpHandler(event:MouseEvent):void
+        {
+            if (dragStartPoint != null)
+            {
+                dragStartPoint = null;
+            }
+        }
+
+        public function clickHandler(event:MouseEvent):void
+        {
+            if (event.target != purchase &&
+                event.target != compare &&
+                event.target != details)
+            {
+                dispatchEvent(new ProductThumbEvent(ProductThumbEvent.DETAILS, product));
+            }
+        }
+
+	]]>
+    </fx:Script>
+
+    <fx:Declarations>
+        <s:CurrencyFormatter currencySymbol="$" id="cf" fractionalDigits="2"/>        
+    </fx:Declarations>
+
+    <s:VGroup id="vb" width="100%" height="100%"
+        paddingLeft="6" paddingTop="4" paddingRight="8" paddingBottom="4"
+        gap="0">
+
+        <s:Label text="{product.name}" fontWeight="bold"/>
+
+        <s:HGroup width="100%" paddingTop="0" gap="4">
+
+            <s:Image id="img" height="90" width="45" 
+                     width.x3cols="60" height.x3cols="120"
+                     width.x2cols="60" height.x2cols="120"
+                     source="{product.image}" />
+
+            <s:VGroup id="descr" width="100%" height="100%" gap="0" paddingTop="0">
+                <s:Label text="{product.featureString}" width="80" height="48" maxDisplayedLines="5"/>
+                <s:Label text="{cf.format(product.price)}" fontWeight="bold"/>
+				<s:Spacer height="4"/>
+                <s:Label text="{product.highlight1}" color="#EE8D0C" includeIn="x3cols, x2cols"/>
+                <s:Label text="{product.highlight2}" color="#EE8D0C" includeIn="x3cols, x2cols"/>
+            </s:VGroup>
+
+        </s:HGroup>
+
+        <s:Spacer height="8"/>
+
+        <s:Label text="Years: {product.experience}" includeIn="compare"/>
+        <s:Label text="BlazeDS: {product.blazeds}" includeIn="compare"/>
+        <s:Label text="Mobile: {product.mobile}" includeIn="compare"/>
+        <s:Label text="Video: {product.video}" includeIn="compare"/>
+        <s:Label text="Highlight: {product.highlight1}" includeIn="compare"/>
+        <s:Label text="Highlight: {product.highlight2}" includeIn="compare"/>
+        <s:Label text="Description:" includeIn="compare"/>
+        <s:Label text="{product.description}" width="100%" includeIn="compare" maxDisplayedLines="5"/>
+    </s:VGroup>
+
+
+    <s:VGroup id="buttons" visible="false" gap="4" paddingRight="8" right="8" top="12">
+        <s:Button id="purchase" icon="@Embed('/assets/icon_cart_empty.png')" 
+            click="dispatchEvent(new ProductThumbEvent(ProductThumbEvent.PURCHASE, product))" 
+            width="30" toolTip="Add to cart"/>
+        <s:Button id="compare" icon="@Embed('/assets/icon_compare.png')" 
+            click="dispatchEvent(new ProductThumbEvent(ProductThumbEvent.COMPARE, product))" 
+            width="30" toolTip="Add to compare list"/>
+        <s:Button id="details" icon="@Embed('/assets/icon_details.png')" 
+            click="dispatchEvent(new ProductThumbEvent(ProductThumbEvent.DETAILS, product))" 
+            width="30" toolTip="Show details"/>
+    </s:VGroup>
+
+    <s:states>
+
+        <s:State name="compare" />
+
+        <s:State name="x4cols" />
+
+        <s:State name="x3cols" />
+
+        <s:State name="x2cols"/>
+    </s:states>
+
+</s:BorderContainer>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/c652cfba/FlexStore/spark/src/productsView/ProductDetails.mxml
----------------------------------------------------------------------
diff --git a/FlexStore/spark/src/productsView/ProductDetails.mxml b/FlexStore/spark/src/productsView/ProductDetails.mxml
new file mode 100644
index 0000000..4b2417d
--- /dev/null
+++ b/FlexStore/spark/src/productsView/ProductDetails.mxml
@@ -0,0 +1,121 @@
+<?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:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
+           xmlns:s="library://ns.adobe.com/flex/spark"
+    xmlns:productsView="productsView.*"
+    >
+
+    <fx:Metadata>
+        [Event(name="purchase", type="samples.flexstore.ProductThumbEvent")]
+        [Event(name="compare", type="samples.flexstore.ProductThumbEvent")]
+        [Event(name="browse", type="samples.flexstore.ProductThumbEvent")]
+    </fx:Metadata>
+
+    <fx:Script>
+        <![CDATA[
+
+		import mx.events.*;
+		
+		import samples.flexstore.Product;
+		import samples.flexstore.ProductThumbEvent;
+
+        private var _product:Product;
+        
+        [Bindable]
+        public function get product():Product
+        {
+            return _product;
+        }
+        
+        public function set product(p:Product):void
+        {
+            _product = p;
+            tn.selectedIndex = 0;
+        }
+        
+	]]>
+    </fx:Script>
+
+    <fx:Declarations>
+        <s:CurrencyFormatter currencySymbol="$" id="cf" fractionalDigits="2"/>        
+    </fx:Declarations>
+
+    <s:states>
+        <s:State name="Features" />
+        <s:State name="Support" />
+    </s:states>
+    
+    <s:transitions>
+        <s:Transition>
+            <s:Fade />
+        </s:Transition>
+    </s:transitions>
+    
+    <s:TabBar id="tn" width="100%" change="currentState = tn.selectedItem">
+        <s:dataProvider>
+            <s:ArrayList>
+                <fx:Array>
+                    <fx:String>Features</fx:String>
+                    <fx:String>Support</fx:String>
+                </fx:Array>
+            </s:ArrayList>
+        </s:dataProvider>
+    </s:TabBar>
+    <s:Group width="100%" height="100%" 
+                    left="4" right="8" top="34" bottom="4">
+
+        <s:VGroup width="100%" height="100%" includeIn="Features" gap="8"
+            paddingLeft="8" paddingTop="8" paddingRight="8" paddingBottom="8">
+
+            <s:HGroup width="100%" gap="12">
+
+                <s:Image id="img" width="101" height="200" source="{product.image}"/>
+
+                <s:VGroup id="descr" width="100%" height="100%" paddingTop="0" gap="4">
+
+                    <s:Label text="{product.name}" fontSize="11" fontWeight="bold"/>
+
+	                <s:Label text="{product.featureString}" width="80" height="48" maxDisplayedLines="4"/>
+
+                    <s:Label text="{product.highlight1}" color="#EE8D0C"/>
+
+                    <s:Label text="{product.highlight2}" color="#EE8D0C"/>
+
+                    <s:Label text="{cf.format(product.price)}" fontWeight="bold"/>
+
+                </s:VGroup>
+            </s:HGroup>
+
+            <s:Label id="descriptionText" width="100%" height="100%" text="{product.description}" maxDisplayedLines="0"/>
+
+        </s:VGroup>
+
+        <productsView:ProductSupport width="100%" height="100%" includeIn="Support" />
+
+    </s:Group>
+
+    <s:VGroup gap="4" right="16" top="36">
+        <s:Spacer width="100%"/>
+        <s:Button icon="@Embed('/assets/icon_cart_empty.png')" click="dispatchEvent(new ProductThumbEvent(ProductThumbEvent.PURCHASE, product))" width="30" toolTip="Add to cart"/>
+        <s:Button icon="@Embed('/assets/icon_compare.png')" click="dispatchEvent(new ProductThumbEvent(ProductThumbEvent.COMPARE, product))" width="30" toolTip="Add to compare list"/>
+        <s:Button icon="@Embed('/assets/icon_tiles.png')" click="dispatchEvent(new ProductThumbEvent(ProductThumbEvent.BROWSE, product));" width="30" toolTip="Back to thumbnail view"/>
+    </s:VGroup>
+
+</s:Group>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/c652cfba/FlexStore/spark/src/productsView/ProductFilterPanel.mxml
----------------------------------------------------------------------
diff --git a/FlexStore/spark/src/productsView/ProductFilterPanel.mxml b/FlexStore/spark/src/productsView/ProductFilterPanel.mxml
new file mode 100644
index 0000000..a0310df
--- /dev/null
+++ b/FlexStore/spark/src/productsView/ProductFilterPanel.mxml
@@ -0,0 +1,200 @@
+<?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:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
+         xmlns:s="library://ns.adobe.com/flex/spark" 
+    xmlns:productsView="productsView.*"
+    xmlns:flexstore="samples.flexstore.*"
+    height="100%" 
+    paddingLeft="4" 
+    paddingRight="12" 
+    paddingTop="12" 
+    paddingBottom="8" 
+    gap="0"
+    currentState="showingThumbnails">
+    
+    <fx:Metadata>
+       [Event(name="filter", type="samples.flexstore.ProductFilterEvent")] 
+       [Event("compare")]
+    </fx:Metadata>
+    
+    <fx:Script>
+        <![CDATA[
+        import mx.controls.sliderClasses.Slider;
+        import mx.controls.Alert; 
+        import samples.flexstore.ProductFilterEvent;
+           
+        private var thumbBeingPressed:Boolean;
+           
+        private function dispatchFilter():void
+        {
+            var event:ProductFilterEvent = 
+                new ProductFilterEvent(filter, thumbBeingPressed);
+            dispatchEvent(event);
+            currentState = "showingThumbnails";
+        }
+        
+        private function sliderValue(values:Array, index:int):Number
+        {
+            return values[index];
+        }
+        
+        private function productRemoved():void
+        {
+            if (currentState == "showingComparison")
+            {
+                if (productList.items.length == 0)
+                {
+                    dispatchFilter();
+                }
+                else
+                {
+                    attemptCompare();
+                }
+            }
+        }
+        
+        private function attemptCompare():void
+        {
+            if (productList.items.length > 0)
+            {
+                dispatchEvent(new Event("compare"));
+                currentState = "showingComparison";
+            }
+            else
+            {
+                Alert.show("There are no items to compare.", "Compare");
+            }
+        }
+        
+        ]]>
+    </fx:Script>
+    <fx:Declarations>
+        <flexstore:ProductFilter id="filter">
+            <flexstore:experience>{series.selectedItem}</flexstore:experience>
+            <flexstore:minPrice>{loPrice.value}</flexstore:minPrice>
+            <flexstore:maxPrice>{hiPrice.value}</flexstore:maxPrice>
+            <flexstore:blazeds>{cbBlazeDS.selected}</flexstore:blazeds>
+            <flexstore:mobile>{cbMobile.selected}</flexstore:mobile>
+            <flexstore:video>{cbVideo.selected}</flexstore:video>
+        </flexstore:ProductFilter>
+        
+        <s:CurrencyFormatter currencySymbol="$" id="cf"/>    
+        
+    </fx:Declarations>
+    
+    <s:Label text="Find" styleName="sectionHeader"/>
+    
+    <s:HGroup width="100%">
+        <s:TextInput styleName="glass" width="100%"/>
+        <s:Button styleName="glass" label="Go" click="Alert.show('This feature is not implemented in this sample', 'Find')"/>
+    </s:HGroup>
+
+    <s:Spacer height="18"/>
+
+    <s:Line width="100%"/>
+
+    <s:Spacer height="8"/>
+
+    <s:HGroup paddingTop="0" paddingLeft="0" verticalAlign="bottom">
+        <s:Label text="Filter" styleName="sectionHeader"/>
+        <s:Label text="({filter.count} items selected)" color="{getStyle('themeColor')}" fontWeight="bold"/>
+    </s:HGroup>
+
+    <s:Spacer height="8"/>
+
+    <s:Label text="Years of Experience"/>
+
+    <s:ComboBox id="series" styleName="glass" width="140" change="dispatchFilter();">
+        <s:dataProvider>
+            <s:ArrayList>
+                <fx:Array>
+                    <fx:String>All</fx:String>
+                    <fx:String>3</fx:String>
+                    <fx:String>5</fx:String>
+                    <fx:String>7</fx:String>
+                    <fx:String>9</fx:String>
+                </fx:Array>                
+            </s:ArrayList>
+        </s:dataProvider>
+    </s:ComboBox>
+
+    <s:Spacer height="18"/>
+
+    <s:Label text="Price"/>
+
+    <!--<s:HSlider id="priceSlider" styleName="glassSlider" minimum="0" maximum="200" tickInterval="10" snapInterval="10"
+        width="100%" thumbCount="2" values="[0,200]" labels="[$0,$200]" liveDragging="true" dataTipFormatFunction="{cf.format}"
+        change="dispatchFilter()"
+        thumbPress="thumbBeingPressed=true"
+        thumbRelease="thumbBeingPressed=false;dispatchFilter()"
+        />-->
+    <s:HGroup>
+        <s:NumericStepper id="loPrice" minimum="0" maximum="{hiPrice.value}" value="0" change="dispatchFilter()" />
+        <s:NumericStepper id="hiPrice" minimum="{loPrice.value}" maximum="200" value="200" change="dispatchFilter()" />
+    </s:HGroup>
+
+    <s:Spacer height="18"/>
+
+    <s:Label text="Required Features"/>
+
+    <s:Spacer height="4"/>
+
+    <s:CheckBox id="cbBlazeDS" styleName="glass" label="BlazeDS" click="dispatchFilter();"/>
+    <s:Spacer height="4"/>
+    <s:CheckBox id="cbMobile" styleName="glass" label="Mobile" click="dispatchFilter()"/>
+    <s:Spacer height="4"/>
+    <s:CheckBox id="cbVideo" styleName="glass" label="Video" click="dispatchFilter();"/>
+
+    <s:Spacer height="18"/>
+
+    <s:Line width="100%"/>
+
+    <s:Spacer height="8"/>
+
+        <s:HGroup>
+            <s:Label text="Compare" styleName="sectionHeader"/>
+            <s:Label text="(Drag items here to compare)" styleName="instructions"/>
+        </s:HGroup>
+
+
+    <s:Spacer height="4"/>
+
+    <!-- height is maxItems * ProductListItem.HEIGHT + 2px border -->
+    <productsView:ProductList id="productList" height="{productList.maxItems * ProductListItem.HEIGHT + 2}" width="100%"
+        newItemStartX="300" newItemStartY="-100" maxItems="4" 
+        removeProduct="productRemoved()"/>
+
+    <s:Spacer height="8"/>
+    
+    <s:Button id="compareButton" styleName="glass" 
+              label.showingThumbnails="Compare Items"
+              icon.showingThumbnails="@Embed('/assets/icon_compare.png')"
+              click.showingThumbnails="attemptCompare()"
+              label.showingComparison="Back to thumbnail view"
+              icon.showingComparison="@Embed('/assets/icon_tiles.png')"
+              click.showingComparison="dispatchFilter()"
+    />
+    
+    <s:states>
+       <s:State name="showingThumbnails" />
+       <s:State name="showingComparison" />
+    </s:states>
+
+</s:VGroup>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/c652cfba/FlexStore/spark/src/productsView/ProductList.mxml
----------------------------------------------------------------------
diff --git a/FlexStore/spark/src/productsView/ProductList.mxml b/FlexStore/spark/src/productsView/ProductList.mxml
new file mode 100644
index 0000000..37d2e26
--- /dev/null
+++ b/FlexStore/spark/src/productsView/ProductList.mxml
@@ -0,0 +1,214 @@
+<?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:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
+           xmlns:s="library://ns.adobe.com/flex/spark"
+    borderStyle="solid"
+    dragEnter="doDragEnter(event)"
+    dragDrop="doDragDrop(event)"
+    backgroundAlpha="0" backgroundColor="#FF0000"> <!-- need a background color for drag and drop but can set alpha to 0 -->
+    
+    <fx:Metadata>
+       [Event(name="addProduct", type="samples.flexstore.ProductListEvent")]
+       [Event(name="duplicateProduct", type="samples.flexstore.ProductListEvent")]
+       [Event(name="productQtyChange", type="samples.flexstore.ProductListEvent")]
+       [Event(name="removeProduct", type="samples.flexstore.ProductListEvent")]
+    </fx:Metadata>
+
+    <fx:Script>
+        <![CDATA[
+        import mx.core.*;
+        import mx.effects.*;
+        import mx.events.*;
+        import mx.managers.DragManager;
+        import mx.effects.EffectManager;
+        
+        import samples.flexstore.Product;
+        import samples.flexstore.ProductListEvent;
+        
+        public var items:Array = [];
+        
+        public var newItemStartX:int;
+        public var newItemStartY:int;
+        [Bindable]
+        public var maxItems:int;
+        public var showQuantity:Boolean;
+        
+        private var playingEffects:Dictionary = new Dictionary(true);
+        
+        public function addProduct(product:Product):void
+		{
+            var index:int = indexOf(product.productId);
+            var event:ProductListEvent;
+            var item:ProductListItem;
+            
+            if (index != -1)
+			{
+			    item = items[index] as ProductListItem;
+			    //if we don't keep track of what's playing a double-click can
+			    //cause the list item to keep rising
+			    if (playingEffects[item] == null)
+			    {
+                    var jump:Sequence = new Sequence();
+                    var m1:Move = new Move(item)
+                    m1.yBy = -5;
+                    var m2:Move = new Move(item)
+                    m2.yBy = 5;
+                    jump.addChild(m1);
+                    jump.addChild(m2);
+                    jump.duration = 150;
+                    playingEffects[item] = jump;
+                    jump.addEventListener(EffectEvent.EFFECT_END, function(event:Event):void
+                    {
+                       delete playingEffects[item];
+                    });
+                    jump.play();
+                }
+                event = new ProductListEvent(ProductListEvent.DUPLICATE_PRODUCT);
+                event.product = item.product;
+                dispatchEvent(event);
+            }
+			else
+			{
+                index = items.length;
+                if (maxItems <= 0 || index < maxItems)
+				{
+				    item = new ProductListItem();
+				    if (showQuantity)
+				    {
+				        item.currentState = 'showQuantity';
+				    }
+				    item.product = product;
+				    item.percentWidth = 100;
+				    item.addEventListener(ProductListEvent.REMOVE_PRODUCT, removeItemHandler);
+                    items[index] = item;
+                    item.includeInLayout = false;
+                    viewport.addElement(item);
+                    item.setLayoutBoundsSize(viewport.width, item.getPreferredBoundsHeight());
+                    layoutItems(index, true);
+                    event = new ProductListEvent(ProductListEvent.ADD_PRODUCT);
+                    event.product = product;
+                    dispatchEvent(event);
+                }
+            }
+        }
+        
+        public function getProducts():Array
+        {
+            var ret:Array = [];
+            for (var i:int = 0; i < items.length; i++)
+            {
+                ret[i] = items[i].product;
+            }
+            return ret;
+        }
+        
+        private function removeItemHandler(event:Event):void
+        {
+            var item:ProductListItem = event.target as ProductListItem;
+            var index:int = indexOf(item.product.productId);
+            items.splice(index, 1);
+            viewport.removeElement(item);
+            layoutItems(index);
+        }
+            
+        private function layoutItems(startIndex:int, scrollToBottom:Boolean=false):void
+		{
+            var n:int = items.length;
+            var e:Move;
+			for (var i:int = startIndex; i < n ; i++)
+			{
+			    var item:ProductListItem = items[i];
+                var yTo:Number = i * (item.height);
+                //still need to prevent items that are already in motion from getting
+                //jumpy
+			    if (playingEffects[item] == null)
+			    {
+                    e = new Move(item);
+                    if (item.x == 0 && item.y == 0)
+    				{
+    					e.xFrom = newItemStartX;
+    					e.yFrom = newItemStartY;
+                    }
+    
+                    e.xTo = 0;
+                    e.yTo = yTo;
+                    playingEffects[item] = e;
+                    e.addEventListener(EffectEvent.EFFECT_END, function(event:Event):void
+                    {
+                       delete playingEffects[item];
+                    });
+                    e.play();
+                }
+                else
+                {
+                    playingEffects[item].pause();
+                    playingEffects[item].yTo = yTo;
+                    playingEffects[item].play();
+                }
+            }
+            //get the last event and if we should scroll make sure we can validate
+            //and scroll to maxVPosition
+            if (scrollToBottom)
+            {
+                e.addEventListener(EffectEvent.EFFECT_END, function(event:Event):void
+                {
+                    validateNow();
+                    viewport.verticalScrollPosition = viewport.contentHeight - viewport.height;    
+                });
+            }
+        }
+        
+        private function indexOf(productId:int):int
+		{
+            var index:int = -1;
+
+            var n:int = items.length;
+			for (var i:int = 0; i < items.length; i++)
+			{
+                if (items[i].product.productId == productId)
+				{
+                    index = i;
+                    break;
+                }
+            }
+
+            return index;
+        }     
+
+        private function doDragEnter(event:DragEvent):void
+        {
+            if (event.dragSource.hasFormat("product"))
+            {
+                DragManager.acceptDragDrop(IUIComponent(event.target));
+            }
+        }
+
+        private function doDragDrop(event:DragEvent):void
+        {
+            var product:Product = event.dragSource.dataForFormat("product") as Product;
+            addProduct(product);
+        }  
+ 
+        ]]>
+    </fx:Script>
+    <s:Scroller id="scroller" width="100%" height="100%">
+        <s:Group id="viewport" width="100%" height="100%" />
+    </s:Scroller>
+</s:BorderContainer>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/c652cfba/FlexStore/spark/src/productsView/ProductListItem.mxml
----------------------------------------------------------------------
diff --git a/FlexStore/spark/src/productsView/ProductListItem.mxml b/FlexStore/spark/src/productsView/ProductListItem.mxml
new file mode 100644
index 0000000..5d32431
--- /dev/null
+++ b/FlexStore/spark/src/productsView/ProductListItem.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:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
+         xmlns:s="library://ns.adobe.com/flex/spark" 
+    styleName="listItem" 
+    height="{ProductListItem.HEIGHT}"
+    automationName="{product.name}">
+
+    <fx:Metadata>
+       [Event(name="productQtyChange", type="samples.flexstore.ProductListEvent")]
+       [Event(name="removeProduct", type="samples.flexstore.ProductListEvent")]
+    </fx:Metadata>
+    
+    <fx:Script>
+    <![CDATA[
+    
+        import samples.flexstore.Product;
+        import samples.flexstore.ProductListEvent;
+        
+        public static const HEIGHT:int = 30;
+        
+        [Bindable]
+        public var product:Product;
+        
+        private function qtyChange():void
+    	{
+            product.qty = int(qty.text);
+            var event:ProductListEvent = new ProductListEvent(ProductListEvent.PRODUCT_QTY_CHANGE);
+            event.product = product;
+    		dispatchEvent(event);
+        }
+        
+        private function removeItem():void
+        {
+            var event:ProductListEvent = new ProductListEvent(ProductListEvent.REMOVE_PRODUCT);
+            event.product = product;
+    		dispatchEvent(event);
+        }
+        
+    ]]>
+    </fx:Script>
+    
+    <fx:Declarations>
+        <s:CurrencyFormatter currencySymbol="$" id="cf" fractionalDigits="2"/>
+    </fx:Declarations>
+    
+    <s:layout>
+        <s:HorizontalLayout />
+    </s:layout>
+        
+    <s:Button id="removeButton"
+        width="14" height="14" 
+        icon="@Embed('/assets/trashcan.png')"
+        toolTip="Remove from cart"
+        click="removeItem()"/>
+
+    <s:Image id="productImage" width="12" height="24" source="{product.image}"/>
+
+    <s:Label id="productName" maxWidth="100" text="{product.name}"/>
+
+    <s:Spacer width="100%" />
+
+    <s:Label id="productPrice" 
+        text="{cf.format(product.price)}" textAlign="right"/>
+        
+    <s:TextInput id="qty" width="25" text="{product.qty}" includeIn="showQuantity"
+                  textAlign="right" maxChars="3" change="qtyChange()" />
+    <s:states>
+        <s:State name="compare" />
+        <s:State name="showQuantity" />
+    </s:states>
+    
+</s:ItemRenderer>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/c652cfba/FlexStore/spark/src/productsView/ProductSupport.mxml
----------------------------------------------------------------------
diff --git a/FlexStore/spark/src/productsView/ProductSupport.mxml b/FlexStore/spark/src/productsView/ProductSupport.mxml
new file mode 100644
index 0000000..599ea87
--- /dev/null
+++ b/FlexStore/spark/src/productsView/ProductSupport.mxml
@@ -0,0 +1,88 @@
+<?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:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
+        xmlns:s="library://ns.adobe.com/flex/spark" 
+		 paddingLeft="4" paddingRight="8" paddingBottom="4"
+		 >
+
+    <fx:Script>
+	<![CDATA[
+
+        private function toggle():void
+		{
+			/*
+            if (vd.playing)
+			{
+                vd.stop();
+                list.visible = true;
+            }
+			else
+			{
+                list.visible = false;
+                vd.play();
+            }
+			*/
+        }
+
+	]]>
+    </fx:Script>
+
+    <fx:Declarations>
+        <s:Parallel id="hideList">
+            <s:children>
+                <fx:Array>
+                    <s:Resize target="{list}" widthTo="0"/>
+                    <!--<mx:Resize target="{vd}" widthTo="400" heightTo="314"/>-->
+                </fx:Array>
+            </s:children>
+        </s:Parallel>
+        
+        <s:Parallel id="showList">
+            <s:children>
+                <fx:Array>
+                    <s:Resize target="{list}" widthTo="130"/>
+                    <!--<mx:Resize target="{vd}" widthTo="270" heightTo="217"/>-->
+                </fx:Array>
+            </s:children>
+        </s:Parallel>        
+    </fx:Declarations>
+    <s:List id="list" width="130" height="100%" selectedIndex="0"
+			 hideEffect="hideList" showEffect="showList">
+        <s:dataProvider>
+            <s:ArrayList>
+                <fx:Array>
+                    <fx:Object label="Install SIM Card"/>
+                </fx:Array>
+            </s:ArrayList>
+        </s:dataProvider>
+    </s:List>
+
+    <s:Group width="100%">
+
+		<!--<mx:VideoDisplay id="vd" width="270" height="217" source="assets/phone.flv"
+						 autoPlay="false" complete="list.visible=true"/>
+
+		<mx:Button label="{vd.playing ? 'Stop' : 'Play'}" click="toggle()" left="8" bottom="8" includeInLayout="false">
+		</mx:Button>
+		-->
+	</s:Group>
+
+
+</s:HGroup>

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/c652cfba/FlexStore/spark/src/samples/flexstore/ButtonBarButtonSkin.as
----------------------------------------------------------------------
diff --git a/FlexStore/spark/src/samples/flexstore/ButtonBarButtonSkin.as b/FlexStore/spark/src/samples/flexstore/ButtonBarButtonSkin.as
new file mode 100644
index 0000000..5e94b58
--- /dev/null
+++ b/FlexStore/spark/src/samples/flexstore/ButtonBarButtonSkin.as
@@ -0,0 +1,298 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 samples.flexstore
+{
+
+import flash.display.GradientType;
+import mx.containers.BoxDirection;
+import mx.controls.Button;
+import mx.controls.ButtonBar;
+import mx.skins.Border;
+import mx.skins.halo.*;
+import mx.styles.StyleManager;
+import mx.utils.ColorUtil;
+
+/**
+ *  Adapted from mx.skins.halo.ButtonBarButtonSkin.
+ *  This version of the ButtonBarButtonSkin is applied for the
+ *  selectedOver, selectedUp, and over states to use the 2nd two
+ *  values of the fillColors for the selected state of the
+ *  button.  The over state then uses a computed value from
+ *  the themeColor to show emphasis.  The border of the selected
+ *  button also uses a computed value from the themeColor, but
+ *  is partially transparent.
+ */
+public class ButtonBarButtonSkin extends Border
+{
+	//--------------------------------------------------------------------------
+	//
+	//  Class variables
+	//
+	//--------------------------------------------------------------------------
+
+	/**
+	 *  @private
+	 */
+	private static var cache:Object = {};
+
+	//--------------------------------------------------------------------------
+	//
+	//  Class methods
+	//
+	//--------------------------------------------------------------------------
+
+	/**
+	 *  @private
+	 *  Several colors used for drawing are calculated from the base colors
+	 *  of the component (themeColor, borderColor and fillColors).
+	 *  Since these calculations can be a bit expensive,
+	 *  we calculate once per color set and cache the results.
+	 */
+	private static function calcDerivedStyles(themeColor:uint,
+											  fillColor0:uint,
+											  fillColor1:uint):Object
+	{
+		var key:String = HaloColors.getCacheKey(themeColor,
+												fillColor0, fillColor1);
+
+		if (!cache[key])
+		{
+			var o:Object = cache[key] = {};
+
+			// Cross-component styles.
+			HaloColors.addHaloColors(o, themeColor, fillColor0, fillColor1);
+
+			// Button-specific styles.
+			o.innerEdgeColor1 = ColorUtil.adjustBrightness2(fillColor0, -10);
+			o.innerEdgeColor2 = ColorUtil.adjustBrightness2(fillColor1, -25);
+		}
+
+		return cache[key];
+	}
+
+	//--------------------------------------------------------------------------
+	//
+	//  Constructor
+	//
+	//--------------------------------------------------------------------------
+
+	/**
+	 *  @private
+	 *  Constructor.
+	 */
+	public function ButtonBarButtonSkin()
+	{
+		super();
+	}
+
+	//--------------------------------------------------------------------------
+	//
+	//  Overridden properties
+	//
+	//--------------------------------------------------------------------------
+
+	//----------------------------------
+	//  measuredWidth
+	//----------------------------------
+
+	/**
+	 *  @private
+	 */
+	override public function get measuredWidth():Number
+	{
+		return 50;
+	}
+
+	//----------------------------------
+	//  measuredHeight
+	//----------------------------------
+
+	/**
+	 *  @private
+	 */
+	override public function get measuredHeight():Number
+	{
+		return 22;
+	}
+
+	//--------------------------------------------------------------------------
+	//
+	//  Overridden methods
+	//
+	//--------------------------------------------------------------------------
+
+	/**
+	 *  @private
+	 */
+	override protected function updateDisplayList(w:Number, h:Number):void
+	{
+		super.updateDisplayList(w, h);
+
+		// User-defined styles.
+		var borderColor:uint = getStyle("borderColor");
+		var cornerRadius:Number = getStyle("cornerRadius");
+		var fillAlphas:Array = getStyle("fillAlphas");
+		var fillColors:Array = getStyle("fillColors");
+		styleManager.getColorNames(fillColors);
+		var highlightAlphas:Array = getStyle("highlightAlphas");
+		var themeColor:uint = getStyle("themeColor");
+
+		// Derivative styles.
+		var derStyles:Object = calcDerivedStyles(themeColor, fillColors[0],
+												 fillColors[1]);
+
+		var borderColorDrk1:Number =
+			ColorUtil.adjustBrightness2(borderColor, -50);
+
+		var themeColorDrk1:Number =
+			ColorUtil.adjustBrightness2(themeColor, -25);
+
+		var emph:Boolean = false;
+
+		if (parent is Button)
+			emph = (parent as Button).emphasized;
+
+		var tmp:Number;
+
+		var bar:ButtonBar = parent ? ButtonBar(parent.parent) : null;
+		var horizontal:Boolean = true;
+		var pos:int = 0;
+
+		if (bar)
+		{
+			if (bar.direction == BoxDirection.VERTICAL)
+				horizontal = false;
+
+			// first: -1, middle: 0, last: 1
+			var index:int = bar.getChildIndex(parent);
+			pos = (index == 0 ? -1 : (index == bar.numChildren - 1 ? 1 : 0));
+		}
+
+		var radius:Object = getCornerRadius(pos, horizontal, cornerRadius);
+		var cr:Object = getCornerRadius(pos, horizontal, cornerRadius);
+		var cr1:Object = getCornerRadius(pos, horizontal, cornerRadius - 1);
+		var cr2:Object = getCornerRadius(pos, horizontal, cornerRadius - 2);
+		var cr3:Object = getCornerRadius(pos, horizontal, cornerRadius - 3);
+
+		graphics.clear();
+
+		switch (name)
+		{
+			case "selectedUpSkin":
+			case "selectedOverSkin":
+			{
+				var overFillColors:Array;
+				if (fillColors.length > 2)
+					overFillColors = [ fillColors[2], fillColors[3] ];
+				else
+					overFillColors = [ fillColors[0], fillColors[1] ];
+
+				var overFillAlphas:Array;
+				if (fillAlphas.length > 2)
+					overFillAlphas = [ fillAlphas[2], fillAlphas[3] ];
+  				else
+					overFillAlphas = [ fillAlphas[0], fillAlphas[1] ];
+
+				// button border/edge
+				drawRoundRect(
+					0, 0, w, h, cr,
+					[ themeColor, derStyles.themeColDrk1 ], 0.5,
+					verticalGradientMatrix(0, 0, w , h),
+					GradientType.LINEAR, null,
+					{ x: 1, y: 1, w: w - 2, h: h - 2, r: cr1 });
+
+				// button fill
+				drawRoundRect(
+					1, 1, w - 2, h - 2, cr1,
+					overFillColors, overFillAlphas,
+					verticalGradientMatrix(0, 0, w - 2, h - 2));
+
+				// top highlight
+				if (!(radius is Number))
+					{ radius.bl = radius.br = 0;}
+				drawRoundRect(
+					1, 1, w - 2, (h - 2) / 2, radius,
+					[ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
+					verticalGradientMatrix(1, 1, w - 2, (h - 2) / 2));
+				break;
+			}
+
+			case "overSkin":
+			{
+				// button border/edge
+				drawRoundRect(
+					0, 0, w, h, cr,
+					[ themeColor, derStyles.themeColDrk1 ], 0.5,
+					verticalGradientMatrix(0, 0, w, h));
+
+				// button fill
+				drawRoundRect(
+					1, 1, w - 2, h - 2, cr1,
+					[ derStyles.fillColorPress1, derStyles.fillColorPress2 ], 1,
+					verticalGradientMatrix(0, 0, w - 2, h - 2));
+
+				// top highlight
+				if (!(radius is Number))
+					{ radius.bl = radius.br = 0;}
+				drawRoundRect(
+					1, 1, w - 2, (h - 2) / 2, radius,
+					[ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
+					verticalGradientMatrix(1, 1, w - 2, (h - 2) / 2));
+
+				break;
+			}
+		}
+	}
+
+	//--------------------------------------------------------------------------
+	//
+	//  Methods
+	//
+	//--------------------------------------------------------------------------
+
+	/**
+	 *  @private
+	 */
+	private function getCornerRadius(pos:int, horizontal:Boolean,
+									 radius:Number):Object
+	{
+		if (pos == 0)
+			return 0;
+
+		radius = Math.max(0, radius);
+
+		if (horizontal)
+		{
+			if (pos == -1)
+				return { tl: radius, tr: 0, bl: radius, br: 0 };
+			else // pos == 1
+				return { tl: 0, tr: radius, bl: 0, br: radius };
+		}
+		else
+		{
+			if (pos == -1)
+				return { tl: radius, tr: radius, bl: 0, br: 0 };
+			else // pos == 1
+				return { tl: 0, tr: 0, bl: radius, br: radius };
+		}
+	}
+}
+
+}

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/c652cfba/FlexStore/spark/src/samples/flexstore/Product.as
----------------------------------------------------------------------
diff --git a/FlexStore/spark/src/samples/flexstore/Product.as b/FlexStore/spark/src/samples/flexstore/Product.as
new file mode 100644
index 0000000..040fb8f
--- /dev/null
+++ b/FlexStore/spark/src/samples/flexstore/Product.as
@@ -0,0 +1,78 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package samples.flexstore
+{
+
+[Bindable]
+public class Product
+{
+
+    public var productId:int;
+    public var name:String;
+    public var description:String;
+    public var price:Number;
+    public var image:String;
+    public var experience:String;
+    public var blazeds:Boolean;
+    public var mobile:Boolean;
+    public var video:Boolean;
+    public var highlight1:String;
+    public var highlight2:String;
+    public var qty:int;
+
+    public function Product()
+    {
+
+    }
+
+    public function fill(obj:Object):void
+    {
+        for (var i:String in obj)
+        {
+            this[i] = obj[i];
+        }
+    }
+
+    [Bindable(event="propertyChange")]
+    public function get featureString():String
+    {
+    	var str:String = "";
+    	if (blazeds)
+    		str += "BlazeDS";
+
+		if (mobile)
+		{
+			if (str.length > 0)
+				str += "\n";
+			str += "Mobile";
+		}
+
+		if (video)
+		{
+			if (str.length > 0)
+				str += "\n";
+			str += "Video";
+		}
+
+		return str;
+    }
+
+}
+
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/c652cfba/FlexStore/spark/src/samples/flexstore/ProductFilter.as
----------------------------------------------------------------------
diff --git a/FlexStore/spark/src/samples/flexstore/ProductFilter.as b/FlexStore/spark/src/samples/flexstore/ProductFilter.as
new file mode 100644
index 0000000..d182371
--- /dev/null
+++ b/FlexStore/spark/src/samples/flexstore/ProductFilter.as
@@ -0,0 +1,56 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 samples.flexstore
+{
+
+[Bindable]
+public class ProductFilter
+{
+    public var count:int;
+    public var experience:String;
+    public var minPrice:Number;
+    public var maxPrice:Number;
+    public var blazeds:Boolean;
+    public var mobile:Boolean;
+    public var video:Boolean;
+    
+    public function ProductFilter()
+    {
+        super();
+    }
+    
+    public function accept(product:Product):Boolean
+    {
+        //price is often the first test so let's fail fast if possible
+        if (minPrice > product.price || maxPrice < product.price)
+            return false;
+        if (experience != "All" && experience > product.experience)
+            return false;
+        if (blazeds && !product.blazeds)
+            return false;
+        if (mobile && !product.mobile)
+            return false;
+        if (video && !product.video)
+            return false;
+        
+        return true;
+    }
+}
+
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/c652cfba/FlexStore/spark/src/samples/flexstore/ProductFilterEvent.as
----------------------------------------------------------------------
diff --git a/FlexStore/spark/src/samples/flexstore/ProductFilterEvent.as b/FlexStore/spark/src/samples/flexstore/ProductFilterEvent.as
new file mode 100644
index 0000000..b13af3e
--- /dev/null
+++ b/FlexStore/spark/src/samples/flexstore/ProductFilterEvent.as
@@ -0,0 +1,39 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 samples.flexstore
+{
+
+import flash.events.Event;
+
+public class ProductFilterEvent extends Event
+{
+    public static const FILTER:String = "filter";
+    
+    public var live:Boolean;
+    public var filter:ProductFilter;
+    
+    public function ProductFilterEvent(filter:ProductFilter, live:Boolean)
+    {
+        super(FILTER);
+        this.filter = filter;
+        this.live = live;
+    }
+}
+
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/c652cfba/FlexStore/spark/src/samples/flexstore/ProductListEvent.as
----------------------------------------------------------------------
diff --git a/FlexStore/spark/src/samples/flexstore/ProductListEvent.as b/FlexStore/spark/src/samples/flexstore/ProductListEvent.as
new file mode 100644
index 0000000..fb4992f
--- /dev/null
+++ b/FlexStore/spark/src/samples/flexstore/ProductListEvent.as
@@ -0,0 +1,42 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 samples.flexstore
+{
+
+import flash.events.Event;
+
+public class ProductListEvent extends Event
+{
+    public static const ADD_PRODUCT:String = "addProduct";
+    public static const DUPLICATE_PRODUCT:String = "duplicateProduct";
+    public static const REMOVE_PRODUCT:String = "removeProduct";
+    public static const PRODUCT_QTY_CHANGE:String = "productQtyChange";
+    
+    public var product:Product;
+    
+    //making the default bubbles behavior of the event to true since we want
+    //it to bubble out of the ProductListItem and beyond
+    public function ProductListEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
+    {
+        super(type, bubbles, cancelable);
+    }
+    
+}
+
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-examples/blob/c652cfba/FlexStore/spark/src/samples/flexstore/ProductThumbEvent.as
----------------------------------------------------------------------
diff --git a/FlexStore/spark/src/samples/flexstore/ProductThumbEvent.as b/FlexStore/spark/src/samples/flexstore/ProductThumbEvent.as
new file mode 100644
index 0000000..e967daf
--- /dev/null
+++ b/FlexStore/spark/src/samples/flexstore/ProductThumbEvent.as
@@ -0,0 +1,45 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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 samples.flexstore
+{
+    
+import flash.events.Event;
+
+public class ProductThumbEvent extends Event
+{
+    public static const PURCHASE:String = "purchase";
+    public static const COMPARE:String = "compare";
+    public static const DETAILS:String = "details";
+    public static const BROWSE:String = "browse";
+    
+    public var product:Product;
+    
+    public function ProductThumbEvent(type:String, product:Product)
+    {
+        super(type);
+        this.product = product;
+    }
+    
+    override public function clone():Event
+    {
+        return new ProductThumbEvent(type, product);
+    }
+}
+
+}
\ No newline at end of file


Mime
View raw message