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.

Self Organizing Maps – Kohonenkarte

Im Rahmen eines Projektes, musste ich mich in die Thematik der Kohonenkarten (Self Organizing Maps) einlesen. Ich möchte hier kurz einen Überblick über diesen Algorithmus geben und ein paar Links zusammentragen.

Die Kohonenkarte ist eine Art von neuronalem Netzwerk. Es wurde von Teuvo Kohonen erfunden und ist ein unüberwachtes Lernverfahren. Das bedeutet, dass man vorab nicht wissen muss, wie viele “Kategorien” es gibt. Sprich man trainiert das Netzwerk einfach mit den Daten die man hat und das Netzwerk sorgt für eine Gruppierung.
Die Kohonenkarte besteht aus zwei Schichten, die erste Schicht sind Inputneuronen und die zweite Schicht beschreibt das Netzwerk welches ebenfalls aus Neuronen besteht.
Die Inputneuronen sind dafür da um die Vektoren, mit denen das Netzwerk trainiert werden soll, dem Netzwerk zu präsentieren. Mit anderen Worten, für den Fall, dass man ein Netzwerk mit Farben trainieren möchte, existieren drei Inputneuronen. Je ein Neuron für den R-, G- und B-Wert des Vektors.
Das Netzwerk besteht aus ein vorher festgelegten Anzahl an Neuronen die typischerweise in einem Quadrat angeordnet sind. Es gibt zwar auch wabenartige Strukturen und Strukturen in höheren Dimensionen wie dem Würfel, aber wir nutzen hier ausschliesslich das Quadrat.
Nehmen wir an, dass das Netzwerk aus 16 Neuronen besteht. Ordnen wir diese zu einem Quadrat, erhält man ein Quadrat mit einer Kantenlänge von vier Neuronen.

Jedes dieser 16 Neuronen hat eine bestehende Verbindung zu jedem Inputneuron

Untereinander sind die Neuronen in der Netzwerkschicht nicht verbunden. Programmatisch gesehen muss aber eine Adressierung der einzelnen Neuronen möglich sein. Warum das so ist wird später erwähnt.
Continue reading

LaTeX/TikZ iPhone Vorlage – Paper Prototyping

Hier ein kleiner LaTeX/TikZ Ausschnitt um ein iPhone zu zeichnen. Ich brauchte es als Vorlage für ein Paper Prototyping.


\begin{tikzpicture}
% Gitterkreuz
%\draw[help lines] (0,0) grid (5,8);
\draw[rounded corners=0.5cm](0,0) rectangle (5,8);
\draw[rounded corners=0.07cm](1.85,7.4) rectangle (3.15,7.55);
\draw(2.5,0.6) circle (0.46);
\draw[rounded corners=0.04cm] (2.366,0.466) rectangle (2.644,0.744);
% Inhalt
\draw[thick](0.4,1.2) rectangle (4.6,7);

\end{tikzpicture}

Es gibt sicherlich zig bessere Wege ein iPhone in LaTeX oder TikZ zu zeichnen, aber der hier erfordert wenigstens keine 2 Stunden Dokumentation lesen :) .

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