| <?xml version="1.0"?> |
| <!-- |
| |
| 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:Application |
| xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:comps="comps.*" |
| backgroundColor="0xFFFFFF" |
| width="1000" height="600" |
| > |
| <s:layout> <s:VerticalLayout/> </s:layout> |
| <fx:Style source="assets/myStyles.css" /> |
| <fx:Script> |
| <![CDATA[ |
| import mx.controls.*; |
| import mx.collections.ArrayCollection; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r1_c1.png")] |
| public var icon11:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r1_c2.png")] |
| public var icon12:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r1_c3.png")] |
| public var icon13:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r1_c4.png")] |
| public var icon14:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r1_c5.png")] |
| public var icon15:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r1_c6.png")] |
| public var icon16:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r1_c7.png")] |
| public var icon17:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r1_c8.png")] |
| public var icon18:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r1_c9.png")] |
| public var icon19:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r2_c1.png")] |
| public var icon21:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r2_c2.png")] |
| public var icon22:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r2_c3.png")] |
| public var icon23:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r2_c4.png")] |
| public var icon24:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r2_c5.png")] |
| public var icon25:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r2_c6.png")] |
| public var icon26:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r2_c7.png")] |
| public var icon27:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r2_c8.png")] |
| public var icon28:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r2_c9.png")] |
| public var icon29:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r3_c1.png")] |
| public var icon31:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r3_c2.png")] |
| public var icon32:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r3_c3.png")] |
| public var icon33:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r3_c4.png")] |
| public var icon34:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r3_c5.png")] |
| public var icon35:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r3_c6.png")] |
| public var icon36:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r3_c7.png")] |
| public var icon37:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r3_c8.png")] |
| public var icon38:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r3_c9.png")] |
| public var icon39:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r4_c1.png")] |
| public var icon41:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r4_c2.png")] |
| public var icon42:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r4_c3.png")] |
| public var icon43:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r4_c4.png")] |
| public var icon44:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r4_c5.png")] |
| public var icon45:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r4_c6.png")] |
| public var icon46:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r4_c7.png")] |
| public var icon47:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r4_c8.png")] |
| public var icon48:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r4_c9.png")] |
| public var icon49:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r5_c1.png")] |
| public var icon51:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r5_c2.png")] |
| public var icon52:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r5_c3.png")] |
| public var icon53:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r5_c4.png")] |
| public var icon54:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r5_c5.png")] |
| public var icon55:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r5_c6.png")] |
| public var icon56:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r5_c7.png")] |
| public var icon57:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r5_c8.png")] |
| public var icon58:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r5_c9.png")] |
| public var icon59:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r6_c1.png")] |
| public var icon61:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r6_c2.png")] |
| public var icon62:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r6_c3.png")] |
| public var icon63:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r6_c4.png")] |
| public var icon64:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r6_c5.png")] |
| public var icon65:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r6_c6.png")] |
| public var icon66:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r6_c7.png")] |
| public var icon67:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r6_c8.png")] |
| public var icon68:Class; |
| |
| [Bindable] |
| [Embed(source="../../../../../Assets/Images/GridImages/1_r6_c9.png")] |
| public var icon69:Class; |
| |
| [Bindable] |
| public var objIcon:Object={label:"1", data:icon11}; |
| |
| [Bindable] |
| public var acIcons:ArrayCollection; |
| |
| [Bindable] |
| public var arrIcons:Array=[{label:"1", data:icon11}, |
| {label:"2", data:icon12}, |
| {label:"3", data:icon13}, |
| {label:"4", data:icon14}, |
| {label:"5", data:icon15}, |
| {label:"6", data:icon16}, |
| {label:"7", data:icon17}, |
| {label:"8", data:icon18}, |
| {label:"9", data:icon19}, |
| {label:"10", data:icon21}, |
| {label:"11", data:icon22}, |
| {label:"12", data:icon23}, |
| {label:"13", data:icon24}, |
| {label:"14", data:icon25}, |
| {label:"15", data:icon26}, |
| {label:"16", data:icon27}, |
| {label:"17", data:icon28}, |
| {label:"18", data:icon29}, |
| {label:"19", data:icon31}, |
| {label:"20", data:icon32}, |
| {label:"21", data:icon33}, |
| {label:"22", data:icon34}, |
| {label:"23", data:icon35}, |
| {label:"24", data:icon36}, |
| {label:"25", data:icon37}, |
| {label:"26", data:icon38}, |
| {label:"27", data:icon39}, |
| {label:"28", data:icon41}, |
| {label:"29", data:icon42}, |
| {label:"30", data:icon43}, |
| {label:"31", data:icon44}, |
| {label:"32", data:icon45}, |
| {label:"33", data:icon46}, |
| {label:"34", data:icon47}, |
| {label:"35", data:icon48}, |
| {label:"36", data:icon49}, |
| {label:"37", data:icon51}, |
| {label:"38", data:icon52}, |
| {label:"39", data:icon53}, |
| {label:"40", data:icon54}, |
| {label:"41", data:icon55}, |
| {label:"42", data:icon56}, |
| {label:"43", data:icon57}, |
| {label:"44", data:icon58}, |
| {label:"45", data:icon59}, |
| {label:"46", data:icon61}, |
| {label:"47", data:icon62}, |
| {label:"48", data:icon63}, |
| {label:"49", data:icon64}, |
| {label:"50", data:icon65}, |
| {label:"51", data:icon66}, |
| {label:"52", data:icon67}, |
| {label:"53", data:icon68}, |
| {label:"54", data:icon69}] |
| |
| public function createIconsAC():ArrayCollection |
| { |
| acIcons = new ArrayCollection |
| ([ {label:"1", data:icon11}, |
| {label:"2", data:icon12}, |
| {label:"3", data:icon13}, |
| {label:"4", data:icon14}, |
| {label:"5", data:icon15}, |
| {label:"6", data:icon16}, |
| {label:"7", data:icon17}, |
| {label:"8", data:icon18}, |
| {label:"9", data:icon19}, |
| {label:"10", data:icon21}] ); |
| return acIcons; |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:List id="list1" width="600" height="50" |
| itemRenderer="comps.IconRenderer" > |
| <s:layout> <s:HorizontalLayout/> </s:layout> |
| <s:dataProvider> |
| <mx:ArrayCollection> |
| <fx:Array> |
| <fx:Object label="1" data="{icon11}"/> |
| <fx:Object label="2" data="{icon12}"/> |
| <fx:Object label="3" data="{icon13}"/> |
| <fx:Object label="4" data="{icon14}"/> |
| <fx:Object label="5" data="{icon15}"/> |
| <fx:Object label="6" data="{icon16}"/> |
| <fx:Object label="7" data="{icon17}"/> |
| <fx:Object label="8" data="{icon18}"/> |
| <fx:Object label="9" data="{icon19}"/> |
| <fx:Object label="10" data="{icon21}"/> |
| <fx:Object label="11" data="{icon22}"/> |
| <fx:Object label="12" data="{icon23}"/> |
| <fx:Object label="13" data="{icon24}"/> |
| <fx:Object label="14" data="{icon25}"/> |
| <fx:Object label="15" data="{icon26}"/> |
| <fx:Object label="16" data="{icon27}"/> |
| <fx:Object label="17" data="{icon28}"/> |
| <fx:Object label="18" data="{icon29}"/> |
| <fx:Object label="19" data="{icon31}"/> |
| <fx:Object label="20" data="{icon32}"/> |
| <fx:Object label="21" data="{icon33}"/> |
| <fx:Object label="22" data="{icon34}"/> |
| <fx:Object label="23" data="{icon35}"/> |
| <fx:Object label="24" data="{icon36}"/> |
| <fx:Object label="25" data="{icon37}"/> |
| <fx:Object label="26" data="{icon38}"/> |
| <fx:Object label="27" data="{icon39}"/> |
| <fx:Object label="28" data="{icon41}"/> |
| <fx:Object label="29" data="{icon42}"/> |
| <fx:Object label="30" data="{icon43}"/> |
| <fx:Object label="31" data="{icon44}"/> |
| <fx:Object label="32" data="{icon45}"/> |
| <fx:Object label="33" data="{icon46}"/> |
| <fx:Object label="34" data="{icon47}"/> |
| <fx:Object label="35" data="{icon48}"/> |
| <fx:Object label="36" data="{icon49}"/> |
| <fx:Object label="37" data="{icon51}"/> |
| <fx:Object label="38" data="{icon52}"/> |
| <fx:Object label="39" data="{icon53}"/> |
| <fx:Object label="40" data="{icon54}"/> |
| <fx:Object label="41" data="{icon55}"/> |
| <fx:Object label="42" data="{icon56}"/> |
| <fx:Object label="43" data="{icon57}"/> |
| <fx:Object label="44" data="{icon58}"/> |
| <fx:Object label="45" data="{icon59}"/> |
| <fx:Object label="46" data="{icon61}"/> |
| <fx:Object label="47" data="{icon62}"/> |
| <fx:Object label="48" data="{icon63}"/> |
| <fx:Object label="49" data="{icon64}"/> |
| <fx:Object label="50" data="{icon65}"/> |
| <fx:Object label="51" data="{icon66}"/> |
| <fx:Object label="52" data="{icon67}"/> |
| <fx:Object label="53" data="{icon68}"/> |
| <fx:Object label="54" data="{icon69}"/> |
| </fx:Array> |
| </mx:ArrayCollection> |
| </s:dataProvider> |
| </s:List > |
| |
| |
| <s:List id="list3" dataProvider="{new ArrayCollection(arrIcons )}" height="50" width="600"> |
| <s:layout> <s:HorizontalLayout/> </s:layout> |
| <s:itemRenderer> |
| <fx:Component > |
| <s:ItemRenderer autoDrawBackground= "false" > |
| <s:states> |
| <mx:State name="normal" /> |
| <mx:State name="hovered" /> |
| <mx:State name="selected" /> |
| </s:states> |
| <s:Rect left="0" right="0" top="0" bottom="0"> |
| <s:fill> |
| <mx:SolidColor color="0xFF0000" alpha="0.1" alpha.hovered="0.3" alpha.selected="0.6" /> |
| </s:fill> |
| </s:Rect> |
| <s:Group width="30" height="30"> |
| <s:layout> <s:HorizontalLayout/> </s:layout> |
| <mx:Label text="{data.label}" excludeFrom="selected"/> |
| <mx:Image id="im" source="{data.data}" includeIn="selected"/> |
| </s:Group> |
| </s:ItemRenderer> |
| </fx:Component> |
| </s:itemRenderer> |
| </s:List> |
| <s:List id="list4" width="600" height="50" |
| dataProvider="{new ArrayCollection(arrIcons )}" |
| itemRenderer="comps.IconRenderer" > |
| <s:layout> <s:HorizontalLayout/> </s:layout> |
| </s:List> |
| |
| <s:List id="list2" /> |
| |
| </s:Application> |
