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:26 UTC
[19/53] git commit: [flex-asjs] [refs/heads/feature/mdl] - - Merged
changes
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/962a81ca/examples/flexjs/FlexJSStore/src/main/flex/productsView/ProductListItem.mxml
----------------------------------------------------------------------
diff --cc examples/flexjs/FlexJSStore/src/main/flex/productsView/ProductListItem.mxml
index edf3516,0000000..b3b84ea
mode 100755,000000..100755
--- a/examples/flexjs/FlexJSStore/src/main/flex/productsView/ProductListItem.mxml
+++ b/examples/flexjs/FlexJSStore/src/main/flex/productsView/ProductListItem.mxml
@@@ -1,140 -1,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:Image id="productImage" x="16" y="6" width="12" height="12" url="{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/962a81ca/examples/flexjs/FlexJSStore_jquery/src/main/flex/FlexJSStore.mxml
----------------------------------------------------------------------
diff --cc examples/flexjs/FlexJSStore_jquery/src/main/flex/FlexJSStore.mxml
index e5621c0,0000000..6375cb8
mode 100755,000000..100755
--- a/examples/flexjs/FlexJSStore_jquery/src/main/flex/FlexJSStore.mxml
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/FlexJSStore.mxml
@@@ -1,268 -1,0 +1,268 @@@
+<?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.
+
+-->
+<jquery:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:js="library://ns.apache.org/flexjs/basic"
+ xmlns:jquery="library://ns.apache.org/flexjs/jquery"
+ xmlns="*"
+ initialize="startService()"
+ pageTitle="FlexStore">
+
+ <fx:Script>
+ <![CDATA[
+ import org.apache.flex.core.ValuesManager;
+
+ /*
+ private var currentTheme:String = "beige";
+
+ private function toggleTheme():void
+ {
+ if (currentTheme == "beige")
+ {
+ currentTheme = "blue";
+ }
+ else
+ {
+ currentTheme = "beige";
+ }
+
+ loadStyle();
+ }
+ */
+
+ private function startService():void
+ {
+ productService.send();
+ }
+
+ private function loadStyle():void
+ {
+ /* load css not implemented yet
+ var eventDispatcher:IEventDispatcher =
+ styleManager.loadStyleDeclarations(currentTheme + ".swf");
+ eventDispatcher.addEventListener(StyleEvent.COMPLETE, completeHandler);
+ */
+ }
+
+ private function completeHandler(event:Event):void
+ {
- image.source = ValuesManager.valuesImpl.getValue(acb, "storeLogo");
++ image.url = ValuesManager.valuesImpl.getValue(acb, "storeLogo");
+ /*
+ super.initialized = true;
+ */
+ callLater.callLater(prebake);
+ }
+
+ /*
+ override public function set initialized(value:Boolean):void
+ {
+ // Hold off until the Runtime CSS SWF is done loading.
+ }
+ */
+
+ private var stateChain:Array;
+
+ private function headHome():void
+ {
+ homeButton.selected = true;
+ if (initialView.currentState == "ProductsState")
+ {
+ productsButton.selected = false;
+ stateChain = ["ProductsWipeUp", "HomeWipeDown", "HomeState"];
+ initialView.currentState = "ProductsWipeUp";
+ }
+ else if (initialView.currentState == "SupportState")
+ {
+ supportButton.selected = false;
+ stateChain = ["SupportWipeUp", "HomeWipeDown", "HomeState"];
+ initialView.currentState = "SupportWipeUp";
+ }
+ }
+
+ private function headToProducts():void
+ {
+ productsButton.selected = true;
+ if (initialView.currentState == "SupportState")
+ {
+ supportButton.selected = false;
+ stateChain = ["SupportWipeUp", "ProductsWipeDown", "ProductsState"];
+ initialView.currentState = "SupportWipeUp";
+ }
+ if (initialView.currentState == "HomeState")
+ {
+ homeButton.selected = false;
+ stateChain = ["HomeWipeUp", "ProductsWipeDown", "ProductsState"];
+ initialView.currentState = "HomeWipeUp";
+ }
+ }
+
+ private function headToSupport():void
+ {
+ supportButton.selected = true;
+ if (initialView.currentState == "ProductsState")
+ {
+ productsButton.selected = false;
+ stateChain = ["ProductsWipeUp", "SupportWipeDown", "SupportState"];
+ initialView.currentState = "ProductsWipeUp";
+ }
+ if (initialView.currentState == "HomeState")
+ {
+ homeButton.selected = false;
+ stateChain = ["HomeWipeUp", "SupportWipeDown", "SupportState"];
+ initialView.currentState = "HomeWipeUp";
+ }
+ }
+
+ private function prebake():void
+ {
+ callLater.callLater(prebake2);
+ }
+
+ private function prebake2():void
+ {
+ trace("prebake2");
+ stateChain = ["ProductsPreBake", "HomeState"];
+ initialView.currentState = "ProductsPreBake";
+ }
+
+ private function chainStatesIfNeeded():void
+ {
+ if (stateChain != null)
+ {
+ if (initialView.currentState == stateChain[0])
+ {
+ callLater.callLater(nextState);
+ }
+ }
+ }
+
+ private function nextState():void
+ {
+ stateChain.shift();
+ if (stateChain.length)
+ initialView.currentState = stateChain[0];
+ else
+ stateChain = null;
+ }
+ ]]>
+ </fx:Script>
+
+ <fx:Style source="main.css"/>
+ <fx:Style source="beige.css"/>
+
+ <fx:Declarations>
+ <js:HTTPService id="productService" url="data/catalog.json">
+ <js:LazyCollection id="catalog" complete="if (pView) pView.catalog = catalog">
+ <js:inputParser>
+ <js:JSONInputParser />
+ </js:inputParser>
+ <js:itemConverter>
+ <ProductJSONItemConverter />
+ </js:itemConverter>
+ </js:LazyCollection>
+ </js:HTTPService>
+ </fx:Declarations>
+ <jquery:valuesImpl>
+ <js:SimpleCSSValuesImpl />
+ </jquery:valuesImpl>
+ <jquery:beads>
+ <js:CallLaterBead id="callLater" />
+ <js:ApplicationDataBinding />
+ </jquery:beads>
+ <jquery:initialView>
+ <js:View width="990" height="585"
+ initComplete="completeHandler(null)"
+ stateChangeComplete="chainStatesIfNeeded()">
+ <js:states>
+ <js:State name="HomeState" stateGroups="['Home']" />
+ <js:State name="HomeWipeUp" stateGroups="['Home']" />
+ <js:State name="HomeWipeDown" stateGroups="['Home']" />
+ <js:State name="ProductsPreBake" stateGroups="['Home', 'Products']" />
+ <js:State name="ProductsState" stateGroups="['Products']" />
+ <js:State name="ProductsWipeUp" stateGroups="['Products']" />
+ <js:State name="ProductsWipeDown" stateGroups="['Products']" />
+ <js:State name="SupportState" stateGroups="['Support']" />
+ <js:State name="SupportWipeUp" stateGroups="['Support']" />
+ <js:State name="SupportWipeDown" stateGroups="['Support']" />
+ </js:states>
+
+ <js:transitions>
+ <js:Transition fromState="HomeState" toState="HomeWipeUp">
+ <js:Wipe direction="up" target="homeView" />
+ </js:Transition>
+ <js:Transition fromState="HomeWipeDown" toState="HomeState">
+ <js:Wipe direction="down" target="homeView" />
+ </js:Transition>
+ <js:Transition fromState="ProductsState" toState="ProductsWipeUp">
+ <js:Wipe direction="up" target="pView" />
+ </js:Transition>
+ <js:Transition fromState="ProductsWipeDown" toState="ProductsState">
+ <js:Wipe direction="down" target="pView" />
+ </js:Transition>
+ <js:Transition fromState="SupportState" toState="SupportWipeUp">
+ <js:Wipe direction="up" target="supportView" />
+ </js:Transition>
+ <js:Transition fromState="SupportWipeDown" toState="SupportState">
+ <js:Wipe direction="down" target="supportView" />
+ </js:Transition>
+ </js:transitions>
+ <js:beads>
+ <js:VerticalLayout />
+ </js:beads>
+ <js:ControlBar id="acb" width="100%" className="storeControlBar" >
+ <js:beads>
+ <js:HorizontalLayout />
+ </js:beads>
+ <js:Image id="image" />
+ <!-- click="toggleTheme()" -->
+ <!-- toolTip="Change Theme"/ -->
+ <jquery:ToggleTextButton id="homeButton"
+ text="Home"
+ height="100%"
+ selected="true"
+ className="storeButtonBar"
+ click="headHome()" />
+ <jquery:ToggleTextButton id="productsButton"
+ text="Products"
+ height="100%"
+ className="storeButtonBar"
+ click="headToProducts()"/>
+ <jquery:ToggleTextButton id="supportButton"
+ text="Support"
+ height="100%"
+ className="storeButtonBar"
+ click="headToSupport()"/>
+ </js:ControlBar>
+ <js:Container width="990" >
+ <js:style>
+ <js:SimpleCSSStyles paddingLeft="0" paddingRight="0"/>
+ </js:style>
+
+ <HomeView id="homeView" width="100%" height="550" includeIn="Home"
+ />
+ <ProductsView id="pView" includeIn="Products" visible.ProductsPreBake="false"
+ width="100%" height="550" initComplete="if (catalog.length) pView.catalog = catalog"
+ />
+ <SupportView id="supportView" includeIn="Support"
+ width="100%" height="550"
+ />
+ </js:Container>
+ </js:View>
+ </jquery:initialView>
+</jquery:Application>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/962a81ca/examples/flexjs/FlexJSStore_jquery/src/main/flex/HomeView.mxml
----------------------------------------------------------------------
diff --cc examples/flexjs/FlexJSStore_jquery/src/main/flex/HomeView.mxml
index 90049b5,0000000..e667ff3
mode 100755,000000..100755
--- a/examples/flexjs/FlexJSStore_jquery/src/main/flex/HomeView.mxml
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/HomeView.mxml
@@@ -1,195 -1,0 +1,195 @@@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements. See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License. You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<!--
+This component is primarily static and is only meant to show what other
+pages of the store could look like.
+
+Note that this page was put together in the Design view so you'll see more
+hard coded locations and sizes.
+
+Also note when working with a Canvas that using the constraint styles
+(e.g., left, top, right, bottom) can provide better layout predictability than
+using x and y, especially when percentage widths and heights are used.
+
+Width and height are hard-coded in the root tag to help the Design view.
+-->
+<js:Container xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:js="library://ns.apache.org/flexjs/basic"
+ xmlns:jquery="library://ns.apache.org/flexjs/jquery"
+ xmlns="*" width="990" height="550"
+ initComplete="updateMapImage()">
+ <fx:Script>
+ <![CDATA[
+ import org.apache.flex.core.ValuesManager;
+ import org.apache.flex.html.SimpleAlert;
+
+ public function updateMapImage():void
+ {
- mapImage.source = ValuesManager.valuesImpl.getValue(mapCanvas, 'dottedMap');
++ mapImage.url = ValuesManager.valuesImpl.getValue(mapCanvas, 'dottedMap');
+ }
+ ]]>
+ </fx:Script>
+ <js:beads>
+ <js:ContainerDataBinding />
+ </js:beads>
+ <js:HContainer width="100%" height="100%" y="0" x="0" className="colorPanel">
+ <js:VContainer width="230" height="100%">
+ <js:Container width="100%" height="100%">
+
+ <js:Container height="60" className="homeSection">
+ <js:style>
+ <js:SimpleCSSStyles backgroundColor="#ebebe9" left="10" top="10" right="10"/>
+ </js:style>
+ <js:Label style="left:10;top:10" text="Search Developers" height="22" className="sectionHeader" />
+ <jquery:TextButton style="left:168;top:30" text="Go" width="27" height="20" className="glass" click="SimpleAlert.show('This feature is not implemented in this sample', 'Go')"/>
+ <js:TextInput style="left:10;top:30" height="20" width="150"/>
+ </js:Container>
+
+ <js:Container height="280" className="homeSection">
+ <js:style>
+ <js:SimpleCSSStyles backgroundColor="#ffffff" left="10" top="78" right="10" />
+ </js:style>
+ <js:VContainer width="100%" height="100%">
+ <js:style>
+ <js:SimpleCSSStyles left="10" top="10" />
+ </js:style>
+ <js:Label text="Flex Experts That Can Help You" className="sectionHeader"/>
+ <js:HRule height="5" width="187" style="marginLeft:0"/>
+ <js:Label text="General" className="homeProgramHeader"/>
+ <js:Label text="BlazeDS Experts" style="fontSize:9"/>
+ <js:Spacer height="8" width="100%"/>
+ <js:Label text="Server-side" className="homeProgramHeader"/>
+ <js:Label text="Java, PHP Developers" style="fontSize:9"/>
+ <js:Spacer height="8" width="100%"/>
+ <js:Label text="Mobile" className="homeProgramHeader"/>
+ <js:Label text="Android, IOS and more" style="fontSize:9"/>
+ <js:Spacer height="8" width="100%"/>
+ <js:Label text="Students" className="homeProgramHeader"/>
+ <js:Label text="Free Assistance" style="fontSize:9"/>
+ <js:Spacer height="8" width="100%"/>
+ </js:VContainer>
+ </js:Container>
+
+ <js:Container height="174" className="homeSection">
+ <js:style>
+ <js:SimpleCSSStyles backgroundColor="#ebebe9" left="10" top="366" right="10" />
+ </js:style>
+ <js:VContainer width="100%" height="100%">
+ <js:style>
+ <js:SimpleCSSStyles left="10" top="10" />
+ </js:style>
+ <js:Label text="Manage My Account" className="sectionHeader"/>
+
+ <js:Label text="Phone Number"/>
+
+ <js:HContainer width="100%" height="25" >
+ <js:style>
+ <js:SimpleCSSStyles verticalAlign="middle" />
+ </js:style>
+ <js:TextInput height="20" width="40"/>
+ <js:HRule width="8" height="2"/>
+ <js:TextInput height="20" width="40"/>
+ <js:HRule width="8" height="2"/>
+ <js:TextInput height="20" width="40"/>
+ </js:HContainer>
+
+ <js:Label text="Password"/>
+ <js:TextInput height="20"/>
+ <js:Spacer height="8" width="100%"/>
+
+ <jquery:CheckBox text="Remember my phone number" selected="true"/>
+ <js:Spacer height="8" width="100%"/>
+
+ <jquery:TextButton text="Login" className="glass" height="20" width="55" click="SimpleAlert.show('This feature is not implemented in this sample', 'Login')"/>
+
+ </js:VContainer>
+ </js:Container>
+
+ </js:Container>
+
+ </js:VContainer>
+
+ <js:VContainer width="750" height="100%">
+ <js:Container width="100%" height="100%">
+
- <!-- can't use binding to set the mapImage source because the style isn't available early enough -->
++ <!-- can't use binding to set the mapImage url because the style isn't available early enough -->
+ <js:Container id="mapCanvas" height="35%" className="homeMap">
+ <js:style>
+ <js:SimpleCSSStyles left="0" right="10" top="10" />
+ </js:style>
+ <js:Image id="mapImage" width="487" height="100%" alpha="1.0" style="left:10;top:10"/>
+ <js:Label y="110" text="US Developers . Flex . FlexJS" width="95%" height="40" style="margin:auto;fontWeight:'bold';fontSize:22;color:#ffffff;fontFamily:'Arial';textAlign:'center'"/>
+ <js:Label text="Learn More >>" width="95" style="fontSize:12;fontFamily:'Arial';bottom:10;right:10"/>
+ <js:Label text="$60/hr" style="color:#ffffff;fontWeight:'bold';fontFamily:'Arial';fontSize:20;right:10:top:10"/>
+ <js:Label text="Rates as low as" x="551" y="16" style="fontSize:12"/>
+ </js:Container>
+
+ <js:Container height="330" >
+ <js:style>
+ <js:SimpleCSSStyles backgroundColor="#ffffff" borderStyle="solid" bottom="10" right="10" left="0" /> <!-- cornerRadius="4" -->
+ </js:style>
+
+ <js:Label style="left:10;top:10" text="Featured Developers" width="173" height="25" className="sectionHeader"/>
+
+ <js:HContainer style="left:10;top:43" width="100%" height="100%">
+ <js:VContainer width="33%" height="100%">
+ <js:Container width="100%">
- <js:Image id="image1" source="assets/akotter.jpg" style="margin:auto;verticalCenter:0"/>
++ <js:Image id="image1" url="assets/akotter.jpg" style="margin:auto;verticalCenter:0"/>
+ </js:Container>
+
+ <js:Container width="100%">
+ <js:Label text="Annette Kotter" id="feat_prod_1" style="margin:auto;fontWeight:'bold';fontSize:12"/>
+ </js:Container>
+
+ </js:VContainer>
+
+ <js:VContainer width="33%" height="100%">
+ <js:Container width="100%">
- <js:Image id="image2" style="margin:auto;verticalCenter:0" source="assets/bcrater.jpg"/>
++ <js:Image id="image2" style="margin:auto;verticalCenter:0" url="assets/bcrater.jpg"/>
+ </js:Container>
+
+ <js:Container width="100%">
+ <js:Label text="Ben Crater" id="feat_prod_2" style="margin:auto;fontWeight:'bold';fontSize:12"/>
+ </js:Container>
+
+ </js:VContainer>
+
+ <js:VContainer width="33%" height="100%">
+ <js:Container width="100%">
- <js:Image id="image3" style="margin:auto;verticalCenter:0" source="assets/jproctor.jpg"/>
++ <js:Image id="image3" style="margin:auto;verticalCenter:0" url="assets/jproctor.jpg"/>
+ </js:Container>
+
+ <js:Container width="100%">
+ <js:Label text="Jane Proctor" id="feat_prod_3" style="margin:auto;fontWeight:'bold';fontSize:12"/>
+ </js:Container>
+
+ </js:VContainer>
+
+ </js:HContainer>
+
+ </js:Container>
+
+ </js:Container>
+
+ </js:VContainer>
+
+ </js:HContainer>
+
+</js:Container>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/962a81ca/examples/flexjs/FlexJSStore_jquery/src/main/flex/SupportView.mxml
----------------------------------------------------------------------
diff --cc examples/flexjs/FlexJSStore_jquery/src/main/flex/SupportView.mxml
index 3d30a9d,0000000..72bbb55
mode 100755,000000..100755
--- a/examples/flexjs/FlexJSStore_jquery/src/main/flex/SupportView.mxml
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/SupportView.mxml
@@@ -1,149 -1,0 +1,149 @@@
+<?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.
+
+-->
+<!--
+This component is primarily static and is only meant to show what other
+pages of the store could look like.
+
+Note that this page was put together in the Design view so you'll see more
+hard coded locations and sizes.
+
+We did not have sizing issues here as much so you'll see more hardcoded
+"y" values rather than "top."
+
+The width and height are hard-coded in the root tag to help the Design view.
+-->
+<js:Container xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:js="library://ns.apache.org/flexjs/basic"
+ xmlns="*" alpha="1.0"
+ width="990" height="550">
+
+ <fx:Script>
+ <![CDATA[
+ import org.apache.flex.html.SimpleAlert;
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <fx:Array id="locations">
+ <fx:Object image="assets/support_mapmarker_a.png" name="601 Townsend St" />
+ <fx:Object image="assets/support_mapmarker_b.png" name="Location B" />
+ <fx:Object image="assets/support_mapmarker_c.png" name="Location C" />
+ </fx:Array>
+
+ </fx:Declarations>
+
+ <js:HContainer x="0" y="0" width="100%" height="100%" className="colorPanel">
+
+ <js:VContainer width="32%" height="100%">
+ <js:Container width="100%" height="420">
+
+ <js:Label y="10" text="Check Location" className="sectionHeader" x="20"/>
+
+ <js:Container height="150" y="64" style="margin:auto">
+ <js:beads>
+ <js:VerticalColumnLayout numColumns="2" />
+ </js:beads>
+ <js:Label text="Address:"/>
+ <js:TextInput id="address"/>
+
+ <js:Label text="City:" style="marginTop:20"/>
+ <js:TextInput id="city" style="marginTop:20"/>
+
+ <js:Label text="State:" style="marginTop:20"/>
+ <js:DropDownList id="state" style="marginTop:20">
+ <js:dataProvider>
+ <fx:Array>
+ <fx:String>California</fx:String>
+ <fx:String>Nevada</fx:String>
+ <fx:String>Oregon</fx:String>
+ <fx:String>Washington</fx:String>
+ </fx:Array>
+ </js:dataProvider>
+ </js:DropDownList>
+
+ <js:Label text="ZIP Code:" style="marginTop:20"/>
+ <js:TextInput id="zip" style="marginTop:20"/>
+
+ </js:Container>
+
+ <js:Label y="38" text="Option1: Enter Address" style="margin:auto" className="instructions"/>
+
+ <js:TextButton y="297" text="Locate" click="SimpleAlert.show('This feature is not implemented in this sample', 'Locate')"
+ style="margin:auto"/>
+
+ <js:HContainer y="327" height="20" >
+ <js:style>
+ <js:SimpleCSSStyles margin="auto" verticalAlign="middle" />
+ </js:style>
+ <js:HRule width="60" />
+ <js:Label text="OR"/>
+ <js:HRule width="60" />
+ </js:HContainer>
+
+ <js:Label y="355" text="Option 2: Drag this marker into the map" style="margin:auto" className="instructions"/>
+
- <js:Image y="380" style="margin:auto" source="assets/support_mapmarker_plus.png"/>
++ <js:Image y="380" style="margin:auto" url="assets/support_mapmarker_plus.png"/>
+
+ <js:HRule y="415" style="margin:auto" width="200" alpha="0.6"/>
+
+ </js:Container>
+
+ <js:Container width="100%" height="130">
+ <js:VContainer width="80%" height="90%" >
+ <js:style>
+ <js:SimpleCSSStyles margin="auto" top="0"/>
+ </js:style>
+ <js:Label text="Location" className="instructions"/>
+ <js:List width="100%" dataProvider="{locations}">
+ <js:itemRenderer>
+ <fx:Component>
+ <js:DataItemRenderer className="listItem" width="100%">
+ <fx:Script>
+ <![CDATA[
+ import samples.flexstore.Product;
+ [Bindable("__NoChangeEvent__")]
+ private function get product():Product
+ {
+ return data as Product;
+ }
+ ]]>
+ </fx:Script>
- <js:Image width="21" height="25" source="{product.image}" />
++ <js:Image width="21" height="25" url="{product.image}" />
+ <js:Label width="100%" text="{product.name}" />
+ </js:DataItemRenderer>
+ </fx:Component>
+ </js:itemRenderer>
+ </js:List>
+ </js:VContainer>
+ </js:Container>
+
+ </js:VContainer>
+
+ <js:Container width="68%" height="100%">
- <js:Image source="assets/427px-Bayarea_map.png">
++ <js:Image url="assets/427px-Bayarea_map.png">
+ <js:style>
+ <js:SimpleCSSStyles left="12" top="12"/>
+ </js:style>
+ </js:Image>
+ </js:Container>
+
+ </js:HContainer>
+
+</js:Container>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/962a81ca/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/Grip.mxml
----------------------------------------------------------------------
diff --cc examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/Grip.mxml
index abd3ce5,0000000..d161d89
mode 100755,000000..100755
--- a/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/Grip.mxml
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/Grip.mxml
@@@ -1,48 -1,0 +1,48 @@@
+<?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:Image id="icon" url="{gripIcon}" />
++ <js:Image id="grip" url="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/962a81ca/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductCatalogThumbnail.mxml
----------------------------------------------------------------------
diff --cc examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductCatalogThumbnail.mxml
index 1abc428,0000000..0946f8a
mode 100755,000000..100755
--- a/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductCatalogThumbnail.mxml
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductCatalogThumbnail.mxml
@@@ -1,220 -1,0 +1,220 @@@
+<?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="{COL_WIDTH_4}" height="{COL_HEIGHT_4}" height.compare="502"
+ width.x4cols="{COL_WIDTH_4}" height.x4cols="{COL_HEIGHT_4}"
+ width.x3cols="{COL_WIDTH_3}" height.x3cols="{COL_HEIGHT_3}"
+ width.x2cols="{COL_WIDTH_2}" height.x2cols="{COL_HEIGHT_2}"
+ rollOver="rollOverHandler(event)"
+ rollOut="rollOutHandler(event)"
+ mouseDown="mouseDownHandler(event)"
+ mouseMove="mouseMoveHandler(event)"
+ mouseUp="mouseUpHandler(event)"
+ click="clickHandler(event)"
+ currentState="x4cols"
+ >
+ <!-- automationName="{product.name}" -->
+ <js:beads>
+ <js:ContainerDataBinding />
+ <js:LayoutChangeNotifier watchedProperty="{borderStyles.borderColor}" initialValue="#FFFFFF" />
+ </js:beads>
+ <js:style>
+ <js:BindableCSSStyles id="borderStyles" borderStyle="solid" borderWidth="1"
+ borderColor="#FFFFFF" backgroundColor="#FFFFFF"/>
+ </js:style>
+ <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.events.*;
+ import org.apache.flex.utils.PointUtils;
+
+ import samples.flexstore.Product;
+ import samples.flexstore.ProductThumbEvent;
+
+ public static const COL_WIDTH_4:int = 162;
+ public static const COL_HEIGHT_4:int = 122;
+ public static const COL_WIDTH_3:int = 217;
+ public static const COL_HEIGHT_3:int = 165;
+ public static const COL_WIDTH_2:int = 327;
+ public static const COL_HEIGHT_2:int = 250;
+ public static const COMPARE_WIDTH:int = 162;
+ public static const HORIZONTAL_GAP:int = 2;
+ public static const VERTICAL_GAP:int = 3;
+
+ [Bindable]
+ public var product:Product;
+
+ private function rollOverHandler(event:MouseEvent):void
+ {
+ borderStyles.borderColor = "#CCCCCC";
+ //style["dropShadowEnabled"] = true;
+ buttons.visible = true;
+ }
+
+ private function rollOutHandler(event:MouseEvent):void
+ {
+ borderStyles.borderColor = "#FFFFFF";
+ //style["dropShadowEnabled"] = false;
+ buttons.visible = false;
+ }
+
+ private var dragStartPoint:Point;
+
+ public function mouseDownHandler(event:MouseEvent):void
+ {
+ if (event.target != purchase &&
+ event.target != compare &&
+ event.target != details)
+ {
+ dragStartPoint = new Point(event.clientX, event.clientY);
+ }
+ }
+
+ public function mouseMoveHandler(event:MouseEvent):void
+ {
+ if (dragStartPoint != null)
+ {
+ var dragEvent:DragEvent = new DragEvent(DragEvent.DRAG_START, true);
+ dragEvent.clientX = dragStartPoint.x;
+ dragEvent.clientY = dragStartPoint.y;
+ dragEvent.buttonDown = true;
+ dispatchEvent(dragEvent);
+
+ rollOutHandler(event);
+
+ dragStartPoint = null;
+ }
+ }
+
+ public function mouseUpHandler(event:MouseEvent):void
+ {
+ if (dragStartPoint != null)
+ {
+ dragStartPoint = null;
+ }
+ }
+
+ public function clickHandler(event:org.apache.flex.events.MouseEvent):void
+ {
+ if (event.target != purchase &&
+ event.target != compare &&
+ event.target != details)
+ {
+ dispatchEvent(new ProductThumbEvent(ProductThumbEvent.DETAILS, product));
+ }
+ }
+
+ ]]>
+ </fx:Script>
+ <fx:Declarations>
+ <js:CurrencyFormatter currencySymbol="$" id="cf" fractionalDigits="2"/>
+ </fx:Declarations>
+
+ <js:VContainer id="vb" width="100%" height="100%">
+ <js:style>
+ <js:SimpleCSSStyles paddingLeft="6" paddingTop="4" paddingRight="8" paddingBottom="4" />
+ <!-- gap="0"> -->
+ </js:style>
+
+
+ <js:Label text="{product.name}" style="fontWeight:bold"/>
+
+ <js:HContainer width="100%" >
+ <js:style>
+ <js:SimpleCSSStyles paddingTop="0" /> <!-- gap="4 -->"
+ </js:style>
+
+ <js:Image id="img" height="45" width="45"
+ width.x3cols="60" height.x3cols="60"
+ width.x2cols="60" height.x2cols="60"
- source="{product.image}" />
++ url="{product.image}" />
+
+ <js:VContainer id="descr" height="100%" >
+ <js:style>
+ <js:SimpleCSSStyles paddingTop="0" right="0" /> <!-- gap="0" -->
+ </js:style>
+ <js:Label text="{product.featureString}" width="60" height="48" />
+ <js:Label text="{cf.format(product.price)}" style="fontWeight:bold"/>
+ <js:Spacer height="4"/>
+ <js:Label text="{product.highlight1}" style="color:#EE8D0C" includeIn="x3cols, x2cols"/>
+ <js:Label text="{product.highlight2}" style="color:#EE8D0C" includeIn="x3cols, x2cols"/>
+ </js:VContainer>
+
+ </js:HContainer>
+
+ <js:Spacer height="8"/>
+
+ <js:Label id="compYears" text="Years: {product.experience}" includeIn="compare"/>
+ <js:Label id="compBlaze" text="BlazeDS: {product.blazeds}" includeIn="compare"/>
+ <js:Label id="compMobile" text="Mobile: {product.mobile}" includeIn="compare"/>
+ <js:Label id="compVideo" text="Video: {product.video}" includeIn="compare"/>
+ <js:Label id="compHigh1" text="Highlight: {product.highlight1}" includeIn="compare"/>
+ <js:Label id="compHigh2" text="Highlight: {product.highlight2}" includeIn="compare"/>
+ <js:Label text="Description:" includeIn="compare"/>
+ <js:MultilineLabel id="compDesc" text="{product.description}" width="100%" includeIn="compare"/>
+ </js:VContainer>
+
+
+ <js:VContainer id="buttons" visible="false" width="30">
+ <js:style>
+ <js:SimpleCSSStyles paddingRight="8" right="8" top="12" /> <!-- gap="4" -->
+ </js:style>
+ <js:ImageButton id="purchase" source="assets/button_cart_empty.png" className="hoverButton"
+ click="dispatchEvent(new ProductThumbEvent(ProductThumbEvent.PURCHASE, product))"
+ width="30">
+ <js:beads>
+ <js:ToolTipBead toolTip="Add to cart"/>
+ </js:beads>
+ </js:ImageButton>
+ <js:ImageButton id="compare" source="assets/button_compare.png" className="hoverButton"
+ click="dispatchEvent(new ProductThumbEvent(ProductThumbEvent.COMPARE, product))"
+ width="30">
+ <js:beads>
+ <js:ToolTipBead toolTip="Add to compare list"/>
+ </js:beads>
+ </js:ImageButton>
+ <js:ImageButton id="details" source="assets/button_details.png" className="hoverButton"
+ click="dispatchEvent(new ProductThumbEvent(ProductThumbEvent.DETAILS, product))"
+ width="30">
+ <js:beads>
+ <js:ToolTipBead toolTip="Show details"/>
+ </js:beads>
+ </js:ImageButton>
+ </js:VContainer>
+
+ <js:states>
+
+ <js:State name="compare" />
+
+ <js:State name="x4cols" />
+
+ <js:State name="x3cols" />
+
+ <js:State name="x2cols"/>
+ </js:states>
+
+</js:Container>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/962a81ca/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductDetails.mxml
----------------------------------------------------------------------
diff --cc examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductDetails.mxml
index 309cb41,0000000..781d120
mode 100755,000000..100755
--- a/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductDetails.mxml
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductDetails.mxml
@@@ -1,145 -1,0 +1,145 @@@
+<?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:beads>
+ <js:ContainerDataBinding />
+ </js:beads>
+
+ <fx:Metadata>
+ [Event(name="purchase", type="samples.flexstore.ProductThumbEvent")]
+ [Event(name="compare", type="samples.flexstore.ProductThumbEvent")]
+ [Event(name="browse", type="samples.flexstore.ProductThumbEvent")]
+ </fx:Metadata>
+
+ <fx:Script>
+ <![CDATA[
+
+ import samples.flexstore.Product;
+ import samples.flexstore.ProductThumbEvent;
+
+ private var _product:Product;
+
+ [Bindable]
+ public function get product():Product
+ {
+ return _product;
+ }
+
+ public function set product(p:Product):void
+ {
+ _product = p;
+ tn.selectedIndex = 0;
+ }
+
+ ]]>
+ </fx:Script>
+
+ <fx:Declarations>
+ <js:CurrencyFormatter currencySymbol="$" id="cf" fractionalDigits="2"/>
+ </fx:Declarations>
+
+ <js:states>
+ <js:State name="Features" />
+ <js:State name="Support" />
+ </js:states>
+
+ <js:transitions>
+ <js:Transition>
+ <js:Fade />
+ </js:Transition>
+ </js:transitions>
+
+ <js:ButtonBar id="tn" width="100%" change="currentState = tn.selectedItem as String">
+ <js:dataProvider>
+ <fx:Array>
+ <fx:String>Features</fx:String>
+ <fx:String>Support</fx:String>
+ </fx:Array>
+ </js:dataProvider>
+ </js:ButtonBar>
+ <js:Container >
+ <js:style>
+ <js:SimpleCSSStyles left="4" right="8" top="34" bottom="4" />
+ </js:style>
+
+
+ <js:VContainer includeIn="Features" >
+ <js:style>
+ <!--<js:SimpleCSSStyles gap="8"-->
+ <js:SimpleCSSStyles
+ left="8" top="8" right="8" bottom="8"/>
+ </js:style>
+ <js:Container style="left:0px;right:0px">
+
- <js:Image id="img" width="101" height="101" source="{product.image}"/>
++ <js:Image id="img" width="101" height="101" url="{product.image}"/>
+
+ <js:VContainer id="descr" >
+ <js:style>
+ <js:SimpleCSSStyles top="0" left="105" right="0" bottom="20" />
+ <!--<js:SimpleCSSStyles paddingTop="0" gap="4" />-->
+ </js:style>
+
+ <js:Label text="{product.name}" style="fontSize:11;fontWeight:'bold'"/>
+
+ <js:Label text="{product.featureString}" width="80" height="48" />
+
+ <js:Label text="{product.highlight1}" style="color:#EE8D0C"/>
+
+ <js:Label text="{product.highlight2}" style="color:#EE8D0C"/>
+
+ <js:Label text="{cf.format(product.price)}" style="fontWeight:'bold'"/>
+
+ </js:VContainer>
+ </js:Container>
+
+ <js:Label id="descriptionText" style="left:0px;right:0px;bottom:0px" text="{product.description}"/>
+
+ </js:VContainer>
+
+ <productsView:ProductSupport width="100%" height="100%" includeIn="Support" />
+
+ </js:Container>
+
+ <js:VContainer>
+ <js:style>
+ <js:SimpleCSSStyles marginTop="4" right="16" top="36" />
+ </js:style>
+ <js:Spacer width="100%"/>
+ <js:ImageButton id="purchase" source="assets/button_cart_empty.png" click="dispatchEvent(new ProductThumbEvent(ProductThumbEvent.PURCHASE, product))" width="30">
+ <js:beads>
+ <js:ToolTipBead toolTip="Add to cart"/>
+ </js:beads>
+ </js:ImageButton>
+ <js:ImageButton id="compare" source="assets/button_compare.png" click="dispatchEvent(new ProductThumbEvent(ProductThumbEvent.COMPARE, product))" width="30">
+ <js:beads>
+ <js:ToolTipBead toolTip="Add to compare list"/>
+ </js:beads>
+ </js:ImageButton>
+ <js:ImageButton id="tiles" source="assets/button_tiles.png" click="dispatchEvent(new ProductThumbEvent(ProductThumbEvent.BROWSE, product));" width="30">
+ <js:beads>
+ <js:ToolTipBead toolTip="Back to thumbnail view"/>
+ </js:beads>
+ </js:ImageButton>
+ </js:VContainer>
+
+</js:Container>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/962a81ca/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductListItem.mxml
----------------------------------------------------------------------
diff --cc examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductListItem.mxml
index edf3516,0000000..b3b84ea
mode 100755,000000..100755
--- a/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductListItem.mxml
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/productsView/ProductListItem.mxml
@@@ -1,140 -1,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:Image id="productImage" x="16" y="6" width="12" height="12" url="{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/962a81ca/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductThumbEvent.as
----------------------------------------------------------------------
diff --cc examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductThumbEvent.as
index ce1cab7,0000000..e2838f9
mode 100755,000000..100755
--- a/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductThumbEvent.as
+++ b/examples/flexjs/FlexJSStore_jquery/src/main/flex/samples/flexstore/ProductThumbEvent.as
@@@ -1,45 -1,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);
- }
++
++ //override public function cloneEvent():Event
++ //{
++ // return new ProductThumbEvent(type, product);
++ //}
+}
+
- }
++}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/962a81ca/examples/flexjs/MobileStocks/src/main/flex/MyInitialView.mxml
----------------------------------------------------------------------
diff --cc examples/flexjs/MobileStocks/src/main/flex/MyInitialView.mxml
index b6853e2,0000000..5286e2c
mode 100755,000000..100755
--- a/examples/flexjs/MobileStocks/src/main/flex/MyInitialView.mxml
+++ b/examples/flexjs/MobileStocks/src/main/flex/MyInitialView.mxml
@@@ -1,253 -1,0 +1,253 @@@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:local="*"
+ xmlns:js="library://ns.apache.org/flexjs/basic"
+ xmlns:views="views.*"
+ xmlns:apache="org.apache.flex.html.beads.*"
+ xmlns:html="org.apache.flex.html.*"
+ xmlns:controller="controller.*"
+ initComplete="onInitComplete()" xmlns:models="models.*" >
+
+ <fx:Style>
+ @namespace js "library://ns.apache.org/flexjs/basic";
+ @namespace views "views.*";
+
+ js|Container {
+ background-color: #FFFFFF;
+ }
+
+ js|TextInput {
+ font-size: 10pt;
+ }
+
+ js|Label {
+ font-size: 8pt;
+ }
+
+ js|StackedViewManager {
+ padding-top: 0px;
+ padding-bottom: 0px;
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+
+ js|TabbedViewManager {
+ position : absolute ;
+ height : 100% ;
+ width : 100% ;
+ left : 0px ;
+ top : 0px ;
+ border: solid 1px #444444;
+ background-color: #FFFFFF;
+ }
+
+ .NavigationBar {
+ background-image: url("assets/background.png");
+ height: 56px;
+ width: 100%;
+ IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.HorizontalLayout");
+ }
+
+ .TabBar {
+ background-color: #DEDEDE;
+ height: 55px;
+ vertical-align: middle;
+ line-height: 55px;
+ }
+
+ .BackButton:hover {
+ background-image: url('assets/arrow_left_24.png');
+ }
+
+ .BackButton:active {
+ background-image: url('assets/arrow_left_24.png');
+ }
+
+ .BackButton {
+ background-image: url('assets/arrow_left_24.png');
+ }
+
+ views|LaunchView {
+ width: 100%;
+ height: 100%;
+ IBeadController:ClassReference('controller.LaunchViewController');
+ background-color: #FFFFFF;
+ }
+
+ views|WatchListView {
+ width: 100%;
+ height: 100%;
+ IBeadController:ClassReference('controller.WatchListController');
+ background-color: #FFFFFF;
+ }
+
+ .WatchListInner {
+ height: 480px;
+ width: 100%;
+ background-color: #FFFFFF;
+ }
+
+ .WatchListDataGrid {
+ height: 480px;
+ width: 100%;
+ }
+
+ .WatchListInputArea {
+ background-color: #FFFFFF;
+ width: 480px;
+ height: 25px;
+ padding-top: 5px;
+ padding-bottom: 2px;
+ }
+
+ views|StockView {
+ width: 100%;
+ height: 100%;
+ }
+
+ .redCell {
+ color: #FF0000;
+ }
+
+ .greenCell {
+ color: #00FF00;
+ }
+
+ .ViewTitle {
+ font-size: 18pt;
+ font-weight: bold;
+ padding: 10pt;
+ }
+
+ .StockName {
+ font-size: 14pt;
+ font-weight: normal;
+ padding: 10pt;
+ }
+
+ .StockDetailArea {
+ padding: 10pt;
+ }
+
+ .StockLabel {
+ font-size: 18pt;
+ font-weight: normal;
+ color: #2255DD;
+ }
+
+ .StockRemoveButton {
+ background-color: #FF5522;
+ font-size: 16pt;
+ font-weight: bold;
+ color: #FFFFFF;
+ width: 200px;
+ height: 50px;
+ }
+
+ .StockRemoveButton:hover {
+ background-color: #DD3300;
+ }
+
+ .StockValue {
+ font-size: 18pt;
+ font-weight: normal;
+ color: #999999;
+ }
+
+ @media -flex-flash
+ {
+ .NavigationBar {
+ IBackgroundBead: ClassReference("org.apache.flex.html.beads.BackgroundImageBead");
+ }
+ }
+
+ </fx:Style>
+
+ <fx:Script>
+ <![CDATA[
+ import org.apache.flex.core.IBeadController;
+ import org.apache.flex.core.IBeadModel;
+ import org.apache.flex.events.Event;
+ import org.apache.flex.mobile.IViewManagerView;
+ import org.apache.flex.mobile.IViewManager;
+ import org.apache.flex.mobile.chrome.NavigationBar;
+
+ import models.ProductsModel;
+
+ private function onInitComplete():void
+ {
+ (applicationModel as ProductsModel).loadDataFromStorage();
+ }
+
+ /* debugging */
+ private function tabbedViewChanged(event:org.apache.flex.events.Event):void
+ {
+ //var manager:IViewManager = event.currentTarget as IViewManager;
+ //trace("TabbedViewChanged for "+manager);
+ }
+
+ private function watchListStackChanged(event:org.apache.flex.events.Event):void
+ {
+ //trace("watchlist stack changed");
+ var manager:StackedViewManager = event.currentTarget as StackedViewManager;
+
+ var currentView:IViewManagerView = manager.selectedView;
+ backButton.visible = manager.views.length > 1;
+ }
+
+ private function goBack(event:org.apache.flex.events.MouseEvent):void
+ {
+ if (navController.selectedIndex == 1) {
+ watchListStack.pop();
+ }
+ }
+ ]]>
+ </fx:Script>
+
+ <js:beads>
+ <js:ViewDataBinding />
+ </js:beads>
+
+ <js:TabbedViewManager id="navController" width="100%" height="100%" x="0" y="0" viewChanged="tabbedViewChanged(event)">
+ <js:navigationBarItems>
+ <js:TextButton id="backButton" width="45" height="45" className="BackButton" visible="false" click="goBack(event)">
+ <js:beads>
+ <apache:ImageButtonView />
+ </js:beads>
+ </js:TextButton>
- <js:Image source="assets/logo.png" width="218" height="55" />
++ <js:Image url="assets/logo.png" width="218" height="55" />
+ </js:navigationBarItems>
+ <js:views>
+ <js:StackedViewManager title="Assets">
+ <js:views>
+ <views:LaunchView id="assetsView" title="Assets" dataModel="{applicationModel}" />
+ </js:views>
+ </js:StackedViewManager>
+
+ <js:StackedViewManager id="watchListStack" title="Watch List" viewChanged="watchListStackChanged(event)">
+ <js:views>
+ <views:WatchListView id="watchListView" dataModel="{applicationModel}"/>
+ </js:views>
+ </js:StackedViewManager>
+ </js:views>
+ </js:TabbedViewManager>
+
+</js:View>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/962a81ca/examples/flexjs/MobileTrader/src/main/flex/MyInitialView.mxml
----------------------------------------------------------------------
diff --cc examples/flexjs/MobileTrader/src/main/flex/MyInitialView.mxml
index 0c353ff,0000000..5b99ae3
mode 100755,000000..100755
--- a/examples/flexjs/MobileTrader/src/main/flex/MyInitialView.mxml
+++ b/examples/flexjs/MobileTrader/src/main/flex/MyInitialView.mxml
@@@ -1,256 -1,0 +1,256 @@@
+<?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:View xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:local="*"
+ xmlns:js="library://ns.apache.org/flexjs/basic"
+ xmlns:views="views.*"
+ xmlns:apache="org.apache.flex.html.beads.*"
+ xmlns:html="org.apache.flex.html.*"
+ xmlns:controller="controller.*"
+ initComplete="onInitComplete()" xmlns:models="models.*" >
+
+ <fx:Style>
+ @namespace js "library://ns.apache.org/flexjs/basic";
+ @namespace views "views.*";
+
+ js|Container {
+ background-color: #FFFFFF;
+ }
+
+ js|StackedViewManager {
+ padding-top: 0px;
+ padding-bottom: 0px;
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+
+ js|TabbedViewManager {
+ position : absolute ;
+ height : 100% ;
+ width : 100% ;
+ left : 0px ;
+ top : 0px ;
+ border: solid 1px #444444;
+ background-color: #FFFFFF;
+ }
+
+ .NavigationBar {
+ background-image: url("assets/background.png");
+ height: 55px;
+ IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.HorizontalLayout");
+ }
+
+ .TabBar {
+ background-color: #DEDEDE;
+ height: 55px;
+ vertical-align: middle;
+ line-height: 55px;
+ }
+
+ .BackButton:hover {
+ background-image: url('assets/arrow_left_24.png');
+ }
+
+ .BackButton:active {
+ background-image: url('assets/arrow_left_24.png');
+ }
+
+ .BackButton {
+ background-image: url('assets/arrow_left_24.png');
+ }
+
+ .AssetsInner {
+ padding-top: 5px;
+ background-color: #FFFFFF;
+ }
+
+ views|AssetsView {
+ width: 100%;
+ height: 100%;
+ }
+
+ views|WatchListView {
+ width: 100%;
+ height: 100%;
+ IBeadController:ClassReference('controller.WatchListController');
+ background-color: #FFFFFF;
+ }
+
+ .WatchListInner {
+ height: 480px;
+ width: 100%;
+ background-color: #FFFFFF;
+ }
+
+ .WatchListDataGrid {
+ height: 480px;
+ width: 100%;
+ }
+
+ .WatchListInputArea {
+ background-color: #FFFFFF;
+ width: 480px;
+ height: 25px;
+ padding-top: 5px;
+ padding-bottom: 2px;
+ }
+
+ views|StockView {
+ width: 100%;
+ height: 100%;
+ }
+
+ views|AlertsView {
+ width: 100%;
+ height: 100%;
+ IBeadController:ClassReference('controller.AlertsViewController');
+ }
+
+ .redCell {
+ color: #FF0000;
+ }
+
+ .greenCell {
+ color: #00FF00;
+ }
+
+ .ViewTitle {
+ font-size: 18pt;
+ font-weight: bold;
+ padding: 10pt;
+ }
+
+ .StockName {
+ font-size: 14pt;
+ font-weight: normal;
+ padding: 10pt;
+ }
+
+ .StockDetailArea {
+ padding: 10pt;
+ }
+
+ .StockLabel {
+ font-size: 18pt;
+ font-weight: normal;
+ color: #2255DD;
+ }
+
+ .StockRemoveButton {
+ background-color: #FF5522;
+ font-size: 16pt;
+ font-weight: bold;
+ color: #FFFFFF;
+ width: 200px;
+ height: 50px;
+ }
+
+ .StockRemoveButton:hover {
+ background-color: #DD3300;
+ }
+
+ .StockValue {
+ font-size: 18pt;
+ font-weight: normal;
+ color: #999999;
+ }
+
+ @media -flex-flash
+ {
+ .NavigationBar {
+ IBackgroundBead: ClassReference("org.apache.flex.html.beads.BackgroundImageBead");
+ }
+ }
+
+ </fx:Style>
+
+ <fx:Script>
+ <![CDATA[
+ import org.apache.flex.core.IBeadController;
+ import org.apache.flex.core.IBeadModel;
+ import org.apache.flex.events.Event;
+ import org.apache.flex.mobile.IViewManagerView;
+ import org.apache.flex.mobile.IViewManager;
+ import org.apache.flex.mobile.chrome.NavigationBar;
+
+ private function onInitComplete():void
+ {
+ }
+
+ private function onAssetsNext():void
+ {
+
+ }
+
+ private function tabbedViewChanged(event:org.apache.flex.events.Event):void
+ {
+ var manager:IViewManager = event.currentTarget as IViewManager;
+ trace("TabbedViewChanged for "+manager);
+ }
+
+ private function watchListStackChanged(event:org.apache.flex.events.Event):void
+ {
+ trace("watchlist stack changed");
+ var manager:StackedViewManager = event.currentTarget as StackedViewManager;
+
+ var currentView:IViewManagerView = manager.selectedView;
+ backButton.visible = manager.views.length > 1;
+ }
+
+ private function goBack(event:org.apache.flex.events.MouseEvent):void
+ {
+ if (navController.selectedIndex == 1) {
+ watchListStack.pop();
+ }
+ }
+ ]]>
+ </fx:Script>
+
+ <js:beads>
+ <js:ViewDataBinding />
+ </js:beads>
+
+ <js:TabbedViewManager id="navController" width="100%" height="100%" x="0" y="0" viewChanged="tabbedViewChanged(event)">
+ <js:navigationBarItems>
+ <js:TextButton id="backButton" width="45" height="45" className="BackButton" visible="false" click="goBack(event)">
+ <js:beads>
+ <apache:ImageButtonView />
+ </js:beads>
+ </js:TextButton>
- <js:Image source="assets/logo.png" width="218" height="55" />
++ <js:Image url="assets/logo.png" width="218" height="55" />
+ </js:navigationBarItems>
+ <js:views>
+ <js:StackedViewManager title="Assets">
+ <js:views>
+ <views:AssetsView id="assetsView" title="Assets" next="onAssetsNext()" />
+ </js:views>
+ </js:StackedViewManager>
+
+ <js:StackedViewManager id="watchListStack" title="Watch List" viewChanged="watchListStackChanged(event)">
+ <js:views>
+ <views:WatchListView id="watchListView" dataModel="{applicationModel}"/>
+ </js:views>
+ </js:StackedViewManager>
+
+ <views:AlertsView id="alertsView" title="Alerts" dataModel="{applicationModel}" />
+ </js:views>
+ </js:TabbedViewManager>
+
+</js:View>