Vorlage selbst kreieren

Level: Fortgeschrittene in der XML-Thematik
Tools: Text-, HTML oder XML-Editor
Zeitaufwand: ca. 20 min

Grundlegendes

Die Elemente selbst sind zwar fest vorgegeben, allerdings ist es möglich Vorlagen zu definieren, welche man auf Elemente anwenden kann. Das Vorlagensystem beruht darauf, das man ein Design erstellt, genauso wie man es normal tut, mit dem Unterschied, das Grundelement mit dem Attribut virtual=”true” zu definieren.
Das Attribut kann auf fast jedes Element angewendet werden das vom Element LayoutFrameType abgeleitet wurde.
Der Vorteil des Systems tritt dann ein, wenn man mehr als nur einmal das gleiche Design verwendet. Anstatt also die XML-Datei mit dem gleichen Design mehrmals zu füllen, wird das Design einmalig definiert und entsprechend viele Elemente erstellt die dieses Design einfach übernehmen.

Um das System zu verdeutlichen, wollen wir uns eine Liste von 3 Frames erstellen, welche alle ein Textfeld und einen Button besitzen.
Da wir es nur bei einem kleinen Beispiel belassen wollen haben wir uns für diese Vorlage entscheiden. Man kann zB auch sehr gut, mittels dem Vorlage-Prinzip, Frames für Spieleranzeigen (Raid oder Party) erstellen und diese beliebig nach Bedarf verfielfältigen. Aber dies ist letztlich dann schon wieder eine Aufgabe die man sich selbst zutrauen muss und will.

Die Vorlage

Wir erstellen uns zuerst ein Frame, welches eine Größe von 200 mal 100 Pixel besitzen soll. Einen Ankerpunkt legen wir in diesem Fall nicht fest, da es sich nur um eine Vorlage handeln soll. Der Ankerpunkt wird dann in dem richtigen Objekt eingepasst.
Vorlagen sollten am Besten immer direkt am Anfang (nach dem Ui-Element) definiert werden, das erhöht die Lesbarkeit und verhindert, Komplikationen, wenn das Objekt zB eine Vorlage verwendet die erst nach ihm erstellt wird, ist die Vorlage für das Objekt unbekannt.
Um das Frame als Vorlage kenntlich zu machen verwenden wir als Attribut virtual und geben diesem dem Wert “true”.
Desweiteren fügen wir ein Textfeld sowie einen Button in das Frame ein. Das Textfeld soll dabei über dem Button erscheinen. Der Button selbst wird auf Grundlage der Vorlage UIPanelButtonTemplate erstellt. Folgende Dinge sollen eingestellt werden:

das Frame soll einen Hintergrund und Rahmen besitzen
der Font des Textfeldes soll GameFontNormal entsprechen
das Textfeld soll am oberen Rand des Frames ausgerichtet werden
der Button soll der Vorlage UIPanelButtonTemplate entsprechen
der Button soll die Maße 80×24 besitzen und am unteren Rand des Frames ausgerichtet werden
der Button soll einen OnClick Handler besitzen, welcher den Text des Textfeldes ändert

Frame name=”MeineVorlage” virtual=”true” frameStrata=”LOW”
parent=”UIParent” enableMouse=”true”
Size x=”200″ y=”100″ /
Backdrop name=”$parent_Backdrop”
bgFile=”InterfaceTutorialFrameTutorialFrameBackground”
edgeFile=”InterfaceDialogFrameUI-DialogBox-Border” tile=”true”
EdgeSize
AbsValue val=”16″ /
/EdgeSize
TileSize
AbsValue val=”16″ /
/TileSize
BackgroundInsets
AbsInset left=”5″ right=”5″ top=”5″ bottom=”5″ /
/BackgroundInsets
/Backdrop
Layers
Layer level=”ARTWORK”
FontString name=”$parent_Text” inherits=”GameFontNormal” text=”MeineVorlage”
Anchors
Anchor point=”TOP” relativePoint=”TOP” relativeTo=”$parent” /
/Anchors
/FontString
/Layers
Frames
Button name=”$parent_Button” inherits=”UIPanelButtonTemplate” text=”Klick mich!”
Size x=”80″ y=”24″
Anchors
Anchor point=”BOTTOM” relativePoint=”BOTTOM” relativeTo=”$parent” /
/Anchors
Scripts
OnClick
getglobal(this:GetParent()..”_Text”):SetText(“Aktiviert!”);
/OnClick
/Scripts
/Button
/Frames
/Frame

Damit ist die Vorlage erstellt. Doch solange man sie nicht verwendet nützt sie eher weniger. Wie bereits angekuendigt wollen wir am Ende dieses HowTo 3 gleiche Frames haben. Hierzu erstellen wir 3 Frames, welche alle unsere selbsterstellte Vorlage als Grundgerüst verwenden. Die Definition der Frames erfolgt unterhalb der Vorlage. Die Position soll sich zum einen an der Mitte des Bildschirms und danach untereinander orientieren. Insgesamt sollte die XML-Datei nun wie folgt aussehen:

Ui xmlns=”http://www.blizzard.com/wow/ui/”
xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:schemaLocation=”http://www.blizzard.com/wow/ui/
..FrameXMLUI.xsd”
Frame name=”MeineVorlage” virtual=”true” frameStrata=”LOW”
parent=”UIParent” enableMouse=”true”
Size x=”200″ y=”100″ /
Backdrop name=”$parent_Backdrop”
bgFile=”InterfaceTutorialFrameTutorialFrameBackground”
edgeFile=”InterfaceDialogFrameUI-DialogBox-Border” tile=”true”
EdgeSize
AbsValue val=”16″ /
/EdgeSize
TileSize
AbsValue val=”16″ /
/TileSize
BackgroundInsets
AbsInset left=”5″ right=”5″ top=”5″ bottom=”5″ /
/BackgroundInsets
/Backdrop
Layers
Layer level=”ARTWORK”
FontString name=”$parent_Text” inherits=”GameFontNormal” text=”MeineVorlage”
Anchors
Anchor point=”TOP” relativePoint=”TOP” relativeTo=”$parent” /
/Anchors
/FontString
/Layer
/Layers
Frames
Button name=”$parent_Button” inherits=”UIPanelButtonTemplate” text=”Klick mich!”
Size x=”80″ y=”24″ /
Anchors
Anchor point=”BOTTOM” relativePoint=”BOTTOM” relativeTo=”$parent” /
/Anchors
Scripts
OnClick
getglobal(this:GetParent()..”_Text”):SetText(“Aktiviert!”);
/OnClick
/Scripts
/Button
/Frames
/Frame
Frame name=”MeinVorlagenFrame1″ hidden=”false” inherits=”MeineVorlage”
Anchors
Anchor point=”TOPLEFT”
Offset x=”500″ y=”-200″ /
/Anchor
/Anchors
/Frame
Frame name=”MeinVorlagenFrame2″ hidden=”false” inherits=”MeineVorlage”
Anchors
Anchor point=”TOPLEFT” relativeTo=”MeinVorlagenFrame1″ relativePoint=”TOPLEFT” /
/Anchors
/Frame
Frame name=”MeinVorlagenFrame3″ hidden=”false” inherits=”MeineVorlage”
Anchors
Anchor point=”TOPLEFT” relativeTo=”MeinVorlagenFrame2″ relativePoint=”TOPLEFT” /
/Anchors
/Frame
/Ui

Nachtrag

Nachdem wir dieses Beispiel durch haben sind die Vorteile der Vorlage recht schnell ersichtlich. Anstatt wie bisher einfach dreimal den gleichen Code zu schreiben, welcher je nach Komplexität natürlich mehr Platz in Anspruch nimmt, ersparen wir uns dies ein wenig. Das Design wird nur einmalig definiert und kann dadurch leichter gepflegt werden. Will man etwas im Design der 3 Frames ändern muss man nun nicht an alle 3 Frames einzeln ran, sondern kann es bequem in der Vorlage ändern.
Insgesamt ist das Vorlagensystem immer zu empfehlen wenn es sich um komplexe Designs handelt, welche mehr als einmal verwendet werden.

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