Dienstag, 4. August 2009

RichTextEditor in GWT

Ich habe mich sehr gefreut, dass GWT auch einen komfortablen Texteditor bereitstellt. Die Widget Gallery enthält einen Screenshot, der Showcase tatsächlich eine funktionierende Version. Die Ernüchterung kommt dann leider recht schnell, wenn man den RichTextEditor selbst einsetzen möchte: Ausser einer leeren TextArea gibts da nicht viel. Wo sind die Buttons? Ein Blick in die Sourcen des Showcase zeigt wie der RTE konfiguriert wird:

@Override
public Widget onInitialize() {
// Create the text area and toolbar
RichTextArea area = new RichTextArea();
area.ensureDebugId("cwRichText-area");
area.setSize("100%", "14em");
RichTextToolbar toolbar = new RichTextToolbar(area);
toolbar.ensureDebugId("cwRichText-toolbar");
toolbar.setWidth("100%");

// Add the components to a panel
Grid grid = new Grid(2, 1);
grid.setStyleName("cw-RichText");
grid.setWidget(0, 0, toolbar);
grid.setWidget(1, 0, area);
return grid;
}



Die Klasse RichTextToolbar findet sich jedoch nirgendwo im GWT.
Will man einen funktionierenden RTE einsetzen bleibt einem nichts anderes übrig als die Klasse aus dem Showcase zu übernehmen und ggf. anzupassen. So gehts:

  1. Im Verzeichnis samples\Showcase\src\com\google\gwt\sample\showcase\client\content\text des GWT alle Grafiken sowie RichTextToolbar.java und RichTextToolbar$Strings.properties ins Package toolbar im Client-Package des GWT-Projektes kopieren.
  2. Package-Deklaration in RichTextToolbar.java anpassen.
  3. Optional: Der Konstruktor enthält die Deklaration aller Buttons und Auswahllisten. Was nicht benötigt wird auskommentieren.
  4. Im Clientcode: RichTextEditor instantiieren und an Konstruktor der RichTextToolbar übergeben.
  5. Sowohl Editor als auch Toolbar einem Panel hinzufügen. Hier ein Beispiel:



RichTextArea area = new RichTextArea();
RichTextToolbar toolbar = new RichTextToolbar(area);
RootPanel.get("rte").add(toolbar);
RootPanel.get("rte").add(area);