Eigener itemRenderer für DataGrid

[stnswz]

Hallo,

Ich möchte gerne einen eigenen itemRenderer für ein DataGrid erzeugen (alles in reinem AS3 ohne mxml) um darin ein eigenes Object anstatt Text anzuzeigen, habe aber keine Ahnung wie man das bewerkstelligt. Die Flash Hilfe bringt mich in diesem Punkt leider auch nicht so wirklich weiter... Hier ein simples Beispiel:

PHP-Code:

// Create the DataGrid
dataGrid = new DataGrid();
dataGrid.percentWidth  = 100;
dataGrid.percentHeight = 100;
addChild(dataGrid);

// Create the columns for the DataGrid 
dgCol1 = new DataGridColumn("Spalte 1");
dgCol1.dataField="field1";

dgCol2 = new DataGridColumn("Spalte 2");
dgCol2.dataField="field2";
dgCol2.itemRenderer =  ??? // hier müsste der eigene itemRenderer rein
                           // wenn ich das richtig verstehe...

dataGrid.columns = new Array( dgCol1, dgCol2 );


// Fill the DataGrid 
arrayCollection = new ArrayCollection();
            
for(i=0; i<5; i++) {
    // Create the items for the DataGrid
    dataItem:Object = new Object();
    dataItem.field1 = "Testinhalt "+i;
    dataItem.field2 = new MeinAnzeigeObject();
    
    // Add the items to the ArrayCollection
    arrayCollection.addItem( dataItem );
    
}

dataGrid.dataProvider = arrayCollection; 


Das Problem ist nun das ich eben diesen eigenen itemRenderer benötige um das "MeinAnzeigeObject" (ein Canvas mit eigenem Inhalt) anzeigen zu können. Weiß jemand wie sich das am einfachsten machen lässt?

[Omega Psi]

Lass deine Komponente das IFactory Interface implementieren und übergib dann das Class Objekt deiner IFactory.

PS: wenn es viele Canvas Instanzen werden, solltest du auf ein schmaleres Objekt umschwenken.

[stnswz]

Hi Omega

Vielen dank. Ja ich dachte mir schon das ich sowas in der Art mit der IFactory machen muss. Allerdings wie sieht das genau aus? Speziell die übergabe des Class Objekts an die IFactory... In IFactory gibts ja dann auch noch die methode newInstance() welche ausprogrammiert werden muss. Was genau kommt denn dann da rein?

[Omega Psi]

Ich hab die ClassFactory vergessen, die kannst du auch nehmen.

[stnswz]

Hmm, ich hab jetzt folgendes gemacht was mir allerdings einen Runtime Error beschert, das problem liegt wohl darin das meine Klasse "MeinAnzeigeObject" im Konstruktor parameter mitbekommt...

PHP-Code:

dgCol2 = new DataGridColumn("Spalte 2");
dgCol2.dataField="field2";
dgCol2.itemRenderer = new ClassFactory( MeinAnzeigeObject );

// Fill the DataGrid 
arrayCollection = new ArrayCollection();
            
for(i=0; i<5; i++) {

    dataItem.field2 = new MeinAnzeigeObject(param1, param2);
    arrayCollection.addItem( dataItem );
    
}

dataGrid.dataProvider = arrayCollection; 


Wie lässt sich das auch mit Parametern im Konstruktor der Klasse lösen?

[Omega Psi]

Implementiere das Interface IFactory in deinem ItemRenderer:

package {
 
    import mx.core.IFactory;
 
    public class MyClass implements IFactory {
 
        public function MyClass() { }
 
        public function newInstance() {
            return new MyClass();
        }
    }
} 

Der ItemRender muss natürlich von UIComponent oder einer abgeleiteten Klasse erben.

Das ist aber auch einer der Gründe, warum man eher parameterlose Konstruktoren verwendet.

[stnswz]

Ich hab das mit der ClassFactory soweit hinbekommen indem ich mir ne einfache Klasse "ItemRendererDummy" geschrieben habe:

PHP-Code:

public class ItemRendererDummy extends Canvas
{
    public function ItemRendererDummy()
    {
        super();
        this.width = 100; this.height = 30;
        this.setStyle("backgroundColor", 0x000000);
    }
    
    public function init(myObject:MeinAnzeigeObject):void {
        addChild(myObject);
    }
} 


Um das "MeinAnzeigeObject" in den DataGrid reinzubekommen mache ich dann folgendes (was jedoch nicht wirklich funktioniert):

PHP-Code:

dgCol2 = new DataGridColumn("Spalte 2");
dgCol2.dataField="field2";
dgCol2.itemRenderer = new ClassFactory( ItemRendererDummy );

// Fill the DataGrid 
arrayCollection = new ArrayCollection();
            
for(i=0; i<5; i++) {
    dataItem:Object = new Object(); 
    var irDummy:ItemRendererDummy = new ItemRendererDummy();
    irDummy.init( new MeinAnzeigeObject(param1, param2) );
    dataItem.field2 = irDummy;

    arrayCollection.addItem( dataItem );
}
dataGrid.dataProvider = arrayCollection; 


Das Ergebnis ist das der schwarze Canvas des "ItemRendererDummy" im DataGrid erscheint, allerdings nich das anschließend über die function init() hinzugefügte "MeinAnzeigeObject"... Woran kann das liegen?

[Omega Psi]

Du übergibst ja auch keine Instanzen. Du müsstest das schon im Konstruktor von ItemRendererDummy implementieren.

[stnswz]

Hallo Omega,

Also ich hab jetzt nochmal rumprobiert und bekomm es einfach nicht hin so wie ich es brauche. Mein Problem ist das ich den zusammenhang zwischen der itemRender zuweisung und dem anschließenden füllen des renderers mit Daten nicht verstehe. Ich hab das jetzt mit IFactory probiert, aber das was hier passiert macht für mich gar keinen Sinn. Mein eigener ItemRenderer implementiert nun die IFactory und dann übergebe ich das Teil and den GridColumn für den DataGrid:

PHP-Code:

dgCol2 = new DataGridColumn("Spalte 2");
dgCol2.dataField="field2";
dgCol2.itemRenderer = new ItemRendererDummy( param1, param2 ); 


Im nächsten Schritt sollen aber auch für jede Zeile die Daten in das Ding rein, daher:

PHP-Code:

for(...) {
    dataItem.field2 = new ItemRendererDummy( param1, param2 );
    ...
} 


Und natürlich erzeuge ich damit neue Instanzen, da ich doch für jede Zeile eine neue brauche und nicht in jeder Zeile das gleiche anzeigen will ????? Nur funktioniert das so leider nicht, es wird immer nur der ItemRendererDummy aus der obigen zuweisung

"dgCol2.itemRenderer = new ItemRendererDummy( param1, param2 );"

angezeigt. Und das ist so doch dann völlig sinnlos. Wie bekomme ich denn die nötigen (VERSCHIEDENEN) Daten (welche ich erst in der for schleife zur verfügung habe) in den renderer rein?

[Omega Psi]

Was sind das denn für Daten?

[stnswz]

Es ist ein dragbarer Canvas der jeweils 2 verschiedene Bilder (oder auch nicht, abhängig von den parametern im konstruktor), sowie verschiedenen Text anzeigen soll. Wie gesagt, in jeder Zeile ein anderer. Hier im Post hab ich das Ding daher immer "MeinAnzeigeObject" genannt...

[Omega Psi]

Wie gesagt, für sowas ist in ein Canvas eigentlich viel zu überdimensioniert... aber das ist ein anderes Kapitel. Wie soll denn darüber entschieden werden welche Bilder angezeigt werden? Wo kommen die Infos dafür her?

[stnswz]

Die Infos dafür erhalte ich eben im Konstruktor des AnzeigeObjekts (der dragbare Canvas). Nochmal zum Verständnis wie ich mir das gedacht hatte:

PHP-Code:

// Den Renderer für die Datenzelle erzeugen:
dgCol2 = new DataGridColumn("Spalte 2");
dgCol2.dataField="field2";
dgCol2.itemRenderer = new MeinEigenerRenderer();

// Mein AnzeigeObjekt anhand der paramter erzeugen und der Datenzelle Übergeben
arrayCollection = new ArrayCollection();
for(...) {
    dataItem.field2 = new MeinAnzeigeObject( param1, param2 );
    ...
    arrayCollection.addItem( dataItem ); 
} 
dataGrid.dataProvider = arrayCollection; 


[Omega Psi]

Aber wo kommen die Daten dafür her. ItemRenderer können in Abhängigkeit ihrer Items und auch der dataField Eigenschaft der DataGridColumn das Verhalten ändern. Dafür musst du aber die Klasse umschreiben.

[stnswz]

Die Daten für mein AnzeigeObjekt erhalte ich aus einer XML Datei deren Inhalt ich parse und daraus dann eine ArrayCollection erzeuge welche ich als dataProvider für den DataGrid benutze. Das sieht vereinfacht dann so aus:

PHP-Code:

arrayCollection = new ArrayCollection();
for(i=0; i<5; i++) {
    dataItem = new Object()
    dataItem.field1 = "Testfield1 "+i;
    
    // Hier soll der Canvas in die zelle (die daten für die parameter hab ich aus dem geparsten XML) 
    dataItem.field2 = new MeinAnzeigeObject( param1, param2 );  
    
    dataItem.field3 = "Testfield3 "+i;
    ...
    arrayCollection.addItem( dataItem ); 
} 
dataGrid.dataProvider = arrayCollection; 


Warum ist das denn so kompliziert für jede Zeile einen eigenen Canvas in die Datenzelle zu bekommen? Ich hab schon eineige beispiele gesehen konnte sie aber nicht nachvollziehen da diese alle mit mxml gemacht sind und da läuft das alles irgendwie anders...