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
Bei der Entwicklung an einem aktuellen Projekt stieß ich mit serverseitiger Programmierung via PHP an die Grenzen, als es darum ging, eine Drag&Drop – fähige Plantafel zur Auftragseinteilung zu erstellen. Also musste ich wohl oder übel in den sauren Apfel beißen und mich näher mit Javascript befassen, das ich, warum auch immer, bisher stets gemieden hatte (vielleicht, weil ich mich selbst ständig über Seiten aufrege, bei denen ich nichtmal content präsentiert bekomme, ohne NoScript zu deaktivieren..) .
Jedenfalls begann ich eine immer komplexer werdende Drag&Drop-Funktionalität in JavaScript zu implementieren. Das ging bis zu einem gewissen Grad gut, aber irgendwann verlor ich komplett den Überblick über mein Projekt. Julian machte mich in diesem Zusammenhang dann auf das Javascript-Framework jQuery aufmerksam, von dem ich mangels Interesse an JavaScript vorher noch nie etwas gehört hatte.
Von jQuery war ich sofort begeistert. Eine sauber dokumentierte API, hunderte Plugins verfügbar und das alles in einem gerade mal 56k großen Script. Da draußen im Netz gibt es massig Tutorials und Anwendungsbeispiele für jQuery. Dabei stammt die beste und umfangreichste Hilfe vom jQuery Projekt selbst. Wozu also “yet another” jQuery – Tutorial?
Nun, ich will hier gar keine “Referenz” oder sowas aufbauen, ich möchte nur einfach zeigen, inwiefern jQuery und das dafür entwickelte UserInterface jQueryUI auch kleinste Projekte enorm vereinfachen und vor allem die Optik und Usability gewaltig steigern können. Wer ein “richtiges” Tutorial für jQuery oder eine Referenz für die API sucht, der findet direkt auf den Projektseiten Hilfe:
Grundlagen
Die Einbindung von jQuery gestaltet sich recht einfach. Einfach von der Projektseite die JavaScript Datei herunterladen: http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js (die ‘min’-Version beinhaltet genau die gleichen Funktionalitäten wie die ‘maxi’-Version und lässt sich genau wie diese ansprechen, braucht aber dank eingesparter Kommentare, verkürzter Syntax und Verzicht auf Newlines bzw Einrückungen nur einen Bruchteil an Platz und ist somit auch über langsame Internetzugänge sehr schnell geladen). Die .js Datei landet dann in enem Unterordner unseres Projekts (bei mir zB. “./scripts”) und wird dann im HTML-Body der Seite eingebunden mit:
<script src="./scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
Nun kann man zum “‘rumprobieren” innerhalb eines
<script type="text/javascript"> <!-- #js-code# --> </script>
seine JavaScript-Operationen und jQuery-Blöcke einbauen. Für produktive Anwendungen würde ich aber auf jeen Fall empfehlen, dern JS-Code aus dem Markup herauszunehmen und von einer externen Datei nachzuladen.
Als erstes fällt bei der Arbeit mit jQuery dieses Muster auf:
$(document).ready(function() {
// Anweisungen
});Nanu… ein $ in javascript?? Was hat es damit auf sich? ganz einfach: Das $ steht für das jQuery-Objekt und wird in der jQuery-Bibliothek deklariert. Über dieses Objekt kann man auf sämtliche jQuery Funktionen und Erweiterungen zugreifen.
So .. und wozu jetzt der ganze Spuk? Wie der Name schon sagt, ist jQuery eine sehr mächtige und flexible Bibliothek, die das selektieren von Elementen im DOM (Document Object Model) einer Seite enorm erleichtert. Wer sich schon mal ein bisschen mit javascript befasst hat, der wird vielleicht schon mit den Funktionen gekämpft haben, die Javascript zum selektieren von Objekten verwendet. document.getElementById() und Kollegen lassen grüßen.
Um zu verstehen, wie die jQuery-Syntax funktioniert, muss man vielleicht zunächst einmal betrachten, welches Ziel jQuery verfolgt. Wenn man mit Javascript inhaltliche Elemente einer Seite umformatiert, dann muss man notgedrungen oft Scriptcode ins (x)HTML-Markup mit einbauen, der dort aber rein semantisch nichts verloren hat. jQuery ist, wie CSS für Formatierungsaufgaben, dafür gedacht, den Scriptcode komplett vom Markup zu trennen. So wie man mit css ein sauberes Markup auf verschiedenste Weise darstellen kann ohne es in seiner logischen Struktur verändern zu müssen, kann jQuery quasi “von außen” auf das Markup zugreifen, um ihm interaktive Features hinzuzufügen.
Genau wie CSS muss jQuery dafür aber gezielt bestimmte Elemente im DOM ansprechen können. Und das auch noch möglichst flexibel. Die Entwickler von jQuery haben sich dabei für eine Methode entschieden, die der Syntax von CSS sehr ähnlich ist. So lässt sich mit vorhandenen Kenntnissen und Erfahrung im Umgang mit CSS auch sehr schnell der Einsteg in jQuery meistern, ohne viel Ahnung von Javascript haben zu müssen.
Betrachten wir praktisches ein Beispiel:
$(document).ready(function() {
$('#navi ul li a').click(function() {
//machwas
});
});In Zeile eins benutzen wir das jQuery-Objekt ‘$’ dazu, uns ein neues jQuery-Objekt zurückgeben zu lassen, das sich auf das Javascript-DOM-Element ‘document’ bezieht. Dieses jQuery-Objekt hat eine Funktion ‘ready()’, die die als Parameter übergebene funktion ausführt, sobald der Browser das gesamte DOM geladen hat. Innerhalb des Anweisungsblocks dieser Funktion wiederum beziehen wir uns mit Hilfe des ‘$’-Objekts wieder auf ein Objekt, bzw eine Menge an Objekten, nämlich genau die DOM-Elemente, auf die der jQuery-Selector “#navi ul li a” zutrifft. Hier sieht man auch schon die Ähnlichkeit mit CSS: Der übergebene String weißt jQuery an, innerhalb aller Elemente mit der id ‘navi’ (in gutem Markup genau ein element) nach Elementen vom Typ ‘a’ zu suchen, die unterhalb eines ‘li’ in einem ‘ul’ liegen. Auf Deutsch: Eine Liste mit allen Links innerhalb eines Navigationsmenüs. mit ‘.click()’ rufen wir nun für jedes gefundene Element die Methode click auf, die Als ersten parameter eine Funktion erwartet, die beim Klick auf das Element ausgeführt werden soll. Hier könnte man jetzt z.B. innerhalb des Anweisungsblocks einen AJAX-Request an den Server machen, um Details zu Menüeinträgen zu bekommen und aufpoppen zu lassen.
Sehr schön kann man mit jQuery auch CSS-Eigenschaften manipulieren. Dafür übergibt man der Methode ‘css()’ des jQuery-Objekts entweder ein Parameterpaar aus CSS-Eigenschaft und Wert oder eine Liste an Parametern und Werten:
$('.meineKlasse').css('width', '400px');
//oder
$('.meineKlasse').css({
marginTop : '20px',
marginLeft: '15px',
borderBottom: '1px solid #dfdfdf'
});Wenn man ein “Frischling” in Sachen Javascript ist und sich über diverse Zicken der Skriptsprache und deren fehlerhaften Interpretation in diversen Browsern (muss ich Namen nennen?? 
) ärgert, dann bewahrt einen jQuery vor so manchen schlimmen Stunden der Fehlersuche. Die vielen (übrigens sehr gut dokumentierten) Funktionen und unzählige sog. Plugins machen die Arbeit mit Javascript zum Kinderspiel.
Da ich momentan sehr viel zu tun habe, kann ich diesen Artikel jetzt doch nicht so weit ausführen wie ursprünglich geplant. Daher splitte ich das Thema ainfach ein bisschen auf und veröffentliche von Zeit zu Zeit weitere interessante Aspekte von jQuery und evtl auch einige konkrete Anwendungsbeispiele. Folgendes werde ich dabei mit Sicherheit noch anschneiden:
- erweiterte Selektoren
- jQueryUi — die jQuery-”GUI”
- jQuery und AJAX — einfacher geht’s nicht mehr
- eigene Plugins für jQuery schreiben
- (Anwendungsbeispiel “Kalender”) -> hängt ganz davon ab wie viel Zeit ich hab
Wenn mir noch weitere Einfälle kommen, dann wird die Liste natürlich laufend länger. JQuery ist ein sehr spannendes Thema und die Arbeit damit macht richtig Spaß.
Ich freue mich auf eure Kommentare!
Gruß Kristian
