Posted By

chrisaiv on 03/04/09


Tagged

Flex mxml


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

Demian
kojok


Flex: Using Item Renderers


 / Published in: MXML
 

There are 3 different ways to use Item Renderers.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="500">
  3. <!--
  4. A. Custom Item Renderers
  5. 1. Item Renderers are components that are used to customize cells in any of the list-based controls
  6. a. It can be a column in a data-grid or a row in a list
  7. b. Whenever you've seen a list of items, each element in the list has been generated by some class used as an item renderer
  8. 2. In the <mx:List> example below, each item in the list is generated by an item renderer, this is done by default
  9. a. The <mx:List> uses the ListItemRenderer Class
  10. b. The ListItemRenderer looks into the dataProvider for the Label Text and uses that to create a TextField to display
  11. c. We can customize our own ItemRenderers so that we don't have to only use the TextField class to display data
  12. 3. 3 Different ways to implement ItemRenderers
  13. a. Drop-in item renderers
  14. i. Uses an existing Flex Component
  15. ii. They are defined using the obj.itemRenderer of the <mx:List> class
  16. b. Inline item renderers
  17. i. Use your own Custom Component.
  18. ii. They are written inline and found in the same <mx:List> class instance
  19. c. Component item renderers
  20. i. They're defined similar to Drop-in renderers (obj.itemRenderer)
  21. ii. Defined outside of the template, just like usual components
  22. B. The obj.data Property
  23. 1. obj.data property IS NOT defined in UIComponent
  24. 2. Instead you have to implement the IDataRenderer interface
  25. i. This will implement the obj.data property in your component
  26. ii. And then you'll be able to use that component as an item renderer
  27. iii. In these examples, <mx:List> and <mx:Hbox> already use IDataRenderer by default
  28. -->
  29. <mx:Script>
  30. <![CDATA[
  31. import mx.collections.ArrayCollection;
  32.  
  33. [Bindable]
  34. private var listAC:ArrayCollection = new ArrayCollection([
  35. { label:'Photoshop', os:'Windows', data: 1 },
  36. { label:'Flash CS4', os:'Macintosh', data: 2 },
  37. { label:'Flex', os:'Ubuntu', data: 3 },
  38. ]);
  39. ]]>
  40. </mx:Script>
  41.  
  42. <!-- Drop-in item renderer -->
  43. <mx:List dataProvider="{listAC}" x="10" y="10" />
  44. <mx:List dataProvider="{listAC}" x="110" y="10" itemRenderer="mx.controls.Label" />
  45.  
  46. <!-- Inline item renderer -->
  47. <mx:List dataProvider="{listAC}" x="210" y="10">
  48. <mx:itemRenderer>
  49. <mx:Component>
  50. <mx:Label text="{data.label}" />
  51. </mx:Component>
  52. </mx:itemRenderer>
  53. </mx:List>
  54.  
  55. <mx:List dataProvider="{listAC}" x="310" y="10">
  56. <mx:itemRenderer>
  57. <mx:Component>
  58. <mx:HBox>
  59. <mx:Label text="{data.os}" />
  60. <mx:Label text="{data.label}" />
  61. </mx:HBox>
  62. </mx:Component>
  63. </mx:itemRenderer>
  64. </mx:List>
  65.  
  66. <!-- Component item renderer -->
  67. <mx:List dataProvider="{listAC}" x="510" y="10" itemRenderer="com.theflexshow.CustomRenderer" />
  68. </mx:Application>

Report this snippet  

You need to login to post a comment.