Wir haben für die Otto-Tochter Hermes-OTTO International die B2B-Handelsplattform KEENON FASHION umgesetzt und waren hierzu auch beratend tätig.

Mehr in der aktuellen Ausgabe der TextilWirtschaft und online hier.

Die Umsetzung erfolgte mittels Java & Grails.

Wie bei vielen Hypes, sollte man hinterfragen, ob es sich bei node.js wirklich um eine praxistaugliche Innovation handelt oder ein BWLer-Buzzword, dass möglichst häufig und an den unsinnigsten Stellen eingeworfen wird, nur um es einmal gesagt zu haben. Denn nur, wenn einem eine Technologie wirklich einen Mehrwert bringt, lohnt es sich, sie in den Firmenalltag zu integrieren und auch vor Kunden zu vertreten.

Ich gehe davon aus, dass die Leser dieses Blogs schon eine ungefähre “Ahnung” haben, wobei es sich bei node.js handelt, wenn nicht http://de.wikipedia.org/wiki/Node.js

Um es kurz zusammenzufassen, handelt es sich bei node.js um eine Technologie, mit der man serverseitig JavaScript-Code ausführen kann. Das klingt für den eingefleischten Perl/PHP/Ruby-Entwickler zunächst sicher etwas “widernatürlich”. Aber wie bei vielen neuen Dingen, hat man ersteinmal etwas dagegen, weil man es nicht kennt, obwohl es vielleicht gar nicht so abwegig ist, wie es zunächst den Anschein hat.

So muss man gestehen, dass node.js mit der V8-Google-Engine in Performance, durch JIT-Kompilierung, InLine-Cache und neuer Speicherverwaltung, nahe an vorkompilierte Sprachen wie C oder C++ heranreicht.

Doch was genau für Vorteile hat das nun für uns, als “Nicht-C++”-Programmierer, dass jemand aus einem Geistesblitz heraus eine JavaScript-Engine auf dem Server einsetzt? Da gibt es doch schon mehr als genug andere ScriptSprachen, wie PHP, Perl, etc. Warum da das Rad neu erfinden?

Zuersteinmal bietet node die Möglichkeit einen eigenen Web-Server zu “bauen”, der entgegen den üblichen Web-Servern nicht auf “Ein Thread pro Request” setzt, sondern auf einen Thread für die Verarbeitung aller Requests, aber auf eine eventbasierte non-blocking-I/O.

ACHSO!………Was?!

Nun, in einem Apache-MySql-PHP-Setup würde ein Request einen eigenen Thread starten, einen für sich isolierten “Bereich”, wenn man so will. Eben hierdrin würde dann der PHP-Interpreter seine Arbeit aufnehmen und den Request beantworten. Kommt zur gleichen Zeit noch ein Request, passiert das Gleiche nocheinmal…in einem neuen Thread und dann wieder und wieder und wieder….

Man versucht also den Thread so schnell wie möglich abzuarbeiten, um ihn wieder “frei” zu machen, denn jeder Server kann nur eine begrenzte Menge an Threads “poolen” bevor er nicht mehr reagieren kann, da seine Resourcen aufgebraucht sind, bis die Threads abgearbeitet sind.

Jeder der einmal ein High-Performance-Speedtestingtool auf seine Seiten losgelassen hat, das unzählige Anfragen in einer Sekunde generieren kann, weiß wovon ich rede.

Das Problem ist aber nicht alleine die begrenzte Verfügbarkeit von Threads, sondern auch, dass Threads nur dann schnell abgearbeitet werden können, wenn kaum/keine Festplatten oder Datenbankoperationen stattfinden.

Denn das ist genau DAS was im Requesthandling am längsten dauert:

• Datenbankabfragen
• Dateiuploads von großen Dateien
• Verarbeitung von Dateien
• Speichern von großen Mengen an User-Daten
• API-Backendkommunikation

Ein Webserver verbringt die meiste Zeit mit warten, das klingt vielleicht etwas seltsam ist aber so. Denn bevor die Datenbank den wichtigen Datensatz zurückgeliefert hat, der WebService nicht gemeldet hat, dass User X Bonität Y hat oder der Upload der großen CSV-Datei fertig ist, kann der Server den Request nicht beantworten und so den Thread wieder freigeben.

Und genau hier liegt die Stärke eines non-blocking-I/O mit Eventloop.

Eine Eventloop springt sehr schnell zwischen den Anfragen hin und her, startet die jeweilige I/O und setzt einen Callback für das Event der Fertigstellung (nur als grobes Beispiel). So kann der nächste Request bearbeitet werden, obwohl noch gar keine Antwort von der I/O-Aktion zurückgekommen ist. Sobald das “I/O-End-Event” auftritt, wird der Callback aufgerufen und der jeweilige Request kann zuende bearbeitet werden.

Callbacks sind in node.js anonyme oder auch benamte Funktionen, die bestimmte Parameter erhalten. Meist einen Error-Parameter, einen Data-Parameter und noch diverse andere verschiedene Informationen und Objekte. Oft auch selbst wieder Funktionen als Paramter.

Node.js ist also in der Lage das “C10K”-Problem zu lösen, also die Fähigkeit mehr als 10.000 Clients gleichzeitig zu “bedienen”. Zwar würde ein Apache unter Linux 2.6 Kernel das auch schaffen, da hier die Threadzahl bis 32.000 gehen kann, aber dazu muss man den Overhead der Threads schon sehr stark begrenzen, wenn man nicht auf einer 64 Bit Maschine unterwegs ist, sonst kommt man nicht annähernd an diese Zahl.

Doch auch all diese Vorzüge sollen nicht darüber hinwegtäuschen, dass node.js nicht für jeden Nagel der geeignete Hammer ist.

Gute Einsatzgebiete:

• Json-Webservices, hier ist node.js wirklich ein ganz Großer
• Performance mittelgroßer Webseiten mit geringer Hardware-Anforderung
• Single-Site-Applicationen, wie zb GoogleMail, sprich Anwendungen die über “AJAX” die Anwendungsoberfläche immer wieder erweitern und verändern

Schlechte Einsatzgebiete:

• Webseiten mit hohem Anteil an Layoutvariationen und Templatefunktionalität, hier sind PHP, Ruby etc besser geeignet.
• Hochverfügbarkeits-Systeme oder sehr kritische Produktionssysteme, dieses da sich node.js noch im frühen Entwicklungsstadium befindet. Der letzte stable Release ist 0.6.2 aus dem November 2011.

NOW

Was node.js aber instressant machen könnte, ist das NOW-Framework für node.js, welches die Möglichkeit bietet, serverseitigen Code im Browser zu nutzen und Client-Funktionen vom Server aus aufzurufen.

Das muss man erstmal sacken lassen, man könnte also vom Server aus eine clientseitige JavaScript-Funktion aufrufen? JA! Man kann…

Und das alles ohne wirkliches AJAX! Über eine Socket-I/O-Funktionalität aus dem NOW-Framework für node.js. Dieses Framework macht es einem möglich über den NOW-Namespace Funktionen über Netzwerk Client- Und Serverseitig zu teilen.

Es ist auch möglich serverseitig Variablen zu setzen und sie zeitgleich im Client zu nutzen. In Real-Time!

So ist es zum Bespiel möglich mit nur 12 Zeilen Code einen einfachen Chatclient zu schreiben!

Hier ein Beispiel:

Serverseitig:

var fs = require('fs');
var http = require('http');

var server = http.createServer(function(req,res){

    fs.readFile('index.html', function(err,data){

       res.writeHead(200,{'Content-Type' : 'text/html'});
       res.write(data);
       res.end();
    });

}).listen(8080);

var everyone = require("now").initialize(server);

everyone.now.distributeMessage = function(msg){
  everyone.now.receiveMessage(this.now.name, msg);
};

Clientseitig:

$(document).ready(function(){
                now.name = prompt("Wie ist dein Name?","");
                now.receiveMessage = function(name,msg){
                      $("<div></div>").text(name + ": "+msg).appendTo('#msg');
                };

                $("#send-button").click(function(){
                   now.distributeMessage($('#text-input').val());
                   $('#text-input').val("");
                });
            });

Wenn das alles etwas neugierig gemacht hat, der kann gerne hier nachlesen:

• nodejs.org
• nowjs.com

Für Windows hab ich auf die schnelle zwei Wrapper gefunden:

• srvany (von Microsoft)
• Procrun (von Apache)

Da Procrun von Apache ist und wohl auch vom Tomcat verwendet wird habe ich mich entschlossen das Tool zu nutzen.

Procrun besteht aus zwei Programmen:

1. Prunmgr (Procrun monitor application) ist eine GUI um Procrun Dienste zu konfigurieren.
2. Prunsrv (Procrun service application) ist der eigentliche Service-Wrapper

Die Monitor-Applikation ist nicht so interessant deshalb betrachten wir hier nur den Wrapper. Der Wrapper kann in drei Modes laufen:

1. Im Mode jvm wird direkt die jvm.dll verwendet um das Java-Programm zum Service zu machen. Das gewünschte Java-Programm läuft so in dem Prozess des Wrappers.
2. Im Mode exe kann eine beliebige anderes (native) Programm als Service gestartet werden. Das Programm wird dabei in einem eigenen Prozess gestartet.
3. Der Mode java ähnelt sehr dem Mode exe nur das hier automatisch die java.exe in einem eigenen Prozess gestartet wird.

Ich finde eigentlich den Mode jvm am besten. Die Idee das Java-Programm in dem Prozess laufen zu lassen finde ich eigentlich recht charmant und die Implementierung kann man leicht so gestalten das mein init.d Ansatz für Linux mit dem gleichen Source-Code funktioniert.

Um unser Beispiel-Programm als Service zu installieren lädt man sich die Binaries von der Apache-Seite herunter. Dann braucht ihr natürlich auch meine Sample-App (ist Eclipse-Projekt). Dann entpackt ihr das Sampel und entpackt die Distribution von Apache so das die prunsrv in dem Verzeichnis liegt in das ihr mein Beispiel entpackt habt. Dann könnt ihr mit dem Batch-Script (service_install.bat) den Service installieren:

@ECHO OFF
%~dp0\prunsrv //IS//SimpleService  ^
	--Jvm=auto --StartMode=jvm --StopMode=jvm  ^
	--Classpath %~dp0\SimpleService.jar  ^
	--StartClass de.wortzwei.simpleService.Service --StartParams start  ^
	--StopClass de.wortzwei.simpleService.Service --StopParams stop  ^
	--StartPath %~dp0 --LogPath %~dp0

Der Inhalt ist leicht erklärt (genauer könnt ihr das in der Dokumentation nachlesen): Es wird ein Service mit dem Namen “SimpleService” installiert. Die Jvm wird automatisch bestimmt und das Starten bzw. Stoppen passiert im Modus jvm. Natürlich muss der Classpath, das Working-Directory (StartPath) und der LogPath (hier schreibt das Tool sein eigenes Log) gesetzt werden. Das Working-Directory ist deshalb so wichtig da unser Service dort seine Einstellungen sucht. Dieses seltsame %~dp0 wird übrigens zum Verzeichnis erweitert in dem sich diese Bat-Datei befindet. Wirklich wichtig sind die Einstellungen StartClass, StopClass, StartParams und StopParams denn hier wird eingestellt das die Methode main (ist der default und kann auch noch eingestellt werden) in der Klasse de.wortzwei.simpleService.Service mit dem Parameter start zum starten bzw. stop zum stoppen aufgerufen wird. Die Main-Methode wird dabei nicht zum starten der VM aufgerufen sondern wird wie eine normale statische Methode aufgerufen.

Sehen wir uns die Main-Methode an:

public static void main(final String[] args) {
	// default ist "start"
	String cmd = CMD_START;
	if (args.length > 0) {
		cmd = args[0];
	}

	if (cmd.equalsIgnoreCase(CMD_START)) {
		Thread.setDefaultUncaughtExceptionHandler(new ExtUncaughtExceptionHandler());
		try {
			final Settings settings = new Settings();
			// den Server starten
			server = new Server(settings.getPort(),
			        settings.getMaxRequests(), new FileFactory(
			                settings.getOutput()));
			server.start();
		} catch (final IOException e) {
			System.out.println("fatal error!");
			e.printStackTrace();
			System.exit(-1);
		}
	} else {
		if (server != null) {
			server.shutdown();
			try {
				server.join();
			} catch (final InterruptedException e) {
				System.out.println("Interrupted?");
				e.printStackTrace();
			}
		}
	}
}

Wie man sieht wird der Server (ein Thread) gestartet wenn “start” als erster Parameter übergeben wird. Jeder andere String wird als “stop” interpretiert. Hier ist es wichtig beim stoppen nicht System.exit() aufzurufen. Das würde ja die JVM abbrechen, die wir nicht selber gestartet haben (da wir hier in der main Methode sind täuscht das ein wenig) und unter Windows werden dann wirre Meldungen angezeigt von wegen der Service konnte nicht gestoppt werden. Im Prinzip macht der Service-Wrapper nichts anderes als dieses kleine Programm:

/**
 * Diese Methode startet den Service; wartet ein bisschen und stoppt ihn dann
 * wieder. Ähnlich wie der Service-Wrapper das macht.
 */
private static void startStopService() {
	// starten
	Service.main(new String[] { "start" });

	// warten
	try {
		Thread.sleep(1000);
	} catch (final InterruptedException e) {
		System.out.println("Interrupted?");
		e.printStackTrace();
	}

	// stoppen
	Service.main(new String[] { "stop" });
}

Wie bereits erwähnt ist das beste an diesem Ansatz das ich diese Main-Methode fast ohne Änderung so unter Linux auch verwenden kann. Unter Linux ruft das init.d Script zum stoppen des Daemons nur kill -15 <pid> auf (SIGTERM). Wenn man jetzt einen Shutdown-Hook registriert kann dieser das stoppen des Server-Threads übernehmen und mit ein bisschen Refactoring kann der Code der jetzt im Else-Zweig steht sogar von beiden Ansätzen verwendet werden.

problem soved! bis denn…

class LocaleEnforcingController {

  def localeResolver

  ...

  def beforeInterceptor = {
    localeResolver.setLocale(request, response, new Locale(...))
  }

  ...

  def someAction = {
    ...
    localeResolver.setLocale(request, response, new Locale(...))
    ...
  }

}

1. Im Internet soviel Dokumentation lesen wie verfügbar ist.
2. Ein gutes Buch kaufen und komplett lesen.
3. machen…

Bei Groovy bin ich gerade beim “machen” angekommen .

Besonders cool finde ich die Unterstützung für Meta-Programming. Nur die Suche nach einem sinnvollen Beispiel gestaltete sich etwas schwierig. Groovy hat die grundlegenden Klassen von Java bereits mit genügend sehr nützlichen Funktionen ausgestattet. Mir ist allerdings aufgefallen das in String keine Funktion wie StringUtils.isBlank() hinzugefügt wurde. Die Funktion gehört zu meinen Lieblingsfunktionen und ich verwende sie sehr oft.

Dank der ExpandoMetaClass lässt sich die Funktion leicht hinzufügen:

void testIsBlank() {
    String.metaClass.isBlank = {
        ->
        int strLen;
        if ((strLen = delegate.length()) == 0) {
            return true;
        }
        for (int i = 0; i < strLen; i++) {
            if ((Character.isWhitespace(delegate.charAt(i)) == false)) {
                return false;
            }
        }
        return true;
    }

    assertTrue ' '.blank
    assertTrue ''.blank
    assertFalse 'bob'.blank
    assertFalse ' bob '.blank
}

Vielleicht finden sich ja noch andere nützliche Funktionen in den StringUtils die man einfach String hinzufügen kann?

Ziel ist es eine ListView zu implementieren, die wie folgt aussieht:

Jeder Eintrag verfügt über ein Icon auf der linken Seite und ein RadioButton auf der rechten Seite, welches den selektierten Eintrag anzeigt. Das Layout für die Aktivität list_view_demo.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">

<RelativeLayout android:layout_width="fill_parent"
android:orientation="horizontal" android:layout_height="wrap_content"
android:paddingTop="10dp" style="@android:style/ButtonBar">

<Button android:id="@+id/choose_btn" android:text="@string/choose_btn"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:enabled="true" android:layout_alignParentRight="true" />

</RelativeLayout>

<ListView android:id="@+id/list_view" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:drawSelectorOnTop="false" />

</LinearLayout>

und speziell für jeden Listeneintrag soll das Layout list_entry.xml genutzt werden. Hier gilt es zu beachten, dass nicht eine CheckBox sondern eine CheckedTextView genutzt wird. Damit wird der Touch-Event immer von der Liste verarbeitet.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="64dip"
android:gravity="center_vertical" android:ignoreGravity="@+id/icon">

<ImageView android:id="@+id/icon"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
android:layout_alignParentBottom="true" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="@drawable/icon" />

<TextView android:id="@+id/label"
android:layout_width="200dp" android:paddingLeft="9dip"
android:layout_height="wrap_content" android:layout_toRightOf="@id/icon"
android:layout_centerVertical="true" android:textSize="23dp" />

<CheckedTextView android:id="@+id/checkstate"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginRight="6dip" android:layout_alignParentRight="true"
android:background="#00000000" android:focusable="false"
android:clickable="false" android:checked="false"
android:checkMark="@android:drawable/btn_radio"
android:layout_centerVertical="true"
/>

</RelativeLayout>

Damit ist das Layout definiert und muss nur noch an die Liste übergeben werden. Dies erfolgt durch die Implementierung eines eigenen Adapters. Hierzu habe ich eine private Klasse DomainExampleAdapter erstellt, die mit dem DomainObject DomainExample zusammenarbeitet.

private class DomainExampleAdapter extends ArrayAdapter<DomainExample> {

  DomainExampleAdapter() {
    super(getApplicationContext(), R.layout.list_entry, itemList);
  }

  public View getView(int position, View convertView, ViewGroup parent) {
    View row = convertView;

    if (row == null) {
      LayoutInflater inflater = getLayoutInflater();
      row = inflater.inflate(R.layout.list_entry, parent, false);
    }

    TextView label = (TextView) row.findViewById(R.id.label);
    CheckedTextView checkBox = (CheckedTextView) row.findViewById(R.id.checkstate);

    label.setText(itemList.get(position).toString());
    checkBox.setChecked(listView.getCheckedItemPosition() == position);
    return (row);
  }
}

Das zuvor vorgestellte Layout wird im Konstruktor und Inflater explizit genutzt. Das Überschreiben der Methode getView, welches für jeden Listeneintrag aufgerufen wird, bewirkt, dass das Label und die Checkbox entsprechend gesetzt wird. Hier der Vollständigkeit halber die Klasse DomainExample:

public class DomainExample {

  private int id;

  private String name;

  public int getId() {
    return id;
  }

  public void setId(int id) {
    this.id = id;
  }

  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public String toString() {
    return getName();
  }
}

Die Initialisierung der Activity erfolgt wie folgt:

public class ListViewDemo extends Activity implements View.OnClickListener {

  private ListView listView = null;
  List<DomainExample> itemList = null;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.list_view_demo);

    itemList = getItemList();
    listView = (ListView) findViewById(R.id.list_view);
    listView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
    listView.setAdapter(new DomainExampleAdapter());
    ...
}
...
}

Die Liste mit den Einträgen wird durch die private Method getItemList. Erzeugt. Anschließend wird die listView anhand der Id ermittelt und der ChoiceMode auf single gesetzt. Dies ist besonders wichtig, da die selektierte Zeile ansonsten nicht über die Methode getCheckedItemPosition() abgefragt werden kann. Zu guter letzt wird der eigene Adapter an die ListView gehängt. Damit haben wir die oben prästentierte ListView komplett umgesetzt.

Ein vollständiges implementiertes Beispiel kann hier heruntergeladen werden. Viel Spaß damit!

Zunächst das Ausgangsproblem:

<div class="container">
	<div class="element">Lorem ipsum ...</div>
	<div class="element">Lorem ipsum ...</div>
</div>

.container {
	margin: 10px;
	padding: 10px;
	background: red;
}
.element {
	margin: 5px; background: yellow;
	float: left;
}

Aktuelle Situation:

So soll es aussehen:

Lösung mittels zusätzlichem Subelement:
Durch Anhängen eines Subelements (bspw. br) mit style="clear:both" wird das floating unterbrochen und die Containerhöhe korrekt berechnet.

<div class="container">
	...
	<br style="clear:both" />
</div>

Lösung mit CSS und nichts als CSS:
Fügt man dem Container-div lediglich die folgenden beiden CSS-Attribute zu, so kann man sich das Subelement sparen!

.container {
	...
	overflow: hidden;	/* für den IE7 und drunter */
	display: table;		/* für den Rest der Browserwelt */
}

Funktionsweise

Ein Bloom-Filter basiert grundlegend auf einem m-stelligen bit-Array, das initial mit Nullen gefüllt ist und k Hashfunktionen, die die Elemente des Definitionsbereich auf die m Arrayindizes abbilden. Um ein Element zum Filter hinzuzufügen, wird das Element über die Hashfunktionen auf k Arrayindizes abgebildet und das bit-Array wird in jedem der berechneten Indizes auf 1 gesetzt. Um zu testen, ob ein Element im Filter enthalten ist werden ebenfalls über die Hashfunktion k Indizes berechnet, enthält das Array nun in einem der Indizes einen Wert ungleich 1 ist das Element nicht im Filter enthalten. Die Breite m des Arrays und die Anzahl k der Hashfunktionen bestimmt die Wahrscheinlichkeit von false-positives, je höher man diese wählt desto geringer diese Wahrscheinlichkeit.

Aus einem Bloom-Filter, der nach diesem einfachen Prinzip implementiert ist können keine Elemente entfernt werden, es gibt jedoch Lösungsansätze um dies zu ermöglichen.

Anwendungsfälle

Der Einsatz eines Bloom-Filters ist dann sinnvoll, wenn gegen eine große Menge an Daten getestet werden muss und false-positives zu vertreten sind. Beispielsweise der Ausschluss von Dubletten bei der Erzeugung von Gutscheincodes gegen einen bereits vorhandenen Datenbestand.

Zunächst möchte ich ein MovableRectangle Element erzeugen. Ein Rechteck das ich per Mouse hin und her schieben kann, und Basis für weitere Elemente sein wird. Dazu erstelle ich ein klassenähnliches JavaScript Konstrukt mit Feldern und Methoden, das ein primitives Rechteck (ein Raphaël Objekt vom Typ rect) kapselt.

var MovableRectangle = function () {

    var _raphael = null;
    var _svgObj = null;
    var _instance = null;

    var _x = 0;
    var _y = 0;
    var _oldX = 0;
    var _oldY = 0;

    var _width = 0;
    var _height = 0;
    var _oldWidth = 0;
    var _oldHeight = 0;

    return {
        init: function (r, x, y, width, height, curve) {
            _raphael = r;
            _x = x;
            _y = y;
            _width = width;
            _height = height;
            _svgObj = _raphael.rect(_x, _y, _width, _height, curve);
            _instance = this;

            _svgObj.drag(this.move, this.start, this.up);

        },

        /* Getter und Setter für die alle Felder _x, _y, _width ...*/

        setAttr: function (key, value) {
            _svgObj.attr(key, value);
        },

        render: function () {
            _svgObj.attr('x', _x);
            _svgObj.attr('y', _y);
            _svgObj.attr('width', _width);
            _svgObj.attr('height', _height);
        },

        start: function (x, y) {
            _oldX = _x;
            _oldY = _y;
            _oldWidth = _width
            _oldHeight = _height;
            _instance.setAttr("opacity", 0.5);
        },

        move: function (deltaX, deltaY) {
            _x = _oldX + deltaX;
            _y = _oldY + deltaY;
            _instance.render();
        },

        up: function (event) {
            _instance.setAttr("opacity", 1);
        }
    }
}

var paper = Raphael('notepad', 640, 400);
var mr = new MovableRectangle();
mr.init(paper, 50, 50, 100, 100, 5);
mr.setAttr('fill', '#369');

Was wir jetzt haben ist ein Rechteck an der Position x: 50, y: 50 mit einer Breite/Höhe von 100/100 mit abgerundeten Ecken (Radius: 5) das man mit der Maus verschieben kann. Das ganze lässt sich auch mit deutlichweniger Code bewerkstelligen, …

var c = paper.rect(10, 10, 50, 50);
c.drag(function (dx, dy) {
    this.attr({x: this.ox + dx, y: this.oy + dy});
}, function () {
    this.ox = this.attr("x");
    this.oy = this.attr("y");
    this.attr({opacity: .5});
}, function () {
    this.attr({opacity: 1});
});

…jedoch ist das zur besseren Veranschaulichung der weiteren Beispiele nützlich etwas ausführlicher den Programmcode zu strukturieren. Eine Untersuchung des Elements mit dem Firebug ergibt folgendes Markup:

<rect x="50" y="50" width="100" height="100" r="5" rx="5" ry="5"
  fill="#336699" stroke="#000" style="opacity: 1;" opacity="1"/>

Als nächstes soll man das Rechteck in der Größe verändern können. Dafür benötigt das Rechteck einen Anfasser Punkt, den wir innerhalb des Rechtecks unten rechts platzieren. Für die neue Funktionalität erzeuge ich ein MovableResizableRectangle Element, das ein MovableRectangle kapselt. unser Anfasserpunkt wird ein RectangleResizer Element. Zunächst der Code des JavaScript Konstrukts MovableResizableRectangle:

var MovableResizableRectangle = function () {

    var _raphael = null;
    var _movableRectangle = null;
    // der Anfasserpunkt
    var _resizer = null;
    var _instance = null;

    return {

        init: function (r, x, y, width, height, curve) {
            _raphael = r;

            _movableRectangle = new MovableRectangle();
            _movableRectangle.init(r, x, y, width, height, curve)
            _movableRectangle.getSvgObj().drag(this.move, this.start, this.up);
            _movableRectangle.register(this);

            _resizer = new ResizerRectangle();
            _resizer.init(r, (x + width - 15), (y + height - 15), 10, 10, 3);
            // Der Anfasserpunkt muss wissen wen er verändern soll
            _resizer.setResizable(this);
            _resizer.setAttr('fill', '#ff6633');
            _resizer.setAttr('stroke', 'none');

            _instance = this;
        },

        getSvgObj: function () {
            return _movableRectangle.getSvgObj();
        },

        setAttr: function (key, value) {
            _movableRectangle.setAttr(key, value);
        },

        setWidth: function (width) {
            _movableRectangle.setWidth(width);
        },

        getWidth: function () {
            return _movableRectangle.getWidth();
        },

        setHeight: function (height) {
            _movableRectangle.setHeight(height);
        },

        getHeight: function () {
            return _movableRectangle.getHeight();
        },

        setOldWidth: function (oldWidth) {
            _movableRectangle.setOldWidth(oldWidth);
        },

        getOldWidth: function () {
            return _movableRectangle.getOldWidth();
        },

        setOldHeight: function (oldHeight) {
            _movableRectangle.setOldHeight(oldHeight);
        },

        getOldHeight: function () {
            return _movableRectangle.getOldHeight();
        },

        render: function () {
            _movableRectangle.render();
        },

        start: function (param) {
            _movableRectangle.start(param);
        },

        move: function (deltaX, deltaY) {

            var xValue = _movableRectangle.getOldX() + deltaX;
            var yValue = _movableRectangle.getOldY() + deltaY;

            _movableRectangle.setX(xValue);
            _movableRectangle.setY(yValue);

            _movableRectangle.render();

            // Dem Anfasserpunkt die neuen Koordinaten mitteilen
            _resizer.setX(_movableRectangle.getX() + _movableRectangle.getWidth() - 15);
            _resizer.setY(_movableRectangle.getY() + _movableRectangle.getHeight() - 15);
            _resizer.render()
        },

        up: function (event) {
            _instance.setAttr("opacity", 1);
        }
    };
};

In der Methode init() wird neben dem MovableRectangle Objekt auch das RectangleResizer Objekt erzeugt – der Anfasserpunkt. Wenn an dem gezogen oder geschoben wird, soll dieser das MovableResizableRectangle Objekt in der Größe verändern. Dafür werden Getter und Setter für die Breite und Höhe benötigt. Damit das MovableRectangle auch weiß was es verändern soll, bekommt es einen Setter spendiert, setResizable(). Damit das RectangleResizer auch immer schön unten rechts in der Ecke verbleibt wenn am MovableResizableRectangle hin und her geschoben wird, muss das MovableResizableRectangle in der Methode move() dafür sorgen, dass die Positionierung des RectangleResizer neu berechnet und aktualisiert wird.

var RectangleResizer = function () {

    var _raphael = null;
    var _movableRectangle = null;
    // das Objekt das in der Größe verändert werden soll
    var _resizable = null;
    var _instance = null;

    return {

        init: function (r, x, y, width, height, curve) {
            _raphael = r;
            // auch der Resizer kapselt ein MovableRectangle
            _movableRectangle = new MovableRectangle();
            _movableRectangle.init(r, x, y, width, height, curve)
            _movableRectangle.getSvgObj().drag(this.move, this.start, this.up);
            _instance = this;
        },

        setResizable: function (resizable) {
            _resizable = resizable;
        },

        getResizable: function () {
            return _resizable;
        },

        setAttr: function (key, value) {
            _movableRectangle.setAttr(key, value);
        },

        render: function () {
            _movableRectangle.render();
        },

        setX: function (x) {
            _movableRectangle.setX(x);
        },

        getX: function () {
            return _movableRectangle.getX();
        },

        setY: function (y) {
            _movableRectangle.setY(y);
        },

        getY: function () {
            return _movableRectangle.getY();
        },

        start: function (param) {
            _movableRectangle.start(param);
            // "merken" der Breite/Höhe des Objekts das in der Größe verändert werden soll
            _resizable.setOldWidth(_resizable.getWidth());
            _resizable.setOldHeight(_resizable.getHeight());
        },

        move: function (newX, newY) {
            // aktualisieren des Objekts das in der Größe verändert werden soll
            _resizable.setWidth(_resizable.getOldWidth() + newX);
            _resizable.setHeight(_resizable.getOldHeight() + newY);
            _resizable.render();
        },

        up: function (event) {
            _movableRectangle.up(event);
        }
    };
};

Auf diese (zugegebener Maßen experimentelle) Weise kann man weitere Elemente wie Kreise, Ellipsen, Pfade, etc. Kapseln und mit zusätzlicher Funktionalität erweitern. Für eine Real-Life Anwendung sollte man in Erwägung ziehen wie in der Doku beschrieben die JavaScript Bibliothek Plugin ähnlich zu erweitern wie hier: http://raphaeljs.com/reference.html#plugins-canvas und hier http://raphaeljs.com/reference.html#plugins-elements beschrieben.

Anbei ein ZIP-Archiv mit einigen Beispielen (zugegebener Maßen experimentell ).

Da wir sicher nicht die einzigen sind die eine Volltextsuche vermissen haben wir uns entschlossen das Plugin unter GPL (v3) zu veröffentlichen. Damit wir auch gleich die für ein Open-Source benötigte Infrastruktur bereit stellen können haben wir das Projekt auf Google Code veröffentlicht. So hat man gleich alles was man benötigt.

Ihr findet das Projekt unter http://code.google.com/p/solr-search-plugin/.

Wir hoffen, dass ihr die neue Suche genau so nützlich findet wie wir!