Flex Gumbo中如何通过transitions属性创建淡入浅出显示效果DropDownList的例子

By Minidxer | August 25, 2009

接下来的Flex Gumbo中如何通过transitions属性，创建淡入浅出显示效果DropDownList。



下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_DropDownList_transitions_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo">
  6.  
  7.     <fx:Declarations>
  8.         <s:ArrayList id="arrList"
  9.                 source="[Red,Orange,Yellow,Green,Blue]" />
  10.     </fx:Declarations>
  11.  
  12.     <s:DropDownList id="dropDownList"
  13.             dataProvider="{arrList}"
  14.             requiresSelection="true"
  15.             skinClass="skins.CustomDropDownListSkin"
  16.             horizontalCenter="0"
  17.             top="20" />
  18.  
  19. </s:Application>

下面是Skin类Skins/CustomDropDownListSkin.mxml的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin name="CustomDropDownListSkin"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         alpha.disabled="0.5">
  6.     <s:states>
  7.         <s:State name="normal" />
  8.         <s:State name="open" />
  9.         <s:State name="disabled" />
  10.     </s:states>
  11.     <s:transitions>
  12.         <s:Transition fromState="normal" toState="open">
  13.             <s:Fade target="{popup}" duration="3000" />
  14.         </s:Transition>
  15.     </s:transitions>
  16.  
  17.     <!-- host component -->
  18.     <fx:Metadata>
  19.         <![CDATA[
  20.             [HostComponent("spark.components.DropDownList")]
  21.         ]]>
  22.     </fx:Metadata>
  23.  
  24.     <!--- Defines the appearance of the DropDownList component's drop down area. -->
  25.     <s:PopUp id="popup"
  26.             open.normal="false" open.open="true"
  27.             includeIn="open"
  28.             left="0" right="0" top="0" bottom="0"
  29.             visible.open="true" visible.normal="false"
  30.             placement="below">
  31.         <s:Group id="dropDown"
  32.                 maxHeight="134" minHeight="22"
  33.                 visible.open="true" visible.normal="false">
  34.             <!-- border -->
  35.             <s:Rect left="0" right="0" top="0" bottom="0">
  36.                 <s:stroke>
  37.                     <s:SolidColorStroke color="0x686868" weight="1"/>
  38.                 </s:stroke>
  39.             </s:Rect>
  40.  
  41.             <!--- fill --->
  42.             <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
  43.                 <s:fill>
  44.                     <s:SolidColor id="bgFill" color="0xFFFFFF" />
  45.                 </s:fill>
  46.             </s:Rect>
  47.  
  48.             <s:Scroller left="1" top="1" right="1" bottom="1" >
  49.                 <s:DataGroup id="dataGroup" itemRenderer="spark.skins.default.DefaultItemRenderer">
  50.                     <s:layout>
  51.                         <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
  52.                     </s:layout>
  53.                 </s:DataGroup>
  54.             </s:Scroller>
  55.  
  56.             <s:filters>
  57.                 <s:DropShadowFilter blurX="20" blurY="20" distance="5" angle="90" alpha="0.6" />
  58.             </s:filters>
  59.         </s:Group>
  60.     </s:PopUp>
  61.  
  62.     <s:Button id="button" left="0" right="0" top="0" bottom="0" focusEnabled="false"
  63.         skinClass="spark.skins.default.DropDownListButtonSkin" />
  64.     <s:SimpleText id="labelElement" verticalAlign="middle"
  65.         left="7" right="30" top="2" bottom="2" verticalCenter="1" />
  66.  
  67. </s:SparkSkin>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: DropDownList, Gumbo | No Comments » | Tags: ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll