Flex Gumbo中如何利用itemRenderer属性自定义FxList内项目的例子

By Minidxer | July 28, 2009

接下来的例子演示了Flex Gumbo中如何利用itemRenderer属性，自定义FxList内项目。

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


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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FxApplication name="FxList_itemRenderer_test"
  3.         xmlns="http://ns.adobe.com/mxml/2009">
  4.     <layout>
  5.         <BasicLayout />
  6.     </layout>
  7.  
  8.     <Declarations>
  9.         <ArrayList id="arrList">
  10.             <Object firstName="Ryan"
  11.                     lastName="Frishberg"
  12.                     url="http://frishy.blogspot.com/" />
  13.             <Object firstName="Ely"
  14.                     lastName="Greenfield"
  15.                     url="http://www.quietlyscheming.com/blog/" />
  16.             <Object firstName="Chet"
  17.                     lastName="Haase"
  18.                     url="http://graphics-geek.blogspot.com/" />
  19.             <Object firstName="Alex"
  20.                     lastName="Harui"
  21.                     url="http://blogs.adobe.com/aharui/" />
  22.             <Object firstName="Joan"
  23.                     lastName="Lafferty"
  24.                     url="http://butterfliesandbugs.wordpress.com/" />
  25.             <Object firstName="Gordon"
  26.                     lastName="Smith"
  27.                     url="http://blogs.adobe.com/gosmith/" />
  28.             <Object firstName="Deepa"
  29.                     lastName="Subramaniam"
  30.                     url="http://iamdeepa.com/blog/" />
  31.             <Object firstName="Rob"
  32.                     lastName="Vollmar"
  33.                     url="http://flexspaghetti.wordpress.com/" />
  34.         </ArrayList>
  35.     </Declarations>
  36.  
  37.     <FxList id="list"
  38.             dataProvider="{arrList}"
  39.             itemRenderer="ResizingItemRenderer"
  40.             horizontalCenter="0"
  41.             top="20"
  42.             width="250" />
  43.  
  44. </FxApplication>

下面是ResizingItemRenderer.mxml的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <ItemRenderer name="ResizingItemRenderer"
  3.         xmlns="http://ns.adobe.com/mxml/2009">
  4.     <states>
  5.         <State name="normal" />
  6.         <State name="hovered" />
  7.         <State name="selected" />
  8.     </states>
  9.  
  10.     <!-- hover/select highlight -->
  11.     <Rect left="0" right="0" top="0" bottom="0">
  12.         <fill>
  13.             <SolidColor color="{contentBackgroundColor}" />
  14.         </fill>
  15.         <fill.hovered>
  16.             <SolidColor color="{rollOverColor}" />
  17.         </fill.hovered>
  18.         <fill.selected>
  19.             <SolidColor color="{selectionColor}" />
  20.         </fill.selected>
  21.     </Rect>
  22.  
  23.     <VGroup left="3" top="3" right="10" bottom="3">
  24.         <TextGraphic content="{data.firstName} {data.lastName}"
  25.                 fontWeight="bold" />
  26.  
  27.         <TextGraphic content="{data.url}"
  28.                 includeIn="selected" />
  29.     </VGroup>
  30.  
  31. </ItemRenderer>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll