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]
Hier noch etwas zum Thema „Eingebettete Schriftarten“ in einer Datagrid-Komponente.
Using embedded fonts with the Flash CS3 DataGrid component
danke, bitte mehr Infos zum Gestalten der DGs… :-)
Vor allem wie man den Headertext einbettet…!
Was meinst du mit „Headertext einbetten“?
hi, würde gern eine geladene externe StyleSheet auf die Textfelder anwenden? Weiss jemand wie ich das machen kann?
Ich muss irgendwie den Textfeldern in dem cellrenderer ein geladenes Stylesheet verpassen (textField.styleSheet = meinGeladenesStyleSheet). Wie komme ich an die ran?
lg mikolo