Flex 4 项目渲染器

     昨晚看了flex4中项目渲染器itemRenderer的知识，今天自己动手写一个，增强记忆，做一个简单类似 网易视频 http://v.163.com/video/2011/1/1/6/V6ORP1516.html#ld=V5NV96K0F   "纵横天下"版块里的那个貌似是用List控件做的东东。

    打开 flash builder ，建一个名为 List 的项目，主文件 List.mxml，建一个类型为 ArrayCollection 的变量 datas，变量中的每一组值都保存了一个图片和对应标题的信息。建一个 List控件，属性 dataProvider 绑定之前建的变量datas。属性 itemRenderer 的值可以是系统现有的两个渲染器(DefaultItemRenderer和DefaultComplexItemRenderer)或者是自定义的渲染器，值得一提的是，DefaultItemRenderer 只能显示一些简单的东西，例如：字符串，DefaultComplexItemRenderer 只能显示一些UI控件。也就是说不可以同时显示 字符串和图片。这时，可以使用 属性 itemRendererFunction值等于一个函数，在函数中对字符串和图片进行判断，然后分别返回对应的 渲染器(DefaultItemRenderer OR DefaultComplexItemRenderer)就可以了，如下：

<textarea cols="72" rows="5" name="code" class="java">protected function itemRendererFunction(item:Object):ClassFactory { return item is String ? new ClassFactory(DefaultItemRenderer) : new ClassFactory(DefaultComplexItemRenderer); }</textarea>

渲染器每次循环都会调用这个函数，函数参数 item 里面保存着每次迭代的当前元素，我的变量datas里面保存的都是字符串的信息，所以这个用不着，只是提一下。

     另一种方法是使用自定义的渲染器，在List控件里面加入如下的代码:

<textarea cols="78" rows="15" name="code" class="xhtml">&lt;s:itemRenderer&gt; &lt;fx:Component&gt; &lt;s:ItemRenderer&gt; &lt;s:layout&gt; &lt;s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/&gt; &lt;/s:layout&gt; &lt;s:Label text="{data.name}" maxWidth="100"/&gt; &lt;mx:Image source="{data.image}" width="100" height="100"/&gt; &lt;/s:ItemRenderer&gt; &lt;/fx:Component&gt; &lt;/s:itemRenderer&gt;</textarea>

上面的代码在List控件里设置了 itemRenderer 属性，属性的值为一个 ItemRenderer 的实例，实例里面包含了 Label 和 Image 两个控件，在ItemRenderer里面的 data 变量，保存着每次迭代的当前元素，设置 Label 的属性 text 等于 data.name ， Image 的属性 source 等于 data.image 。从而设置了每个元素的 标题和图片，以下是全部的代码：

<textarea cols="86" rows="52" name="code" class="c-sharp">&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="initApp()"&gt; &lt;s:layout&gt; &lt;s:BasicLayout/&gt; &lt;/s:layout&gt; &lt;fx:Declarations&gt; &lt;!-- 将非可视元素（例如服务、值对象）放在此处 --&gt; &lt;/fx:Declarations&gt; &lt;fx:Script&gt; &lt;![CDATA[ import mx.collections.ArrayCollection; import spark.skins.spark.DefaultComplexItemRenderer; import spark.skins.spark.DefaultItemRenderer; [Bindable] protected var datas:ArrayCollection; private function initApp():void { datas = new ArrayCollection([ {name: "aa", image: "http://localhost/images/1.jpg"}, {name: "bb", image: "http://localhost/images/2.jpg"}, {name: "cc", image: "http://localhost/images/3.jpg"}, {name: "dd", image: "http://localhost/images/4.jpg"}, {name: "ee", image: "http://localhost/images/5.jpg"}, {name: "ff", image: "http://localhost/images/6.png"} ]); } ]]&gt; &lt;/fx:Script&gt; &lt;s:Group x="50" y="50"&gt; &lt;s:List dataProvider="{datas}" height="400"&gt; &lt;s:layout&gt; &lt;s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"/&gt; &lt;/s:layout&gt; &lt;s:itemRenderer&gt; &lt;fx:Component&gt; &lt;s:ItemRenderer&gt; &lt;s:layout&gt; &lt;s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/&gt; &lt;/s:layout&gt; &lt;s:Label text="{data.name}"/&gt; &lt;mx:Image source="{data.image}" width="100" height="100"/&gt; &lt;/s:ItemRenderer&gt; &lt;/fx:Component&gt; &lt;/s:itemRenderer&gt; &lt;/s:List&gt; &lt;/s:Group&gt; &lt;/s:Application&gt;</textarea>

 

 执行后的效果图：

代码算是基本完成了，但是想想...，如果其它页面也有需要列出类似这种List，是不是需要复制上面的自定义的渲染器那段代码。所以，应该考虑代码重用的问题，把自定义的渲染器做成一个自定义的组件，新建一个基于 spark.components.supportClasses.ItemRenderer 的mxml组件文件ListItemRenderer.mxml，把代码：

<textarea cols="67" rows="7" name="code" class="xhtml">&lt;s:layout&gt; &lt;s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/&gt; &lt;/s:layout&gt; &lt;s:Label text="{data.name}" maxWidth="100"/&gt; &lt;mx:Image source="{data.image}" width="100" height="100"/&gt;</textarea>

从List.mxml文件里面剪切到新建的ListItemRenderer.mxml文件，

<textarea cols="75" rows="15" name="code" class="xhtml">&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"&gt; &lt;fx:Declarations&gt; &lt;!-- 将非可视元素（例如服务、值对象）放在此处 --&gt; &lt;/fx:Declarations&gt; &lt;s:layout&gt; &lt;s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/&gt; &lt;/s:layout&gt; &lt;s:Label text="{data.name}" maxWidth="100"/&gt; &lt;mx:Image source="{data.image}" width="100" height="100"/&gt; &lt;/s:ItemRenderer&gt;</textarea>

修改List.mxml文件里的List控件代码如下：

<textarea cols="66" rows="12" name="code" class="xhtml">&lt;s:List dataProvider="{datas}" height="400" itemRenderer="components.ListItemRenderer"&gt; &lt;s:layout&gt; &lt;s:VerticalLayout paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"/&gt; &lt;/s:layout&gt; &lt;/s:List&gt;</textarea>

设置List 的属性 itemRenderer 等于自定义的渲染器，执行List.mxml文件，显示结果和之前的一样。 = =!