Tutorial: Editor individualisieren

Transcription

Tutorial:
Editor individualisieren
Version: 1
Autor: Daniel Neumann
Inhaltsverzeichnis
1
1.1
1.2
1.3
1.3.1
1.3.2
1.3.3
Editor individualisieren....................................................................................
Piktogramme...................................................................................................
Objektstrukturfenster.......................................................................................
Lokalisieren von Bezeichnern.........................................................................
Bezeichner für Schemata................................................................................
Bezeichner für Listenansicht...........................................................................
Bezeichner für Feldbezeichnungen in Pflegemasken.....................................
2
2
3
7
8
8
9
Voraussetzungen
Für dieses Tutorial werden keine weiteren Voraussetzungen als für die vorhergehenden
Tutorials benötigt.
Informationsmodell festlegen
Transformationen entwickeln
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.
Zeichenerklärung
Text, der grün umrandet und mit dem Pfeil-Symbol gekennzeichnet ist, enthält
konkrete Anweisungen, was als nächstes zu tun ist.
Texte in solchen Kästchen enthalten Tipps und Tricks.
Quellcode wird in solch blauen Boxen dargestellt.
1
1 Editor individualisieren
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“.
1.1 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.
2
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.
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.
1.2 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.
3
<childrenListViews
xmlns:onion="http://onionworks.net/2004/data"
xmlns="http://onionworks.net/2004/webeditor/customizing">
<listView schemaLocation="">
<columns>
<column
id="name"
dataType="xs:string"
width="100%"
/>
</columns>
<childType
schemaLocation=""
structureInvisible="false"
handleDerivations="true"
>
<column ref="name" select="$onion:name" />
</childType>
</listView>
</childrenListViews>
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“.
<listView
schemaLocation="http://example.com/2009/showcase/quotations/container"></listView>
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.
<childType
schemaLocation="http://example.com/2009/showcase/quotations/quotation"
/>
Unsere Listenansicht soll drei Spalten erhalten. Wir wollen den Autor, das Zitat und das Bild
tabellarisch darstellen.
4
Dazu kopieren wir das vorhandene <column>-Element noch zweimal.
<columns>
<column
id="name"
width="100%"
/>
<column
id="name"
width="100%"
/>
<column
id="name"
width="100%"
/>
</columns>
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:
5
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:
<childrenListViews
xmlns="http://onionworks.net/2004/webeditor/customizing">
<listView
schemaLocation="http://example.com/2009/showcase/quotations/container">
<columns>
<column
id="author"
width="15%"
/>
<column
id="quote"
width="*"
/>
<column
id="image"
width="5%"
align="center"
/>
</columns>
<childType
schemaLocation="http://example.com/2009/showcase/quotations/quotation"
>
<column ref="author" select="quotation/author" />
<column ref="quote" select="quotation/quote" />
<column ref="image" select="onion:choose(quotation/image,
onion:createIcon($onion:id, quotation/image, 48, 48), '')" />
</childType>
</listView>
</childrenListViews>
Aktualisieren Sie nun den Editor und klicken Sie links auf Zitate. Sie sehen nun rechts über
der bekannten Detailansicht die soeben erstellte Listenansicht.
6
Tipp: Jede Listenansicht lässt sich benutzerdefiniert sortieren. Dafür genügt ein
Klick auf die Überschrift der jeweiligen Spalte.
1.3 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:
<resources>
<namespace name="Onion.Client.WebUI">
<type name="SchemaTypeNames"></type>
<namespace name="ListViews"></namespace>
<namespace name="Editor"></namespace>
</namespace>
</resources>
7
1.3.1 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“.
<type name="SchemaTypeNames">
<item
name="http://example.com/2009/showcase/quotations/container">Zitate</item>
<item
name="http://example.com/2009/showcase/quotations/quotation">Zitat</item>
<item
name="http://example.com/2009/showcase/collections/container">Zitatsammlungen</item>
<item
name="http://example.com/2009/showcase/collections/collection">Zitatsammlung</item>
</type>
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“.
1.3.2 Bezeichner für Listenansicht
Nun erhalten die Spaltentitel unserer neuen Listenansicht sprechende Namen. Dazu
bearbeiten wir in unserem „de“-Objekt den Bereich
<namespace name="ListViews"></namespace>
.
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“.
<namespace name="ListViews">
<type name=""></type>
</namespace>
8
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“.
<item name="column.author">Autor</item>
<item name="column.quote">Zitat</item>
<item name="column.image">Bild</item>
Überprüfen Sie diese Änderung, indem Sie auf das Objekt „Zitate“ klicken. Die Überschriften
der ListView.
1.3.3 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:
<type name="http://example.com/2009/beispielschema">
<item name="Element:beispielschema#Header">Header des Schemas</item>
<item name="Element:elementname#Label">Bezeichnung eines Elementes des
Schemas</item>
<item name="Attribute:attributname#Label">Bezeichnung eines Attributes des
Schemas</item>
<item name="Element:elementname#AddNewItem">Bezeichnung für die Funktion,
neue Eingabemöglichkeiten für ein Element anzulegen</item>
</type>
Für die vier Schemata in diesem Tutorial sieht das Ergebnis dann so aus:
9
<namespace name="Editor">
<type name="http://example.com/2009/showcase/quotations/container">
<item name="Element:quotation#Header">Zitate</item>
</type>
<type name="http://example.com/2009/showcase/quotations/quotation">
<item name="Element:quotation#Header">Zitat</item>
<item name="Element:author#Label">Autor</item>
<item name="Element:quote#Label">Zitat</item>
<item name="Element:image#Label">Bild</item>
</type>
<type name="http://example.com/2009/showcase/collections/container">
<item name="Element:container#Header">Zitatsammlungen</item>
</type>
<type name="http://example.com/2009/showcase/collections/collection">
<item name="Element:collection#Header">Zitatsammlung</item>
<item name="Attribute:interval#Label">Intervall</item>
<item name="Element:quotation#Label">Zitate</item>
<item name="Element:quotation#AddNewItem">+ Weiteres Zitat hinzufügen</item>
</type>
</namespace>
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:
10
<resources>
<namespace name="Onion.Client.WebUI">
<type name="SchemaTypeNames">
<item
name="http://example.com/2009/showcase/quotations/container">Zitate</item>
<item
name="http://example.com/2009/showcase/quotations/quotation">Zitat</item>
<item
name="http://example.com/2009/showcase/collections/container">Zitatsammlungen</item>
<item
name="http://example.com/2009/showcase/collections/collection">Zitatsammlung</item>
</type>
<namespace name="ListViews">
<item name="column.author">Autor</item>
<item name="column.quote">Zitat</item>
<item name="column.image">Bild</item>
</type>
</namespace>
<namespace name="Editor">
<item name="Element:quotation#Header">Zitate</item>
</type>
<type name="http://example.com/2009/showcase/quotations/quotation">
<item name="Element:quotation#Header">Zitat</item>
<item name="Element:author#Label">Autor</item>
<item name="Element:quote#Label">Zitat</item>
<item name="Element:image#Label">Bild</item>
</type>
<type name="http://example.com/2009/showcase/collections/container">
<item name="Element:container#Header">Zitatsammlungen</item>
</type>
<type name="http://example.com/2009/showcase/collections/collection">
<item name="Element:collection#Header">Zitatsammlung</item>
<item name="Attribute:interval#Label">Intervall</item>
<item name="Element:quotation#Label">Zitate</item>
<item name="Element:quotation#AddNewItem">+ Weiteres Zitat
hinzufügen</item>
</type>
</namespace>
</namespace>
</resources>
Geschafft!
Durch wenige Konfigurationsschritte haben wir dem Redakteur eine individuelle
Pflegeumgebung geschaffen.
11

Tutorial: Editor individualisieren

Transcription

Documents pareils

Hubzündungs-Schweißbolzen mit Gewinde, Typ MD Threaded

Hubzündungs-Schweißbolzen mit Gewinde, Typ RD Threaded

http://www.pspsource.de/news.php?item.89 Seite 1/1 Multi Cradle

Bandschleifer Belt Sander

Anwenderberic ht - item pluspartner

B1BOOTS - Waterproof

Geradschleifer Straight Grinder

Elektro-Hydraulische Pumpe Electro-hydraulic Pump

sompex lighting 2010 Zugpendelleuchte Line Zugpendelleuchte

Gardena Regner Aquazoom 350/2 1975 - ToolTeam