`
onaod32n
  • 浏览: 6644 次
社区版块
存档分类
最新评论

关于Flex 的渲染器的总结

 
阅读更多

  关键字: Flex. 渲染器. 内联. 外联.
  用过.NET开发过程序的朋友都知道,。NET的datagrid 的功能十分强大,它的模板列功能,可以动态将各种控件绑定到模板列上,实现强大的功能。如可编辑列、单选列、图像列等。
  在Flex里面也有类似的功能,这个功能就叫做渲染,渲染不仅仅用在例如 datagrid类似的控件上,还可以用在其它很多组件上,如 list控件等等。
  下面是一个简单渲染的例子:
  
  
  
  source="{data.ImageUrl}"/>
  
  
  
  TileList 绑定一个数据源faceArray,它有一个渲染器,用来动态的显示一个图片,这个图片的来源就是数据源内的某个字段。(通过data这个关键字获取,data是flex约定的)
  值得注意的,是""这个标签,这个标签示它里面是一个组件。注意组件里面与组件的外面,在命名空间上是相对独立的,即外面的函数不能直接访问组件内的东西,组件里面的函数也不能直接访问外面的东西。
  如果组件里面的实在要访问组件外面的资源,可以使用"outerDocument"这个关键字,使用"outerDocument.XianXiMsage()"这种形式调用外面的方法。使用"outerDocument.name"来访问外部的控件或者属性。
  有了outerDocument这个关键字,我们就可以不必使用data来绑定数据了,直接可以通过outerDocument.数据源来获取外部的数据。这样就实现了,组件内部访问外部数据的需求。
  这种方式的渲染,叫做内联渲染,因为需要渲染的控件和渲染的组件是写在一起的。这种方式简单易用,比较方便。
  其实,泻染的效果即然是一个组件,组件当然可以写成一个独立的文件。将之与被渲染的控件隔离开了,这样从重用性和代码的整洁方面都有十分的好处。
  可以看作是mx:TileList的一个属性,而mx:Component就可以看作是mx:TileList这个属性的值。
  我们将里面的内容写成一个单独的类MyImage:
  
  
  source="{data.ImageUrl}"/>
  
  直接用 Flex Builder 生成就可以了。在这里我们还是通过data这个属性来与外部交流数据。
  那么被渲染的控件将要写成下面的形式:
  
  
  其中MyImage就是我们那个组件对应的类。(如果类在某一个文件夹或包下面,还需要添加包的名字,如commmm. MyImage。这种方法的渲染叫外联渲染。
  外联与内联的几点区别:
  1.外联组件的文件写在其他文件中,代码隔离性好。
  2.内联可能通过outerDocument访问外部数据和方法,外联不能采用这个关键字。必须采用另外两个关键字:"parentDocument"和"Application.application"。内联与外联关键字不能混用。
  3.内联和外联都可以通过 data 访问父控件的数据。
  第三方组件,也有可能提供了渲染的接口,用来实现渲染的功能。如 ArcGis Server API for Flex,里面就提供了图层泻染的功能。可以在图层上绘制不同的符号和组件,实现不能的效果,这些符号与组件可以同不同的数据绑定,实现强大的功能。
  http://resources.esri.com/help/9.3/arcgisserver/ap is/flex/samples/index.html?sample=locatortask
  
  上面这个效果很酷吧,实际上就是将图片和文字渲染到图层上而已。你甚至将按钮等任意的组件渲染的图层上,实现你想要实现的任意效果,包括动画效果!!!
  
  
  
  
      
  source="{outerDocument.MyO.url}" right="0"/>
  
  
  
  
  
  上面的代码将图片和labler渲染到图图层上。
  很奇怪,上面你没有看到数据源,是的ArcGIS 里的图层没有 dataProvider这个属性,取而代之的是否 esri:attributes 下面代码实现与上面等价的功能,注意二者的不同。
  
  
  
  
  
  
  
  
  
  
  
  注意看:InfoSymbol infoRenderer这个属性,与标准的 flex 也有不同的地方。
  最后做几个总结:
  首先要明白渲染是做什么的,渲染就是将数据通过不同的组件表达到界面上,内联与外联在实现上有什么不同,相信大多数程序员都会喜欢用外联。
  记住几个关键字:"outerDocument" "parentDocument""Application.application" 有时候会对你很有帮助,或许你的程序就卡在这里。
  这个是本人在实现上面那个地图效果时,产生的一些经验,希望对你有所帮助。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics