Flex Gumbo中如何创建用bitmap来填充背景色List的例子

By Minidxer | August 23, 2009

接下来的例子演示了Flex Gumbo中如何通过BitmapFill对象和自定义renderer，创建用bitmap来填充背景色List。

让我们先来看一下Demo（可以点击这里察看源代码）：


下面是完整代码(或点击这里察看)：
下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_List_background_BitmapFill_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.     <s:List id="list"
  8.             skinClass="skins.CustomListSkin"
  9.             horizontalCenter="0"
  10.             verticalCenter="0">
  11.         <s:dataProvider>
  12.             <s:ArrayList>
  13.                 <fx:String>The</fx:String>
  14.                 <fx:String>Quick</fx:String>
  15.                 <fx:String>Brown</fx:String>
  16.                 <fx:String>Fox</fx:String>
  17.                 <fx:String>Jumps</fx:String>
  18.                 <fx:String>Over</fx:String>
  19.                 <fx:String>The</fx:String>
  20.                 <fx:String>Lazy</fx:String>
  21.                 <fx:String>Dog</fx:String>
  22.             </s:ArrayList>
  23.         </s:dataProvider>
  24.     </s:List>
  25.  
  26. </s:Application>

下面是skins/CustomListSkin.mxml代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin name="CustomListSkin"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         minWidth="112" minHeight="112"
  6.         alpha.disabled="0.5"
  7.         blendMode="normal"> 
  8.     <!-- states -->
  9.     <s:states>
  10.         <s:State name="normal" />
  11.         <s:State name="disabled" />
  12.     </s:states>
  13.  
  14.     <fx:Metadata>
  15.     <![CDATA[
  16.         [HostComponent("spark.components.List")]
  17.     ]]>
  18.     </fx:Metadata>
  19.  
  20.     <fx:Script>
  21.         /* Define the skin elements that should not be colorized.
  22.            For list, the skin itself is colorized but the individual parts are not. */
  23.         static private const exclusions:Array = ["scroller", "background"];
  24.  
  25.         override public function get colorizeExclusions():Array {return exclusions;}
  26.  
  27.         /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
  28.         static private const contentFill:Array = [];
  29.  
  30.         override public function get contentItems():Array {return contentFill};
  31.     </fx:Script>
  32.  
  33.     <!-- border -->
  34.     <s:Rect left="0" right="0" top="0" bottom="0">
  35.         <s:stroke>
  36.             <s:SolidColorStroke color="0x686868" weight="1"/>
  37.         </s:stroke>
  38.     </s:Rect>
  39.  
  40.     <!-- fill -->
  41.     <!--- Defines the background appearance of the list-based component. -->
  42.     <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
  43.         <s:fill>
  44.             <s:BitmapFill id="bgFill"
  45.                     source="@Embed('assets/fx_appicon-tn.gif')" />
  46.         </s:fill>
  47.     </s:Rect>
  48.  
  49.     <!--- The Scroller component to add scroll bars to the list. -->
  50.     <s:Scroller id="scroller"
  51.             left="0" top="0" right="0" bottom="0"
  52.             minViewportInset="1"
  53.             focusEnabled="false">
  54.         <!--- The container for the data items. -->
  55.         <s:DataGroup id="dataGroup" itemRenderer="skins.CustomDefaultItemRenderer">
  56.             <s:layout>
  57.                 <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedRowCount="5" />
  58.             </s:layout>
  59.         </s:DataGroup>
  60.     </s:Scroller>
  61.  
  62. </s:SparkSkin>

下面是skins/CustomDefaultItemRenderer.mxml代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:ItemRenderer name="CustomDefaultItemRenderer"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         focusEnabled="false">
  6.     <!-- states -->
  7.     <s:states>
  8.         <s:State name="normal" />
  9.         <s:State name="hovered" />
  10.         <s:State name="selected" />
  11.         <s:State name="normalAndShowsCaret"/>
  12.         <s:State name="hoveredAndShowsCaret"/>
  13.         <s:State name="selectedAndShowsCaret"/>
  14.     </s:states>
  15.  
  16.     <fx:Script>
  17.         <![CDATA[
  18.             override public function set label(value:String):void {
  19.                 super.label = value;
  20.                 labelDisplay.text = label;
  21.             }
  22.         ]]>
  23.     </fx:Script>
  24.  
  25.     <s:Rect left="0" right="0" top="0" bottom="0">
  26.         <s:stroke.normalAndShowsCaret>
  27.             <s:SolidColorStroke color="{selectionColor}"
  28.                     weight="1"/>
  29.         </s:stroke.normalAndShowsCaret>
  30.         <s:stroke.hoveredAndShowsCaret>
  31.             <s:SolidColorStroke color="{selectionColor}"
  32.                     weight="1"/>
  33.         </s:stroke.hoveredAndShowsCaret>
  34.         <s:stroke.selectedAndShowsCaret>
  35.             <s:SolidColorStroke color="{selectionColor}"
  36.                     weight="1"/>
  37.         </s:stroke.selectedAndShowsCaret>
  38.         <s:fill>
  39.             <s:SolidColor color.normal="{contentBackgroundColor}"
  40.                     color.normalAndShowsCaret="{contentBackgroundColor}"
  41.                     color.hovered="{rollOverColor}"
  42.                     color.hoveredAndShowsCaret="{rollOverColor}"
  43.                     color.selected="{selectionColor}"
  44.                     color.selectedAndShowsCaret="{selectionColor}"
  45.                     alpha="0.5"/>
  46.         </s:fill>
  47.     </s:Rect>
  48.  
  49.     <s:SimpleText id="labelDisplay"
  50.             verticalCenter="0"
  51.             left="3" right="3" top="6" bottom="4"/>
  52.  
  53. </s:ItemRenderer>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll