‘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.

CSS3 und Internet Explorer

Dass der Internet Explorer nie so wirklich auf der Höhe der Zeit des Webdesigns war, braucht man nicht mehr lange erklären. Lange hat Microsoft ein eigenes Süppchen gebraut, proprietäre Tags entgegen der W3C-Spezifikation geschrieben (scrollbar!) und andere wiederum ignoriert. Am schlimmsten trifft es einen, wenn man CSS-Transformationen nutzen will, also Rotationen, Spiegelungen usw. Im schlimmsten Falle muss man sich mit Matrixmultiplikation herumschlagen, will man es dem IE Recht machen. Ein jQuery-Plugin schafft hier Abhilfe und übersetzt normale CSS-Befehle in die native IE Filter-API: Transformie

Ein anderes interessantes Projekt bringt dem IE Schatten für Boxen, Farbverläufe und abgerundete Ecken bei. CSS3Pie setzt dabei auf ein HTC-File, eine Art Hilfsdatei die dem IE sagt, wie er die CSS-Befehle korrekt interpretiert. Das Projekt ist noch in der Beta-Phase, funktioniert aber erstaunlich gut. Weiterlesen