Bessere Weboberflächen mit Ext JavaScript 2.0

Will man Frameworks zur effizienten Softwareentwicklung einsetzen, bewegt man sich immer auf dem schmalen Grad zwischen tolle Idee und produktiver Reife. Allzu leicht lässt sich ein Entwicklungsteam durch vermeidlich fertige – und damit einsetzbare- Softwarekomponenten verleiten und stellt erst während des Projektes gravierende Mängel fest.

Gerade im jungen Markt der Web 2.0-Oberflächen ist die Verführung von Ajax- und JavaScript Bibliotheken ganz besonders groß. Umso mehr freut es uns, dass wir nach zahlreichen Recherchen, Tests und Untersuchungen mit Ext JS mittlerweile eine der für uns geeignetsten Bibliotheken lizenziert haben und bereits für Grossprojekte mit mehreren tausend Usern erfolgreich einsetzen.

Erfahrungen mit Ext JavaScript Library

Bei Ext JS handelt es sich nicht nur um JavaScript-Bibliotheken, sondern auch um komplette UI-Komponenten mit denen Desktop-ähnliche Browseranwendungen (mit bisher nicht gekannter Usability für den Benutzer) erstellt werden können. Mitte Oktober wurde auf dem Blog die Version 2.0 angekündigt und ist bereits als Beta 1 verfügbar.

Interessant ist das WordPress-Theme, welches einer der Chefentwickler von Ext JS als „proof of concept“ erstellt hat. Darin zeigt er die schönen Fähigkeiten von Ext JS und verleiht somit WordPress den ungewohnten Look einer Desktopanwendung. Aber auch die Demos wie z.B. der Desktop sind sehr beeindruckend.

Startet man die Umsetzung einer Seite mit Ext JS, so hat man sehr schnell einen ansprechenden Rahmen für seine Daten geschaffen. Dies liegt an der Vielfalt der Componenten, die von Ext JS mitgeliefert werden. Mit wenigen Zeilen und der Referenz auf seine Daten, kann man bspw. ein Navigationsmenü anzeigen lassen. Auch die Erstellung von Tabellen mit clientseitig sortierbaren Spalten lässt sich relativ einfach realisieren. Im Folgenden ein kurzes Beispiel, wie simpel ein Formular mit Ext JS erzeugt werden kann:

Diese wenigen und übersichtlichen Zeilen liefern das folgende Form Element zurück:

In der täglichen Arbeit hat es sich gezeigt, dass man mit geringem Aufwand die Funktionalität einer auf Ext JS basierten Seite schnell verändern kann. So wird durch das Setzen eines Attributes zum Beispiel das Drag and Drop in einer Baumansicht erlaubt oder verboten (dragable: true oder eben false).

Ein wirklich angenehmes Feature der Ext JS Library ist, dass sie einen Debug Modus beinhaltet, der ein Debuggen in Firefox Manier im Internet Explorer zulässt. Ein riesen Plus bei der Cross Browser Entwicklung von Webseiten.

Dem Entwickler wird mit Ext JS ein gewaltiges Werkzeug zur Erstellung von Rich User Interfaces (RIA) zur Hand gestellt und dem Benutzer können in Zukunft Webapplikationen angeboten werden, die immer mehr an „normale“ Desktopanwendungen erinnern.

Besondere Komponenten von Ext JS

» Layout Component: verschiedene Styles, die das Erscheinungsbild der Webseite steuern (Container-, Box-, Accordion-, Card-, Column-Layouts, etc.)
» Grid Component: skalier-, sortierbare Spalten; Anzeigen oder Ausblenden von Spalten; die gesamte Tabelle skalieren; direktes Editieren von Tabellenzellen mit Indikator, dass eine Zelle verändert wurde
» Dialog Component: Modale Dialoge; Funktionalitäten, wie bei Windows Dialogen
» Tree Control: Ansicht statisch oder datenbasiert; Drag and Drop von Elementen
» Tab Component
» Form Component
» Date Component: Beispiel in der Tabellenspalte „available“
» Paging
» Visual Feedback bei Änderungen (dies kann sich auf den oben genannten Beispielseiten angesehen werden, wenn man bspw. eine Speichern Aktion ausführt)

Lizenzen

Ext JS ist als OpenSource Projekt unter der LGPL 3.0 verfügbar und bietet darüber hinaus verschiedene kommerzielle Lizenzen an. Diese unterscheiden sich hauptsächlich in der verfügbaren Supportqualität durch die Entwickler.

Tutorials

» Einführung in die Ext Ajax Library auf Deutsch von dynamicinternet
» 11 min. Video zum Überblick über Ext JavaScript