| <?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. |
| |
| --> |
| <s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:local="*"> |
| <fx:Script> |
| <![CDATA[ |
| import spark.events.IndexChangeEvent; |
| |
| [Bindable] |
| private var totalPrice:Number = 0.00; |
| |
| protected function itemIndexChangeHandler(event:IndexChangeEvent):void |
| { |
| if (ta.text.length!=0) |
| ta.text=ta.text+"\n"+myList.selectedItem.name + " $"+myList.selectedItem.price; |
| else ta.text=myList.selectedItem.name+ " $"+myList.selectedItem.price; |
| totalPrice += Number(myList.selectedItem.price); |
| } |
| protected function buyBtn_clickHandler(event:MouseEvent):void |
| { |
| txtResponse.text="Thank you for your order totaling: " + usdFormatter.format(totalPrice) + "\nItems will ship in 3 days."; |
| } |
| |
| ]]> |
| </fx:Script> |
| <fx:Declarations> |
| <mx:CurrencyFormatter id="usdFormatter" precision="2" currencySymbol="$" |
| decimalSeparatorFrom="." decimalSeparatorTo="." useNegativeSign="true" |
| useThousandsSeparator="true" alignSymbol="left"/> |
| </fx:Declarations> |
| <fx:Style> |
| @namespace "library://ns.adobe.com/flex/spark"; |
| #vGrp { |
| color: #000000; |
| fontFamily: "Arial"; |
| fontSize: "12"; |
| } |
| </fx:Style> |
| |
| <s:Panel title="List Sample" width="100%" height="100%"> |
| |
| <s:layout> |
| <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/> |
| </s:layout> |
| |
| <s:HGroup verticalAlign="middle"> |
| <s:Label text="Select items to add, price will be shown when added:" |
| verticalAlign="bottom"/> |
| </s:HGroup> |
| <s:HGroup> |
| <s:List id="myList" height="157" width="160" |
| itemRenderer="MyListItemRenderer" |
| change="itemIndexChangeHandler(event)"> |
| <s:dataProvider> |
| <s:ArrayCollection> |
| <local:Item name="Backpack" photo="assets/ApacheFlexLogo.png" price="29.99"/> |
| <local:Item name="Boots" photo="assets/ApacheFlexLogo.png" price="69.99"/> |
| <local:Item name="Compass" photo="assets/ApacheFlexLogo.png" price="12.99"/> |
| <local:Item name="Goggles" photo="assets/ApacheFlexLogo.png" price="14.99"/> |
| <local:Item name="Helmet" photo="assets/ApacheFlexLogo.png" price="47.99"/> |
| </s:ArrayCollection> |
| </s:dataProvider> |
| </s:List> |
| <s:TextArea id="ta" width="{myList.width}" height="{myList.height}" |
| color="0xAE0A0A" fontWeight="bold"/> |
| <s:VGroup> |
| <mx:Spacer height="10"/> |
| <s:Label text="Total of Items selected: {usdFormatter.format(this.totalPrice)}"/> |
| <s:Button id="buyBtn" horizontalCenter="0" bottom="30" label="Buy Now!" |
| fontWeight="bold" |
| click="buyBtn_clickHandler(event)"/> |
| <s:Label id="txtResponse"/> |
| </s:VGroup> |
| </s:HGroup> |
| |
| <s:Label bottom="15" horizontalCenter="0" width="95%" verticalAlign="justify" |
| text="The Spark List control displays a list of data items. Its functionality is |
| very similar to that of the SELECT form element in HTML. The user can select one or more items from the list. |
| The List control automatically displays horizontal and vertical scroll bar when the list items do not fit |
| the size of the control."/> |
| </s:Panel> |
| |
| |
| </s:Module> |