jQueryUI10 Sep

Von krisi am 10.09.2009. Es wurde noch kein Kommentar hinterlassen. Du kannst einen Kommentar hinterlassen oder trackbacken.

Nachdem ich in meinem Artikel jQuery und jQueryUI ja bereits auf das grundlegende Design der Javascriptbibliothek eingegangen bin, möchte ich mich in diesem Artikel mehr auf die jQuery-”GUI”, jQueryUI konzentrieren und einige interessante Anwendungsfälle vorstellen, die zeigen sollen, wie man recht simpel sehr ansprechende und zugleich funktionale Bedienelemente in XHTML-Seiten einbauen kann.

Wie jQuery selbst ist jQueryUI hervorragend dokumentiert und es stehen genügend Tutorials zur Verfügung, um sich innerhalb kürzester Zeit in die Bibliothek einarbeiten zu können. Hier ein paar Links zum Projekt:

Nachdem man sich auf der Downloadseite sein persönliches jQueryUI-Paket zusammengeklickt und heruntergeladen hat, das alle gewünschten Funktionen enthält, entpackt man die darin enthaltene jquery-ui-[versionsnummer].custom.min.js und den ordner mit dem angepassten theme (custom-theme) in sein Projektverzeichnis und verlinkt die Dateien im XHTML-Markup:

<link rel="stylesheet" type="text/css" media="screen" src="style/jqueryui/custom-theme/jquery-ui.custom.css" />
<script type="text/javascript" src="js/jquery/jquery-ui.custom.min.js"></script>

Jetzt kann’s eigentlich auch schon losgehn!

Drag&Drop

Gerade im Umgang mit AJAX und Anwendungsoberflächen, die komplett im Browser laufen sollen, sind “anfassbare” Elemente nicht nur ein Hingucker, sondern auch eine enorme Erleichterung im Umgang mit der Software. Nichts ist intuitiver als ein Haufen an Objekten, die man mit einem Mausklick über die Oberfläche ziehen und ablegen kann. jQueryUI bietet dafür u.a. sogenannte “Draggables” und “Droppables”. Ein Draggable ist ein Element, das sich mit der Maus aufnehmen und verschieben lässt. Ein Droppable ist ein Element, das ein Draggable aufnehmen kann, sodass man es exakt positionieren und eine damit verknüpfte Aktion ausführen kann. Wir könnten diese Draggables und Droppables also zB. verwenden, um eine Menge an Elementen unserer Seite (zB. Bilder, die Dateien repräsentieren) mit jeweils einem bestimmten einzelnen Element unserer Seite zu “Verheiraten” (zB. <div>s, die Ordner repräsentieren). Daraus lassen sich interessante Anwendungen bauen. zB. Datei-Browser, Plantafeln, grafische Prohrammieroberflächen, persönilch anpassbare Menüs (siehe Wordpress-Dashboard) usw.

Mit sog. “Sortables” kann man außerdem per Drag&Drop die Reihenfolge von Listenelementen verändern oder auch Elemente von einer Liste in eine andere verschieben. Das kann zB. benutzt werden, um ein Navigationsmenü anzupassen oder Ereignisse, Favoritenlisten, Termine, Widgets usw zu platzieren / sortieren.

Die Umsetzung in Javascript erfolgt wieder auf die von jQuery gewohnt einfache Weise: Wir Suchen zuerst mittels Querystring nach passenden Elementen und wenden dann auf alle Suchergebnisse eine Methode an, die die Elemente in Draggables, Droppables oder Sortables “verwandelt” und übergeben ihr außerdem die Parameter, die Sie auf die Elemente anwenden soll. Also zB. Wo ein Draggable gefangen werden soll (snap), was ein Droppable akzeptieren darf, was nach dem Abwurf auf einem Droppable passieren soll usw.

$(document).ready(function{
    $('div.draggable').draggable({
        snap: 'div.droppable',
        snapMode: 'inner',
        revert: 'invalid'
    });
 
    $('div.droppable').droppable({
        accept: 'div.droppable',
        drop: function{
            ui.droppable.css('background-color','#000000');
        }
    });
});

In der drop Funktion wir in diesem Beispiel nur die Hintergrundfarbe des Draggables geändert. In einer praktischen Anwendung könnte man hier zB über einen AJAX-Request Die neue “Position” des Draggables an einen Server senden.

Das Sortable – Element ist dem Drag&Drop-Verfahren sehr ähnlich. Darum gehe ich hier nicht weiter darauf ein. Ein Blick in die jQueryUI-Dokumentation erklärt die Verwendung sehr anschaulich.

Dialoge

Auch Dialoge lassen sich mit jQueryUI sehr schön gestalten. Folgender Code macht aus dem <div> mit der id ‘Message’ einen jQueryUi – Dialog. dieser lässt sich im Javascript Code jederzeit aktivieren oder verstecken.

$(document).ready(function{
    $('#Message').dialog({
        autoOpen: false
    });
 
    // zum öffnen:
    $('#Message').open();
 
    //zum verstecken:
    $('#Message').close();
});

Mit .open() und .close() lässt sich der Dialog so auch mehrfach verbergen und wieder hervorholen. Ein Dialog lässt sich natürlich auch problemlos in Abhängigkeit vom aufrufenden Kontext mit Inhalten füllen. So kann man beispielsweise ein Dialog-Template ins HTML einbetten, das dann zB durch Klicken auf Seitenelemente und AJAX-Anfragen mit Daten befüllt wird. Auf diese Weise kann man mit wenig Markup und Javascript quasi beliebig viele Detailinformationen bereitstellen. Eingesetzt habe ich dies zB schon bei einer Auftrags-Plantafel mit verschiebbaren Auftragselementen. Erst beim Klick auf einen Auftrag werden über ein AJAX-Request die Detailinformationen dazu vom Server nachgeladen und in einer Dialogbox angezeigt.

Progressbar, Slider, Datepicker

Es macht wirklich Spaß, sich ein bisschen in den Funktionen von jQueryUI umzusehen. mit Slidern und Progressbars lassen sich zB sehr schöne und “greifbare” Schnittstellen zu “analogen” Datenein- und ausgabe verwirklichen. Datepicker sind vollwertige Kalender, die es dem Anwender erleichtern, ein Datum im korrekten Format einzugeben. Für weitere Details zur Anwendung sei wiederholt auf die lobenswert übersichtliche jQueryUI-Dokumentation hingewiesen.

Theming

Sehr schön bei jQueryUI ist auch das Theming umgesetzt. ein zentrales CSS ist für ein einheitliches Design der Benutzeroberflächenelemente zuständig. Besonders hilfreich beim erstellen eigener Themes ist auch der ThemeRoller auf der jQueryUI-Webseite. Mit ihm lässt sich mit wenigen Mausklicks ein komplettes, persönlich angepasstes Gesamtbild der jQueryUI-Elemente erstellen. Ganz ohne tiefergehende CSS-Kenntnisse. Wem selbst das noch zu viel ist, der kann sich eines von vielen vorgefertigten Themes herunterladen.

 

jQueryUI ist also das ideale Werkzeug, um der eigenen Webapplikation mit sehr wenig Aufwand ein professionelles Look & Feel zu verpassen. Ich war selbst überrascht, wie simpel eine praktische und intuitive Bedienoberfläche im Browser funktionieren kann. Mit jQueryUI kommt so richtig Web 2.0 – Atmosphäre in jedes Webprojekt. Vielen Dank an das Team für diese ausgereifte Bibliothek!

Gruß Kristian

© 2009 GlobalIndustry-Project Blog