• Level: Anfänger
  • Tools: Text-, HTML oder XML-Editor
  • Zeitaufwand: ca. 20 min


Grundlagen

Für die meisten AddOns ist es von existentieller Notwendigkeit auch auf der Benutzeroberfläche zu erscheinen und damit dem Benutzer Informationen oder eine Interaktion zu ermöglichen. Zu diesem Zweck ist es unumgänglich eine XML-Datei zu erstellen, in der man die Benutzeroberfläche definiert. Diese Aufgabe ist eine der schwersten und aufwendigsten beim AddOn erstellen, denn schließlich will man ja, daß das AddOn gut aussieht und auch leicht zu bedienen ist. Das Tutorial soll Euch Einführen in die Thematik des XML-Systems. Sie wird Schritt für Schritt ein Design entwerfen und dabei Elemente in ihrem Gebrauch und ihrer Anwendung erklären.
Bevor es jetzt richtig los geht noch ein paar Informationen.

  • Kommentare werden immer durch !—- und eingeschlossen. Dies ist die standardisierte XML-Kommentarsyntax.
  • Elemente bestehen entweder aus einem Start und einem Ende-Tag oder aus einem Single-Tag das am Ende explizit geschlossen wird. Es wird in den Beispielen immer angegeben welcher Tag-Typ es ist, zum besseren Verständnis.
  • Attribute von Elementen werden immer im Start-Tag oder im Single-Tag angegeben. Die Attribute werden zusätzlich erklärt, soweit dies möglich ist.
  • Der Inhalt eines Elementes steht immer zwischen dem Start und dem Ende-Tag. Single-Tags besitzen keinen Inhalt sondern nur Attribute.
  • Die Hierarchie-Ebenen sagen aus, auf welcher Stufe sich die Elemente befindet. Die Ebenen werden erhöht je tiefer man in der Struktur verzweigt. Ein Element das in einem Element liegt, ist daher eine Hierarchie-Ebene höher als das Element in dem es liegt.
  • Element die andere Elemente enthalten werden als Vater-Elemente bezeichnet. Alle Im Vater-Element liegenden Elemente werden als Kind-Elemente bezeichnet.
  • Zu dem AddOn muss weiterhin eine toc-Datei und natürlich das Verzeichnis des AddOns existieren. In diesem HowTo soll es nur um die XML-Datei gehen!


Der Anfang von Allem

Jede XML-Datei besitzt ein so genanntes Root-Element. Dieses Element stellt das Fundament dar, auf welchem ihr alles andere aufbaut. Dieses Fundament ist für AddOns, von World of Warcraft, immer(!) gleich. Ihr könnt die folgenden Angaben also einfach kopieren.

  1. Ui xmlns="http://www.blizzard.com/wow/ui/"
  2. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3. xsi:schemaLocation="http://www.blizzard.com/wow/ui/
  4. ..FrameXMLUI.xsd" !- Start-Tag Ui -
  5. !- Inhalt -
  6. /Ui !- Ende-Tag Ui -

Das Ui-Element welches ein Start und ein Ende-Tag besitzt, stellt das Root-Element dar. Innerhalb des Elementes werden alle Angaben zum Aussehen des AddOns in der Oberfläche von WoW gemacht. Das Root-Element ist notwendig, damit diese Angaben auch geprüft werden auf Gültigkeit. Sind in der XML-Datei Fehler vorhanden, wird das gesamte Design nicht angezeigt. Leider wird ausser dem Ausbleiben der Anzeige keine zusätzliche Fehlermeldung erzeugt, die euch auf den Fehler hinweist. Daher muss man immer äusserste Sorgfalt walten lassen, wenn man das Design erstellt.

Die ersten Schritte

Zwar ist jetzt das Root-Element vorhanden, aber es gibt nichts das angezeigt werden soll. Die muss sich ändern, denn sonst hat das Tutorial sein Ziel verfehlt.
Als erste Aufgabe wollen wir uns ein einfaches Frame erstellen. Das Frame-Element ist eines der Grundlegendsten Elemente von WoW. Frames stellen eine Art Container dar. Sie können zwar angezeigt werden, aber ohne Inhalt sind sie nichts weiter als eine leere Box.
Trotzdem ist das Frame-Element eines der wichtigsten Elemente. Denn viele andere Elemente sind von diesem Element abgeleitet (besitzen das gleiche Grundgerüst sowie deren Eigenschaften und zusätzliche Spezialisierungen) und zum Ordnen und Verwalten der Elemente ist es fast immer notwendig bzw. sinnvoll ein oder mehrere Frame-Elemente zu verwenden.
Wir erstellen uns daher jetzt einfach ein Frame:

  1. Frame name="MeinAddOnFrame" !- Start-Tag Frame -
  2. /Frame !- Ende-Tag Frame -

Jetzt haben wir uns zwar ein Frame-Element erstellt aber wenn wir ehrlich sind kann es das ja nicht gewesen sein. Das Element wäre nicht so ungemein wichtig wenn es nur aus diesen paar Angaben bestehen würde. Und das stimmt auch. Doch bevor wir weitermachen noch eine Information zum Attribut name.

Das Attribut name gibt dem erstellten Element eine eindeutige Identifizierung durch den Namen. Dies ist eigentlich immer(!) notwendig, denn ohne Namen weiss man ja nicht zwischen zwei erstellten Elementen zu unterscheiden. Verwendet daher immer einen eindeutigen und vor allem zum AddOn passenden Namen.

Fangen wir zuerst einmal mit den Attributen zum Element an. Das Element besitzt verschiedenste Attribute. Eine vollständige Liste wollen wir hier natürlich jetzt nicht abhandeln aber die für uns notwendigsten sollten schon dabei sein.

  • parent – Eine sehr wichtige Angabe vor allem für die Elemente der ersten Hierarchie-Ebene. Der Parameter gibt an, an welchem Vater-Element es sich in seiner Skalierung halten soll. Lässt man dieses Attribut zum Beispiel weg, kann es durchaus sein, daß die Angaben zu Größe des Elemente anders interpretiert werden, als die von anderen Elementen mit der Angabe. Das Vater-Element für die Gesamte Benutzeroberfläche lautet UIParent
  • enableMouse – Dieser Parameter gibt an, ob das Element auch auf Mausereignisse reagieren soll. Der Standard ist false. Will man also, daß man mit dem Element durch die Maus interagieren/arbeiten kann, sollte der Parameter mit true angegeben werden.
  • frameStrata – Der Parameter gibt an, wie das Element behandelt werden soll. Das bedeutet, welche Rolle es in der Oberfläche spielt. Es gibt verschiedene Möglichkeiten, die alle unterschiedliche Auswirkungen haben. Soll es für den Vollbildmodus verwendet werden und daher von keinem anderen Fenster überlagert werden dürfen? Soll es ein normales Element sein, welches von anderen Fenstern überdeckt werden kann?
    In den meisten Fällen sollte allerdings das Attribut mit LOW initialisiert werden. Dies bedeutet, daß das Element im Hintergrund verschwindet wenn ein Fenster oder andere Elemente höheren Wertes es überlagern.
  • movable – Dieses Attribut ist nur in Verbindung mit dem Attribut enableMouse sinnvoll. Denn in den meisten Fäallen kann man das Element nur durch die Maus verschieben. Wird das Attribut nicht angegeben, wird der Standard false verwendet. Will man also das Element auch per Maus verschieben können, sollte man das Attribut mit true angeben.
  • hidden – Ein Attribut zur Angabe, ob das Element sichtbar sein soll oder nicht. Es ist meistens von Vorteil explizit anzugeben, daß das Element sichtbar sein soll wenn man es auch sehen will.

Wir wollen das Frame jetzt soweit einstellen, daß wir es im späteren Verlauf verschieben und anklicken können. Sichtbar soll es auch sein, da wir ja wissen wollen, ob wir es richtig gemacht haben. Ausserdem ist es ein Element der ersten Hierarchie und soll sich nach den Angaben der gesamten Oberfläche halten.

  1. Frame name="MeinAddOnFrame" hidden="false" movable="true"
  2. enableMouse="true" parent="UIParent" frameStrata="LOW"
  3. !- Start-Tag Frame -
  4. /Frame !- Ende-Tag Frame -

Soweit so gut. Doch das Element ist immer noch nicht sichtbar. Jedenfalls nicht für uns, denn wir unwürdigen Menschen brauchen schließlich eine grafische Untermalung um das Element erkennen zu können. Außerdem ist noch völlig ungeklärt wie groß das Element ein soll und wo es eigentlich liegt. Viele Punkte auf der Liste. Fangen wir zuerst einmal mit der Größe an.
Damit einem Element eine Gröszlige zugewiesen werden kann, muss das Element Size benutzt werden. Das Element ist im Grunde nichts anderes als ein Umrandungs-Element denn die eigentliche Angabe zur Größe wird erst im darin liegenden Element beschrieben. Es gibt zwei Möglichkeiten die Gröszlige zu definieren.

  1. RelDimension … / – Relative Größenangabe zum Vaterelement. Die angegebenen Werte müssen zwischen 0.0 und 1.0 liegen.
  2. AbsDimension … / – Absolute Größenangabe. Die Werte können beliebig gewählt werden, sollten allerdings immer ganze Zahlen darstellen zB. 211

Die relative Größenangabe bezieht sich immer auf das angegebene Vaterelement. Die Angaben stellen Prozentwerte dar.
Die absolute Größenangabe dagegen stellt einen festen Wert für jede Angabe dar. Die Angaben werden in Pixel interpretiert.
Die Angaben zu Länge und Breite werden in beiden Elementen als Attribute übergeben. Egal für welches der beiden Elemente man sich letztlich entscheidet, es werden immer die Attribute x, für die Breite, und y, für die Höhe, verwendet.

Das Element Size kann auch die Attribute des AbsDimension-Elementes übernehmen und somit als Single-Tag geschrieben werden.

Unser Frame-Element soll eine absolute Größe besitzen: 200 Pixel breit und 100 Pixel hoch.

  1. Frame name="MeinAddOnFrame" hidden="false" movable="true"
  2. enableMouse="true" parent="UIParent" frameStrata="LOW"
  3. !- Start-Tag Frame -
  4. Size !- Start-Tag Size -
  5. AbsDimension x="200" y="100" / !- Single-Tag AbsDimension -
  6. /Size !- Ende-Tag Size -
  7. /Frame !- Ende-Tag Frame -

Als nächstes wollen wir die Position festlegen, wo unser Element in der Oberfläche erscheinen soll. Dazu werden mehrere Elemente benötigt welche nach ihrer Hierarchie aufgelistet sind:

  1. Anchors
    Der Zweck des Elementes ist in etwa dem eines Behälters gleichzusetzen. Innerhalb des Elementes muss mindestens ein Kindelement eingebunden werden. Es ist also auch möglich mehrere Elemente einzubinden.
  2. Anchor
    Dieses Element ist dem Size-Element ähnlich. Allerdings muss hier ein Attribut gesetzt werden. Folgende Attribute können angegeben werden
    • point – Die Angabe des Ankerpunktes des Elementes. Der Ankerpunkt gibt an, von welchem Punkt des Elementes die Positionierung stattfinden soll. Die verschiedenen Ankerpunkte, die möglich sind, kann man hier nachlesen.
    • relativeTo – Die Angabe zu welchem Element soll die Positionierung Bezug nehmen. Sprich welches Element ist der Orientierungspartner. Diese Angabe ist optional.
    • relativePoint – Die Angabe des Ankerpunktes des Orientierungspartners. Die Möglichkeiten sind die selben wie für point. Diese Angabe ist optional.

    Werden relativeTo und relativePoint weggelassen, orientiert sich das Element immer am Vater-Element.
    Das Element kann als Single-Tag definiert werden sollte das nachfolgende Element Offsetnicht benötigt werden.

  3. Offset
    Will man das zusätzlich zu der Ankerpositionierung eine Verschiebung um definierte Werte erfolgen soll, muss dieses Element in das Anchor-Element eingebettet werden.
    Das Element kann auch die Attribute des AbsDimension-Elementes übernehmen und somit als Single-Tag geschrieben werden.
  4. AbsDimension oder RelDimension
    Dies sind die beiden bereits für die Größenangaben vorgestellten Elemente. In diesem Fall geben sie allerdings an wie und mit welchen Werten das Element zusätzlich verschoben werden soll. Das Element wird in das Offset-Element eingebettet.

Für unser Beispiel, wollen wir einfach, daß es in der Mitte des Bildschirms erscheint. Hierzu wird das UIParent als Orientierungspunkt verwendet.

UIParent stellt das Grundelement der gesamten Benutzeroberfläche dar.

Die Ankerpunkte werden auf “CENTER” gestellt damit der Ankerpunkt der Orientierungspunktes und des Frames gleich sind.

  1. Frame name="MeinAddOnFrame" hidden="false" movable="true"
  2. enableMouse="true" parent="UIParent" frameStrata="LOW"
  3. !- Start-Tag Frame -
  4. Size !- Start-Tag Size -
  5. AbsDimension x="200" y="100" / !- Single-Tag AbsDimension -
  6. /Size !- Ende-Tag Size -
  7. Anchors !- Start-Tag Anchors -
  8. Anchor point="CENTER" relativePoint="CENTER" relativeTo="UIParent" !- Start-Tag Anchor -
  9. Offset !- Start-Tag Offset -
  10. AbsDimension x="0" y="0" / !- Single-Tag AbsDimension -
  11. /Offset !- Ende-Tag Offset -
  12. /Anchor !- Ende-Tag Anchor -
  13. /Anchors !- Ende-Tag Anchors -
  14. /Frame !- Ende-Tag Frame -

Durch diese Angaben zur Position sollte das Element jetzt in der Mitte des Bildschirms positioniert worden sein. Eigentlich könnten Die Angaben zum Offset vollständig weggelassen werden aber in unserem Fall haben wir sie einfach nochmal zum Verständnis der Hierarchie drin gelassen.
Im angegebenen Beispiel ist auf jeden Fall festzuhalten, daß das Element in der Mitte von UIParent mit seiner eigenen Mitte positioniert wird. Von dieser Position aus wird das Element um 0 Pixel nach rechts verschoben und um 0 Pixel nach oben.

Die Angabe der zusätzlichen Verschiebung arbeitet nach folgendem Prinzip bei der Positionierung:
  • positiver x-Wert = Verschiebung nach rechts
  • negativer x-Wert = Verschiebung nach links
  • positiver y-Wert = Verschiebung nach oben
  • negativer y-Wert = Verschiebung nach unten

Kommen wir nun zum letzten Punkt. Das Design des Frame-Elementes. Noch ist das Frame für uns nicht sichtbar, denn es hat nichts anzuzeigen. Daher werden wir ihm einen Hintergund und Rahmen verpassen.
Zu diesem Zweck muss das Backdrop-Element herhalten. Das Element besitzt Attribute, welche Hintergrundtextur und Rahmentextur verwendet werden soll. Ebenfalls müssen diverse Elemente als Kindelemente eingebunden werden. Diese werden später noch erklärt.

  1. Backdrop name="$parent_Backdrop"
  2. bgFile="InterfaceTutorialFrameTutorialFrameBackground"
  3. edgeFile="InterfaceDialogFrameUI-DialogBox-Border" tile="true"
  4. !- Start-Tag Backdrop -
  5. EdgeSize !- Start-Tag EdgeSize -
  6. AbsValue val="16" / !- Single-Tag AbsValue -
  7. /EdgeSize !- Ende-Tag EdgeSize -
  8. TileSize !- Start-Tag TileSize -
  9. AbsValue val="16" / !- Single-Tag AbsValue -
  10. /TileSize !- Ende-Tag TileSize -
  11. BackgroundInsets !- Start-Tag BackgroundInsets -
  12. AbsInset left="5" right="5" top="5" bottom="5" / !- Single-Tag AbsInset -
  13. /BackgroundInsets !- Ende-Tag BackgroundInsets -
  14. /Backdrop !- Ende-Tag Backdrop -

Kommen wir zuerst zu den Attributen des Backdrop-Elementes.

  • name – Auch hier ist es wieder wichtig den Namen anzugeben. Die Besonderheit die hier zum Ersten mal auftritt ist die Verwendung von $parent. Dieses Synonym bedeutet nichts anderes als den Namen des Vaterelementes. Anstatt also MeinAddOnFrame_Backdrop zu schreiben nehmen wir das Synonym $parent_Backdrop und lassen das dann einfach automatisch ersetzen.
  • bgFile – Hier wird die Textur spezifiziert, die verwendet werden soll. Texturen sind als blp-Dateien abgelegt. Will man seine eigene Textur verwenden muss man das Bild also auch in das entsprechende Format umwandeln.
  • edgeFile – Dieses Attribut gibt an, welche Textur für den Rahmen verwendet werden soll. Die Textur entspricht den Rahmen von diversen Fenstern im Spiel.
  • tile – Tja tile heisst ja soviel wie Kachel. Welche Auswirkung das Attribut mit einem anderen Wert hat weiss ich allerdings nicht. Das muss ich erst noch testen.

Es gibt verschiedene Texturen für den Rahmen und den Hintergrund die bereits von WoW vorgegeben sind und verwendet werden können. Diese wollen wir in diesem Abschnitt aber nicht weiter aufzählen.
Damit die Angaben auch noch ein wenig abgeschliffen und Rund werden, sind die zusätzlichen Elemente notwendig.
Das EdgeSize-Element ist für die Randelemente zuständig. Das Attribut val im AbsValue-Element sollte entweder 16 oder 32 sein. Diese Angabe sagt, welche Größe der Texturelemente verwendet werden sollen. Für kleine Elemente sollte immer 16 verwendet werden.
Das TileSize-Element ist für den Hintergrund. Auch hier kann zwischen 16 und 32 gewählt werden. Das Element definiert die Größ der verwendeten Texturkacheln.
Das letzte Element ist das BackgroundInsets-Element. Dieses Element enthält das AbsInsets-Element welches definiert, in welchem Abstand vom Rahmen der Hintergrund beginnen soll. Wird hier zum Beispiel anstatt der 5 überall 0 angegeben, so ergibt dies eine unschöne Überschneidung von Rahmen und Hintergrund.

Ergebnis Nummer 1

Nachdem wir nun all das durch haben sollte die XML-Datei folgendes enthalten (Ohne Kommentare):

  1. Ui xmlns="http://www.blizzard.com/wow/ui/"
  2. xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3. xsi:schemaLocation="http://www.blizzard.com/wow/ui/
  4. ..FrameXMLUI.xsd"
  5. Frame name="MeinAddOnFrame" hidden="false" movable="true"
  6. enableMouse="true" parent="UIParent" frameStrata="LOW"
  7. Size
  8. AbsDimension x="200" y="100" /
  9. /Size
  10. Anchors
  11. Anchor point="CENTER" relativePoint="CENTER" relativeTo="UIParent"
  12. Offset
  13. AbsDimension x="0" y="0" /
  14. /Offset
  15. /Anchor
  16. /Anchors
  17. Backdrop name="$parent_Backdrop"
  18. bgFile="InterfaceTutorialFrameTutorialFrameBackground"
  19. edgeFile="InterfaceDialogFrameUI-DialogBox-Border" tile="true"
  20. EdgeSize
  21. AbsValue val="16" /
  22. /EdgeSize
  23. TileSize
  24. AbsValue val="16" /
  25. /TileSize
  26. BackgroundInsets
  27. AbsInset left="5" right="5" top="5" bottom="5" /
  28. /BackgroundInsets
  29. /Backdrop
  30. /Frame
  31. /Ui

Das Frame mit seinem Rahmen und Hintergrund Das bisher erreichte sollte im Spiel jetzt einen Kasten darstellen mit einem Rahmen sowie einem durchsichtig dunklen Hintergrund.
Gratulation, der erste Schritt ist getan!
Doch das war noch lange nicht alles, folgt uns daher auf Seite 2, in welchem das AddOn um eine Textausgabe erweitert wird.

zum Download des Beispiels: HowTo_XML1.zip

zurück zur HowTo-Übersicht
zurück zur Übersicht der Skript-Sektion