Advanced Search

TileList using custom ItemRenderer and Effects

/ Published in: MXML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.