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>
