Datagrid PicturesOftmals möchte man in einer Datagrid-Komponente nicht nur Text darstellen. Wenn Bilder, MovieClips oder andere Komponenten in einer Spalte eingefügt werden sollen, benötigt man einen so genannten Cellrenderer, der für die Darstellung der gewünschten Inhalte in der entsprechenden Spalte sorgt.

Hier ein Beispiel, wie man in die Datagrid-Komponente von Flash CS3 externe Bilder einfügt. Die dazugehörige CellRenderer-Klasse stammt aus einem Artikel von Peter deHaan, der im Adobe Developer Connection veröffentlicht wurde.

Der Code in der Flashdatei (.fla) lautet:

PLAIN TEXT
Actionscript:

  1. import fl.controls.DataGrid;
  2.     import fl.controls.dataGridClasses.DataGridColumn;
  3.     import fl.data.DataProvider;
  4.  
  5.     // neuer data provider
  6.     var dp:DataProvider = new DataProvider();
  7.  
  8.     // drei einträge hinzufügen
  9.     dp.addItem({data:"flag_australia.png", Land:"Australien"});
  10.     dp.addItem({data:"flag_austria.png", Land:"Österreich"});
  11.     dp.addItem({data:"flag_brazil.png", Land:"Brasilien"});
  12.     dp.addItem({data:"flag_canada.png", Land:"Kanada"});
  13.     dp.addItem({data:"flag_germany.png", Land:"Deutschland"});
  14.     dp.addItem({data:"flag_italy.png", Land:"Italien"});
  15.     dp.addItem({data:"flag_japan.png", Land:"Japan"});
  16.     dp.addItem({data:"flag_poland.png", Land:"Polen"});
  17.     dp.addItem({data:"flag_uk.png", Land:"UK"});
  18.     dp.addItem({data:"flag_usa.png", Land:"USA"});
  19.  
  20.  
  21.     // neue spalte für data grid komponente
  22.     var dataCol:DataGridColumn = new DataGridColumn("Flagge");
  23.  
  24.     // für diese spalte den cellrenderer definieren
  25.     dataCol.cellRenderer = LoaderCellRenderer;
  26.  
  27.     // zweite spalte erstellen
  28.     var titleCol:DataGridColumn = new DataGridColumn("Land");
  29.  
  30.     // neues datagrid
  31.     var myDataGrid:DataGrid = new DataGrid();
  32.  
  33.     // spalten hinzufügen
  34.     myDataGrid.addColumn(dataCol);
  35.     myDataGrid.addColumn(titleCol);
  36.  
  37.     // den data provider als datenquelle festlegen
  38.     myDataGrid.dataProvider = dp;
  39.  
  40.     // style
  41.     myDataGrid.rowHeight = 216;
  42.     myDataGrid.setSize(500,500);
  43.  
  44.     myDataGrid.move(50, 50);
  45.  
  46.     // der bühne hinzufügen
  47.     addChild(myDataGrid);

Die Datei LoaderCellRenderer.as lautet:

PLAIN TEXT
Actionscript:

  1. package {
  2.     import fl.containers.UILoader;
  3.     import fl.controls.listClasses.ICellRenderer;
  4.     import fl.controls.listClasses.ListData;
  5.     import fl.core.InvalidationType;
  6.     import fl.data.DataProvider;
  7.     import flash.events.Event;
  8.  
  9.     public class LoaderCellRenderer extends UILoader implements ICellRenderer {
  10.         protected var _data:Object;
  11.         protected var _listData:ListData;
  12.         protected var _selected:Boolean;
  13.  
  14.         public function LoaderCellRenderer():void {
  15.             super();
  16.         }
  17.  
  18.         public function get data():Object {
  19.             return _data;
  20.         }
  21.         public function set data(value:Object):void {
  22.             _data = value;
  23.             source = value.data;
  24.         }
  25.  
  26.         public function get listData():ListData {
  27.             return _listData;
  28.         }
  29.         public function set listData(value:ListData):void {
  30.             _listData = value;
  31.             invalidate(InvalidationType.DATA);
  32.             invalidate(InvalidationType.STATE);
  33.         }
  34.  
  35.         public function get selected():Boolean {
  36.             return _selected;
  37.         }
  38.         public function set selected(value:Boolean):void {
  39.             _selected = value;
  40.             invalidate(InvalidationType.STATE);
  41.         }
  42.  
  43.         public function setMouseState(state:String):void {
  44.         }
  45.     }
  46. }

Die Flaggen sind übrigens aus dem Flag Button Devkit von Bartelme.

Download: Quellcode des Beispiels (.zip)
Link: Embedding Components into data grid cells
Link: Flag Button Devkit