Anzeige
Anzeige
UX & Design
Artikel merken

Wie Grid Elements 2.0 die Backend-Verwaltung verbessert: TYPO3 besser im Griff

Inhalte im Backend anhand von Strukturen bearbeiten zu können, die sich möglichst nah an der Frontend-Ausgabe orientieren – dies ist ein vielfach geäußerter Wunsch in der TYPO3-Community. Die Extension Grid Elements macht dies möglich, kürzlich ist Version 2.0 erschienen.

6 Min. Lesezeit
Anzeige
Anzeige

Seit jeher besteht seitens der Nutzer von TYPO3 der Wunsch, bei der Bearbeitung der Inhalte im Backend Strukturen nutzen zu können, die sich so weit wie möglich an der späteren Frontend-Ausgabe orientieren. Dabei sollte die Ansicht über das einfache Gruppieren von mehrspaltigen Inhalten hinaus auch komplexere Strukturen darstellen können. Ein erstes Konzept hierzu lieferte die Extension TemplaVoila. Sie nutzt zur Speicherung der Elemente per Komma separierte Daten innerhalb vordefinierter XML-Strukturen. Das führt insbesondere bei größeren Datenmengen zu Problemen. Daher gab es bereits Ende 2009 erste Ideen für ein Lösungskonzept: Zur Speicherung griff dieses auf normalisierte Daten zurück und passt lediglich die Darstellung im Backend entsprechend an. Eine erste Umsetzung des Konzepts folgte in Form der so genannten
Backend-Layouts, die seit TYPO3 4.5 Bestandteil des Page-Moduls sind.
Einzelne Inhaltsspalten lassen sich so bereits strukturiert anordnen und
mit Elementen füllen.

Grid Elements 2.0: Das Listen-Modul zeigt nun auch verschachtelte Grid-Strukturen an. So lässt sich komfortabler und übersichtlicher arbeiten.
Grid Elements 2.0: Das Listen-Modul zeigt nun auch verschachtelte Grid-Strukturen an. So lässt sich komfortabler und übersichtlicher arbeiten.

IRRE ist die Lösung

Anzeige
Anzeige

Eine vollständige Lösung des Problems setzt jedoch voraus, dass man
Inhaltselemente selbst ebenfalls strukturgebend nutzt – und dass sie
ihrerseits weitere Inhaltselemente aufnehmen können. Dazu gab es
verschiedene Ansätze. Aber sie lieferten weder die Flexibilität von
Flexible Content Elements (FCEs), noch eine dem Page-Modul
nachempfundene Darstellung der verschachtelten Inhalte. Nachdem die TYPO3 Association die Weiterentwicklung der Backend-Layouts
forderte, ergab sich 2011 mehr oder weniger zufällig ein passendes
Projekt. Die Deutsche Telekom AG war im Begriff, das interne
Informationssystem WINS von TYPO3 4.3 auf 4.5 upzugraden und
plante in diesem Zusammenhang den Ersatz von TemplaVoila.
Glücklicherweise ließ sich die Projektleitung überzeugen, die Lösung von
Anfang an zu veröffentlichen und gemeinsam mit der TYPO3-Community zu
entwickeln.

Die Grundlage für die Bearbeitung verschachtelter Inhaltselemente existierte schon seit TYPO3 4.1. Das WINS-Projekt machte davon auch bereits ausgiebig Gebrauch. Mit dem so genannten Inline Relational Record Editing (kurz IRRE) lieferte Oliver Hader damals ein Konzept, auf dem nun auch Grid Elements aufsetzt. Kurze Zeit später stand Grid Elements 0.1.0 im TER zur Verfügung und ist seitdem in verschiedenen Versionen über 3.500 mal heruntergeladen worden.

Anzeige
Anzeige
Infobox: Wozu normalisierte Relationen?
Im Gegensatz zu kommaseparierten Listen in einer XML-Struktur gibt es bei der Nutzung normalisierter Relationen eine Zuordnung von Kind-Elementen und Elternteilen. Dazu nutzt das Kind-Element Informationen über den Container, die Spalte des Containers und seine Sortierposition in der Spalte und legt diese in einzelnen Datenbankfeldern ab.

Auch komplexere Strukturen lassen sich so mit wenigen Datenbank-Abfragen ermitteln. Dies macht sich vor allem bei der Ausgabe, aber auch bei der Bereinigung verschachtelter Inhalte bemerkbar. Die Datenhaltung wird sauberer und der Zugriff weitaus performanter. Je größer die Datenmenge ist, desto größer ist dieser Vorteil.

Mehr Komfort und Performance

Die Extension Grid Elements soll TemplaVoila nicht ersetzen. Daher kann man HTML-Templates etwa auch nicht direkt in Strukturen mappen. Vielmehr steht im Vordergrund, die tägliche Arbeit mit dem TYPO3-Backend zu verbessern. Gleichzeitig soll die Struktur aus Containern und Kind-Elementen für Administratoren einfacher zu warten und für die Frontend-Ausgabe schneller abzufragen sein.

Anzeige
Anzeige

Grid Elements bietet daher nicht nur die Möglichkeit, Inhaltselemente ebenso strukturiert darzustellen, wie dies mit Seiten und Backend-Layouts möglich ist. Die Extension liefert in der aktuellen Version zahlreiche zusätzliche Funktionen, die die Arbeit mit dem Backend beschleunigen und erleichtern. Vor allem die Drag-and-Drop-Funktionen sind sehr nützlich. Mit ihnen kann man Elemente nicht nur verschieben oder kopieren (gedrückte STRG-Taste). Man kann auch neue Elemente über den so genannten Drag-in-Wizard schnell erzeugen. Für einzelne Spalten kann man bereits beim Anlegen des Layouts im Grid-Wizard bestimmen, welche Inhaltselemente darin erlaubt sind – was übrigens auch beim Einsatz der Drag-and-Drop-Funktionen berücksichtigt wird.

Außerdem gibt es die von TemplaVoila bekannten Referenzen. Jedoch geht Grid Elements hier noch einen Schritt weiter und ermöglicht auch Referenzen auf komplette Seiten. Inhalte lassen sich aus der Zwischenablage als Kopie oder Referenz einfügen. Zusätzlich erspart eine neue Funktion den Umweg über die Zwischenablage, indem man sich direkt Kopien von Inhaltselementen anderer Seiten holt. Beim Einsatz von Grid Elements gibt es so genannte „Nicht benutzte Elemente“. Dabei handelt es sich um Elemente, deren bisherige Spalten – etwa aufgrund einer Layout-Änderung des Containers – nicht mehr zur Verfügung stehen. Sie liegen in einer virtuellen Spalte, sodass sie sich später mit einer einzigen Datenbankabfrage löschen lassen.

Anzeige
Anzeige
Grid Elements 2.0: Neue Elemente können mit dem Drag-in-Wizard direkt in das Seitenmodul gezogen werden.
Grid Elements 2.0: Neue Elemente können mit dem Drag-in-Wizard direkt in das Seitenmodul gezogen werden.

Für die Konfiguration einzelner Grid-Elemente gibt es zudem ein Flexform-Feld. Darin lassen sich wie auch bei anderen Extensions mit Hilfe von XML Formularfelder erzeugen, die man während der Bearbeitung eines Grid-Elements nutzten kann. Die Relationen zwischen Grid-Container und Kind-Elementen erfolgen dennoch normalisiert in der Datenbank. Daher sollte man dieses Feld lediglich für zusätzliche Informationen verwenden. Etwa um einen JavaScript-Effekt per Checkbox aktivieren zu können oder eine eigene CSS-Klasse zuzuweisen. Das Feld kann aber theoretisch auch klassische FCE-XML-Strukturen aufnehmen, um eigene Backend-Formulare zu generieren.

Ein Maximum an Flexibilität möglich

Die Ausgabe der Inhalte im Frontend erfolgt auf Basis von TypoScript. Dabei kann sie zusätzlich das klassische HTML-Template oder auch Fluid-Templates berücksichtigen. Für beide Methoden stellt Grid Elements vorab gerenderte Elemente und Spalten zur Verfügung, die sich im Template ansprechen lassen. Jedes Kind-Element enthält zudem die Daten seines Eltern-Elements – und natürlich alle Daten aus eventuell vorhandenen Flexforms. Das vereinfacht eine dynamische Anpassung der Darstellung.

Das mitgelieferte Setup hat nur wenige proprietäre Parameter. Mit ihnen kann man für jedes Layout und dessen Spalten festlegen, wie deren Inhalte gerendert sein sollen. Alles Weitere richtet der Nutzer auf Basis echter TypoScript-Objekte ein. Dabei kommt er auch unter TYPO3 4.x ohne die veraltete pi_base aus.

Anzeige
Anzeige

Grid Elements gibt es aktuell in zwei Varianten. Grid Elements 1.x ist für die TYPO3-Versionen 4.5 bis 4.7 verfügbar [1]. Grid Elements 2.0 [2] ist nur für TYPO3 ab Version 6.0 zu nutzen. Der Grund: Grid Elements greift auf die vom TYPO3-Core angebotenen Hooks zurück. Deren Einbindung hat sich mit der Einführung von Namespaces und anderen Features ab TYPO3 6.0 so verändert, dass das Entwicklerteam zwei separate Entwicklungszweige anbietet.

Open-Source und Crowdfunding

Für die Weiterentwicklung von Grid Elements leistete das Team um Petra und Jo Hasenau auch in Sachen Finanzierung Pionierarbeit: Erstmalig in der TYPO3-Entwicklung wurde per Crowd-Funding ein Budget von 30.000 Euro zusammengetragen, um mit bezahlten Entwicklern arbeiten zu können. Während der dreimonatigen Finanzierungsphase konnten die Sponsoren übrigens auch Features kaufen. Im Unterschied zu bisherigen TYPO3-Projektfinanzierungen ließ sich so sicherstellen, dass bestimmte Features auf jeden Fall umgesetzt wurden. Während eines neuntägigen Code-Sprints und der darauf folgenden Entwicklungsphase lieferten zudem auch viele freiwillige Helfer die Bausteine für die Fertigstellung der neuen Versionen. Die für TYPO3-Versionen bis 4.7 nutzbare Version Grid Elements 1.4 steht nun seit dem 9. März 2013 im TER zum Download bereit, Version 2.0 folgte im Mai.

Fazit

Grid Elements ist damit für alle gut, die Wert auf zusätzlichen Komfort und Geschwindigkeit bei der Arbeit im Backend legen. Wer nach einer Möglichkeit sucht, HTML-Templates wie mit TemplaVoila direkt in passende Strukturen zu mappen, wird enttäuscht. Und wer Extbase bevorzugt, sollte stattdessen lieber zu fluidcontent von Claus Due greifen.

Anzeige
Anzeige

Die Entwicklung der neuen Versionen ist jedoch in jedem Fall ein gutes Beispiel dafür, wie Sponsoren, bezahlte und
freiwillige Entwickler zusammenarbeiten können, um über ein
Open-Source-Projekt ein Produkt im Interesse aller zu verbessern. In den nächsten Monaten ist mit Unterstützung der TYPO3 Association ein weiterer Code-Sprint geplant. Dabei soll Grid Elements vor allem für die Nutzung im Long-Term-Support-Release TYPO3 6.2 fit gemacht werden, das für den kommenden Oktober vorgesehen ist. Zudem sind weitere Extensions auf Basis von Grid Elements 2.0 geplant. Mit ihrer Hilfe können TYPO3-Integratoren dann ohne großen Aufwand ein einfaches Set an Struktur-Elementen anlegen.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Schreib den ersten Kommentar!
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige