Erstellen einer TimeSlider Animation mit GWT

In meiner letzten GWT-Webanwendung ging es unter anderem um die Animation von grafischen Elementen. Zum Beispiel sollten U-Bahnen in einem U-Bahnnetz dargestellt werden und der Nutzer sollte die Animation für einen selbstgewählten Zeitraum abspielen können. So sollten z.B. alle U-Bahnen, die zwischen 6 Uhr und 10 Uhr morgens eine bestimmte Station passieren, animiert werden. Diese Animationen habe ich mit JavaScript gebaut. Die Steuerung der Animationen wollte ich jedoch mit GWT-Elementen in die Anwendung einbauen. Dazu brauchte ich Buttons zum Starten und Stoppen der Animation, sowie eine Zeitanzeige, die den Fortschritt der Animation darstellt. Ich war mir ziemlich sicher, daß dies eine Standardfunktion ist, für die es passende Bibliotheken gibt.

Vorhandene Bibliotheken für einen GWT-Slider

Nach langwierigen Recherchen für diesen Anwendungsfall bin ich jedoch nicht fündig geworden. GWT bietet von sich aus keine fertigen Slideranimationen an. Es gibt zwar eine SliderBar im Inkubator, aber diese ist bisher nicht in die offizielle Bibliothek aufgenommen worden.

Ausprobiert habe ich unter anderem die gwt-slider-bar-Bibliothek.  Dies ging zwar in die richtige Richtung, aber der Overhead zum Installieren und Benutzen der Bibliothek war relativ groß und die grafische Umsetzung gefiel mir auch nicht besonders. Diese ist zwar komplett in CSS konfigurierbar, aber dann ist der Nutzen der Bibliothek insgesamt relativ gering. Ein Entwickler von devbliss bietet übrigens einen Cleanup dieser Bibliothek an, mit einer Mavenintegration und besserer Usability der CSS-Styles.

gwt-slider-bar

Schöne Slider gibt es von JQuery oder anderen JavaScript-Bibliotheken. Eine gute Lösung zur Einbindung eines JQuery-Sliders in GWT wird hier vorgestellt.

jquery-slider

Aber moment mal: ich wollte doch eigentlich in GWT mit Java programmieren! Die Integration von JavaScript in GWT ist immer etwas umständlich und man muss die JSNI-Methoden verwenden. Ich kam also zu dem Schluss, dass es einfacher ist, einen eigenen Slider mit den vorhandenen GWT-Elementen zu bauen. Da dies einwandfrei und relativ flott funktioniert hat, möchte ich euch diese Variante hier vorstellen.

 Grafische Elemente des TigerTech TimeSliders

Ein Slider besteht aus den folgenden Elementen: einem Hauptpanel, in welchem sich der Slider bewegt, einem SliderHandle, der von links nach rechts wandert und jeweils einem Panel auf der linken sowie der rechten Seite des SliderHandles, deren Größe sich während der Animation ändert.

slider-sketch

Weiterlesen

Entscheidung für ein passendes Web Application Framework

Du hast eine spitzen Idee für eine Web-Anwendung und willst am liebsten gleich losprogrammieren. Aber beim Einrichten Deiner Entwicklungsumgebung fällt Dir ein, daß du gerne mal etwas Neues ausprobieren möchtest, das Dir ein paar Arbeitsschritte erspart und ein schickes modernes Design liefert. Du möchtest gerne ein Web-Application-Framework verwenden.

Ein Web Application Framework ist grundsätzlich für die Entwicklung von dynamischen Webseiten, Webanwendungen oder Webservices ausgelegt. Damit werden sich wiederholende Tätigkeiten vereinfacht, die Wiederverwendung von Code und die Selbstdokumentation der Software-Entwicklung gefördert. Begibt man sich allerdings auf die Suche stellt man schnell fest, daß es unendlich viele Möglichkeiten gibt. Deshalb sollte man zunächst festlegen, welche Anforderungen man an ein solches Framework hat und dann die Alternativen nach diesen Anforderungen hin abklopfen.  Die Frage nach richtig oder falsch läßt sich natürlich so einfach nicht beantworten, aber gut ist es doch ein paar Vor- und Nachteile zu kennen.

web-frameworks

Weiterlesen

System-Monitoring mit JMX und Jolokia

Eine einfache Monitoring-Plattform zum Überwachen einer Java-Anwendung kann mit Hilfe einiger OpenSource-Tools leicht erstellt werden. Dafür werden folgende Komponenten benötigt: Das JMX-Framework, evtl. eine Möglichkeit zum entfernten Zugriff auf die Anwendung, hierzu wird Jolokia vorgestellt, und ein Framework zum Darstellen schöner Diagramme auf der Monitoring-Webseite.

Was ist JMX?

JMX steht für Java Management Extension und ist eine vom Java Community Process (JSR-3) entwickelte Spezifikation zur Verwaltung und Überwachung von Java-Anwendungen. Teile der JMX Spezifikation sind bereits in der Java 1.5 Standard-API integriert und wurden mit Java 6 stark erweitert. JMX ist nicht nur eine geeignete Technologie, um das Verhalten von Systemen zu kontrollieren, sondern erleichtert auch die Kommunikation von unterschiedlichen Java-Programmen. In der ursprünglichen API unterstützte JMX nur die Kommunikation innerhalb einer JVM (Java Virtual Machine), aber seit der Java Version 6 wird auch die Kommunikation mit anderen JVMs unterstützt.

Die Systemdaten werden von sogenannten MBeans ausgelesen. Diese Java-Objekte werden von speziellen Agents verwaltet oder es kann (wenn die Sicherheitsbestimmtungen das zulassen) auch direkt auf die MBeans zugegriffen werden. Es lassen sich statische (z.B. Betriebssystemdaten) und dynamische (Speicherverbrauch, geladene Klassen..) Systemdaten auslesen. Es stehen fertige HTTP-Adapter für JMX zur Verfügung, wodurch es möglich ist, direkt über einen Webbrowser Werte einer Java-Anwendung zu verändern und auszulesen.

Weiterlesen

Automatisiertes Testen von Webseiten mit dem Selenium WebDriver

Das Open Source Projekt „Selenium“ zum Durchführen automatisierter Browser Tests gibt es bereits seit 2004. Ins Leben gerufen wurde es von Jason Huggins, während seiner Zeit bei ThoughtWorks, die zu diesem Zeitpunkt hauptsächlich mit Javascript arbeiteten. Obwohl  der InternetExplorer der beherrschende Browser war, wurden bei ThoughtWorks bereits einige alternative Browser benutzt (vor allem Mozilla Varianten). Open Source Testing Tools gab es nur für einzelne Browser (typischerweise für den InternetExplorer) oder es waren Simulationen von Browsern (z.B. HttpUnit) und die Kosten für kommerzielle Tools waren vor allem für kleine Projekte noch nicht bezahlbar .

Glücklicherweise unterstützten alle zu testenden Browser Javascript. Deshalb machten sich Jason und sein Team daran ein Testing Tool in der Sprache zu schreiben die das Verhalten ihrer Applikation am Besten verifizieren konnte. Inspiriert von dem FIT-Projekt wurde eine tabellenbasierte Syntax über das Javascript gelegt und es damit auch Nutzern mit begrenzten Programmierkenntnissen ermöglicht Tests zu schreiben. Dieses Tool wurde 2004 unter dem Namen „Selenium“ (oder auch „Selenium Core“) und unter einer Apache 2 Lizenz veröffentlicht.

Da Selenium in purem Javascript geschrieben ist, musste es auf dem gleichen Server wie die Applikation laufen, um die Browser Sicherheitsbestimmungen zu umgehen. Das war aber nicht immer möglich. Um dieses und andere Probleme zu lösen wurde ein HTTP Proxy geschrieben. Damit ließen sich viele Einschränkungen der  „Same Host Policy“ der Browser umgehen. Dieses Design ermöglichte es, Selenium-Anbindungen für viele Programmiersprachen zu schreiben. Sie mussten nur in der Lage sein eine HTTP-Anfrage an eine bestimmte URL zu schicken. Diese Version wurde bekannt als „Selenese“ oder auch „Selenium Remote Control“ (Selenium RC).

Währenddessen wurde bei ThoughtWorks an einer weiteren Browser Automatisierung gearbeitet: dem WebDriver. 2007 wurde der erste Code hierzu veröffentlicht. Er wurde für Nutzer von Projekten entwickelt, die ihre Ende-zu-Ende-Tests von dem darunterliegenden Test-Tool isolieren wollten. Typischerweise wird dies mit dem Entwurfsmuster Adapter gemacht. WebDriver entwickelte sich aus diesem Bedürfnis heraus und war ursprünglich für HTML Unit gedacht. Die Unterstützung für den InternetExplorer und Firefox folgten aber kurz nach dem Release.

Es gab erhebliche Unterschiede zwischen Selenium RC und WebDriver. Der größte Unterschied war, daß Selenium RC eine Wörterbuch-basierte API hatte, die alle Methoden für eine Klasse beanspruchte, während der WebDriver eine objektorientiertere API hatte. Außerdem unterstützte der WebDriver zunächst nur Java, während Selenium RC Unterstützung für viele Sprachen anbot. Technisch war Selenium Core hauptsächlich eine Javascript-Applikation, die in der Security-Sandbox des Browsers lief. WebDriver versuchte sich in den Browser zu integrieren, und das Browser Sicherheitsmodell zu umgehen, was einen weitaus höheren Entwicklungsaufwand zur Folge hatte.

Im August 2009 wurden beide Projekte miteinander verschmolzen. und der Selenium WebDriver ist das Resultat beider Projekte. Er unterstützt Sprachanbindungen für Java, C#, Python und Ruby. Außerdem bietet er Unterstützung für Chrome, Firefox, Internet Explorer, Opera und die Android und iPhone Browser. Es gibt Nebenprojekte die Anbindungen für Perl und eine Implementierung für den BlackBerry Browser anbieten.

Einrichten der Testumgebung 

Beispiel für Eclipse und Java

Die WebDriver API ist nicht an ein spezielles Testframework gebunden und kann sowohl in Unit Tests als auch in der guten alten Main-Methode verwendet werden.

Weiterlesen