Mootools für die Massen, Teil 3: Ein Tutorial mit Objekten

Veröffentlicht am 31. Juli 2009

Nachdem wir in den letzten Teilen der Serie die Basics hinter uns gebracht haben, geht es heute um die eigentlichen Bausteine des Mootools-Frameworks: Objekte. Mootools ist objektorientiert und wir schauen uns in diesem Teil der Serie an, wie man diese verwendet. Außerdem exerzieren wir damit ein Tutorial durch, an dessen Ende wir ein Script mit Ajax- und Drag&Drop-Funktionen geschrieben haben werden – in nur 11 Zeilen Mootools-Code.

Mootools und Objekte

So gut wie alles in Mootools ist ein Objekt – Plugins, HTML-Elemente, Ajax-Requests, der JSON-Parser und alles andere. Elemente werden in Mootools mit new erstellt und haben wie ganz normale Javascript-Objekte Eigenschaften und Methoden. Ein Beispiel:

// Wir erstellen ein neues Div mit der Klasse
// "foobar" und ein paar Inline-Styles
var meinDiv = new Element('div', {
    'class': 'foobar',
    'text': 'Das ist ein ganz tolles, neues Div!',
    'styles': {
        'font-weight': 'bold',
        'margin': '1em'
    }
});

// Die "inject()"-Methode des Div-Objekts fügt das
// Element in ein anderes Element ein
var meinAnderesDiv = $('meinAnderesDiv');
meinDiv.inject(meinAnderesDiv);

So läuft es bei Mootools mit allem – auch mit Effekten. Der eine oder andere mag sich an dieses Code-Beispiel aus dem letzten Teil der Artikelserie erinnern:

// Das Element mit der Mootools-Fade-Methode ausblenden
$('foo').fade('out');

Der Fade-Effekt an dieser Stelle hier sieht nicht nach einem Objekt aus, oder? Das ist aber auch nur so, weil die fade()-Methode von HTML-Elementen als eine handliche Abkürzung für das eigentliche Effekte-Objekt ist. Für Effekte wie eine einfache Überblendung ist das Fx.Tween-Objekt zuständig, das in voller Pracht so aussieht:

// Element auswählen
var meinElement = $('meinDiv');

// Effekt-Objekt erstellen
var meinEffekt = new Fx.Tween(meinElement, {
    'duration': 500
});

// Effekt starten!
meinEffekt.start('opacity', 1, 0);

Das ist etwas mehr zu tippen als meinElement.fade(), macht aber auch mehr möglich, denn dem Fx.Tween-Objekt kann man eine Reihe nützlicher Optionen mitgeben. So lässt sich der Effekt fein steuern – im Beispiel wird die Dauer des Ausfadens auf 500ms festgelegt, aber man kann auf diese auch Effekte koppeln, die Framerate festlegen und Events nutzen.

Kurz gesagt: Objekte sind bei Mootools die Bausteine des Frameworks. Für einige Funktionen gibt es Abkürzungen, aber ohne Objekte geht es nicht. Und das ist auch gut so.

Ein etwas komplexeres Beispiel

Gregor hat sich in den Kommentaren zum letzten Teil der Serie ein Code-Beispiel gewünscht, das Drag&Drop verwendet und die Position der durch die Gegend gedragten Elements per Ajax abspeichert. Nichts leichter als das!

Zuerst brauchen wir das Mootools-Plugin für Drag&Drop. Das nennt sich schlicht und ergreifend Drag und ist im More Builder, der Download-Seite für Plugins aus der More-Komponente von Mootools, zu beziehen. Für Ajax brauchen wir nichts weiter, denn das Request-Objekt ist Bestandteil der Core-Komponente. Folgendes HTML soll den Rahmen für unser kleines Tutorial darstellen:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Test</title>
        <style type="text/css">
            body, html { height:100%; width:100%; margin:0; padding:0; }
            #drag { background:#000; color:#FFF; cursor:pointer; width:100px; position:absolute; top:0; left:0; padding:8px; }
        </style>
        <script type="text/javascript" src="mootools-1.2.3-core-yc.js"></script>
        <script type="text/javascript" src="mootools-1.2.3.1-more.js"></script>
        <script type="text/javascript">
            window.addEvent('domready', function(){
                // Hier kommt unser Code hin
            });
        </script>
    </head>
    <body>
        <div id="drag">Zieh mich!</div>
    </body>
</html>

Als nächstes erstellen wir das Objekt für die Drag-Funktion. Zusätzliche Optionen sind erst mal nicht nötig, also erstellen wir einfach ein Drag für das Div mit der ID drag.

var tutorialDrag = new Drag('drag');

Was man hier schön sieht, ist dass Drag (wie die meisten Plugins) eine eingebaute Dollar-Funktion hat, d.h. man muss ein HTML-Element, das man an ein Plugin übergeben will, nicht vorher mit $() oder $$() ausgewählt haben. Man kann das machen, kann aber genau so gut einfach die ID als String übergeben.

Nächster Schritt: das Request-Objekt für die Ajax-Funktion.

var tutorialRequest = new Request({
    url: 'save.php'
});

Hier müssen wir die Zieladresse für den Request als Option url mitgeben. Die Datei save.php wird das Speichern der Position des Objekts übernehmen.

Nun müssen wir das Drag- und das Request-Objekt so verzahnen, dass der Request ausgelöst wird, wenn unser Zieh-mich-Div verschoben wurde. Praktischerweise hat Drag ein complete-Event, mit dem wir eine Funktion auslösen können, sobald der Benutzer sein Verschieben abgeschlossen hat. Also bauen wir unser Drag-Objekt entsprechend um:

var tutorialDrag = new Drag('drag', {
    onComplete: function(){
        tutorialRequest.send();
    }
});

Damit rufen wir die send()-Methode des Request-Objekts aus, die die Ajax-Anfrage abschickt. Einziges Problem dabei: Wir haben noch gar keine Daten, die wir speichern könnten. Was wir hierfür brauchen sind die X- und Y-Koordinaten des Drag-Divs, die wir mit der getPosition-Methode abfragen können. Und weil das complete-Event des Drag-Objekts das verschobene Element selbst mitübergibt, können wir es uns recht einfach machen:

var tutorialDrag = new Drag('drag', {
    onComplete:function(el){
        var pos = el.getPosition();
        tutorialRequest.send();
    }
});

Die pos-Variable enthält jetzt ein Objekt mit den X- und Y-Koordinaten unseres Divs:

{
    x: 47,
    y: 175
}

Das naheliegendste wäre, dieses Objekt für die Speicherung in einen JSON-String zu verwandeln, was mit dem JSON-Encoder von Mootools denkbar einfach ist. Das Ergebnis senden wir dann in Form eines Querys mit der send()-Methode des Request-Objekts.

var tutorialDrag = new Drag('drag', {
    onComplete: function(el){
        var pos = el.getPosition();
        tutorialRequest.send('pos=' + JSON.encode(pos));
    }
});

Und damit sind wir eigentlich fertig. Wir haben ein komplettes, JSON verwendendes Drag&Drop-Ajax-Script in 11 Zeilen gebaut:

window.addEvent('domready', function(){
    var tutorialDrag = new Drag('drag', {
        onComplete:function(el){
            var pos = el.getPosition();
            tutorialRequest.send('pos=' + JSON.encode(pos));
        }
    });
    var tutorialRequest = new Request({
        url: 'save.php'
    });
});

Was jetzt noch fehlt ist das PHP zum bearbeiten des Ajax-Requests …

// save.php
if($_POST['pos']){
    if($fp = fopen('position.txt', 'w')){
        fwrite($fp, $_POST['pos']);
        fclose($fp);
    }
}

… und zum Auslesen der Koordinaten beim Laden der Seite:

// Auslesen der Daten in der HTML-Datei
$style = '';
if($fp = fopen('position.txt', 'r')){
    $line = fgets($fp, 100);
    $dimensions = json_decode(stripslashes($line));
    if($dimensions->x && $dimensions->y){
        $style = 'style="top:'.$dimensions->y.'px; left:'.$dimensions->x.'px;"';
    }
    fclose($fp);
}
<div <?php echo $style; ?> id="drag">Zieh mich!</div>

Es funktioniert! Nach jedem Neuladen der Seite ist das Drag-Element wieder an genau der Stelle, wo man es gelassen hat (jedenfalls so lange nicht mehrere Leute gleichzeitig daran herumspielen). Das gesamte Script gibt es auch gezippt zum Download.

Fazit und Ausblick

Dieses kleine Tutorial hat ganz gut zwei Eigenschaften von Mootools demonstriert:

  1. Alles ist ein Objekt
  2. Der Code ist ausgesprochen kompakt

Aber auch das ist nicht die wahre Stärke von Mootools – richtig gut wird es erst, wenn man selbst anfängt Plugins zu schreiben oder bestehende Plugins zu erweitern. Darum soll es dann im nächsten Teil gehen. Wer für diesen Teil 4 Sonderwünsche hat, der möge sie in den Kommentaren hinterlassen.

Mootools für die Massen, Teil 2: Dollars und Events

Veröffentlicht am 27. Juli 2009

Im zweiten Teil der Mootools-Artikelserie heißt es nun: ran an den Code! Mit der Einführung zu den Dollar- und Eventfunktionen geht es vor allem erst mal darum, zu zeigen, dass sich einfache Aufgaben mit Mootools auf einfache Art und Weise lösen lassen. Um die schwergewichtigen Aufgaben, die eigentlich die Paradedisziplin von Mootools sind, wird es erst in späteren Teilen gehen.

Mootools einbinden

Mootools besteht aus zwei Teilen. Core enthält alle Basisfunktionen für die Arbeit mit Dokumenten, für einfache Effekte, Ajax und weitere nützliche Funktionen für den alltäglichen Einsatz, während die More-Komponente spezialisierte Plugins wie einen Formular-Validator, Tooltips und ähnliches enthält. Beide Komponenten kann man von der Mootools-Downloadseite herunterladen. Die Core- und More-Builder erlauben es darüber hinaus, nur die Teile von Core und More herunterzuladen die man für ein bestimmtes Projekt braucht – so kann man einiges an Dateigröße einsparen.

Für Testzwecke ist es am einfachsten, sich einfach Mootools komplett über die Google AJAX Libraries API einzubinden. Einfach die folgenden Codezeile in eine HTML-Datei packen und schon kann es losgehen:

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>

Für eine Hand voll Dollar-Funktionen: $() und $$()

Häufig benutzt man Javascript, um damit irgendwelche HTML-Elemente auf einer Website zu bearbeiten - sei es um sie zu verändern, Daten auszulesen oder gar neu zu erstellen. Um Elemente auszuwählen bietet Mootools grundsätzlich zwei Wege – die Dollar-Funktion und die Doppeldollar-Funktion mit CSS-Selektoren.

Die Dollar-Funktion $() wählt ein Element anhand seiner ID aus. Beispiele:

var foo = $('foo'); // Wählt z.B. <p id="foo"></p> aus
var bar = $('bar'); // Wählt z.B. <span id="bar"></span> aus

Das Praktische hierbei: die Elemente werden nicht nur wie beim aus normalem Javascript bekannten document.getElementById() einfach ausgewählt, sondern sie werden auch gleich mootoolifiziert. Was das bedeutet?

Mootools ist objektorientiert. Alle Objekte haben Methoden, die in der Form von meinObjekt.hilfreicheFunktion() aufgerufen werden. Und die Dollar-Funktion stattet das durch sie gewählte Objekt direkt mit ein paar der Mootools-Methoden aus. Dadurch ist zum Beispiel ohne Umschweife folgendes möglich:

// Das Element mit der Mootools-Fade-Methode ausblenden
$('foo').fade('out');

Einfach, oder? Man beachte, dass der Code für die gleiche Funktion in jQuery fast identisch ist:

// Das Element mit der ID "foo" via jQuery ausblenden
$('#foo').hide('slow');

Soviel zum Thema Mootools macht alles komplizierter. Was im Vergleich zu jQuery auffällt, ist dass die Dollar-Funktion bei jQuery einen CSS-Selektor statt der ID des Elements nimmt. Das ist mit Mootools auch möglich – dafür gibt es die Doppeldollar-Funktion $$(). Auch dort werden die ausgewählten Elemente direkt mootoolifiziert, so dass dort auch das alte Spiel möglich ist:

// Die mit dem CSS-Selektor gewählten Elemente ausblenden
$$('div#foo > table.bar a[rel=foobar]').fade('out');

Mit der Dollar- und Doppeldollar-Funktion kann man auch bereits ausgewählte Objekte mootoolifizieren:

var meineElemente = document.getElementsByTagName('p');
meineElemente.fade('out'); // Funktioniert nicht
$$(meineElemente).fade('out'); // Funktioniert!

Neben der Verwendung von CSS-Selektoren ist der zweite Unterschied zwischen der Dollar- und der Doppeldollar-Funktion, dass $() immer exakt ein Element zurückgibt (oder null, falls kein Element gefunden wurde), $$() hingegen immer ein Array (genau genommen kein Array, aber etwas ganz ähnliches). Dieses Array ist denn entweder leer oder enthält ein oder mehrere Objekte – je nachdem, was gefunden wurde.

Mit den via $() und $$() ausgewählten Elementen kann man nun allerlei lustige Sachen anstellen – Zum Beispiel könnte man sie mit Events versehen.

Events

Der vereinfachte Umgang mit Events ist ein typisches Kernfeature von modernen Javascript-Frameworks. Als Beispiel nehmen wir einmal an, wir hätten einen Button und wollten dafür sorgen, dass bei einem Klick darauf ein Alert-Fenster aufpoppt. Unserer bunten Browserlandschaft ist zu verdanken, dass der Code dafür in normalem Javascript so aussähe:

var button = document.getElementById('button');
var foobar = function(){
    alert('Foobar!');
}
if(button.addEventListener) {
    button.addEventListener("click", foobar, false);
} else if (button.attachEvent) {
    button.attachEvent("onclick", foobar);
} else {
    button.onlick = foobar;
}

Es gibt also satte drei Wege, eine Funktion an ein Ereignis (hier den Klick auf einen Button) zu binden: die richtige Methode, die microsoft'sche Methode und die funktionierende Methode. Da ist es begrüßenswert, dass Mootools diesen Prozess wie folgt vereinfacht:

$('button').addEvent('click', function(){
    alert('Foobar!');
});

Mann nimmt einfach das Ziel-Element, wendet die addEvent-Methode an, gibt ihr die Art des Events (hier einen Klick) und die auszuführende Funktion mit – fertig! Wenn man mehrere Events an ein Objekt binden möchte ist das auch denkbar einfach:

$('button').addEvents({
    'mouseover': function() {
        alert('Mouseover!');
    },
    'mouseout': function() {
        alert('Mouseout!');
    },
    'click': function() {
        alert('Angeklickt!');
    }
});

Die addEvents-Methode nimmt statt einem Event mit einer Funktion ein ganzes Objekt an, in dem mehrere Events notiert sind, und bindet Sie an das betroffene Element.

Neben den üblichen Verdächtigen unter den Events (click, mouseover usw.) hat Mootools noch zwei Extras an Bord. Erstens kann man sich bei Bedarf komplett neue, eigene Events basteln, zweitens gibt es das Domready-Event. Dieses wird ausgelöst, sobald das HTML-Dokument soweit geladen ist, dass es modifziert werden kann – anders als das altbekannte onload-Event, das erst ausgelöst wird, wenn das Dokument inklusive sämtlicher Ressourcen (Stylesheets, Bilder usw.) geladen ist. Und auf all das will man normalerweise nicht warten. Den Unterschied zwischen Domready und Onload zeigt diese Demo recht anschaulich.

Lange Rede, kurzer Sinn: in den allermeisten Fällen möchte man seinen Mootools-Code in einem Domready-Event platzieren:

window.addEvent('domready', function() {
    // Hier kommt der eigentliche Code hin
}

Wenn man das nicht macht, läuft man Gefahr, dass das Javascript ausgeführt wird, bevor das dazugehörige Dokument fertig geladen ist und in Folge dessen jeder Versuch, mit mit der Dollar-Funktion ein Element auszuwählen, mit null endet.

Ausblick auf Teil 3: Objekte und Effekte

Der geübte jQuery-Nutzer wird sich spätentens jetzt nach dem Sinn dieser Artikelserie fragen. Schließlich sind all diese Funktionen so oder ähnlich auch mit jQuery (oder jedem anderen, guten Javascript-Framework) zu haben, wozu also Mootools? Nur die Ruhe: dieser Teil der Serie hat lediglich demonstriert, dass einfache Dinge mit Mootools einfach zu machen sind. Die wahre Stärke von Mootools kommt aber erst zum Vorschein, wenn die zu bewältigenden Aufgaben komplexer werden.

Und komplexer wird es werden. Im nächsten Teil werden wir uns erst mal die auch noch relativ un-unüblichen Objekte und Effekte zur Brust nehmen, bevor wir uns später dem Umgang mit Klassen widmen. Also dranbleiben! Und wie immer gilt: Wer Sonderwünsche hat, der möge sie tunlichst anmelden!

Mootools für die Massen, Teil 1: Mootools im Überblick

Veröffentlicht am 23. Juli 2009

Manchmal glaube ich, wenn ich so durch den Feedreader blättere, dass jQuery kurz davor steht, ein Synonym für Javascript-Framework zu werden. Das ist ein bisschen schade – alle Welt scheint nur jQuery zu benutzen, dabei gibt es doch viele andere, tolle Javascript-Frameworks, die ähnliches leisten. Eins davon ist Mootools, für das ich ja schon etwas länger unorganisiert Propaganda verbreite. Diese Artikelserie soll eine etwas umfangreichere Abhandlung über Mootools werden, die auch für Otto Normaljavascriptuser zugänglich sein soll.

In diesem ersten Teil soll es darum gehen, erst mal Sinn und Zweck eines Javascript-Frameworks zu erklären und einen kurzen Überblick über die Geschichte und Vorzüge von Mootools zu geben.

Was ist Mootools?

Mootools (offizielle Schreibweise: MooTools) ist das, was gemeinhin unter einem Javascript-Framework versteht: eine Sammlung von hilfreichen Funktionen, die die Arbeit mit Javascript erleichtern. Javascript schleppt bekanntlich ein paar Designfehler mit sich herum, leidet unter dem DOM und diversen Extrawürsten, die die verschiedenen Browser sich braten. Aus Ajax-Tutorials im Hallo-Welt-Stil kennt man komplizierte Konstruktionen wie diese:

// Request-Objekt für Ajax erstellen
if (window.XMLHttpRequest) {
    var request = new XMLHttpRequest(); // Richtige Browser
} else if (window.ActiveXObject) {
    try{
        var request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
    } catch(e) {
        try {
            var request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
        } catch (e) {}
    }
}

Mootools und andere Javascript-Frameworks wie jQuery vereinfachen die Arbeit mit Javascript, indem sie Funktionen zur Verfügung stellen, die Browser-Eigenheiten oder komplexe Operationen intern regeln und dem Webworker so Arbeit abnehmen. Die obrige Erstellung eines Request-Objekts für Ajax sieht beispielsweise bei Mootools so aus:

var request = new Request ();

Damit arbeitet es sich dann schon angenehmer. Ganz ähnliche Funktionen gibt es für Animationen, das Erstellen oder Verändern neuer Elemente, den Umgang mit JSON, für Cookies und viel mehr.

Die Geschichte von Mootools

Die Anfänge von Mootools liegen in einem reinen Effekt-Plugin namens moo.fx für das Framework Prototype. Der Autor, Valerio Proietti, merkte bald, dass Prototype zwar ganz nett war, aber nicht alles konnte oder so machte, wie er es Valerio gern gehabt hätte. Die logische Konsequenz war die Entstehung eines eignen Framewrks unter dem Namen Mootools.

Mootools steht angeblich für My Object Oriented Tools aber da der Autor auch die Website mad4milk betreibt, darf man zumindest in Betracht ziehen, dass Valerio einfach ein großer Fan von Kühen ist. Die aktuelle Ausgabe von Mootools ist die Version 1.2.3, die am 19. Juni dieses Jahres erschien.

Taugt Mootools für den Fronteinsatz?

Diese Liste von gewichtigen Seiten, die allesamt Mootools einsetzen, dürfte diese Frage hinreichend beantworten:

Diese Liste ist nur eine Auswahl – weitere Motools-Seiten sammelt das Mootools-Team auf Github. Man sieht jedenfalls, dass wir es hier also nicht mit irgendeiner esoterischen Hacker-Spezialität zu tun haben, sondern mit einem kompletten, ausgereiften Framework.

Was unterscheidet Mootools von jQuery anderen Frameworks?

Der Funktionsumfang ist bei allen modernen Javascript-Frameworks so gut wie identisch; man kann mit CSS-Selektoren Elemente auswählen, man kann sie manipulieren, man kann Ajax-Requests absetzen und so weiter. Der Unterschied liegt letzten Endes immer im „Wie“ und nicht im „Was“. Und bei Mootools hat das „wie“ den Namen objektorientierte Programmierung.

Kernkonzept von Mootools ist ein Vererbungssystem, das in etwa dem entspricht, was man aus der objektorientierten Programmierung in anderen Sprachen kennt. Das erlaubt es, das Framework einfach zu erweitern oder zu verändern sowie wiederverwertbare und flexible Funktionen zu schreiben. Wenn man das Mootools-Prinzip erst einmal verinnerlicht hat, wird man feststellen, dass man sehr viel von dem, was man tagtäglich so programmiert, wiederverwerten kann (und wird). Mehr dazu in Teil 3 der Serie.

Andererseits ist es mit Mootools auch möglich, einfache Dinge auf einfache Art und Weise zu regeln. Man kann zwar alles in Klassen kapseln (und sollte das in aller Regel auch tun) aber wenn man nur schnell eine Kleinigkeit machen möchte, ist das nicht kompliziert. Ein paar Elemente auswählen und ausblenden? Kein Problem:

$$('div.foobar').fade('out');

Die einfache Seite von Mootools werden wir in Teil 2 der Serie beleuchten. Festzuhalten ist aber für den Moment: mit Mootools hat man es bei Kleinigkeiten leicht und wenn mal dickere Bretter gebohrt werden müssen, bietet es alle Funktionen, um das Dickbrettbohren effizent, übersichtlich, wiederverwertbar und modular zu machen. Somit ist es gerade für die Vielschreiber unter den Javascriptern von Interesse.

Ausblick auf Teil 2 und 3: Ran an den Code

In Teil 2 werden wir uns ein wenig mit der oben angesprochenen einfachen Seite von Mootools befassen – also ein paar Demos anschauen, ein bisschen Hallo-Welt-artigen Code basteln und generell erst mal feststellen, dass auf der einfachsten Ebene Mootools keine schwarze Magie ist. In Teil 3 nehmen wir uns dann das mächtige Class-Objekt zu Brust und werden feststellen, was Mootools wirklich stark macht.

Wie schon bei der Artikelserie über Linux habe ich zwar einen Plan für die kommenden Teile, aber bin natürlich für Feedback offen. Falls sich also jemand etwas Spezielles wünschen möchte, nur raus damit!

MODx Revolution - Was ist neu?

Veröffentlicht am 17. Juli 2009

Das MODx-Logo

MODx hat gestern die zweite Beta seiner Version 2.0 herausgebracht. Die neue Version, MODx Revolution genannt, ist ein kompletter Rewrite des alten Systems und mit Eintritt in die Beta-Phase wurde der Feature Lockdown erklärt – das heißt, dass alle Funktionen soweit sind, dass nur noch Bugs ausgemerzt werden müssen. Ein guter Anlass, die Neuheiten beim besten CMS der Welt einmal genauer zu beleuchten.

Neues Framework

Das Basis-Framework wurde für MODx Revolution komplett neu geschrieben. Es ist jetzt ein komplett objektorientiert programmiert MVC-Framework und verwendet die ORM-Bibliothek OpenExpedio. Komponenten wie Snippets oder Module werden in Revolution als sogenannten Transport Packages zusammengefasst (einfache Zip-Dateien), die über einen Paketmanager im Backend installiert werden können.

Der MODx-Paketmanager

Neuer Parser

Im neuen Parser wurden die verschiedenen alten Content Tags vereinheitlicht:

Content Tags Alt Neu
Template-Variablen [*templatevar*]
Chunks {{chunk }}
Snippets
Platzhalter [+platzhalter+]
Link [~link~]
System-Einstellung [(einstellung)]

Sehr schön ist, dass man Chunks jetzt genau wie Snippets mit Parametern füttern kann. Mit ersetzt man im Chunk Foo den Platzhalter durch Blubb. Dazu brauchte man früher immer Snippets. Beim Upgrade von einem alten MODx auf Revolution werden die alten Content-Tags in Templates usw. automatisch in das neue Format gebracht.

Außerdem gibt es neuerdings auch Property Sets für Ressourcen. Das sind zentral zusammengestellte Sammlungen von Parametern, die man seinen Snippets und Chunks mitgeben kann, was es vereinfacht einheitliche Aufrufe dieser Ressourcen zu erstellen.

Neues Backend

Der ExtJS 3.0 verwendende Admin-Bereich sieht zwar so aus, als bestünde in der Darstellung noch ein gewisses Optimierungspotenzial, überzeugt aber schon mal durch einen erheblich verbesserten Workflow.

Der Manager von MODx-Revolution

Hauptverantwortlich dafür sind die Quick Updates, also die Mögklichkeit, alle Arten von Inhalten zu erstellen und zu bearbeiten, während man eigentlich gerade an einer anderen Ressource arbeitet. Man hat gerade eine Seite geschrieben, und möchte dann einen Chunk einfügen der noch gar nicht existiert? Kein Problem!

Quick Update in Aktion

Seit der Beta 2 ist es außerdem möglich, Ressourcen per Drag & Drop in andere Ressourcen einzufügen, also muss man sich die neuen Content Tags eigentlich gar nicht merken.

Drag & Drop im MODx-Backend

Das dürfte besonders die technisch weniger beschlagene Nutzer des Backends eine große Erleichterung sein.

Fazit

Mir gefällt was ich sehe. Trotz technischer Aufrüstung bleibt man den angestammten Prinzipien, nach denen der Nutzer und nicht das CMS die Regeln aufstellt, treu – so wünscht man sich eine neue Version. Natürlich ist auch die aktuelle Beta 2 immer noch spürbar eine Beta, aber es ist schon abzusehen, dass MODx Revolution eine feine Sache werden wird.