Assetvorlagen erstellen

Was sind Assets?

Zu den obersten Regeln einer professionellen Internet-Application gehört ein auf allen Seiten gleichförmiges Erscheinungsbild. Man könnte CMS-Seite mit einem sog. Wysiwyg-Editor befüllen, mit dem man Listen, Tabellen, Überschriften usw. in den Inhalt der Seite einfügen kann. Manche Wysiwyg-Editoren erreichen einen Reichtum an Gestaltungsmöglichkeiten, der einer professionellen Textbearbeitungssoftware gleichkommt. Für die Pflege einer Internetapplication sind diese Dinger aber geradezu schädlich bis gefährlich. Angenommen, ich habe 10 Tabellen an verschiedenen Stellen auf meiner Website und ich möchte eine Kleinigkeit am Layout der Tabelle ändern, dann muss ich 10 Tabellen ändern, vielleicht und nicht selten - mehrmals hintereinander. Jeder Internet-Redakteur ist davon nach kürzester Zeit und nachhaltig genervt.
Die professionelle Antwort darauf ist, dass man den Content der Seite in Inhaltselemente = Assets (Überschriften, Texte, Tabellen, Bilder) aufteilt, und im Backend statt einem Wysiwyg-Fenster eine ganze Abfolge von Eingabefenstern anzubieten, die strikt nach Vorlage befüllt werden.
Dadurch kann sich der Redakteur ausschließlich um die Inhalte kümmern, während das Layout ganz und gar in der Hand des Entwicklers liegt.

Diese Elemente können auf der Seite platziert werden, sind von Anfang an definiert und können beliebig auf der Seite gesetzt und vervielfältigt werden. Die häufigsten Assets sind Überschriften, Zwischenüberschriften, Textabsätze und Bilder.

Über den Menüpunkt Inhalte / Assets können die einzelnen Elemente gepflegt werden. Mit einem Klick auf den Plus-Button am Ende der Seite wird ein neues Asset hinzugefügt. Danach öffnet sich ein Dialog, in dem das Asset definiert werden kann.

Jedes Asset hat einen Namen und einen bestimmten Typ, welcher Auswirkungen auf die Felder der Pflege im Backend und auf die jeweilige Ausgabe im Frontend hat. D.h. jeder Typ bietet immer jeweils genau die nötigen Eingabefelder (zum Teil auch mehrere) an.

Assets können per Drag and Drop beliebig verschoben und die Reihenfolge geändert werden.

Fügen Sie nun einige Elemente wie Überschriften, Zwischenüberschriften (einzeilige Texteingabe), Textblöcke (Mehrzeilige Texteingabe) und Bilder hinzu.

Assettypen

Es gibt verschiedene Assettypen, diese können von einfachen Assettypen (Textfeld, Textarea) bishin zu komplexen Assets mit mehreren Eingabefeldern (Bildupload) variieren.

Ein Liste von Assettypen ist unter http://www.redsparkframework.com/Getting-started/Die-eigenen-Seitentypen/Assettypen.htm verfügbar

Assetkonfiguration


Eine Assetkonfigutration wird in einer XML-Struktur angelegt und im Dateisystem des System abgelegt. Die Assetkonfiguration legt die Assetfelder und eine feste Reihenfolge dieser fest. Weiterhin können Vorgaben in der Assetkonfiguration hinterlegt werden (änderbar oder nicht änderbar), die bei der Pflege vorbelegt werden.

Das folgende Beispiel zeigt eine exemplarische XML-Assetkonfiguration mit einer Überschrift, einem Bild und einem Text:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE messages SYSTEM "http://www.redsparkframework.com/dtd/asset_settings.dtd">



<asset_settings>

<asset>

<number>10</number>

<type>text</type>

<name>Ueberschrift</name>

</asset>

<asset>

<number>20</number>

<type>image_extended</type>

<name>Bild</name>

</asset>

<asset>

<number>30</number>

<type>textarea</type>

<name>Text</name>

</asset>

</asset_settings>


Legen Sie eine XML-Datei mit dem Namen assetbeispiel.xml im Ordner \templates\my_template\modules\cms\assets an und füllen Sie diese mit dem oben stehenden Code.

Legen Sie eine neue Seite mit dem Namen "Testseite Assetvorlage" an.

Wechseln Sie auf den Reiter Seitenstruktur. Unter der Dropdownbox Assetvorlage können Sie nun den Wert assetbeispiel auswählen.



Wechseln Sie auf den Reiter Inhalte / Assets. Sie werden festellen, dass Sie nun nicht mehr frei die Assets hinzufügen können, sondern dass die vordefinierten Felder fest eingestellt sind.


Fortgeschrittene Assetkonfiguration

Um CMS-Vorlagen sinnvoll zu gestalten, können noch weitere optionale XML-Eigenschaften verwendet werden:

<number> Mit number wird die unique ID des Assets festgelegt. Wenn Die number-ID zweimal vergeben werden, gibt es einen Konflikt. Es ist sehr zu empfehlen, bei der ID in 10-er Schritten vorzugehen, damit man später die Chance hat, Assets dazwischen Einzufügen. Bei einer CMS-Vorlage mit mehreren anhängenden Seiten im Betrieb kann man die IDs nur noch mit sehr hohem Aufwand ändern.

<type> Mit dem Type gibt man an, welche Art von Asset verwendet werden soll. Es gibt eine ganze Reihe von Standard-Assets die im RedSparkCore enthalten sind. Entwickler können mit relativ geringem Aufwand neue Assets dazu entwickeln - und haben damit beste Möglichkeiten, dem Kunden eine Web-Application auf den Leib zu schneidern.

<description> Der Inhalt von description wird rechts neben dem Eingabefeld angezeigt und unterstützt den Redakteur beim Befüllen der Vorlage. Sinnvoll ist es z.B. eingesetzt, wenn hier die Anforderungen für ein Bild (Größe und Funktion) näher beschrieben werden. Um die Funktion des XML-Dokumentes nicht zu gefährden, sollte der Inhalt des Feldes durch CDATA geschützt werden.

<preset> Mit den Preset-Eigenschaften können Assets anforderungsggemäß vorkonfiguriert werden. Soll z.B. in einem Text-Feld der Ort angegeben werden, über den der Srtikel berichtet, so kann als default Wert Hamburg eingetragen werden, so dass der Redakteur diesen nur noch bei Bedarf ändern muss.
Soll der Wert vom Redakteur gar nicht mehr geändert werden können (wenn es z.B. um eine Bildgröße geht, die immer identisch ist), lässt man einfach das "default_" vor dem Namen des Attributes weg (statt default_width="200" schreibt man width="200"), und der Wert ist somit für alle CMS Seiten mit dieser Vorlage festgelegt. Die Angabe der Presets in der CDATA-Klammer ist semantisch etwas kompliziert, dafür aber stabil :-). Beim nächsten Release wird das verbessert, versprochen.

<hidden> Wenn ein Feld nur sehr selten benötigt wird, kann man die Ansicht des Backends für den Redakteur sehr viel übersichtlicher gestalten, wenn man diese Assets einfach "zuklappt". Ja, wer hätte das gedacht: Man kann Assets auf- und zu- und auf- und zuklappen indem man auf dem Titel des Assets herumklickt. Wenn im hidden-tag true steht, ist das Asset beim laden der Seite im Backend zugklappt.

<order_number> Mit order-number kann man die Reihenfolge der Assets im Backend verändern. Bei der Erstkonfiguration einer Vorlage kann man dieses Tag einfach weglassen. Dann richtet sich die Reihenfolge nach der ID des Assets. Wenn man jedoch im nachhinein die Reihenfolge verändern will, ist dieses Tag sehr nützlich. Auch hier sollt man, wie bei den IDs, in 10-Schritten vorgehen, damit immer genügend Abstand vorhanden ist, um ein Asset zwischen zwei anderen zu positionieren.

 <asset>

<number>10</number>

<type>image_extended</type>

<name><![CDATA[Bild ]]></name>

<description><![CDATA[<b>Größe BxH: 600x400px </b>]]></description>

<preset><![CDATA[<preset border="0" default_width="600" default_height="400" default_align="" />]]></preset>

<hidden>false</hidden>

<order_number>10</order_number>

</asset>


Heißer Tipp: Wer nach der top-bottom-Methode vorgehen will (statt sich die Asset-Vorlage selbst zu schreiben) kann als Vorlage die master.xml aus dem Kickstart verwenden. Hier sind alle Standard-Asset-Typen einmal hintereinander weg aufgelistet. Jetzt kann man die überflüssigen Assets löschen und die restlichen hin und her schieben, bis es passt.

Kuborgh GmbH

Hamburg 040 819 773 770 Köln 0221 276 66 96 info@kuborgh.de www.kuborgh.de

RedSpark Community

RedSpark Community

Community Website
RedSpark Apps

RedSpark Apps

Zur Übersicht
RedSpark Download

RedSpark Basispaket

Zum Download
Key facts