GWT und SOP

Die SOP (Same Origin Policy) ist wohl eines der Probleme mit dem schon eine Menge Webentwickler konfrontiert wurden. Eine Suche bei Google führt zu einer GWT Seite auf der die Nutzung von

<add-linker name="xs"/>

empfohlen wird. Leider führte das Einbinden dieses Linkers nicht zu dem gewünschten Ergebnis. So war es nicht mehr möglich den Development Modus zu nutzen. Die Lösung ist das Einbinden des xsiframe-Linkers. Dieser ermöglicht es, wie auch schon der xs-Linker, die [Modulname].nocache.js einfach in einer auf einem anderen Server liegenden HTML einzubinden allerdings bietet der xsiframe-Linker zusätzlich noch die Nutzung des Development Mode.

Also einfach folgende zwei Zeilen in die .gwt.xml einfügen:


<inherits name="com.google.gwt.core.Core" />
<add-linker name="xsiframe" />

Und schon kann man die Modulname.nocache.js per URL z.B. http://127.0.0.1:8888/Modulename/Modulename.nocache.js referenzieren ohne das einem SOP im Wege steht.

‘Drag and Drop’-Dateiexport mit GWT

Um eine Datei schnell exportierbar zu machen, bietet sich die neue HTML5 File-API an. Google Chrome unterstützt derweil sogar den direkten Export von Dateien per ‘Drag and Drop’ aus dem Browser heraus auf den Desktop oder in einen Ordner. Um das ganze im Google Web Toolkit zu realisieren, benötigt man GWT 2.4 und die Datei als Data-URL. Danach ist es quasi ein Kinderspiel:


final Anchor drag = new Anchor();
drag.setText("my xml export");
drag.getElement().setAttribute("data-downloadurl", "text/xml:export.xml:data:text/xml;charset=utf-8," + "export here"); 
drag.getElement().setDraggable("true");
drag.getElement().getStyle().setProperty("userSelect", "none");
drag.getElement().getStyle().setCursor(Cursor.MOVE);
drag.addDragStartHandler(new DragStartHandler() {

	@Override
	public void onDragStart(final DragStartEvent event) {
		event.getDataTransfer().setData("DownloadURL", event.getRelativeElement().getAttribute("data-downloadurl"));
	}
});

Hier exportieren wir als Beispiel eine XML-Datei. “export here” muss durch den String ersetzt werden, in dem die XML-Inhalte stehen. Man kann auch einfach die “data-downloadurl” nach dem : vor ‘data’ durch eine komplette Data-URL ersetzen, z.B. ein Bild aus einem Clientbundle. Die CSS3-Property “user-select” sorgt dafür, dass beim Draggen der Text nicht markiert wird. Zudem haben wir einen “Move”-Cursor eingebaut.

GWTEventService

GWTEventService gibt uns die Möglichkeit Events am Server auszulösen und diese direkt an alle Clients zu senden. Das ersparrt den Aufwand selber einen Polling-Mechanismus zu implementieren.

In diesem Beispiel will ich eine kurze Übersicht über den grundsätzlichen Aufbau von GWTEventService geben. Als Beispiel dient uns hierbei ein ganz einfaches Chatsystem, ohne großen SchnickSchnack.

Weiterlesen

UML mit GWT

Eine sehr interessante GWT-Anwendung wird unter dem Namen “gwtuml” entwickelt.

Sehr vielversprechend sieht der UML-Designer aus, der komplett in GWT realisiert wurde. Ich hätte das ganze gerne als kollaborative Version.

Ein Klassendiagramm gezeichnet mit Hilfe von gwtuml

Weiterlesen

GWT: TabLayoutPanel zeigt keinen Panelinhalt

Normalerweise setzt man Widgets und Panels beim Google Web Toolkit auf das RootPanel. Mit dem GWT 2.0 gibt es hier jedoch eine kleine Änderung. Einigen werden diese überlesen haben und sich unter Umständen etwas länger unfreiwillig mit der Thematik beschäftigt haben.
Wir wollen deshalb einigen die Mühe ersparen: Wer ein TabLayoutPanel unter GWT 2.0 verwenden möchte, muss darauf achten, dass Panel auf den RootLayoutPanel zu setzen, da RootPanel hier nicht funktioniert.


TabLayoutPanel myTab = new TabLayoutPanel();
RootLayoutPanel.get().add(myTab);


Mehr dazu findet man in diesem Blogeintrag.

Wer das Beispiel aus der API kopiert, sollte darauf achten, dass hier barHeight=’3′ gesetzt wird. Man sollte das auf ca. 25 erhöhen, damit die Tabreiter auch lesbar sind.

Update:
Mittlerweile gibt es ein eigenes Panel, dass ähnlich SimplePanel verwendet werden kann, aber HasResizeHandlers implementiert: ResizeLayoutPanel