Schlagwort-Archiv: Eclipse

Erstellen einer TimeSlider Animation mit GWT

von tinatigertech | Kommentieren

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 →

Automatisiertes Testen von Webseiten mit dem Selenium WebDriver

von tinatigertech | 2 Kommentare

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 →