Skytecs Entwicklerblog

Extraschöne Web-GUIs mit “ExtJS”

GUI-Toolkits für JavaScript gibt es wie Sand am Meer, nur in größerer Menge. Ich habe auch schon so manches davon gesehen und ausprobiert, von einfachsten Funktionssammlungen bis hin zu richtig dicken Bibliotheken. Dabei habe ich aber selten ein Stück Software gefunden, dessen Output mir so gut gefallen hat wie der des Javascript-GUI-Toolkits “ExtJS”. Mann, ist das Zeug hübsch!

Etwas nachteilig ist höchstens, dass man nicht sofort rafft, womit man es überhaupt zu tun hat, wenn man die oben verlinkte Website ansurft, ohne vorher einen Hinweis zu bekommen. Um meinen geschätzten Lesern die Sucherei zu ersparen, möchte ich deswegen noch kurz auf die Dokumentation zu ExtJS hinweisen. Da gibt es nämlich unter dem Menüpunkt “Examples and Demos” ein paar Beispiele für das, was das Dingsbums eigentlich tut. Sagte ich schon, dass die Komponenten da wirklich sehr hübsch aussehen?

Websites javascriptig versounden

Es gibt ein paar Dinge im Web, die mich ernsthaft aufregen: Deppen Leerzeichen, der Standart, die fehlerhafte Verwendung des Apostroph’s und Websites, die Musik machen. Gegen das letztgenannte Übel kann man natürlich etwas tun, indem man den Sound abschaltet - wenn man das aber mal vergisst und mitten in der Nacht unerwartet von einer Website mit Sound angebrüllt wird, weiß man, wieso ich mich so aufrege.

Wie dem auch sei: Das Volk wünscht es, das Volk bekommt es. Das Leben ist kein Ponyhof und der Dienstleister nicht vetoberechtigt, wenn ein Kunde Sound im Web total gut findet. Abgesehen davon ist es ja manchmal sogar recht sinnvoll, Soundfiles abzuspielen, beispielsweise als Hörbeispiel auf einer Bandhomepage.

Motiviert durch die Argumente des zweiten Absatzes möchte ich also auf die JavaScript-Bibliothek “SoundManager 2″ hinweisen, die eine API zur Nutzung der Soundfunktionen von Flash in JavaScript bietet. Die Beispiele sehen wirklich recht gut aus, insbesondere dieser schnuffige MP3-Player im Winamp-Stil - und wenn man sowas braucht, freut man sich sicher darüber, es dank dieser erfreulicherweise BSD-lizensierten Lib nicht selber bauen zu müssen.

Lässig javascripten mit jQuery

Ich gestehe: Ich hasse JavaScript. Wenn ich irgendeine Chance habe, jemand anderem irgendwelche js-Tasks aufzuhalsen, schaffe ich diese Art von Aufgabe möglichst schnell möglichst weit von mir weg. Am liebsten mit Lichtgeschwindigkeit nach Timbuktu - soll sich doch irgendeine arme Sau dort mit dem Kram rumschlagen. Hauptsache, es bleibt nicht an mir selbst hängen.

Trotzdem muss ich zugeben, dass ich MHenzes letzten großen JavaScript-Fund ziemlich geil fand, nämlich das umfangreiche Framework für alles Mögliche namens “jQuery”. Mit dem Dings kann man von DOM-Manipulation bis AJAX so ziemlich alles abfackeln, was man so braucht, und dabei erlebt man einen abgefahrenen AHA-Effekt nach dem anderen.

Man stelle sich beispielsweise vor, dass man allen Links in einem Dokument eine bestimmte CSS-Klasse zuweisen will, vielleicht um ein Icon dranzupappen oder so. Das geht in jQuery geradezu unanständig einfach:

jQuery(”a”).addClass(”icondingsbums”);

Erster, fertig, gewonnen! Und ganz ohne Änderungen am Markup! Natürlich kann man dann noch hübsche Einblendeffekte benutzen, Teile im DOM-Baum kopieren, verschieben, in schwarzen Löchern verschwinden lassen oder nach Timbuktu verschicken, aber wer das genauer wissen will, sollte sich einfach mal die Doku ansehen. Für den täglichen Gebrauch empfehle ich übrigens statt der etwas unübersichtlichen default-Dokumentation die visuelle jQuery-Doku, in der findet man einfach schneller, was man braucht.

Praktisch: Ein Colorpicker in DHTML

Farbe ist gut für Websites - weiße Schrift auf weißem Grund ist nicht besonders gut lesbar und vermittelt nicht auf den ersten Blick, was man zu vermitteln wünscht. Noch besser ist einstellbare Farbe, denn persönliche Vorlieben wie rote Schrift auf tiefblauem Grund sollten dort bleiben, wo sie hingehören: Auf dem Display des farbenblinden Entwicklers, der sowas toll findet. Allgemein geht der Trend ja zur freien Konfigurierbarkeit von allem Möglichen, und da ich Farbe für möglich halte, sollte man auch diese konfigurieren können. Verzeiht meine sprachliche Verwirrung an diesem Tag, ich bin irgendwie mental nur teilweise kohärent.

Auch teilweise kohärent kann ich aber gerade noch so den Link zu einem recht netten AJAX-Colorpicker namens “ColorJack” mit hübsch freier Lizenz ausbringen, wegen dem ich gerade das Administrationswerkzeug dieses Blogs auf meinen Bildschirm zu bringen beliebte. Sieht hübsch aus, macht genau, was es soll, passt. Sollte man viel öfter verwenden.

Login mit AJAX und ACEGI

Wenn man schon Web 2.0 macht, dann bitte richtig, also komplett mit Venture Capital, einem total gestörten Businessplan und ganz viel Scheuerpulver für’s Web. Das Scheuerpulver wird dabei klassisch verwendet, um so ziemlich alle Aspekte der Oberfläche aufzupolieren - nur beim Login hat der normale Web-2-Bastler meist noch Schiss und verschickt einfach ein klassisches Formular. Igitt, wie 2002 sowas doch ist, das kann man doch nicht machen… Muss man auch nicht. Über Yigg.de habe ich nämlich ein Tutorial für ein AJAX-Login-Form, das auf dem Server mit ACEGI spricht, gefunden, mit dem kriegt man endlich seine ganze Website modern.

Irgendwie hip finde ich übrigens auch diese Zirkularverbloggung, bei der ich Sachen von Yigg hole, sie blogge und sie dann über das Wordpress-Plugin von Yigg in selbige Seite zurückstopfe. Irgendein armer Google-Rechner wird davon bestimmt ähnlich verwirrt wie die Banker, die dachten, sie hätten mit dem Dotcom-Tod die Sache mit den Krediten für hahnebücherne Geschäftsideen hinter sich gelassen. Finde ich irgendwie gut.

Tabellen mit AJAX und XSLT

Ich gebe zu, dass ich als oldschooliger (bitte lesen als: mittlerweile seniler) Ex-HTML-Hacker immer ein ganz komisches Gefühl habe, wenn es um AJAX geht. Die Ergebnisse sehen cool aus, aber tief in meinem Innersten bin ich fest davon überzeugt, dass die Bezeichnung “Teufelszeug” wahrscheinlich sehr zutreffend ist. Als ich heute einen Artikel über die Erzeugung von sortierbaren Tabellen mit AJAX, JavaScript und XSLT gelesen habe, hat sich dann auch erwartungsgemäß ein Druck im Bereich der Großhirnrinde gebildet, der möglicherweise dazu führen könnte, dass mir heute noch der Kopf platzt, sofern ich nicht eine sofortige Druckentlastung durch das codieren einer Website mit Tabellen als maßgeblichem Layoutwerkzeug durchführe. Mit Blind-GIFs natürlich. Und einem “under construction”-Logo. Ich denke, ich werfe gleich mal meinen Editor an und tue das, bevor schlimmeres passiert…

Kostenloser 10-wöchiger AJAX-Onlineworkshop

Ein sauberes Netz dank Scheuermittel! AJAX FTW! Spätestens seit meinen durchaus positiven Erfahrungen bei der Einbindung von Kallistra in Website mit Hilfe dieses AJAX-Krams bin ich von der Technologie ja wirklich angetan, auch wenn ich zugeben muss, dass ich momentan eigentlich nur mit Libs rumspiele, ohne wirklich komplett zu verstehen, wie die Grundlagen funktionieren. OK, im Grunde ist das optional, aber ich bin halt einer von diesen neugierigen Typen… Etwas strukturierte Fortbildung wäre nicht übel.

Eventuell verschaffe ich mir diese Fortbildung ja in Form des kostenlosen Online-Workshops über AJAX, der am 4. August offiziell losgeht und mir von MHenze gemeldet wurde. Falls ich bis dahin nicht schon durch intensive Webrecherche und Ajaxifizierung aller greifbaren Applikationen, die SKYTEC jemals gebaut hat, zum totalen Putzmittelprofi geworden bin. Und falls mich das Thema bis dahin immer noch so interessiert - ich bin ja bekanntlich extrem sprunghaft, was meine Interessen angeht.

Scriptakulöses AJAX

Bisher habe ich es ganz gut geschafft, mich aus dieser ganzen AJAX-Soße herauszuhalten - da ich hauptsächlich Dinge mache, die wahlweise in Word, Excel oder auf dem Server eine Rolle spielen, gab es für mich noch nicht viele eigene Anwendungsfälle. Just gestern ergab es sich aber, dass ich doch mal ran musste bzw. wollte, weil ich “mal eben” was ausprobieren wollte, was ich für “eigentlich ganz easy” gehalten hatte: Ich wollte “nur” die Ausgabe unseres Kallistra-Servlets per AJAX in eine einfache HTML-Seite einbinden. Das ging prinzipiell auch ganz einfach, nur durfte ich dann feststellen, dass man mit “dingsbums.innerHtml = xmlRequest.responseText” zwar ganz viel HTML in die Seite kriegt, dafür aber das Javascript aus der externen Quelle komplett ignoriert ist. Meine zum Thema abgegebenen Kommentare möchte ich hier nicht wiedergeben, um keinen Ärger mit dem Jugendschutz zu provozieren.

Zum Glück stand just in dem Moment, als ich wild fluchend meinen Computer physisch zu misshandeln begann, mein Kollege LHoss im Büro und meinte nur, ich solle doch einfach “Scriptaculous” als AJAX-Helferlein nehmen, das könne sowas. Also gut, ich habe also das Zip gezogen, die Datei “prototypes.js” eingebunden und die folgende Zeile in meine Seite gebastelt:

new Ajax.Updater(’mydiv’, ‘/kallistra/pfadZumServlet’, {evalScripts:true});

Was soll ich sagen… Es tat, wie es sollte! Nach ein paar kurzen Blicken in die Dokumentation zu dieser Klasse hatte ich dann auch meinen Formularversand im Griff und bin jetzt ziemlich glücklich, weil ich in meinem Lebenslauf noch irgendwas von “Experte für Web-2.0-Technologien” schreiben kann… Ausgezeichnet, genau so muss das laufen.