You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ca...@apache.org on 2016/11/10 09:23:14 UTC

[07/53] git commit: [flex-asjs] [refs/heads/feature/mdl] - - Refactored the directory structure of the example projects to be maven-style

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductFilterPanel.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductFilterPanel.mxml b/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductFilterPanel.mxml
new file mode 100755
index 0000000..fc2f535
--- /dev/null
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductFilterPanel.mxml
@@ -0,0 +1,215 @@
+<?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.
+
+-->
+<js:VContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
+                  xmlns:js="library://ns.apache.org/flexjs/basic" 
+    xmlns:productsView="productsView.*"
+    xmlns:flexstore="samples.flexstore.*"
+    height="100%" 
+    currentState="showingThumbnails"
+    initComplete="series.selectedIndex = 0">
+    <js:style>
+        <js:SimpleCSSStyles paddingLeft="4" 
+                               paddingRight="12" 
+                               paddingTop="12" 
+                               paddingBottom="8" 
+                               />
+
+    </js:style>
+    
+    <fx:Metadata>
+       [Event(name="filter", type="samples.flexstore.ProductFilterEvent")] 
+       [Event("compare")]
+    </fx:Metadata>
+    
+    <fx:Script>
+        <![CDATA[
+        import org.apache.flex.html.Slider;
+        import org.apache.flex.html.SimpleAlert; 
+        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
+            {
+                SimpleAlert.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>
+        
+        <js:CurrencyFormatter currencySymbol="$" id="cf"/>    
+        
+    </fx:Declarations>
+    <js:beads>
+        <js:ContainerDataBinding />
+    </js:beads>
+    
+    <js:Label text="Find" className="sectionHeader"/>
+    
+    <js:Container width="100%">
+        <js:beads>
+            <js:FlexibleFirstChildHorizontalLayout />
+        </js:beads>
+        <js:TextInput className="glass" width="100%"/>
+        <js:TextButton className="glass" text="Go" click="SimpleAlert.show('This feature is not implemented in this sample', 'Find')"/>
+    </js:Container>
+
+    <js:Spacer height="18"/>
+
+    <js:HRule width="100%"/>
+
+    <js:Spacer height="8"/>
+
+    <js:HContainer>
+        <js:style>
+            <js:SimpleCSSStyles paddingTop="0" paddingLeft="0" verticalAlign="bottom" />
+        </js:style>
+        <js:Label text="Filter" className="sectionHeader"/>
+        <js:Label text="({filter.count} items selected)" >
+            <js:style>
+                <js:SimpleCSSStyles fontWeight="bold" />
+                <!--<js:SimpleCSSStyles color="{getStyle('themeColor')}" fontWeight="bold" />-->
+            </js:style>
+        </js:Label>
+    </js:HContainer>
+
+    <js:Spacer height="8"/>
+
+    <js:Label text="Years of Experience"/>
+
+    <js:DropDownList id="series" className="glass" width="140" change="dispatchFilter();">
+        <js:dataProvider>
+            <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>                
+        </js:dataProvider>
+    </js:DropDownList>
+
+    <js:Spacer height="18"/>
+
+    <js:Label text="Price"/>
+
+    <!--<s:HSlider id="priceSlider" className="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()"
+        />-->
+    <js:HContainer id="nsholder" width="100%">
+        <js:NumericStepper width="48%" id="loPrice" minimum="0" maximum="{hiPrice.value}" value="0" valueChange="dispatchFilter()" />
+        <js:NumericStepper width="48%" id="hiPrice" minimum="{loPrice.value}" maximum="200" value="200" valueChange="dispatchFilter()" />
+    </js:HContainer>
+
+    <js:Spacer height="18"/>
+
+    <js:Label text="Required Features"/>
+
+    <js:Spacer height="4"/>
+
+    <js:CheckBox id="cbBlazeDS" className="glass" text="BlazeDS" click="dispatchFilter();"/>
+    <js:Spacer height="4"/>
+    <js:CheckBox id="cbMobile" className="glass" text="Mobile" click="dispatchFilter()"/>
+    <js:Spacer height="4"/>
+    <js:CheckBox id="cbVideo" className="glass" text="Video" click="dispatchFilter();"/>
+
+    <js:Spacer height="18"/>
+
+    <js:HRule width="100%"/>
+
+    <js:Spacer height="8"/>
+
+        <js:HContainer>
+            <js:Label text="Compare" className="sectionHeader"/>
+            <js:Label text="(Drag items here to compare)" className="instructions"/>
+        </js:HContainer>
+
+
+    <js: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()"/>
+
+    <js:Spacer height="8"/>
+    
+    <js:ImageAndTextButton id="compareButton" className="glass" 
+                  click.showingThumbnails="attemptCompare()"
+                  click.showingComparison="dispatchFilter()"            
+                  text.showingComparison="Back to thumbnail view"
+                  text.showingThumbnails="Compare Items"
+                  image.showingThumbnails="assets/icon_compare.png"
+                  image.showingComparison="assets/icon_tiles.png" />
+    
+    <js:states>
+       <js:State name="showingThumbnails" />
+       <js:State name="showingComparison" />
+    </js:states>
+
+</js:VContainer>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductList.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductList.mxml b/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductList.mxml
new file mode 100755
index 0000000..7351e06
--- /dev/null
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductList.mxml
@@ -0,0 +1,219 @@
+<?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.
+
+-->
+<js:Container xmlns:fx="http://ns.adobe.com/mxml/2009" 
+                 xmlns:js="library://ns.apache.org/flexjs/basic" 
+    > 
+    <js:style>
+        <js:SimpleCSSStyles borderStyle="solid" borderWidth="1" backgroundColor="#BCB29F" />
+    </js:style>
+    <!-- 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 org.apache.flex.effects.Effect;
+        import org.apache.flex.effects.Move;
+        import org.apache.flex.effects.Sequence;
+        import org.apache.flex.core.DropType;
+        import org.apache.flex.core.IUIBase;
+        import org.apache.flex.events.DragEvent;
+        
+        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 = 0;
+        public var showQuantity:Boolean;
+        
+        private var playingEffects:Object = new Object();
+        
+        public function addProduct(product:Product):void
+		{
+            if (items == null)
+                items = [];
+            
+            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.uid] == 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.uid] = jump;
+                    jump.addEventListener(Effect.EFFECT_END, function(event:Event):void
+                    {
+                       delete playingEffects[item.uid];
+                    });
+                    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;
+                    viewport.addElement(item);
+                    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] = ProductListItem(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.uid] == 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.uid] = e;
+                    e.addEventListener(Effect.EFFECT_END, function(event:Event):void
+                    {
+                       delete playingEffects[item.uid];
+                    });
+                    e.play();
+                }
+                else
+                {
+                    playingEffects[item.uid].pause();
+                    playingEffects[item.uid].yTo = yTo;
+                    playingEffects[item.uid].play();
+                }
+            }
+            //get the last event and if we should scroll make sure we can validate
+            //and scroll to maxVPosition
+            if (scrollToBottom)
+            {
+                e.addEventListener(Effect.EFFECT_END, function(event:Event):void
+                {
+  //TODO                  scrollingView.model.verticalScrollPosition = scrollingView.maxVerticalScrollPosition;    
+                });
+            }
+        }
+        
+        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 (ProductListItem(items[i]).product.productId == productId)
+				{
+                    index = i;
+                    break;
+                }
+            }
+
+            return index;
+        }     
+
+        private function doDragEnter(event:DragEvent):void
+        {
+            trace("doDragEnter");
+            dmc.acceptDragDrop(event.target as IUIBase, DropType.COPY);
+        }
+
+        private function doDragDrop(event:DragEvent):void
+        {
+            trace("doDragDrop");
+            var product:Product = DragEvent.dragSource as Product;
+            addProduct(product);
+        }  
+ 
+        ]]>
+    </fx:Script>
+    <js:beads>
+        <js:DropMouseController id="dmc" dragEnter="doDragEnter(event)" dragDrop="doDragDrop(event)" />
+        <js:VerticalLayout />
+		<js:ScrollingViewport id="scrollingView" />
+    </js:beads>
+    <js:Container id="viewport" width="100%" height="100%" >
+    </js:Container>
+</js:Container>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductListItem.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductListItem.mxml b/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductListItem.mxml
new file mode 100755
index 0000000..edf3516
--- /dev/null
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductListItem.mxml
@@ -0,0 +1,140 @@
+<?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.
+
+-->
+<js:Container xmlns:fx="http://ns.adobe.com/mxml/2009" 
+                    xmlns:js="library://ns.apache.org/flexjs/basic" 
+    className="listItem" 
+    height="{HEIGHT}" implements="org.apache.flex.core.IItemRenderer">
+    <!--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;
+        
+        private static var idCounter:int = 0;
+        public var uid:String = (idCounter++).toString();
+        
+        public static const HEIGHT:int = 30;
+        
+        [Bindable("__NoChangeEvent__")]
+        public function get product():Product
+        {
+            return _data as Product;
+        }
+        public function set product(value:Product):void
+        {
+            _data = value;
+        }
+        
+        private var _data:Object;
+        
+        public function get data():Object
+        {
+            return _data;
+        }
+        
+        public function set data(value:Object):void
+        {
+            _data = value;
+        }
+        
+        public function get listData():Object
+        {
+        	return null;
+        }
+        
+        public function set listData(value:Object):void
+        {
+        	// not used
+        }
+
+        private var _itemRendererParent:Object;
+        
+        public function get itemRendererParent():Object
+        {
+            return _itemRendererParent;
+        }
+        
+        public function set itemRendererParent(value:Object):void
+        {
+            _itemRendererParent = value;
+        }
+        
+        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>
+        <js:CurrencyFormatter currencySymbol="$" id="cf" fractionalDigits="2"/>
+    </fx:Declarations>
+    
+    <js:beads>
+        <js:ContainerDataBinding />
+    </js:beads>
+        
+    <js:ImageButton id="removeButton" source="assets/trashcan.png"
+        width="14" height="14" y="5"
+        click="removeItem()">
+        <js:beads>
+            <js:ToolTipBead toolTip="Remove from cart" />
+        </js:beads>
+    </js:ImageButton>
+    
+    <js:Image id="productImage" x="16" y="6" width="12" height="12" source="{product.image}"/>
+
+    <js:Label id="productName" x="30" width="100" y="4" text="{product.name}"/>
+
+    <js:Label id="productPrice" width="60" y="4"
+        text="{cf.format(product.price)}" style="textAlign:right;right:0"
+                                style.showQuantity="textAlign:right;right:25"/>
+        
+    <js:TextInput id="qty" width="25" y="3" text="{product.qty}" includeIn="showQuantity"
+                  style="textAlign:right;right:0;marginTop:0" change="qtyChange()" >
+        <js:beads>
+            <js:NumericOnlyTextInputBead maxChars="3" />
+        </js:beads>
+    </js:TextInput>
+    
+    <js:states>
+        <js:State name="compare" />
+        <js:State name="showQuantity" />
+    </js:states>
+    
+</js:Container>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductSupport.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductSupport.mxml b/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductSupport.mxml
new file mode 100755
index 0000000..5b2bd32
--- /dev/null
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductSupport.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.
+
+-->
+<js:HContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
+          xmlns:js="library://ns.apache.org/flexjs/basic" 
+		 >
+    <js:style>
+        <js:SimpleCSSStyles paddingLeft="4" paddingRight="8" paddingBottom="4" />
+    </js:style>
+    <js:beads>
+        <js:ContainerDataBinding />
+    </js:beads>
+
+    <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>
+        <js:Parallel id="hideList">
+            <js:children>
+                <fx:Array>
+                    <js:Resize target="{list}" widthTo="0"/>
+                    <!--<mx:Resize target="{vd}" widthTo="400" heightTo="314"/>-->
+                </fx:Array>
+            </js:children>
+        </js:Parallel>
+        
+        <js:Parallel id="showList">
+            <js:children>
+                <fx:Array>
+                    <js:Resize target="{list}" widthTo="130"/>
+                    <!--<mx:Resize target="{vd}" widthTo="270" heightTo="217"/>-->
+                </fx:Array>
+            </js:children>
+        </js:Parallel>        
+    </fx:Declarations>
+    <js:List id="list" width="130" height="100%" selectedIndex="0">
+        <js:dataProvider>
+            <fx:Array>
+                <fx:Object label="Install SIM Card"/>
+            </fx:Array>
+        </js:dataProvider>
+    </js:List>
+
+    <js:Container 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>
+		-->
+	</js:Container>
+
+
+</js:HContainer>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ButtonBarButtonSkin.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ButtonBarButtonSkin.as b/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ButtonBarButtonSkin.as
new file mode 100755
index 0000000..0c36aad
--- /dev/null
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/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-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/Product.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/Product.as b/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/Product.as
new file mode 100755
index 0000000..707fbf6
--- /dev/null
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/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-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductFilter.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductFilter.as b/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductFilter.as
new file mode 100755
index 0000000..b31f367
--- /dev/null
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/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-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductFilterEvent.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductFilterEvent.as b/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductFilterEvent.as
new file mode 100755
index 0000000..0160f50
--- /dev/null
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/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 org.apache.flex.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-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductListEvent.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductListEvent.as b/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductListEvent.as
new file mode 100755
index 0000000..0356795
--- /dev/null
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/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 org.apache.flex.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-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductThumbEvent.as
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductThumbEvent.as b/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductThumbEvent.as
new file mode 100755
index 0000000..ce1cab7
--- /dev/null
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/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 org.apache.flex.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 cloneEvent():Event
+    {
+        return new ProductThumbEvent(type, product);
+    }
+}
+
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/productsView/CatalogTitleButtons.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/productsView/CatalogTitleButtons.mxml b/examples/flexjs/FlexJSStore_jquery/src/productsView/CatalogTitleButtons.mxml
deleted file mode 100755
index af9cfd1..0000000
--- a/examples/flexjs/FlexJSStore_jquery/src/productsView/CatalogTitleButtons.mxml
+++ /dev/null
@@ -1,72 +0,0 @@
-<?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.
-
--->
-<js:HContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
-                  xmlns:js="library://ns.apache.org/flexjs/basic" 
-                  currentState="showFilter">
-    <js:style>
-        <js:SimpleCSSStyles verticalAlign="middle" 
-                               paddingTop="0" 
-                               paddingBottom="0" />
-    </js:style>
-    <js:beads>
-        <js:ParentDocumentBead id="pdb" />
-        <js:ContainerDataBinding />
-        <js:LayoutChangeNotifier watchedProperty="{viewCart.text}" initialValue="#FFFFFF" />
-    </js:beads>
-    <fx:Script>
-        <![CDATA[
-            [Bindable]
-            public var cartCount:int;
-            
-            private function rollOverLabel(event:MouseEvent):void
-            {
-                try {
-                    Label(event.target).className = "catalogTitleButtonHighlighted";
-                } catch (e:Error) {}
-            }
-            
-            private function rollOutLabel(event:MouseEvent):void
-            {
-                Label(event.target).className = "catalogTitleButtonDeselected";
-            }
-        ]]>
-    </fx:Script>
-    <fx:Binding source="ProductCatalogPanel(pdb.parentDocument).cartCount" destination="cartCount" />
-    <!-- two-way binding between the states of panel title buttons and the product view state -->
-    <fx:Binding source="ProductsView(ProductCatalogPanel(pdb.parentDocument).pdb.parentDocument).currentState" destination="currentState" />
-    <fx:Binding destination="ProductsView(ProductCatalogPanel(pdb.parentDocument).pdb.parentDocument).currentState" source="currentState" />    
-
-    <js:Label id="findPhones" text="Find Developers" click="currentState = 'showFilter'"
-             className.showFilter="catalogTitleButtonSelected"
-             className.showCart="catalogTitleButtonDeselected"
-             rollOver.showCart="rollOverLabel(event)"
-             rollOut.showCart="rollOutLabel(event)"/>
-    <js:VRule height="{findPhones.height * .75}" alpha=".75" style="color:#333333" />
-    <js:Label id="viewCart" text="View Cart ({cartCount} items)" click="currentState = 'showCart'"
-             className.showFilter="catalogTitleButtonDeselected"
-             className.showCart="catalogTitleButtonSelected"
-             rollOver.showFilter="rollOverLabel(event)"
-             rollOut.showFilter="rollOutLabel(event)"/>
-    
-    <js:states>
-        <js:State name="showFilter" />
-        <js:State name="showCart" />
-    </js:states>
-</js:HContainer>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/productsView/Grip.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/productsView/Grip.mxml b/examples/flexjs/FlexJSStore_jquery/src/productsView/Grip.mxml
deleted file mode 100755
index 281c572..0000000
--- a/examples/flexjs/FlexJSStore_jquery/src/productsView/Grip.mxml
+++ /dev/null
@@ -1,48 +0,0 @@
-<?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.
-
--->
-<js:Container xmlns:fx="http://ns.adobe.com/mxml/2009"
-                  xmlns:js="library://ns.apache.org/flexjs/basic" 
-                  width="17" height="100%" >
-    <js:style>
-        <js:SimpleCSSStyles paddingTop="10" />
-    </js:style>
-
-    <fx:Script>
-        <![CDATA[
-           [Bindable]
-           public var gripTip:String; 
-           
-           [Bindable]
-           public var gripIcon:String;
-        ]]>
-    </fx:Script>
-    <js:beads>
-        <js:ContainerDataBinding />
-        <js:OneFlexibleChildVerticalLayout flexibleChild="grip" />
-    </js:beads>
-
-    <js:Image id="icon" source="{gripIcon}" />
-    <js:Image id="grip" source="assets/grip.png" >
-        <js:beads>
-            <js:ToolTipBead toolTip="{gripTip}" />
-        </js:beads>
-    </js:Image>
-    
-</js:Container>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/productsView/ProductCart.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/productsView/ProductCart.mxml b/examples/flexjs/FlexJSStore_jquery/src/productsView/ProductCart.mxml
deleted file mode 100755
index 830bf21..0000000
--- a/examples/flexjs/FlexJSStore_jquery/src/productsView/ProductCart.mxml
+++ /dev/null
@@ -1,117 +0,0 @@
-<?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.
-
--->
-<js:Container xmlns:fx="http://ns.adobe.com/mxml/2009"
-          xmlns:js="library://ns.apache.org/flexjs/basic" 
-    xmlns:productsView="productsView.*"
-    >
-    <js:style>
-        <js:SimpleCSSStyles 
-                               paddingTop="8"
-                               paddingBottom="8"
-                               paddingRight="4"
-                               paddingLeft="4" />
-    </js:style>
-    <js:beads>
-        <js:ContainerDataBinding />
-        <js:OneFlexibleChildVerticalLayout id="flexLayout" flexibleChild="productList" />
-    </js:beads>
-    <fx:Script>
-        <![CDATA[
-        
-        import org.apache.flex.html.SimpleAlert;
-        
-        import samples.flexstore.Product;
-        import samples.flexstore.ProductListEvent;
-        
-        [Bindable]
-        public var numProducts:int=0;
-        
-        [Bindable]
-        private var total:Number = 0;
-
-        private const SHIPPING:Number = 1.99;
-        
-        private function productListEventHandler(event:ProductListEvent):void
-        {
-            switch (event.type)
-            {
-                case ProductListEvent.ADD_PRODUCT:
-                    event.product.qty = 0;  
-                    //fall through into the same logic as dup          
-                case ProductListEvent.DUPLICATE_PRODUCT:
-                    event.product.qty++;
-                    //total += event.product.price;
-                    total = total + event.product.price;
-                    numProducts++;
-                    break;            
-                case ProductListEvent.PRODUCT_QTY_CHANGE:
-                case ProductListEvent.REMOVE_PRODUCT:
-                    var items:Array = productList.items;
-                    total = 0; 
-                    numProducts = 0;
-                    for (var i:int=0; i < items.length; i++)
-                    {
-                        var product:Product = items[i].product;
-                        //total += product.qty * product.price;
-                        //numProducts += product.qty;
-                        total = total + product.qty * product.price;
-                        numProducts = numProducts + product.qty;
-                    }       
-                    break;
-                default:
-                    break;
-            }
-        }
-        
-        ]]>
-    </fx:Script>
-    <fx:Declarations>
-        <js:CurrencyFormatter currencySymbol="$" id="cf" fractionalDigits="2"/>        
-    </fx:Declarations>
-    
-    <js:Label width="100%" text="Your Shopping Cart" className="sectionHeader"/>
-        
-    <productsView:ProductList id="productList" width="100%"
-        newItemStartX="-100" newItemStartY="-100" 
-        addProduct="productListEventHandler(event)"
-        duplicateProduct="productListEventHandler(event)"
-        productQtyChange="productListEventHandler(event)"
-        removeProduct="productListEventHandler(event)"
-        showQuantity="true" />
-    
-    <js:Container style="right:0" id="totalContainer">
-        <js:beads>
-            <js:VerticalColumnLayout numColumns="2" />
-        </js:beads>
-        <js:Label text="Total:" />
-        <js:Label width="70" text="{cf.format(total)}" id="lblTotal" style="textAlign:'right'"/>
-
-        <js:Label text="Service Fee:" />
-        <js:Label width="70" text="{cf.format(numProducts * SHIPPING)}" id="lblFee" style="textAlign:'right'"/>
-
-        <js:Label text="Grand Total:" style="fontWeight:'bold'" />
-        <js:Label width="70" text="{cf.format(total + (numProducts * SHIPPING))}" id="lblGrandTotal" style="textAlign:'right'"/>
-
-    </js:Container>
-
-    <js:TextButton text="Submit Order" click="SimpleAlert.show('This feature is not implemented in this sample', 'Submit Order')"
-                   style="right:0"/>
-
-</js:Container>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/productsView/ProductCatalogPanel.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/productsView/ProductCatalogPanel.mxml b/examples/flexjs/FlexJSStore_jquery/src/productsView/ProductCatalogPanel.mxml
deleted file mode 100755
index 48fa69a..0000000
--- a/examples/flexjs/FlexJSStore_jquery/src/productsView/ProductCatalogPanel.mxml
+++ /dev/null
@@ -1,546 +0,0 @@
-<?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.
-
--->
-<js:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
-         xmlns:js="library://ns.apache.org/flexjs/basic" 
-         implements="org.apache.flex.core.IDragInitiator"
-    xmlns:productsView="productsView.*"
-    currentState="browse"
-    title="SpaceHolder"
-    title.browse="Browse"
-    title.compare="Product Comparison"
-    title.details="Product Details"
-    className="catalogPanel"
-    >
-    
-    <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 org.apache.flex.core.IUIBase;
-            import org.apache.flex.effects.Effect;
-            import org.apache.flex.effects.Fade;
-            import org.apache.flex.effects.Move;
-            import org.apache.flex.effects.Parallel;
-            import org.apache.flex.effects.Tween;
-            import org.apache.flex.events.DragEvent;
-            import org.apache.flex.events.Event;
-            import org.apache.flex.collections.LazyCollection;
-            
-            import samples.flexstore.Product;
-            import samples.flexstore.ProductFilter;
-            import samples.flexstore.ProductFilterEvent;
-            import samples.flexstore.ProductThumbEvent;
-       
-     
-        private var accepted:Object = new Object();
-        private var thumbnails:Array;
-        private var filterCount:int;
-        private var thumbnailState:String = 'browse'; //either 'browse' or 'compare'
-                
-        [Bindable]
-        public var cartCount:int;
-        
-        //-----------------------------
-        // catalog
-        //-----------------------------
-        
-        private var _catalog:LazyCollection;
-        
-        [Bindable]
-        public function set catalog(c:LazyCollection):void
-        {
-            _catalog = c;
-            createThumbnails();
-        }
-        
-        public function get catalog():LazyCollection
-        {
-            return _catalog;
-        }
-        
-        //----------------------------------------------------------------------
-        // methods
-        //----------------------------------------------------------------------
-       
-        private function createThumbnails():void
-        {
-            var i:int; //variables are hoisted up in scope so declare here to avoid warning
-            if (thumbnails != null)
-            {
-                for (i=0; i < thumbnails.length; i++)
-                {
-                    thumbContentGroup.removeElement(thumbnails[i]);
-                }
-            }
-            
-            var row:int = 0;
-            var col:int = -1;
-            var n:int = catalog.length;
-            thumbnails = new Array(n);
-            filterCount = n;
-            
-            for (i=0; i < n; i++)
-            {
-                var thumb:ProductCatalogThumbnail = new ProductCatalogThumbnail();
-                thumb.x = 0;
-                thumb.y = 0;
-                thumbnails[i] = thumb;
-                // thumbnails[i].showInAutomationHierarchy = true;
-                thumb.product = catalog.getItemAt(i) as Product;
-                accepted[thumb.product.productId.toString()] = true;
-                thumbContentGroup.addElement(thumb);
-                thumb.addEventListener(ProductThumbEvent.PURCHASE, productThumbEventHandler);
-                thumb.addEventListener(ProductThumbEvent.COMPARE, productThumbEventHandler);
-                thumb.addEventListener(ProductThumbEvent.DETAILS, productThumbEventHandler);
-                thumb.addEventListener(DragEvent.DRAG_START,thumbDragStartHandler);
-            }
-
-            var lastMove:Effect = layoutCatalog();
-            if (lastMove)
-            {
-                lastMove.addEventListener(Tween.TWEEN_UPDATE, updateLayout);
-                lastMove.addEventListener(Tween.TWEEN_END, updateLayout);
-            }
-        }
-        
-        private function updateLayout(event:org.apache.flex.events.Event):void
-        {
-            thumbContentGroup.dispatchEvent(new org.apache.flex.events.Event("layoutNeeded"));   
-        }
-            
-        private function thumbDragStartHandler(event:MouseEvent):void
-        {
-            if (DragMouseController.dragging == false)
-            {
-                var thumb:ProductCatalogThumbnail = event.target as ProductCatalogThumbnail;
-                DragEvent.dragSource = thumb.product;
-
-                var di:ProductCatalogThumbnail = new ProductCatalogThumbnail();
-                di.product = thumb.product;
-                di.currentState = thumb.currentState;
-                DragMouseController.dragImage = di;
-                
-                DragEvent.dragInitiator = this;
-            }    
-        }
-        
-        public function filter(productFilter:ProductFilter, live:Boolean):void
-        {
-            currentState = "browse";
-            thumbnailState = "browse";
-            var count:int=0;
-            var n:int = thumbnails.length;
-            var targets:Array = [];
-            for (var i:int = 0; i < n; i++)
-            {
-                var thumb:ProductCatalogThumbnail = thumbnails[i];
-                var product:Product = thumb.product;
-                if (productFilter.accept(product))
-                {
-                    accepted[product.productId.toString()] = true;
-                    thumb.alpha = 1;    
-                    count++;
-                }
-                else
-                {
-                    accepted[product.productId.toString()] = false;
-                    if (live)
-                    {
-                        thumb.alpha = .1;
-                    }
-                    else if (thumb.alpha == 1) //only fade if we hadn't started
-                    {
-                        targets.push(thumb);
-                    }
-                }
-            }
-            productFilter.count = count;
-            filterCount = count;
-
-            if (targets.length > 0)    
-            {
-                var p:Parallel = new Parallel();
-                n = targets.length;
-                for (i = 0; i < n; i++)
-                {
-                    var fadeOut:Fade = new Fade(targets[i] as IUIBase);
-                    fadeOut.alphaFrom = 1;
-                    fadeOut.alphaTo = .1;
-                    p.addChild(fadeOut);
-                }
-                p.play();
-                p.addEventListener(Effect.EFFECT_END,
-                    function(event:org.apache.flex.events.Event):void
-                    {
-                        layoutCatalog();
-                    });
-            }
-            else if (!live)
-            {
-                layoutCatalog();
-            }
-        }
-        
-        private function layoutCatalog():Effect
-        {
-            var tileWidth:Number;
-            var tileHeight:Number;
-            var numCols:int;
-
-            if (filterCount > 9 || currentState == "compare")
-            {
-                numCols = 4;
-                tileWidth = ProductCatalogThumbnail.COL_WIDTH_4;
-                tileWidth = currentState == "compare"
-                    ? ProductCatalogThumbnail.COMPARE_WIDTH
-                    : ProductCatalogThumbnail.COL_WIDTH_4
-                tileHeight = currentState == "compare"
-                    ? height - 4
-                    : ProductCatalogThumbnail.COL_HEIGHT_4;
-            }
-            else if (filterCount > 4)
-			{
-                numCols = 3;
-                tileWidth = ProductCatalogThumbnail.COL_WIDTH_3;
-                tileHeight = ProductCatalogThumbnail.COL_HEIGHT_3;
-            }
-			else if (filterCount <= 9)
-			{
-                numCols = 2;
-                tileWidth = ProductCatalogThumbnail.COL_WIDTH_2;
-                tileHeight = ProductCatalogThumbnail.COL_HEIGHT_2;
-            }
-			else
-			{
-            }
-            
-            var row:int = 0;
-            var col:int = -1;
-
-			var move:Move = null;
-
-            var n:int = catalog.length;
-			for (var i:int = 0 ; i < n ; i++)
-			{
-                var product:Product = catalog.getItemAt(i) as Product;
-                var thumb:ProductCatalogThumbnail = thumbnails[i];
-                if (accepted[product.productId.toString()])
-                {
-                    thumb.currentState = "x" + numCols + "cols";
-                    col++;
-                    if (col > numCols - 1)
-					{
-                        row++;
-                        col = 0;
-                    }
-
-                    var xTo:Number = col * (tileWidth + ProductCatalogThumbnail.HORIZONTAL_GAP);
-                    var yTo:Number = row * (tileHeight + ProductCatalogThumbnail.VERTICAL_GAP);
-
-                    // If the thumbnail is already visible
-					// animate it to its new position.
-                    if (thumb.visible)
-					{
-                        // Animate only if the position is different
-						// from its current position.
-                        if (thumb.x != xTo || thumb.y != yTo)
-						{
-                            move = new Move(thumb);
-                            move.xTo = xTo;
-                            move.yTo = yTo;
-                            move.play();
-                        }
-                    }
-
-                    // If the thumbnail was not previously visible, sets its
-					// x and y coordinates. We'll make it reappear after all
-                    // the visible thumbnails have reached their new position.
-					else
-					{
-                        thumb.x = xTo;
-                        thumb.y = yTo;
-//                        thumb.includeInLayout = true;
-                    }
-                }
-				else
-				{
-                    thumb.visible = false;
-//                    thumb.includeInLayout = false;
-                }
-            }
-
-            if (!move)
-			{
-                // No visible thumbnails were animated to a new position;
-				// fade in newly selected thumbnails right away.
-                fadeInThumbnails();
-            }
-			else
-			{
-			    //since movement is happening get the scrollbar back to the top
-				scv.verticalScrollPosition = 0;
-                // Fade in newly selected thumbnails after the last
-				// visible thumbnail has moved to its new position.
-                move.addEventListener(Effect.EFFECT_END,
-					function(event:org.apache.flex.events.Event):void
-					{
-						fadeInThumbnails();
-					});
-            }
-            thumbContentGroup.dispatchEvent(new org.apache.flex.events.Event("layoutNeeded"));
-            //return the last move to watch
-            return move;
-        }
-        
-        //return the last effect so we could add effectEnd handler if desired
-        private function fadeInThumbnails():void
-		{
-			var n:int = thumbnails.length;
-			var targets:Array = [];
-			for (var i:int = 0; i < n ; i++)
-			{
-			    var thumb:ProductCatalogThumbnail = thumbnails[i];
-			    if (accepted[thumb.product.productId.toString()] && !thumb.visible)
-				{
-                    thumb.alpha = 0;
-                    thumb.visible = true;
-                    targets.push(thumb);
-                }
-            }
-            if (targets.length > 0)
-            {
-                n = targets.length;
-                for (i = 0; i < n; i++)
-                {
-                    var effect:Fade = new Fade(targets[i] as IUIBase);
-                    effect.alphaTo = 1;
-                    effect.play();
-                }
-            }
-        }
-        
-        private function showDetails(product:Product):void
-        {
-            if (currentState == "details")
-			{
-                details.product = product;
-                return;
-            }
-
-            var row:int = -1;
-
-            //should be computed using border metrics instead of hard-coding the 20, but...
-			var xTo:Number = thumbContentGroup.width - ProductCatalogThumbnail.COL_WIDTH_4 - 20;
-            var yTo:Number;
-
-            var move:Move;
-            var first:Boolean = true;
-            var selectedThumb:ProductCatalogThumbnail;
-
-            var n:int = thumbnails.length;
-			for (var i:int = 0; i < n; i++)
-			{
-			    var thumb:ProductCatalogThumbnail = thumbnails[i];
-                if (thumb.visible)
-				{
-                    row++;
-                    yTo = row * (ProductCatalogThumbnail.COL_HEIGHT_4 + ProductCatalogThumbnail.VERTICAL_GAP);
-
-                    thumb.currentState = "x4cols";
-
-                    if (thumb.x != xTo || thumb.y != yTo)
-					{
-                        move = new Move(thumb);
-                        if (first)
-						{
-                            move.addEventListener(Effect.EFFECT_END,
-								function(event:org.apache.flex.events.Event):void
-								{
-									details.product = product;
-                                    currentState = "details";
-								});
-
-                            first = false;
-                        }
-                        move.xTo = xTo;
-                        move.yTo = yTo;
-                        move.play();
-                    }
-                    
-                    if (thumb.product == product)
-                    {
-                        selectedThumb = thumb;
-                    }
-                }
-            }
-            if (selectedThumb != null)
-            {
-                //make sure that the selected thumb is visible in the list on the right
-                move.addEventListener(Effect.EFFECT_END,
-					function(e:org.apache.flex.events.Event):void
-					{
-					    var curpos:int = scv.verticalScrollPosition;
-					    if (selectedThumb.y < curpos)
-					    {
-					        scv.verticalScrollPosition = y;
-					    }
-					    else if (selectedThumb.y + ProductCatalogThumbnail.COL_HEIGHT_4 > curpos + thumbContentGroup.height)
-					    {
-					        //this logic doesn't seem to be perfect but it will do
-					        var diff:int = selectedThumb.y - (curpos + thumbContentGroup.height)
-					        scv.verticalScrollPosition += diff + ProductCatalogThumbnail.COL_HEIGHT_4 + ProductCatalogThumbnail.VERTICAL_GAP;
-					    }
-					});
-            }
-            
-        }
-        
-        private function productThumbEventHandler(event:ProductThumbEvent):void
-        {
-            if (event.type == ProductThumbEvent.DETAILS)
-            {
-                showDetails(event.product);
-            }
-            else if (event.type == ProductThumbEvent.BROWSE)
-            {
-                if (thumbnailState == "browse")
-                {                
-                    currentState = "browse";
-                    layoutCatalog();
-                }
-                else
-                {
-                    compare();
-                }
-            }
-            else
-            {
-                dispatchEvent(event);
-            }
-        }
-        
-        public function compare(toCompare:Array=null):void
-        {
-            currentState = "compare";
-            thumbnailState = "compare";
-            if (toCompare != null)
-            {
-                var n:int = thumbnails.length;
-                for (var i:int = 0; i < n; i++)
-                {
-                    accepted[thumbnails[i].product.productId.toString()] = false;
-                }
-                for (i=0; i < toCompare.length; i++)
-                {
-                    accepted[toCompare[i].productId.toString()] = true;
-                }
-            }
-            var lastEffect:Effect = layoutCatalog();
-            if (lastEffect != null)
-            {
-                lastEffect.addEventListener(Effect.EFFECT_END,
-                    function (event:org.apache.flex.events.Event):void
-                    {
-                        setCompareState();
-                    });
-            }
-            else
-            {
-                setCompareState();
-            }
-        }
-        
-        private function setCompareState():void
-        {
-            //avoid an issue if the user clicks quickly where we move into
-            //compare state even though we're no longer in compare
-            if (currentState == "compare") 
-            {
-                var n:int = thumbnails.length;
-                for (var i:int = 0; i < n; i++)
-                {
-                    var thumb:ProductCatalogThumbnail = thumbnails[i];
-                    if (accepted[thumb.product.productId.toString()])
-                    {
-                        thumb.currentState = "compare";
-                    }
-                }
-                
-            }
-        }
-        
-        public function acceptingDrop(dropTarget:Object, type:String):void
-        {
-            
-        }
-            
-        public function acceptedDrop(dropTarget:Object, type:String):void
-        {
-            
-        }
-
-        ]]>
-    </fx:Script>
-    
-    <js:beads>
-        <js:ContainerDataBinding />
-        <js:VerticalLayout />
-        <js:DragMouseController id="dragger" />
-        <js:ParentDocumentBead id="pdb" />
-        <js:PanelView>
-            <js:titleBar>
-                <js:TitleBar height="20" >
-                    <js:style>
-                        <js:SimpleCSSStyles backgroundColor="0xA65904" />
-                    </js:style>
-                    <js:beads>
-                        <productsView:ProductCatalogPanelTitleBarView />
-                    </js:beads>
-                </js:TitleBar>
-            </js:titleBar>
-        </js:PanelView>
-    </js:beads>
-    <js:Container width="100%" height="100%">
-        <js:Container id="thumbContentGroup" width="100%" height="100%">
-            <js:beads>
-				<js:ScrollingViewport id="scv" />
-            </js:beads>
-        </js:Container>
-        <productsView:ProductDetails id="details" y="0"
-            width="{ProductCatalogThumbnail.COL_WIDTH_4 * 3}"
-            height="100%"
-            visible="false"
-            visible.details="true"
-            compare="productThumbEventHandler(event)"
-            purchase="productThumbEventHandler(event)"
-            browse="productThumbEventHandler(event)" />
-    </js:Container>
-    
-    <js:states>
-        <js:State name="browse" />
-        <js:State name="compare" />
-        <js:State name="details" />
-    </js:states>
-    
-</js:Panel>

http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e75059f7/examples/flexjs/FlexJSStore_jquery/src/productsView/ProductCatalogPanelTitleBarView.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/FlexJSStore_jquery/src/productsView/ProductCatalogPanelTitleBarView.mxml b/examples/flexjs/FlexJSStore_jquery/src/productsView/ProductCatalogPanelTitleBarView.mxml
deleted file mode 100755
index f2cb397..0000000
--- a/examples/flexjs/FlexJSStore_jquery/src/productsView/ProductCatalogPanelTitleBarView.mxml
+++ /dev/null
@@ -1,49 +0,0 @@
-<?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.
-
--->
-<js:MXMLBeadView xmlns:fx="http://ns.adobe.com/mxml/2009"
-                        xmlns:js="library://ns.apache.org/flexjs/basic" 
-                        xmlns:productsView="productsView.*"
-                        >
-    <fx:Script>
-        <![CDATA[
-            import org.apache.flex.html.TitleBar;
-            import org.apache.flex.core.ITitleBarModel;
-            import org.apache.flex.core.UIBase;
-            import org.apache.flex.events.Event;
-            
-            private function clickHandler():void
-            {
-                var newEvent:org.apache.flex.events.Event = new org.apache.flex.events.Event('close',true);
-                UIBase(_strand).dispatchEvent(newEvent)   
-            }
-        ]]>
-    </fx:Script>
-    <js:beads>
-        <js:MXMLBeadViewDataBinding />
-        <js:ParentDocumentBead id="pdb" />
-        <js:LayoutChangeNotifier watchedProperty="{buttons.width}" />
-    </js:beads>
-    <js:Label id="titleLabel" text="{ITitleBarModel(model).title}" 
-                 />
-    <js:CloseButton id="closeButton" click="clickHandler()"
-                       visible="{ITitleBarModel(model).showCloseButton}";
-                       />
-    <productsView:CatalogTitleButtons id="buttons" />
-</js:MXMLBeadView>