WoW UI Designer Tutorial

Introduction

This is a quick start tutorial for WoW UI Designer v1.1.x (just called wowuides from now on). It contains steps on how to get started using the program to create a UI for your addon.

Installation

Refer to Release Notes for information on installing the application.

Setup (Optional)

Once you have installed the application, you can optionally set it up to not work directly within your WoW game directory. This can be advantageous if you feel that loading from the files takes longer than loading from the mpq files.

Say that you installed wowuides into the c:\wowuides directory and just want to work within that, and that WoW is installed in c:\games\WoW. I will provide steps using Command Prompt commands, but you can use Windows Explorer or any other method you like:

  1. Move the interface directory:
    echo -- Do a full copy of the interface folder
    md c:\wowuides\interface
    xcopy c:\games\wow\interface\*.* c:\wowuides\interface /e
    echo -- Now delete the contents of the folder (don't worry, you have a full backup if the previous step succeeded)
    rd /s /q c:\games\wow\interface
    echo -- You still need your addons, so copy them back, recreate the directories first
    md c:\games\wow\interface
    md c:\games\wow\interface\addons
    echo -- Copy the addons back to the WoW directory
    xcopy c:\wowuides\interface\addons\*.* c:\games\wow\interface\addons /e /i
    Those are the precise steps, if there is an error, then do not continue. If you are a more advanced user, then there are safer steps to achieve this if you wish.
  2. Now start the wowuides program, it will not initialise correctly, but OK the error and go to the Tools menu and select Options.... In the first general page, there is a Work Directory option, in that text box type c:\wowuides and press OK.
  3. Close down the wowuides application and restart, it should now be using the new copy of the WoW interface files.
When you are ready to test an addon in WoW, you can use the Project | Copy Files to Install Directory... command to copy the files into the install directory to be loaded by WoW on start up.

Getting Started

Lets get started by creating a new project and setting up a basic frame.

1. Create a new project: Go to File | New Project... menu item, or press CTRL-SHIFT-N key combination.
2. A text input form is now displayed, enter the name of our new project called Tutorial Project and press OK. New Project Dialog
3. Now the Project properties page is displayed, enter some information so that you, and your addon users know what the addon is about. Some basic sample information is shown below, you can use your own name ofcourse~ Project Properties Form
4. Now save the project, go to the File | Save menu item, or press CTRL-S key combination. You should find yourself in the interface directory, select the Addons directory and create a new folder by pressing the third button from the left shown here, name this folder TutProj. Now go into the folder you just created and type tutproj for the file name and press save. Create New Folder
5. We are now ready to start adding files to the project. Go to the Project | Add New Script File menu item, you should now see a new file TutorialProject.lua in the Project Explorer. Now go to the Project | Add New Form menu item and you will see a TutorialProjectForm.xml file added to the list. Project Explorer
6. Save the project again (CTRL-S).
7. Double click on TutorialProjectForm.xml. This will open a dialog asking what skin to create the form from, select Default and continue. Now the UI designer will display. UI Designer
8. Now to set up the form, select the Text property from the list to the right (near the top), enter something like Wowuides Tutorial, leave the rest alone and go down to the script property OnEvent, for this enter TutFormEvent(); exactly, finally go down to the OnLoad script property and enter this:RegisterEvent("VARIABLES_LOADED"); exactly.
9. Now for some visuals, within the toolbox usually located at the bottom right of the screen there is an item called Label, select this and move the cursor over the form. The cursor should be a cross shape, move it to the top left of the form and click the left mouse button once. Something like below should be displayed, if you moved the mouse while the button was down, then your label is likely to be smaller, but it will still be there and selected. UI Designer with Label
10. Now set up the properties for the label to:
Location = 32, 64
Size = 336, 16
(Name) = $parentCountLabel
Horizontal Alignment = LEFT
It should look something like ->
UI Designer with Label setup
11. Now go back to the toolbox and place a Button component with the following properties:
(Name) = $parentDoneButton
Text = Done
Location = 160, 350
Size = 100, 22
OnClick = TutorialProjectForm:Hide();
It should look something like this ->
UI Designer with Label and Button
12. Now save everything, go to File | Save All menu item, or press CTRL-SHIFT-S key combination.
13. Our form is done for now, so double click on TutorialProject.lua in the Project Explorer to bring up the text editor window for scripting.
14. Because we called a function TutFormEvent() on the OnEvent event of our form, we need to define it. This tutorial does not go into lua scripting, so the contents are in the picture across, save this. Lua Editor
15. In the function created above, we referenced a variable called TutSavedVar, we want this variable to be saved across uses of the addon, so we need to set it into the saved variables. Go to the menu item Project | Properties, this will redisplay a form we have seen earlier. Now press the Add... button located to the right of the Saved Variable text, for the Variable Name enter TutSavedVar and press OK. Save the project and the project properties should look like -> Project Properties
16. Now all that is left is to start WoW and see if it worked!