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>
