• 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
  1. Frame name="MeineVorlage" virtual="true" frameStrata="LOW"
  2. parent="UIParent" enableMouse="true"
  3. Size x="200" y="100" /
  4. Backdrop name="$parent_Backdrop"
  5. bgFile="InterfaceTutorialFrameTutorialFrameBackground"
  6. edgeFile="InterfaceDialogFrameUI-DialogBox-Border" tile="true"
  7. EdgeSize
  8. AbsValue val="16" /
  9. /EdgeSize
  10. TileSize
  11. AbsValue val="16" /
  12. /TileSize
  13. BackgroundInsets
  14. AbsInset left="5" right="5" top="5" bottom="5" /
  15. /BackgroundInsets
  16. /Backdrop
  17. Layers
  18. Layer level="ARTWORK"
  19. FontString name="$parent_Text" inherits="GameFontNormal" text="MeineVorlage"
  20. Anchors
  21. Anchor point="TOP" relativePoint="TOP" relativeTo="$parent" /
  22. /Anchors
  23. /FontString
  24. /Layers
  25. Frames
  26. Button name="$parent_Button" inherits="UIPanelButtonTemplate" text="Klick mich!"
  27. Size x="80" y="24"
  28. Anchors
  29. Anchor point="BOTTOM" relativePoint="BOTTOM" relativeTo="$parent" /
  30. /Anchors
  31. Scripts
  32. OnClick
  33. getglobal(this:GetParent().."_Text"):SetText("Aktiviert!");
  34. /OnClick
  35. /Scripts
  36. /Button
  37. /Frames
  38. /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:

  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="MeineVorlage" virtual="true" frameStrata="LOW"
  6. parent="UIParent" enableMouse="true"
  7. Size x="200" y="100" /
  8. Backdrop name="$parent_Backdrop"
  9. bgFile="InterfaceTutorialFrameTutorialFrameBackground"
  10. edgeFile="InterfaceDialogFrameUI-DialogBox-Border" tile="true"
  11. EdgeSize
  12. AbsValue val="16" /
  13. /EdgeSize
  14. TileSize
  15. AbsValue val="16" /
  16. /TileSize
  17. BackgroundInsets
  18. AbsInset left="5" right="5" top="5" bottom="5" /
  19. /BackgroundInsets
  20. /Backdrop
  21. Layers
  22. Layer level="ARTWORK"
  23. FontString name="$parent_Text" inherits="GameFontNormal" text="MeineVorlage"
  24. Anchors
  25. Anchor point="TOP" relativePoint="TOP" relativeTo="$parent" /
  26. /Anchors
  27. /FontString
  28. /Layer
  29. /Layers
  30. Frames
  31. Button name="$parent_Button" inherits="UIPanelButtonTemplate" text="Klick mich!"
  32. Size x="80" y="24" /
  33. Anchors
  34. Anchor point="BOTTOM" relativePoint="BOTTOM" relativeTo="$parent" /
  35. /Anchors
  36. Scripts
  37. OnClick
  38. getglobal(this:GetParent().."_Text"):SetText("Aktiviert!");
  39. /OnClick
  40. /Scripts
  41. /Button
  42. /Frames
  43. /Frame
  44.  
  45. Frame name="MeinVorlagenFrame1" hidden="false" inherits="MeineVorlage"
  46. Anchors
  47. Anchor point="TOPLEFT"
  48. Offset x="500" y="-200" /
  49. /Anchor
  50. /Anchors
  51. /Frame
  52.  
  53. Frame name="MeinVorlagenFrame2" hidden="false" inherits="MeineVorlage"
  54. Anchors
  55. Anchor point="TOPLEFT" relativeTo="MeinVorlagenFrame1" relativePoint="TOPLEFT" /
  56. /Anchors
  57. /Frame
  58.  
  59. Frame name="MeinVorlagenFrame3" hidden="false" inherits="MeineVorlage"
  60. Anchors
  61. Anchor point="TOPLEFT" relativeTo="MeinVorlagenFrame2" relativePoint="TOPLEFT" /
  62. /Anchors
  63. /Frame
  64. /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