You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2014/10/31 23:08:47 UTC
[12/14] FlexJSStore works well enough to try to make it work on JS.
Drag/Drop, ToolTips, States with Transitions are functional
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f2a370c6/examples/FlexJSStore/src/productsView/ProductSupport.mxml
----------------------------------------------------------------------
diff --git a/examples/FlexJSStore/src/productsView/ProductSupport.mxml b/examples/FlexJSStore/src/productsView/ProductSupport.mxml
new file mode 100755
index 0000000..c28570e
--- /dev/null
+++ b/examples/FlexJSStore/src/productsView/ProductSupport.mxml
@@ -0,0 +1,91 @@
+<?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.
+
+-->
+<basic:HContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:basic="library://ns.apache.org/flexjs/basic"
+ xmlns:mx="library://ns.adobe.com/flex/mx"
+ >
+ <basic:style>
+ <basic:SimpleCSSStyles paddingLeft="4" paddingRight="8" paddingBottom="4" />
+ </basic:style>
+ <basic:beads>
+ <basic:ContainerDataBinding />
+ </basic: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>
+ <basic:Parallel id="hideList">
+ <basic:children>
+ <fx:Array>
+ <basic:Resize target="{list}" widthTo="0"/>
+ <!--<mx:Resize target="{vd}" widthTo="400" heightTo="314"/>-->
+ </fx:Array>
+ </basic:children>
+ </basic:Parallel>
+
+ <basic:Parallel id="showList">
+ <basic:children>
+ <fx:Array>
+ <basic:Resize target="{list}" widthTo="130"/>
+ <!--<mx:Resize target="{vd}" widthTo="270" heightTo="217"/>-->
+ </fx:Array>
+ </basic:children>
+ </basic:Parallel>
+ </fx:Declarations>
+ <basic:List id="list" width="130" height="100%" selectedIndex="0">
+ <basic:dataProvider>
+ <fx:Array>
+ <fx:Object label="Install SIM Card"/>
+ </fx:Array>
+ </basic:dataProvider>
+ </basic:List>
+
+ <basic: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>
+ -->
+ </basic:Container>
+
+
+</basic:HContainer>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f2a370c6/examples/FlexJSStore/src/samples/flexstore/ButtonBarButtonSkin.as
----------------------------------------------------------------------
diff --git a/examples/FlexJSStore/src/samples/flexstore/ButtonBarButtonSkin.as b/examples/FlexJSStore/src/samples/flexstore/ButtonBarButtonSkin.as
new file mode 100755
index 0000000..5e94b58
--- /dev/null
+++ b/examples/FlexJSStore/src/samples/flexstore/ButtonBarButtonSkin.as
@@ -0,0 +1,298 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+package samples.flexstore
+{
+
+import flash.display.GradientType;
+import mx.containers.BoxDirection;
+import mx.controls.Button;
+import mx.controls.ButtonBar;
+import mx.skins.Border;
+import mx.skins.halo.*;
+import mx.styles.StyleManager;
+import mx.utils.ColorUtil;
+
+/**
+ * Adapted from mx.skins.halo.ButtonBarButtonSkin.
+ * This version of the ButtonBarButtonSkin is applied for the
+ * selectedOver, selectedUp, and over states to use the 2nd two
+ * values of the fillColors for the selected state of the
+ * button. The over state then uses a computed value from
+ * the themeColor to show emphasis. The border of the selected
+ * button also uses a computed value from the themeColor, but
+ * is partially transparent.
+ */
+public class ButtonBarButtonSkin extends Border
+{
+ //--------------------------------------------------------------------------
+ //
+ // Class variables
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ private static var cache:Object = {};
+
+ //--------------------------------------------------------------------------
+ //
+ // Class methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ * Several colors used for drawing are calculated from the base colors
+ * of the component (themeColor, borderColor and fillColors).
+ * Since these calculations can be a bit expensive,
+ * we calculate once per color set and cache the results.
+ */
+ private static function calcDerivedStyles(themeColor:uint,
+ fillColor0:uint,
+ fillColor1:uint):Object
+ {
+ var key:String = HaloColors.getCacheKey(themeColor,
+ fillColor0, fillColor1);
+
+ if (!cache[key])
+ {
+ var o:Object = cache[key] = {};
+
+ // Cross-component styles.
+ HaloColors.addHaloColors(o, themeColor, fillColor0, fillColor1);
+
+ // Button-specific styles.
+ o.innerEdgeColor1 = ColorUtil.adjustBrightness2(fillColor0, -10);
+ o.innerEdgeColor2 = ColorUtil.adjustBrightness2(fillColor1, -25);
+ }
+
+ return cache[key];
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Constructor
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ * Constructor.
+ */
+ public function ButtonBarButtonSkin()
+ {
+ super();
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden properties
+ //
+ //--------------------------------------------------------------------------
+
+ //----------------------------------
+ // measuredWidth
+ //----------------------------------
+
+ /**
+ * @private
+ */
+ override public function get measuredWidth():Number
+ {
+ return 50;
+ }
+
+ //----------------------------------
+ // measuredHeight
+ //----------------------------------
+
+ /**
+ * @private
+ */
+ override public function get measuredHeight():Number
+ {
+ return 22;
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Overridden methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ override protected function updateDisplayList(w:Number, h:Number):void
+ {
+ super.updateDisplayList(w, h);
+
+ // User-defined styles.
+ var borderColor:uint = getStyle("borderColor");
+ var cornerRadius:Number = getStyle("cornerRadius");
+ var fillAlphas:Array = getStyle("fillAlphas");
+ var fillColors:Array = getStyle("fillColors");
+ styleManager.getColorNames(fillColors);
+ var highlightAlphas:Array = getStyle("highlightAlphas");
+ var themeColor:uint = getStyle("themeColor");
+
+ // Derivative styles.
+ var derStyles:Object = calcDerivedStyles(themeColor, fillColors[0],
+ fillColors[1]);
+
+ var borderColorDrk1:Number =
+ ColorUtil.adjustBrightness2(borderColor, -50);
+
+ var themeColorDrk1:Number =
+ ColorUtil.adjustBrightness2(themeColor, -25);
+
+ var emph:Boolean = false;
+
+ if (parent is Button)
+ emph = (parent as Button).emphasized;
+
+ var tmp:Number;
+
+ var bar:ButtonBar = parent ? ButtonBar(parent.parent) : null;
+ var horizontal:Boolean = true;
+ var pos:int = 0;
+
+ if (bar)
+ {
+ if (bar.direction == BoxDirection.VERTICAL)
+ horizontal = false;
+
+ // first: -1, middle: 0, last: 1
+ var index:int = bar.getChildIndex(parent);
+ pos = (index == 0 ? -1 : (index == bar.numChildren - 1 ? 1 : 0));
+ }
+
+ var radius:Object = getCornerRadius(pos, horizontal, cornerRadius);
+ var cr:Object = getCornerRadius(pos, horizontal, cornerRadius);
+ var cr1:Object = getCornerRadius(pos, horizontal, cornerRadius - 1);
+ var cr2:Object = getCornerRadius(pos, horizontal, cornerRadius - 2);
+ var cr3:Object = getCornerRadius(pos, horizontal, cornerRadius - 3);
+
+ graphics.clear();
+
+ switch (name)
+ {
+ case "selectedUpSkin":
+ case "selectedOverSkin":
+ {
+ var overFillColors:Array;
+ if (fillColors.length > 2)
+ overFillColors = [ fillColors[2], fillColors[3] ];
+ else
+ overFillColors = [ fillColors[0], fillColors[1] ];
+
+ var overFillAlphas:Array;
+ if (fillAlphas.length > 2)
+ overFillAlphas = [ fillAlphas[2], fillAlphas[3] ];
+ else
+ overFillAlphas = [ fillAlphas[0], fillAlphas[1] ];
+
+ // button border/edge
+ drawRoundRect(
+ 0, 0, w, h, cr,
+ [ themeColor, derStyles.themeColDrk1 ], 0.5,
+ verticalGradientMatrix(0, 0, w , h),
+ GradientType.LINEAR, null,
+ { x: 1, y: 1, w: w - 2, h: h - 2, r: cr1 });
+
+ // button fill
+ drawRoundRect(
+ 1, 1, w - 2, h - 2, cr1,
+ overFillColors, overFillAlphas,
+ verticalGradientMatrix(0, 0, w - 2, h - 2));
+
+ // top highlight
+ if (!(radius is Number))
+ { radius.bl = radius.br = 0;}
+ drawRoundRect(
+ 1, 1, w - 2, (h - 2) / 2, radius,
+ [ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
+ verticalGradientMatrix(1, 1, w - 2, (h - 2) / 2));
+ break;
+ }
+
+ case "overSkin":
+ {
+ // button border/edge
+ drawRoundRect(
+ 0, 0, w, h, cr,
+ [ themeColor, derStyles.themeColDrk1 ], 0.5,
+ verticalGradientMatrix(0, 0, w, h));
+
+ // button fill
+ drawRoundRect(
+ 1, 1, w - 2, h - 2, cr1,
+ [ derStyles.fillColorPress1, derStyles.fillColorPress2 ], 1,
+ verticalGradientMatrix(0, 0, w - 2, h - 2));
+
+ // top highlight
+ if (!(radius is Number))
+ { radius.bl = radius.br = 0;}
+ drawRoundRect(
+ 1, 1, w - 2, (h - 2) / 2, radius,
+ [ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
+ verticalGradientMatrix(1, 1, w - 2, (h - 2) / 2));
+
+ break;
+ }
+ }
+ }
+
+ //--------------------------------------------------------------------------
+ //
+ // Methods
+ //
+ //--------------------------------------------------------------------------
+
+ /**
+ * @private
+ */
+ private function getCornerRadius(pos:int, horizontal:Boolean,
+ radius:Number):Object
+ {
+ if (pos == 0)
+ return 0;
+
+ radius = Math.max(0, radius);
+
+ if (horizontal)
+ {
+ if (pos == -1)
+ return { tl: radius, tr: 0, bl: radius, br: 0 };
+ else // pos == 1
+ return { tl: 0, tr: radius, bl: 0, br: radius };
+ }
+ else
+ {
+ if (pos == -1)
+ return { tl: radius, tr: radius, bl: 0, br: 0 };
+ else // pos == 1
+ return { tl: 0, tr: 0, bl: radius, br: radius };
+ }
+ }
+}
+
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f2a370c6/examples/FlexJSStore/src/samples/flexstore/Product.as
----------------------------------------------------------------------
diff --git a/examples/FlexJSStore/src/samples/flexstore/Product.as b/examples/FlexJSStore/src/samples/flexstore/Product.as
new file mode 100755
index 0000000..040fb8f
--- /dev/null
+++ b/examples/FlexJSStore/src/samples/flexstore/Product.as
@@ -0,0 +1,78 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package samples.flexstore
+{
+
+[Bindable]
+public class Product
+{
+
+ public var productId:int;
+ public var name:String;
+ public var description:String;
+ public var price:Number;
+ public var image:String;
+ public var experience:String;
+ public var blazeds:Boolean;
+ public var mobile:Boolean;
+ public var video:Boolean;
+ public var highlight1:String;
+ public var highlight2:String;
+ public var qty:int;
+
+ public function Product()
+ {
+
+ }
+
+ public function fill(obj:Object):void
+ {
+ for (var i:String in obj)
+ {
+ this[i] = obj[i];
+ }
+ }
+
+ [Bindable(event="propertyChange")]
+ public function get featureString():String
+ {
+ var str:String = "";
+ if (blazeds)
+ str += "BlazeDS";
+
+ if (mobile)
+ {
+ if (str.length > 0)
+ str += "\n";
+ str += "Mobile";
+ }
+
+ if (video)
+ {
+ if (str.length > 0)
+ str += "\n";
+ str += "Video";
+ }
+
+ return str;
+ }
+
+}
+
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f2a370c6/examples/FlexJSStore/src/samples/flexstore/ProductFilter.as
----------------------------------------------------------------------
diff --git a/examples/FlexJSStore/src/samples/flexstore/ProductFilter.as b/examples/FlexJSStore/src/samples/flexstore/ProductFilter.as
new file mode 100755
index 0000000..d182371
--- /dev/null
+++ b/examples/FlexJSStore/src/samples/flexstore/ProductFilter.as
@@ -0,0 +1,56 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package samples.flexstore
+{
+
+[Bindable]
+public class ProductFilter
+{
+ public var count:int;
+ public var experience:String;
+ public var minPrice:Number;
+ public var maxPrice:Number;
+ public var blazeds:Boolean;
+ public var mobile:Boolean;
+ public var video:Boolean;
+
+ public function ProductFilter()
+ {
+ super();
+ }
+
+ public function accept(product:Product):Boolean
+ {
+ //price is often the first test so let's fail fast if possible
+ if (minPrice > product.price || maxPrice < product.price)
+ return false;
+ if (experience != "All" && experience > product.experience)
+ return false;
+ if (blazeds && !product.blazeds)
+ return false;
+ if (mobile && !product.mobile)
+ return false;
+ if (video && !product.video)
+ return false;
+
+ return true;
+ }
+}
+
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f2a370c6/examples/FlexJSStore/src/samples/flexstore/ProductFilterEvent.as
----------------------------------------------------------------------
diff --git a/examples/FlexJSStore/src/samples/flexstore/ProductFilterEvent.as b/examples/FlexJSStore/src/samples/flexstore/ProductFilterEvent.as
new file mode 100755
index 0000000..b13af3e
--- /dev/null
+++ b/examples/FlexJSStore/src/samples/flexstore/ProductFilterEvent.as
@@ -0,0 +1,39 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package samples.flexstore
+{
+
+import flash.events.Event;
+
+public class ProductFilterEvent extends Event
+{
+ public static const FILTER:String = "filter";
+
+ public var live:Boolean;
+ public var filter:ProductFilter;
+
+ public function ProductFilterEvent(filter:ProductFilter, live:Boolean)
+ {
+ super(FILTER);
+ this.filter = filter;
+ this.live = live;
+ }
+}
+
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f2a370c6/examples/FlexJSStore/src/samples/flexstore/ProductListEvent.as
----------------------------------------------------------------------
diff --git a/examples/FlexJSStore/src/samples/flexstore/ProductListEvent.as b/examples/FlexJSStore/src/samples/flexstore/ProductListEvent.as
new file mode 100755
index 0000000..fb4992f
--- /dev/null
+++ b/examples/FlexJSStore/src/samples/flexstore/ProductListEvent.as
@@ -0,0 +1,42 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package samples.flexstore
+{
+
+import flash.events.Event;
+
+public class ProductListEvent extends Event
+{
+ public static const ADD_PRODUCT:String = "addProduct";
+ public static const DUPLICATE_PRODUCT:String = "duplicateProduct";
+ public static const REMOVE_PRODUCT:String = "removeProduct";
+ public static const PRODUCT_QTY_CHANGE:String = "productQtyChange";
+
+ public var product:Product;
+
+ //making the default bubbles behavior of the event to true since we want
+ //it to bubble out of the ProductListItem and beyond
+ public function ProductListEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false)
+ {
+ super(type, bubbles, cancelable);
+ }
+
+}
+
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f2a370c6/examples/FlexJSStore/src/samples/flexstore/ProductThumbEvent.as
----------------------------------------------------------------------
diff --git a/examples/FlexJSStore/src/samples/flexstore/ProductThumbEvent.as b/examples/FlexJSStore/src/samples/flexstore/ProductThumbEvent.as
new file mode 100755
index 0000000..e967daf
--- /dev/null
+++ b/examples/FlexJSStore/src/samples/flexstore/ProductThumbEvent.as
@@ -0,0 +1,45 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements. See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License. You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package samples.flexstore
+{
+
+import flash.events.Event;
+
+public class ProductThumbEvent extends Event
+{
+ public static const PURCHASE:String = "purchase";
+ public static const COMPARE:String = "compare";
+ public static const DETAILS:String = "details";
+ public static const BROWSE:String = "browse";
+
+ public var product:Product;
+
+ public function ProductThumbEvent(type:String, product:Product)
+ {
+ super(type);
+ this.product = product;
+ }
+
+ override public function clone():Event
+ {
+ return new ProductThumbEvent(type, product);
+ }
+}
+
+}
\ No newline at end of file