Looking for a SIMPLE tutorial to make a 'window'

Aglaea · 07-04-12, 10:44 AM

I am looking for a simple tutorial that shows me how to make a simple window with a background in a colour of choice, some lines of text and that is movable. May be in Lua or FrameXML, but please motivate your choice. So far, tutorials and code examples I see are just overdone and give much more than this. For me this makes it confusing to get this done.

jeffy162 · 07-04-12, 11:15 AM

It might help if you post your use for this "simple window".

That would go a long way to getting the help you are asking for without having to go through a long, drawn-out process to get you an example (or links to API's) for your code.

Haleth · 07-04-12, 11:30 AM

Code:

-- (1)
local f = CreateFrame("Frame", "YourFrameName", UIParent)
f:SetSize(400, 400)
f:SetPoint("CENTER")

-- (2)
f:SetBackdrop({
	bgFile = "Interface\\ChatFrame\\ChatFrameBackground",
	edgeFile = "Interface\\ChatFrame\\ChatFrameBackground",
	edgeSize = 1,
})
f:SetBackdropColor(0, 0, 0, .5)
f:SetBackdropBorderColor(0, 0, 0)

-- (3)
f:EnableMouse(true)
f:SetMovable(true)
f:RegisterForDrag("LeftButton")
f:SetScript("OnDragStart", f.StartMoving)
f:SetScript("OnDragStop", f.StopMovingOrSizing)
f:SetScript("OnHide", f.StopMovingOrSizing)

-- (4)
local close = CreateFrame("Button", "YourCloseButtonName", f, "UIPanelCloseButton")
close:SetPoint("TOPRIGHT", f, "TOPRIGHT")
close:SetScript("OnClick", function()
	f:Hide()
end)

-- (5)
local text = f:CreateFontString(nil, "ARTWORK", "GameFontHighlight")
text:SetPoint("CENTER")
text:SetText("Hello World!")

(1) http://www.wowwiki.com/API_CreateFrame
(2) http://www.wowwiki.com/API_Frame_SetBackdrop
(3) http://www.wowwiki.com/Making_Draggable_Frames
(4) http://wowprogramming.com/docs/widgets/Button/
(5) http://www.wowwiki.com/API_Frame_CreateFontString

Phanx · 07-04-12, 02:56 PM

Originally Posted by Haleth

Code:

-- (3)
f:SetScript("OnDragStart", f.StartMoving)
f:SetScript("OnDragStop", f.StopMovingOrSizing)

Should be:

Code:

-- (3)
f:EnableMouse(true)
f:SetMovable(true)
f:RegisterForDrag("LeftButton")
f:SetScript("OnDragStart", f.StartMoving)
f:SetScript("OnDragStop", f.StopMovingOrSizing)
f:SetScript("OnHide", f.StopMovingOrSizing)

The first three lines are needed to actually make the frame movable and tell it which mouse buttons may be used to move it; otherwise the drag scripts will be ignored.

The last line is basically a safety check to make sure that if you're dragging the frame and the UI gets hidden for some reason (eg. pressing Alt+Z) the frame doesn't get stuck to the mouse cursor.

Originally Posted by Haleth

[code]
-- (4)
local close = CreateFrame("Button", "YourCloseButtonName", f, "UIPanelCloseButton")
close:SetPoint("TOPRIGHT", f, "TOPRIGHT")
close:SetScript("OnClick", function()
f:Hide()
end)

I'd recommend not giving the button a global name, and attaching it to the parent frame as a table member to make it easily accessible through code without cluttering up the global namespace:

Code:

local close = CreateFrame("Button", nil, f, "UIPanelCloseButton")
f.closeButton = close

Similarly, you should also attach the text object the same way:

Code:

-- (5)
local text = f:CreateFontString(nil, "ARTWORK", "GameFontHighlight")
f.text = text

Other than that, you'll have to be more specific about how you want the frame to look an act if you want more specific suggestions or examples. What kind of information do you want it to show? Is it meant to be displayed all the time (a small status window) or only sometimes (a togglable panel)? Will it show only short pieces of text (like character stats) or longer pieces of text (like paragraphs)? Will it need to have other objects on top of it, like status bars, icons, or buttons?

Haleth · 07-04-12, 02:59 PM

Ah, right. My mistakes there, I just put that together quickly

I name the close button because Blizzard does the same with theirs, but you're probably right that it's better as a table element.

Xrystal · 07-04-12, 03:01 PM

Phanx,

I thought certain functions only worked on controls if they had a name ? Or have I misunderstood that. I have given all my controls names based on that understanding.

Torhal · 07-04-12, 04:04 PM

There are a few templates which require names in the global table simply because their inner workings use them exclusively. Beyond that, though, you're relatively safe using nil.

Phanx · 07-04-12, 06:37 PM

If you're using any UIDropDownMenu functions, then you will need global names on your dropdown menu frame and some of its children, because the UIDropDownMenu functions are written for use with Blizzard's code, which pollutes the global namespace like an oil company in Africa. There are probably some other cases where you'll need a global name if you're working directly with Blizzard templates or template-dependent functions, but if you're running your own code, or someone else's well-written code, the only reason to give anything a global name is if you want it to be accessible by other addons or by in-game /script or /run commands.

Xrystal · 07-04-12, 06:50 PM

Thanks Phanx, Torhal.

Will give me something to think about while I work through my updates.

Ketho · 07-04-12, 10:55 PM

Just wondering; which of the following ways is better for making a frame movable? Or does it not really matter?

Lua Code:

f:EnableMouse(true)
f:SetMovable(true)
f:RegisterForDrag("LeftButton")
f:SetScript("OnDragStart", f.StartMoving)
f:SetScript("OnDragStop", f.StopMovingOrSizing)

Lua Code:

f:EnableMouse(true)
f:SetMovable(true)
f:SetScript("OnMouseDown", function(self, button)
    if button == "LeftButton" then
        self:StartMoving()
    end
end)
f:SetScript("OnMouseUp", f.StopMovingOrSizing)

Torhal · 07-04-12, 11:23 PM

The second one is only "better" if you would like the frame to do different things depending on which mouse button you use. Otherwise, they're functionally equivalent - the caveat is the second method also invokes an extra function call, of course.

Aglaea · 07-05-12, 06:32 AM

Jeff, the intention is to have a clear understanding of how to make windows. I intend to create Addons that will use windows to display information, and therefore creating windows is the first step I look for.

The given code example is exactly what I look for, thanks!

Now, my next step will be to be able to display a table in this, as this will be one of the 2 main things I intend to do. And 'table' in this case means a textual table, as <table> in HTML and not a Lua table. Although I will probably use a Lua table's data to fill my text table.

Haleth · 07-05-12, 06:53 AM

WoW's lua is not a markup language like HTML, so you won't find any easy support for automatically displaying table data. You could make some functions though which generates and displays font strings as needed when you iterate over your table.

Aglaea · 07-05-12, 07:52 AM

Haleth, I notice that. I would compare the XML with HTML, but it appears to be quite more complex. I'd compare Lua with something like PHP, which I also know. Lua does seem more complex than PHP for handling windows and text in it.

Your suggestion is what I have in mind, I am looking at the details of FontString now. I have the basics of the window down now; size, colours, borders, location, offsetting.

I intend to end up with a function that takes a table with row and column values and a measure value and then displays the table with a header, row labels and the numbers, with the option to show totals yes or no (row, column, both).

Lombra · 07-06-12, 06:30 PM

Originally Posted by Ketho

Just wondering; which of the following ways is better for making a frame movable? Or does it not really matter?

OnDragStart should also fire with a button argument. There is, however, a slight difference between the two, in that OnDragStart doesn't fire until you've pressed and dragged the cursor a few pixels, whereas OnMouseDown fires as soon as you click.