AS3: Bilder in einer Datagrid Komponente anzeigen

Oftmals 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.

[kml_flashembed movie=“/wp-content/uploads/2008/02/cellrenderer/datagrid-pictures2.swf“ height=“600″ width=“600″ /]

Der Code in der Flashdatei (.fla) lautet:

[as]
import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;

// neuer data provider
var dp:DataProvider = new DataProvider();

// drei einträge hinzufügen
dp.addItem({data:“flag_australia.png“, Land:“Australien“});
dp.addItem({data:“flag_austria.png“, Land:“Österreich“});
dp.addItem({data:“flag_brazil.png“, Land:“Brasilien“});
dp.addItem({data:“flag_canada.png“, Land:“Kanada“});
dp.addItem({data:“flag_germany.png“, Land:“Deutschland“});
dp.addItem({data:“flag_italy.png“, Land:“Italien“});
dp.addItem({data:“flag_japan.png“, Land:“Japan“});
dp.addItem({data:“flag_poland.png“, Land:“Polen“});
dp.addItem({data:“flag_uk.png“, Land:“UK“});
dp.addItem({data:“flag_usa.png“, Land:“USA“});

// neue spalte für data grid komponente
var dataCol:DataGridColumn = new DataGridColumn(„Flagge“);

// für diese spalte den cellrenderer definieren
dataCol.cellRenderer = LoaderCellRenderer;

// zweite spalte erstellen
var titleCol:DataGridColumn = new DataGridColumn(„Land“);

// neues datagrid
var myDataGrid:DataGrid = new DataGrid();

// spalten hinzufügen
myDataGrid.addColumn(dataCol);
myDataGrid.addColumn(titleCol);

// den data provider als datenquelle festlegen
myDataGrid.dataProvider = dp;

// style
myDataGrid.rowHeight = 216;
myDataGrid.setSize(500,500);

myDataGrid.move(50, 50);

// der bühne hinzufügen
addChild(myDataGrid);

[/as]

Die Datei LoaderCellRenderer.as lautet:

[as]
package {
import fl.containers.UILoader;
import fl.controls.listClasses.ICellRenderer;
import fl.controls.listClasses.ListData;
import fl.core.InvalidationType;
import fl.data.DataProvider;
import flash.events.Event;

public class LoaderCellRenderer extends UILoader implements ICellRenderer {
protected var _data:Object;
protected var _listData:ListData;
protected var _selected:Boolean;

public function LoaderCellRenderer():void {
super();
}

public function get data():Object {
return _data;
}
public function set data(value:Object):void {
_data = value;
source = value.data;
}

public function get listData():ListData {
return _listData;
}
public function set listData(value:ListData):void {
_listData = value;
invalidate(InvalidationType.DATA);
invalidate(InvalidationType.STATE);
}

public function get selected():Boolean {
return _selected;
}
public function set selected(value:Boolean):void {
_selected = value;
invalidate(InvalidationType.STATE);
}

public function setMouseState(state:String):void {
}
}
}

[/as]

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

[ad]