MyFirstAddon tutorial by Zenimax Online

From ESOUI Wiki

Jump to: navigation, search

Quick start for creating MyFirstAddon:

In MyFirstAddon.txt enter the following information:

## Title: Rockin Addon
## APIVersion: 100008

MyFirstAddon.lua
MyFirstAddon.xml

If you reload the game's UI by doing /reloadui in the chat window and then open up the main game menu (hit esc), and select the "AddOns" button, you should see the AddOn manager panel pop up and it will contain your AddOn - although it doesn't do very much yet.

Now it's time to add a little functionality to the Addon. We're just going to make a simple window frame with some text on it that updates every frame.

Open up the xml file you created and add the following script:

<GuiXml>
    <Controls>
        <TopLevelControl name="MyFirstAddon">
            <Dimensions x="200" y="42" />
            <Anchor point="CENTER" />
 
            <OnUpdate>
                MyFirstAddOnUpdate()
            </OnUpdate>
 
            <OnInitialized>
                MyFirstAddOnInitialized()
            </OnInitialized>
 
            <Controls>
                <Backdrop name="$(parent)BG" inherits="ZO_ThinBackdrop" />
                <Label name="$(parent)Counter" font="ZoFontWindowTitle" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="CENTER" text="Counter: ">
                    <AnchorFill />
                </Label>
            </Controls>
        </TopLevelControl>
    </Controls>
</GuiXml>

Open up the lua file you created and add the following script:

local counter = 1
 
function MyFirstAddOnUpdate()
    MyFirstAddonCounter:SetText(string.format("Counter: %d", counter))
    counter = counter + 1
end
 
function MyFirstAddOnInitialized()
end

If you reload the UI now you should see a window in the center of the screen rapidly counting upwards. Congrats, you made your first AddOn that actually does something!

Adding Some Input Handling

While that AddOn was pretty trivial, we can start turning it into a timer (a frame counter) by changing the xml to the following:

<GuiXml>
    <Controls>
        <TopLevelControl name="MyFirstAddon" mouseEnabled="true">
            <Dimensions x="200" y="42" />
            <Anchor point="CENTER" />
 
            <OnUpdate>
                MyFirstAddOnUpdate()
            </OnUpdate>
 
            <OnMouseDown>
                MyFirstAddOnReset()
            </OnMouseDown>
 
            <Controls>
                <Backdrop name="$(parent)BG" inherits="ZO_ThinBackdrop" />
                <Label name="$(parent)Counter" font="ZoFontWindowTitle" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="CENTER" text="Counter: ">
                    <AnchorFill />
                </Label>
            </Controls>
        </TopLevelControl>
    </Controls>
</GuiXml>

and the lua to this:

local counter = 1
 
function MyFirstAddOnUpdate()
    MyFirstAddonCounter:SetText(string.format("Counter: %d", counter))
    counter = counter + 1
end
 
function MyFirstAddOnReset()
    counter = 0
end

Now, whenever you click the frame, the counter will reset back to 0 and then immediately resume counting.

If you wanted to make your window movable, you would just add an attribute to the TopLevelControl element that looks like:

movable="true"

Good luck!

Personal tools
Namespaces
Variants
Actions
Menu
Wiki
Toolbox