Editor individualisieren
Voraussetzungen
Für dieses Tutorial werden keine weiteren Voraussetzungen als für die vorhergehenden Tutorials benötigt.
Beschreibung
Die dritte Folge zeigt, wie sich die Pflege im onion.net Editor mit wenigen Handgriffen durch sprechende, lokalisierte Bezeichner, zusätzliche, sortierbare Listenansichten und nette Piktogramme verbessern lässt. Dieser Schritt ist für die Funktion unserer Zitatverwaltung zwar nicht zwingend notwendig, der Aufwand lohnt sich jedoch.
Hinweis: Allein durch die Vergabe von Piktogrammen erleichtern Sie die Arbeit für den Redakteur. Es entfällt die Notwendigkeit, jeden Strukturpunkt lesen zu müssen.
Editor individualisieren
Folge 3: Editor individualisieren (video/mpeg)Wir erstellen nun ein Modul, in dem alle unsere Anpassungen vorgenommen werden.
Klicken Sie dazu in der Detailansicht mit rechts auf den „Editor“ und wählen Sie unter „Neu“ das „Modul“. Nennen Sie das Modul „Zitatverwaltung“.
Piktogramme
Im ersten Schritt vergeben wir für unsere Zitatdatentypen einige Piktogramme. Diese werden unter anderem in der Baumansicht des Editors genutzt und erhöhen so die Übersichtlichkeit bei der Arbeit.
Erstellen Sie dazu unterhalb des neu angelegten Moduls „Zitatverwaltung“ ein Dokument vom Typ „Icons“. Nennen Sie es „Icons“.
In das Feld „Schema“ unter Konfiguration/Icon können Sie nun das Schema ziehen, für das Sie Icons vergeben möchten. Wir adressieren nun das Schema der Zitatablage und laden dazu ein kleines und ein großes Piktogramm in das System.
Wechseln Sie in die Schemaverwaltung und ziehen Sie aus der Baumansicht das Schema „quotations/container“ in das Feld „Schema“ Ihres neu angelegten Icons-Dokuments. Vergeben Sie nun ein großes und ein kleines Icon, das Sie über einen Klick auf die jeweilige „Durchsuchen“-Schaltfläche hochladen können.
Tipp: das kleine Icon sollte eine Größe von 20x20 Pixeln haben, das Große 48x48. Falls Sie dieses Tutorial bei der getit GmbH bearbeiten, finden Sie die Grafiken unter X:\Projekte\G\GETIT\getit_Icon-Pool\PNG Format
- quotations/container: Literatureintrag_o.png
- quotations/quotation: Literatureintrag.png
- collections/container: Produktkatalog_o.png
- collections/collection: Produktkatalog.png
Speichern Sie nun das Icon-Dokument. Wenn Sie jetzt die Editor-Ansicht aktualisieren (F5), sehen Sie schon die neu vergebenen Icons; sowohl in der Baumansicht als auch beim Rechtsklick auf das Wurzelelement unter dem Punkt „Neu“.
Wir laden nun passende Piktogramme für die restlichen Datentypen ins System.
Wechseln Sie dazu wieder in das neue Icon-Dokument und wählen Sie in der Detailansicht unten die Funktion „Icon hinzufügen“ aus. Jetzt können Sie Icons für ein weiteres Schema anlegen. Gehen Sie wie oben vor und vergeben Sie Icons für die Schemata „quotations/quotation“, „collections/container“ sowie „collections/collection“. Geben Sie nun das Dokument zurück und aktualisieren Sie die Editor-Ansicht (F5). Unterhalb von „Zitate“ und „Zitatsammlungen“ sehen Sie nun die neu vergebenen Icons.
Objektstrukturfenster
Im nächsten Schritt definieren wir uns ein Objektstrukturfenster. Dieses reißt den Inhalt von Objekten in einer Listenform an und dient der Übersichtlichkeit. Was dabei herauskommen wird, ist eine Listenansicht ähnlich der, die angezeigt wird, wenn das Editor-Modul „Zitatverwaltung“ ausgewählt wird.
Legen Sie dazu unterhalb des Editor-Moduls „Zitatverwaltung“ ein Objekt vom Typ „Objektstrukturfenster“ an. Nennen Sie es auch „Objektstrukturfenster“. Übernehmen Sie dann als Inhalt folgenden Standard-Inhalt.
Um festzulegen, für welches Schema die Listenansicht genutzt werden soll, tragen wir das entsprechende Schema in das Attribut „schemaLocation“ des Elements <listView> ein. In diesem Schritt soll es eine Listensicht für unsere Zitat-Ablage (quotations/container) werden.
Am einfachsten geht das wieder über Drag & Drop: ziehen Sie aus der Schemaverwaltung das Schema quotations/container in das leere Attribut „schemaLocation“.
Als Kindtyp (<childType>) für die Listenansicht sollen die Zitate angezeigt werden. Ziehen Sie das Schema „quotations/quotation“ in das Attribut „schemaLocation“ des <childType>-Elements.
Unsere Listenansicht soll drei Spalten erhalten. Wir wollen den Autor, das Zitat und das Bild tabellarisch darstellen.
Dazu kopieren wir das vorhandene <column>-Element noch zweimal.
Geben Sie bei der ID der jeweiligen Spalte den Namen des Elements aus dem Schema an, das angezeigt werden soll.
Dies sind in unserem Fall „author“, „quote“ und „image“. Ändern Sie auch die Breite (width) der jeweiligen Spalte auf 15%, „*“ und 5%. Geben Sie bei der Spalte „image“ zusätzlich das Attribut align=“center“ ein.
Tipp: Die Angabe „*“ bedeutet, dass diese Spalte den restlichen zur Verfügung stehenden Platz einnimmt.
Nun beschreiben wir, wie sich das Zitat in der Listenansicht repräsentiert.
Dazu benötigen wir auch unter <childType> drei <column>-Elemente.
Im Attribut „refs“ tragen wir die ID der Spalte ein, die oben unter <columns> vergeben wurde. Im Attribut „select“ wird nun der X-Path-Ausdruck für das auszugebende Feld eingetragen. Im Falle von „author“ und „quote“ ist es „quotation/author“ bzw. „quotation/quote“, bei „image“ ist es der folgende Ausdruck:
onion:choose(quotation/image, onion:createIcon($onion:id, quotation/image, 48, 48), '')
Dieser Aufruf erzeugt für die Darstellung eine neue Grafik in der Größe 48x48 Pixel. Insgesamt sieht die Konfiguration nun wie folgt aus:
Aktualisieren Sie nun den Editor und klicken Sie links auf Zitate. Sie sehen nun rechts über der bekannten Detailansicht die soeben erstellte Listenansicht.
Tipp: Jede Listenansicht lässt sich benutzerdefiniert sortieren. Dafür genügt ein Klick auf die Überschrift der jeweiligen Spalte.
Lokalisieren von Bezeichnern
Wir geben nun unseren Datentypen sprechende Namen.
Für die Lokalisierung wird in unserem Editor-Modul „Zitatverwaltung“ ein neues Objekt „Ressourcen“ benötigt. In diesem werden wiederum Ressourcen gespeichert, die jeweils eine Sprache beinhalten.
Legen Sie in dem Editor-Modul „Zitatverwaltung“ ein Objekt vom Typ „Ressourcen“ an und nennen es auch „Ressourcen“. Darin legen Sie ein weiteres Objekt „Ressourcen“ an und nennen es „de“. Es soll die deutschsprachigen Einträge beinhalten.
In das Objekt „de“ übernehmen Sie folgenden Standard-Eintrag:
Bezeichner für Schemata
Zunächst wollen wir unseren Schemata sprechende Namen geben. Dazu muss der Abschnitt <type name=“SchemaTypeNames“> bearbeitet werden.
Für jedes Schema legen wir darin ein item-Element an. Dieses Element hat ein Attribut „name“, das die Adresse des Schemas beinhaltet. Das Name-Attribut können Sie aus der Schemaverwaltung per Drag & Drop befüllen. Nehmen Sie alle vier von uns angelegten Wurzelelemente in jeweils ein item-Element. Als Inhalt des jeweiligen Item-Elements nehmen wir den deutschen Bezeichner „Zitate“, „Zitat“, „Zitatsammlungen“, „Zitatsammlung“.
Nach dem Speichern können Sie die Änderungen direkt überprüfen. Klicken Sie mit rechts auf das Wurzelelement und unter „Neu“ erscheinen schon die eben vergebenen Namen „Zitatsammlungen“ und „Zitate“. Unter „Zitate“ können Sie über „Neu“ ein „Zitat“ anlegen; unter den „Zitatsammlungen“ eine „Zitatsammlung“.
Bezeichner für Listenansicht
Nun erhalten die Spaltentitel unserer neuen Listenansicht sprechende Namen. Dazu bearbeiten wir in unserem „de“-Objekt den Bereich
Fügen Sie in dem namespace-Element ein Type-Element mit dem leeren Attribut „name“ ein. In dieses name-Attribut ziehen Sie das Schema, das die neue Listenansicht enthält. Dies ist in diesem Fall „quotations/container“.
Innerhalb dieses Type-Elements legen Sie nun für jede Spalte in der Listenansicht ein Item-Element an. Als name-Attribut bekommt es „column.Spalten-ID“, wobei Sie für Spalten-ID die jeweilige ID der Spalte eingeben, die oben vergeben worden ist. Als Inhalte der Item-Elemente wählen Sie wieder die entsprechenden deutschen Bezeichner „Autor“, „Zitat“ und „Bild“.
Überprüfen Sie diese Änderung, indem Sie auf das Objekt „Zitate“ klicken. Die Überschriften der ListView.
Bezeichner für Feldbezeichnungen in Pflegemasken
Zuletzt erhalten unsere automatisch generierten Pflegemasken deutsche Feldbezeichnungen.
Diese werden im „de“-Objekt im Element <namespace name=“Editor“> gepflegt.
Hier werden vier Type-Elemente benötigt, eines für jedes Schema, das wir lokalisieren möchten. Innerhalb dieser Type-Elemente benötigen wir für jedes Element im Schema ein eigenes Item-Element. Die Schreibweise, um die Elemente im Schema anzusprechen, wird an einem Beispiel wie folgt dargestellt:
Für die vier Schemata in diesem Tutorial sieht das Ergebnis dann so aus:
Um diese Änderung zu überprüfen, wechseln Sie nun in Ihre bereits angelegten Objekte der vier Typen. Sie werden in der Detailansicht die neuen Bezeichner sehen.
Die komplette Konfiguration der Ressource „de“ sieht nun wie folgt aus:
Geschafft!
Durch wenige Konfigurationsschritte haben wir dem Redakteur eine individuelle Pflegeumgebung geschaffen.
Transformationen entwickeln
