LivePipe: Javascript Controls für Prototype

Wie kommt es, dass ich noch nie von LivePipe gehört habe? Ich muss eindeutig wieder ein bißchen mehr Developer Blogs lesen. LivePipe, das sind Controls die auf Prototype basieren und dem “unobtrousive Javascript” Prinzip folgen. Das bedeutet:

  • Besucher, die kein JavaScript aktiviert haben können die Webseite trotzdem nutzen
  • Suchmaschinen können die Inhalte problemlos indizieren

Ich war auf der Suche nach einer einfachen Lösung um Inhalte in CSS Tabs per Javascript anzuzeigen.Dadurch bin ich auf die Komponentensammlung gestoßen. Darunter befinden sich sehr nützliche Controls von denen ich mittlerweile mehrere im Einsatz habe:

CSS Tabs


Der Klassiker: Einfach zu gestaltende CSS-Tabs um zwischen Inhalten umzuschalten. Mittlerweile gibt es schon mehrere Ansätze, auch auf Basis von Prototype. Die Tabs lohnen sich daher nur, wenn man weitere LivePipe Controls einsetzen möchte.

Javascript Windows


Einfache und leicht anpassbare JavaScript Overlay-Fenster, u.a. Hoverboxen und Tooltips. Es lassen sich auch verschiebbbarre Fenster oder Modalfenster (der Rest der Seite wird ausgegraut) erzeugen.

Javascript Scrollbars


Eine meiner Lieblingscontrols von LivePipe. Wenn man nur eine begrenzte Fläche zur Verfügung hat und nicht weiß, ob der Inhalt vielleicht darüber hinaus gehen könnte sind die JavaScript Scrollbars genau richtig. Nicht so hässlich wie die Standard-Scrollbars aber trotzdem voll funktionsfähig. Super…

Markdown Texteditor


Die Markdown Syntax ist eine einfache Möglichkeit um seinen Benutzern die Eingabe von formatierten Texten zu ermöglichen und daraus HTML zu generieren. Der Markdown Editor unterstütz die Formatierungsregeln und bietet eine automatische JavaScript Vorschau.

Javascript Rating Widget


Einfaches Widget um Bewertungen anzuzeigen und dem Benutzer die Möglichkeit zu geben per Ajax ein Rating abzugeben. Die mitgelieferten Standardgrafiken überzeugen mich nicht wirklich, ich bleibe lieber bei den bekannten Sternchen. Aber das Widget ist sehr einfach anzupassen und funktioniert tadellos.

Fortschrittsbalken



Ajax Indikatoren zeigen bekanntlich an, dass gerade Daten übertragen werden. Wie lange der Vorgang noch dauert lässt sich für den Besucher daraus nicht ableiten – dafür ist die ProgressBar genau richtig.

Gerade bei Dateiuploads oder Stapelverarbeitung ein sinnvolles Widget

Kontextmenü



In komplexen Webanwendungen vielleicht sinnvoll – da Standardbesucher aber im Web nicht mit einem angepassten Kontextmenü rechnen, sollte man Funktionen nicht ausschließlich über ein Kontextmenü zur Verfügung stellen

Erweiterte Combobox (“Select Multiple”)


Wenn es darum geht, mehrere Elemente auszuwählen hat man als Entwickler folgende Möglichkeiten: Man erstellt eine mehrzeilige Selectbox in welcher der Benutzer mit Strg + Click mehrere Einträge auswählen kann. Das überfordert aber viele Anwender. Eine andere Möglichkeit ist es, jede Auswahlmöglichkeit als Checkbox aufzuführen. Das wird aber schnell unübersichtlich – Select Multiple geht ist eine weitere, benutzerfreundliche Alternative.


Weitere Bestandteile von LivePipe sind Bibliotheken mit denen die Behandlung von Cookies, Events und Hotkeys extrem vereinfacht werden.

Die Online-Dokumentation von LivePipe ist schon sehr hilfreich auch wenn sie noch einige Lücken hat. Das Framework ist meiner Meinung nach ausgereift und bereit für den produktiven Einsatz. Allerdings sollte man nicht vergessen die JavaScript Dateien zu komprimieren (unnötige Zeichen entfernen) und kombinieren (mehrere Dateien zu einer einzigen zusammenfassen) um das Laden der Seite zu beschleunigen… bei mehreren eingesetzten Widgets kommen sonst schnell recht viele HTTP-Requests zusammen.