Get the MOST

Hin und wieder ist im Rahmen eines Projektes die Anforderung zu bewältigen, dass komplexe Filterausdrücke kombiniert und ausgeführt werden können sollen. Noch relativ einfach lassen sich diverse Operatoren, Feldtypen und damit korrespondierend unterschiedliche Möglichkeiten zur Auswahl oder Eingabe von Werten umsetzen.

Da die Wünsche und Erwartungshaltungen in diesem Bereich jedoch beliebig weit hochgeschraubt werden können, gelangen eigens entwickelte UI-Ansätze recht schnell an ihre Grenzen. Beispielsweise möchte man vielleicht komplette ODER-Blöcke in der Reihenfolge verändern oder invertieren. Oder man möchte mehrere Einträge für einen IN-Filter auswählen können.

Für ein Projekt habe ich kürzlich mehrere DataGrid-Komponenten im Hinblick auf den funktionalen Umfang, die Aktivität der Entwicklung und den Grad der Anpassbarkeit verglichen. Einige Kandidaten in der engeren Auswahl waren unter anderem SlickGrid, DataTables, bs_grid und jQuery Bootgrid. Für mich hat aber Bootstrap Table das Rennen gemacht. Es bietet eine ganze Reihe Extensions, bleibt dabei aber immer nahe an einer responsiven Bootstrap-konformen Darstellung. Vielleicht hilft dieser Tipp ja dem ein oder anderen, der eine ähnliche Funktionalität benötigt.

Normalerweise geht es in diesem Blog nicht um Showcases. Da die Realisierung des im Folgenden vorgestellten Konfigurators jedoch technisch sehr interessant gemacht ist, soll es einmal eine Ausnahme geben.

Auf my-orden.de ist ein Orden Designer verfügbar, mit dem sich individuelle Orden für Karneval, Jubiläen und andere Anlässe konfigurieren lassen. Unter der Haube stecken Zikula, ein Modul auf Basis von ModuleStudio, Bootstrap und eine Menge JavaScript.

Bei unterschiedlichen Orden lassen sich verschiedene Materialoberflächen und Farben auswählen. Diese Varianten werden als Rasterbild angezeigt, so dass man einen Eindruck bekommt, wie das jeweilige Produkt aussieht. Zur weiteren Personalisierung lassen sich Bilder und Texte einfügen und mittels zahlreicher Parameter anpassen. Manche Orden können auch mit einem Anhänger kombiniert werden, der wie ein eigenes Produkt behandelt wird und - je nach Modell - ebenfalls ein Bild enthalten kann.

Dieser Beitrag gibt einen Überblick über aus heutiger Sicht essenzielle Bibliotheken, mit denen das Frontend moderner Websites typischerweise realisiert werden. Diese sind weitgehend in Zikula enthalten, brauchen also nicht mehr dazu installiert zu werden.

Prototype & Script.aculo.us

Prototype ist eine JS-Bibliothek, die sich zum Ziel gesetzt hat, die JavaScript-Entwicklung zu vereinfachen. Script.aculo.us baut auf Prototype auf und bietet zusätzliche Effekte, Funktionen und Animationen. Aus Gründen der Abwärtskompatibilität sind beide Bibliotheken noch in Zikula 1.3.x enthalten, aus heutiger Sicht sind sie allerdings als obsolet zu betrachten. Ab Zikula 1.4.0 sind sie daher nicht mehr im System ver­fügbar, statt dessen wird nun primär auf jQuery gesetzt.

Der Zikula Core ist in zwei neuen Versionen veröffentlicht worden. Während Zikula 1.3.10 kleinere Dinge korrigiert und hinzufügt, wartet 1.4.0 mit einigen neuen Funktionen auf.

Das Zikula-Team hat den dritten Release-Kandidat für den Zikula Core 1.4.0 veröffentlicht. Sofern keine gravierenden Probleme mehr auftreten, wird dieser RC nach Feedback der Community vermutlich zum finalen Release erklärt. Gleichzeitig wurde auch der RC1 von Zikula 1.3.10 freigegeben.

Die Version 1.4 bringt einige neue Technologien und Werkzeuge mit sich. Im Frontend-Bereich werden beispielsweise nun jQuery und Bootstrap per Standard verwendet, Prototype nur noch aus Gründen der Abwärtskompatibilität mitgeführt. Aber auch unter der Haube hat sich sehr viel getan, da 1.4.0 eine Symfony-basierte Modulstruktur einführt, die den sanften Übergang zu Zikula 2.0.0 ermöglicht.

Zikula verwendet ab Version 1.4.0 Bootstrap zur Ausgestaltung der Oberfläche. Natürlich kann man Bootstrap aber auch bereits für 1.3.x einsetzen. Wir haben mittlerweile eine gute Hand voll Themes mit Bootstrap unter 1.3.x erstellt oder umgebaut. Problematisch kann es werden, wenn man JavaScript-Komponenten von Bootstrap einsetzen möchte, gleichzeitig aber noch Prototype von irgendeinem Modul geladen wird.

Die JavaScript-Bestandteile von Bootstrap verwenden als Basis jQuery. Dies ist bereits in Zikula 1.3.x enthalten und kann einfach - auch zusammen mit Prototype - geladen und verwendet werden.

In Zikula 1.3.x sind jQuery und jQuery UI bereits enthalten. Allerdings verwenden viele Module noch Prototype, was dazu führt, dass beide Skripte parallel nebeneinander verwendet werden. Dieser Artikel zeigt auf, welche Konsequenzen dies für die Nutzung mit sich bringt und wie man jetzt schon ohne Probleme mit jQuery arbeiten kann.

Skripte via PageVar laden

Statt mit Pfaden und Dateinamen hantieren zu müssen, können oft benötigte Skripte in Zikula einfach mittels PageVars geladen werden. Um beispielsweise jQuery und jQuery UI in einem Rutsch einzubinden, genügt die folgende Zeile im Template: