Posted By

mswallace on 03/23/08


Tagged

Flex mxml TileList ItemRenderer


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

foxjbowden


TileList using custom ItemRenderer and Effects


 / Published in: MXML
 

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3. layout="vertical"
  4. verticalAlign="middle"
  5. backgroundColor="white">
  6.  
  7. <mx:DefaultTileListEffect id="myTileListEffect"
  8. fadeOutDuration="500"
  9. fadeInDuration="500"
  10. moveDuration="1500" />
  11.  
  12. <mx:ArrayCollection id="arrColl">
  13. <mx:source>
  14. <mx:Array>
  15. <mx:Object source="assets/Accordion.png"
  16. label="Accordion" />
  17. <mx:Object source="assets/ApplicationControlBar.png"
  18. label="ApplicationControlBar" />
  19. <mx:Object source="assets/Box.png"
  20. label="Box" />
  21. <mx:Object source="assets/Button.png"
  22. label="Button" />
  23. <mx:Object source="assets/ButtonBar.png"
  24. label="ButtonBar" />
  25. <mx:Object source="assets/CheckBox.png"
  26. label="CheckBox" />
  27. <mx:Object source="assets/ColorPicker.png"
  28. label="ColorPicker" />
  29. <mx:Object source="assets/ComboBox.png"
  30. label="ComboBox" />
  31. <mx:Object source="assets/DataGrid.png"
  32. label="DataGrid" />
  33. <mx:Object source="assets/DateChooser.png"
  34. label="DateChooser" />
  35. <mx:Object source="assets/DateField.png"
  36. label="DateField" />
  37. <mx:Object source="assets/HorizontalList.png"
  38. label="HorizontalList" />
  39. <mx:Object source="assets/HRule.png"
  40. label="HRule" />
  41. </mx:Array>
  42. </mx:source>
  43. </mx:ArrayCollection>
  44.  
  45. <mx:TileList id="tileList"
  46. dataChangeEffect="{myTileListEffect}"
  47. dataProvider="{arrColl}"
  48. itemRenderer="TileListItemRenderer"
  49. dragEnabled="true"
  50. dropEnabled="true"
  51. dragMoveEnabled="true"
  52. columnWidth="100"
  53. rowHeight="100"
  54. width="100%"
  55. height="100%" />
  56.  
  57. </mx:Application>
  58.  
  59. <!-- below is the custom renderer used in the above example-->
  60.  
  61. <?xml version="1.0" encoding="utf-8"?>
  62. <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
  63. styleName="plain"
  64. verticalAlign="middle"
  65. horizontalAlign="center"
  66. horizontalScrollPolicy="off"
  67. verticalScrollPolicy="off"
  68. width="100%"
  69. height="100%">
  70.  
  71. <mx:Image source="{data.source}" />
  72. <mx:Label text="{data.label}"
  73. truncateToFit="true"
  74. width="96" />
  75.  
  76. </mx:VBox>

Report this snippet  

You need to login to post a comment.