Mehrzeiliger HTML-Text in der Datagrid-Komponente

Im vorigen Beitrag wurde gezeigt, wie man Bilder und Grafiken in eine Datagrid-Komponente von Flash CS3 einfügt. Hier nun ein Beispiel, das mehrzeiligen Text und HTML-Formatierungen innerhalb des Datagrids verwendet.

Man benötigt – wie im Beispiel zuvor – ebenfalls einen speziellen CellRenderer, der in diesem Fall MultiLineHtmlCell heißt. Er sorgt dafür, dass die Inhalte einer Spalte als HTML-Textfeld gerendert werden.

Hinweis: Es werden zwei unterschiedliche Methoden für das Zuweisen der Inhalte verwendet: die erste Spalte nutzt die labelFunction, die zweite wird durch direkte Zuweisung mit HTML-Text bestückt.

[kml_flashembed movie=“http://www.video-flash.de/wp-content/uploads/2008/02/datagrid-html.swf“ width=“400″ height=“300″ /]

Der Code für die Flashdatei (.fla), die eine Datagrid-Komponente in der Library haben muss, lautet:

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

// Spalten erstellen
var first:DataGridColumn = new DataGridColumn(„Titel“);
first.width = 120;
first.cellRenderer = MultiLineHtmlCell;
first.labelFunction = formatfirst;

var second:DataGridColumn = new DataGridColumn(„Beschreibung“);
second.width = 320;
second.cellRenderer = MultiLineHtmlCell;

// datagrid erstellen
var myGrid:DataGrid = new DataGrid();
myGrid.setSize(300, 200);
myGrid.rowHeight = 120;

// spalten hinzufügen
myGrid.addColumn(first);
myGrid.addColumn(second);

// zur bühne hinzufügen
addChild(myGrid);
myGrid.move(20,20);

function formatfirst(item:Object):String {
return „“ + item.Titel + „„;
}

// Inhalte
var myDP:DataProvider = new DataProvider();
myDP.addItem({Titel:“Headline“, Beschreibung:“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.“});
myDP.addItem({Titel:“Headline“, Beschreibung:“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.“});
myDP.addItem({Titel:“Headline“, Beschreibung:“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.“});

//data provider hinzufügen
myGrid.dataProvider = myDP;

[/as]

Die Klasse MultiLineHtmlCell.as muss sich im gleichen Verzeichnis wie die Flashdatei befinden. Der Code lautet:

[as]
package {

import fl.controls.listClasses.CellRenderer;

public class MultiLineHtmlCell extends CellRenderer {

public function MultiLineHtmlCell() {
textField.wordWrap = true;
textField.autoSize = „left“;

}

override protected function drawLayout():void {
textField.width = this.width;
textField.htmlText = textField.text;
super.drawLayout();
}
}
}
[/as]

[ad]

Link: htmlText with AS3 datagrid