| <?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:Group xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:mx="library://ns.adobe.com/flex/mx" width="600" height="600" creationComplete="initMenu();" > |
| <s:layout><s:VerticalLayout/></s:layout> |
| <fx:Declarations> |
| <mx:ViewStack id="myViewStack" width="100%" height="80%"> |
| <mx:Canvas id="search" label="Search" width="100%" height="100%"> |
| <mx:Label text="Search Screen" color="#000000"/> |
| </mx:Canvas> |
| <mx:Canvas id="custInfo" label="Customer Info" width="100%" height="100%"> |
| <mx:Label text="Customer Info" /> |
| </mx:Canvas> |
| <mx:Canvas id="accountInfo" label="Account Info" width="100%" height="100%"> |
| <mx:Label text="Account Info" /> |
| </mx:Canvas> |
| </mx:ViewStack> |
| |
| <fx:Array id="tabBarDP"> |
| <fx:Object label="Red" /> |
| <fx:Object label="Orange" /> |
| <fx:Object label="Yellow" /> |
| <fx:Object label="Green" /> |
| <fx:Object label="Blue" /> |
| </fx:Array> |
| </fx:Declarations> |
| <s:states> |
| <s:State name="defaultState" /> |
| <s:State name="state1" /> |
| </s:states> |
| <fx:Script> |
| <![CDATA[ |
| import mx.controls.*; |
| import mx.events.*; |
| |
| private function showAlert():void{ |
| Alert.show('MyAlert', 'Alert Title'); |
| } |
| |
| [Bindable] |
| public var myDP:ArrayCollection = new ArrayCollection( |
| [ {product:"ProductGreen", price:100}, |
| {product:"ProductBlue", price:200}, |
| {product:"ProductRed", price:300}, |
| {product:"ProductBlk", price:400} ]); |
| |
| private var myMenu:Menu; |
| |
| // Initialize the Halo Menu control, and specify it as the pop up object |
| // of the Halo PopUpButton control. |
| private function initMenu():void { |
| myMenu = new Menu(); |
| var dp:Object = [{label: "New Folder"}, {label: "Sent Items"}, {label: "Inbox"}]; |
| myMenu.dataProvider = dp; |
| myMenu.selectedIndex = 0; |
| popB.popUp = myMenu; |
| popB.label = "Put in: " + myMenu.dataProvider[myMenu.selectedIndex].label; |
| } |
| |
| ]]> |
| </fx:Script> |
| |
| <fx:Style> |
| @namespace s "library://ns.adobe.com/flex/spark"; |
| @namespace mx "library://ns.adobe.com/flex/mx"; |
| |
| s|ButtonBar s|ButtonBarButton { |
| cornerRadius: 20; |
| } |
| |
| .cornerStyle{ |
| cornerRadius: 20; |
| } |
| |
| .diffCornerStyle{ |
| cornerRadius: 5; |
| } |
| |
| |
| </fx:Style> |
| |
| <s:VGroup id="sparkGrp"> |
| <s:Rect top="0" bottom="0" left="0" right="0"> |
| <s:stroke> |
| <s:SolidColorStroke color="0x000000"/> |
| </s:stroke> |
| </s:Rect> |
| <s:HGroup paddingTop="10"> |
| <s:Button id="sparkBtn" label="Spark Button" cornerRadius="20" cornerRadius.state1="5"/> |
| <s:ToggleButton id="sparkTogBtn" label="SparkToggleButton" cornerRadius="20" cornerRadius.state1="5"/> |
| <s:NumericStepper id="sparkNS" cornerRadius="20" cornerRadius.state1="5"/> |
| <s:Spinner id="sparkSpin" cornerRadius="20" cornerRadius.state1="5"/> |
| </s:HGroup> |
| <s:HGroup> |
| <s:DropDownList id="sparkDDL" dataProvider="{myDP}" labelField="product" selectedIndex="0" cornerRadius="20" cornerRadius.state1="5"/> |
| <s:Panel id="sparkPnl" width="100" height="100" cornerRadius="20" cornerRadius.state1="5"/> |
| </s:HGroup> |
| <s:ButtonBar id="sparkBtnBar"> |
| <s:dataProvider> |
| <mx:ArrayCollection> |
| <fx:String>ProductRed</fx:String> |
| <fx:String>ProductYellow</fx:String> |
| <fx:String>ProductGreen</fx:String> |
| <fx:String>ProductPurple</fx:String> |
| </mx:ArrayCollection> |
| </s:dataProvider> |
| </s:ButtonBar> |
| </s:VGroup> |
| |
| <s:VGroup id="haloGrp"> |
| <s:HGroup> |
| <mx:ComboBox id="haloCB" dataProvider="{myDP}" selectedIndex="0" labelField="product" cornerRadius="20" cornerRadius.state1="5"/> |
| <mx:PopUpButton id="popB" cornerRadius="20" cornerRadius.state1="5"/> |
| </s:HGroup> |
| <s:HGroup> |
| <mx:Panel id="haloPnl" headerHeight="10" height="100" width="100" cornerRadius="20" cornerRadius.state1="5"/> |
| <mx:TitleWindow id="haloTW" headerHeight="10" height="200" width="200" cornerRadius="20" cornerRadius.state1="5"/> |
| <mx:DateChooser id="haloDC" cornerRadius="20" cornerRadius.state1="5" selectedDate="{new Date(65, 2, 6, 9, 30, 15, 0)}"/> |
| </s:HGroup> |
| <s:HGroup id="haloBtnGrp" paddingTop="10"> |
| <mx:Button id="haloBtn" label="Halo Button" cornerRadius="20" cornerRadius.state1="5"/> |
| <mx:LinkButton id="haloLnkBtn" label="LinkButton" cornerRadius="20" cornerRadius.state1="5"/> |
| <mx:NumericStepper id="haloNS" cornerRadius="20" cornerRadius.state1="5"/> |
| </s:HGroup> |
| <mx:ButtonBar id="haloBtnBar" buttonStyleName="cornerStyle"> |
| <mx:dataProvider> |
| <fx:Array> |
| <fx:String>ProductBlack</fx:String> |
| <fx:String>ProductRed</fx:String> |
| <fx:String>ProductPurple</fx:String> |
| <fx:String>ProductGreen</fx:String> |
| <fx:String>ProductYellow</fx:String> |
| </fx:Array> |
| </mx:dataProvider> |
| </mx:ButtonBar> |
| <mx:LinkBar id="haloLnkBar" cornerRadius="20" cornerRadius.state1="5"> |
| <mx:dataProvider> |
| <mx:ArrayCollection> |
| <fx:Object label="Alert" /> |
| <fx:Object label="Button" /> |
| <fx:Object label="ButtonBar" /> |
| <fx:Object label="CheckBox" /> |
| <fx:Object label="ColorPicker" /> |
| <fx:Object label="ComboBox" /> |
| </mx:ArrayCollection> |
| </mx:dataProvider> |
| </mx:LinkBar> |
| <mx:TabBar id="haloTB" dataProvider="{tabBarDP}" tabStyleName="cornerStyle" tabStyleName.state1="diffCornerStyle"/> |
| <mx:ToggleButtonBar id="haloTogBtnBar" buttonStyleName="cornerStyle"> |
| <mx:dataProvider> |
| <fx:Array> |
| <fx:String>ProductBlack</fx:String> |
| <fx:String>ProductRed</fx:String> |
| <fx:String>ProductPurple</fx:String> |
| <fx:String>ProductGreen</fx:String> |
| <fx:String>ProductYellow</fx:String> |
| </fx:Array> |
| </mx:dataProvider> |
| </mx:ToggleButtonBar> |
| |
| </s:VGroup> |
| </s:Group> |