AS3: Bilder in einer Datagrid Komponente anzeigen

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.

[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]

7 Gedanken zu „AS3: Bilder in einer Datagrid Komponente anzeigen“

  1. Hallo,

    sehr gut :-))
    Kann man auch die Datagrid komponente unsichtbar machen.
    d.h. so das man nur den Inhalt sieht? Den dann könnte man ja fast wie mit tables arbeiten und komplette html Inhalte aus externen Dateien anzeigen. Geht das? Denn html tables kann man ja leider immer noch nicht anzeigen in Textfeldern :-(

    Liebe Grüße

  2. Ich hab eine schnelle Lösung gefunden. Eigentlich ganz einfach wenn man ohne AS das Layout der Datagrid Komponente ausblenden oder anpassen will. Einfach in der Library doppelklick auf die DataGrid Komponente und dann in die Skins rein gehen und jeden Zustand als Führungsebene definieren. (rechte Maustaste bei den Ebenen). Somit kann man alle z.B. ausblenden und es gibt keine Fehlermeldungen.
    Wer`s brauch :-)

    lg mikolo

  3. Ich möchte in mehreren Spalten unterschiedliche Bilder anzeigen.
    Ist dieses möglich und wenn ja wie ?

  4. Ich möchte in unterschiedlichen Spalten auch unterschiedliche Bilder anzeigen lassen.
    Aber wie ?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert