关于Flex 的渲染器的总结

关键字: Flex. 渲染器. 内联. 外联.

 

用过.NET开发过程序的朋友都知道，。NET的datagrid 的功能十分强大，它的模板列功能，可以动态将各种控件绑定到模板列上，实现强大的功能。如可编辑列、单选列、图像列等。

在Flex里面也有类似的功能，这个功能就叫做渲染，渲染不仅仅用在例如 datagrid类似的控件上，还可以用在其它很多组件上，如 list控件等等。

     下面是一个简单渲染的例子：

 

<mx:TileList x="0" y="0" width="100%" height="100%" id="faceList" 

      dataProvider="{faceArray}" itemClick="onItemClick(event)">

<mx:itemRenderer>

<mx:Component>

<mx:Image source="{data.ImageUrl}"/>

</mx:Component>

</mx:itemRenderer>

</mx:TileList>

 

TileList 绑定一个数据源faceArray，它有一个渲染器，用来动态的显示一个图片，这个图片的来源就是数据源内的某个字段。（通过data这个关键字获取，data是flex约定的）

值得注意的，是”<mx:Component>”这个标签，这个标签示它里面是一个组件。注意组件里面与组件的外面，在命名空间上是相对独立的，即外面的函数不能直接访问组件内的东西，组件里面的函数也不能直接访问外面的东西。

如果组件里面的实在要访问组件外面的资源，可以使用“outerDocument”这个关键字，使用"outerDocument.XianXiMsage()"这种形式调用外面的方法。使用"outerDocument.name"来访问外部的控件或者属性。

有了outerDocument这个关键字，我们就可以不必使用data来绑定数据了，直接可以通过outerDocument.数据源来获取外部的数据。这样就实现了，组件内部访问外部数据的需求。

这种方式的渲染，叫做内联渲染，因为需要渲染的控件和渲染的组件是写在一起的。这种方式简单易用，比较方便。

其实，泻染的效果即然是一个组件，组件当然可以写成一个独立的文件。将之与被渲染的控件隔离开了，这样从重用性和代码的整洁方面都有十分的好处。

<mx:itemRenderer>可以看作是mx:TileList的一个属性，而mx:Component就可以看作是mx:TileList这个属性的值。

我们将<mx:Component>里面的内容写成一个单独的类MyImage：

<?xml version="1.0" encoding="utf-8"?>

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="150">

 <mx:Image source="{data.ImageUrl}"/>

</mx:Canvas>

 直接用 Flex Builder 生成就可以了。在这里我们还是通过data这个属性来与外部交流数据。

 那么被渲染的控件将要写成下面的形式：

<mx:TileList x="0" y="0" width="100%" height="100%" id="faceList"

dataProvider="{faceArray}" itemClick="onItemClick(event)" itemRenderer=“MyImage”>

</mx:TileList>

 

其中MyImage就是我们那个组件对应的类。（如果类在某一个文件夹或包下面，还需要添加包的名字，如commmm. MyImage。这种方法的渲染叫外联渲染。

外联与内联的几点区别：

1．外联组件的文件写在其他文件中，代码隔离性好。

2．内联可能通过outerDocument访问外部数据和方法，外联不能采用这个关键字。必须采用另外两个关键字：“parentDocument”和“Application.application”。内联与外联关键字不能混用。

3．内联和外联都可以通过 data 访问父控件的数据。

 

第三方组件，也有可能提供了渲染的接口，用来实现渲染的功能。如 ArcGis Server API for Flex，里面就提供了图层泻染的功能。可以在图层上绘制不同的符号和组件，实现不能的效果，这些符号与组件可以同不同的数据绑定，实现强大的功能。

http://resources.esri.com/help/9.3/arcgisserver/apis/flex/samples/index.html?sample=locatortask

 

 

 

 

 

上面这个效果很酷吧，实际上就是将图片和文字渲染到图层上而已。你甚至将按钮等任意的组件渲染的图层上，实现你想要实现的任意效果，包括动画效果！！！

<esri:GraphicsLayer id="myGraphicsLayer">

<esri:Graphic id="MyGraphic"  visible="false"><esri:geometry>

<esri:MapPoint id="myPoint"  x="425431"y="2524176"/>

</esri:geometry><esri:symbol><esri:InfoSymbol  id="infoSymbol2">

<esri:infoRenderer><mx:Component>    <mx:VBox>

<mx:Image y="0" width="128" height="92" source="{outerDocument.MyO.url}" right="0"/>

<mx:Label x="0" y="7" text="控制箱号：" fontSize="12" color="#1358F5" fontWeight="bold"/>

<mx:Label x="73" y="122" text="详细信息" fontSize="12" mouseDown="outerDocument.XianXiMsage()" fontWeight="bold"/>

<mx:Label x="3" y="87" text="道路名称：" fontSize="12" fontWeight="bold" color="#1E65F6"/>

<mx:Label x="8" y="105" text="{outerDocument.MyO.s1}" id="txt_Road" fontSize="12"/>

</mx:Canvas></mx:VBox></mx:Component></esri:infoRenderer></esri:InfoSymbol></esri:symbol></esri:Graphic></esri:GraphicsLayer>

上面的代码将图片和labler渲染到图图层上。

很奇怪，上面你没有看到数据源，是的ArcGIS 里的图层没有 dataProvider这个属性，取而代之的是否 esri:attributes

下面代码实现与上面等价的功能，注意二者的不同。

 

<esri:GraphicsLayer id="myGraphicsLayer">

<esri:Graphic id="MyGraphic"  attributes="{MyO}" visible="false">

<esri:geometry>

<esri:MapPoint id="myPoint"  x="425431"y="2524176"/>

</esri:geometry>

<esri:symbol>

<esri:InfoSymbol infoRenderer="Component.My_cc"  id="infoSymbol2">

</esri:InfoSymbol>

</esri:symbol>

</esri:Graphic>

</esri:GraphicsLayer>

注意看：InfoSymbol infoRenderer这个属性，与标准的 flex 也有不同的地方。

最后做几个总结：

首先要明白渲染是做什么的，渲染就是将数据通过不同的组件表达到界面上，内联与外联在实现上有什么不同，相信大多数程序员都会喜欢用外联。

记住几个关键字：“outerDocument” “parentDocument”“Application.application” 有时候会对你很有帮助，或许你的程序就卡在这里。

这个是本人在实现上面那个地图效果时，产生的一些经验，希望对你有所帮助。