| <?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. |
| |
| --> |
| <!-- width and height hard-coded in the root tag to better support the
|
| Design view in FlexBuilder since we know the width and height from the
|
| settings in flexstore.mxml -->
|
| <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
|
| xmlns:productsView="productsView.*"
|
| width="990" height="550"
|
| currentState="showFilter">
|
|
|
| <mx:Script>
|
| <![CDATA[
|
| import mx.collections.ArrayCollection;
|
| import samples.flexstore.Product;
|
|
|
| private var _catalog:ArrayCollection;
|
|
|
| [Bindable]
|
| public function get catalog():ArrayCollection
|
| {
|
| return _catalog;
|
| }
|
|
|
| public function set catalog(c:ArrayCollection):void
|
| {
|
| _catalog = c;
|
| if (filterPanel != null)
|
| {
|
| filterPanel.filter.count = c.length;
|
| }
|
| }
|
|
|
| public function addToCompare(product:Product):void
|
| {
|
| //setting the state before adding the product avoids jumpiness in the transition, not sure why
|
| currentState = 'showFilter';
|
| filterPanel.productList.addProduct(product);
|
| }
|
|
|
| public function addToCart(product:Product):void
|
| {
|
| //setting the state before adding the product avoids jumpiness in the transition, not sure why
|
| currentState = 'showCart';
|
| cartPanel.productList.addProduct(product);
|
| }
|
|
|
|
|
| ]]>
|
| </mx:Script>
|
|
|
| <mx:HBox
|
| styleName="colorPanel"
|
| dropShadowEnabled="true"
|
| height="100%" width="100%"
|
| verticalScrollPolicy="off"
|
| horizontalGap="0">
|
|
|
| <productsView:Grip id="filterGrip" gripIcon="@Embed('/assets/icon_magnifier.png')"
|
| gripTip="Show filter panel" click="currentState = 'showFilter'"/>
|
|
|
| <productsView:ProductFilterPanel id="filterPanel" width="265" height="100%"
|
| filter="catalogPanel.filter(event.filter, event.live)"
|
| compare="catalogPanel.compare(filterPanel.productList.getProducts())"
|
| creationComplete="if (catalog) filterPanel.filter.count = catalog.length"/>
|
|
|
| <mx:Spacer width="100%"/>
|
|
|
| <productsView:ProductCart id="cartPanel" width="265" height="100%"/>
|
|
|
| <productsView:Grip id="cartGrip" gripIcon="@Embed('/assets/icon_cart_empty.png')"
|
| gripTip="Show cart" click="currentState = 'showCart'"/>
|
|
|
| </mx:HBox>
|
|
|
| <productsView:ProductCatalogPanel id="catalogPanel" y="4" width="685" height="540"
|
| catalog="{catalog}"
|
| compare="addToCompare(event.product)"
|
| purchase="addToCart(event.product)"
|
| cartCount="{cartPanel.numProducts}"/>
|
|
|
| <mx:states>
|
| <mx:State name="showFilter">
|
| <mx:SetStyle target="{catalogPanel}" name="left" value="285"/>
|
| </mx:State>
|
| <mx:State name="showCart">
|
| <mx:SetStyle target="{catalogPanel}" name="right" value="285"/>
|
| </mx:State>
|
| </mx:states>
|
|
|
| <!--
|
| make sure to use transitions here instead of applying a Move effect
|
| to the Panel itself which will result in odd behavior
|
| -->
|
| <mx:transitions>
|
| <mx:Transition fromState="*" toState="*">
|
| <mx:Move target="{catalogPanel}" />
|
| </mx:Transition>
|
| </mx:transitions>
|
|
|
| </mx:Canvas>
|