Help on ScrollFrame with LUA

[gmarco]

Hi all,

I'd like to add a simple scrollframe to my addons to show a list of items (names).
The two book I have explain the scrollframe with the use of xml to build the frames.
And the web links I found usually follow this method.

I prefer if possible to avoid this approach and so I am trying to find some links, addons, code to check how this can be implemented with the plain LUA api interface.

I have tried to convert the xml approach to lua code but I didn't succeded.


Thanks very much for any inputs.

[Lombra]

Scroll frames are pretty annoying before you know their workings (well even after you know, too), but here is the simplest implementation I can come up with of a mostly working example. (you probably need to create a font string for the buttons and, of course, fill the list with something)

local NUM_BUTTONS = 8
local BUTTON_HEIGHT = 20

local list = {} -- put contents of the scroll frame here, for example item names
local buttons = {}

local function update(self)
	local numItems = #list
	FauxScrollFrame_Update(self, numItems, NUM_BUTTONS, BUTTON_HEIGHT)
	local offset = FauxScrollFrame_GetOffset(self)
	for line = 1, NUM_BUTTONS do
		local lineplusoffset = line + offset
		local button = buttons[line]
		if lineplusoffset > numItems then
			button:Hide()
		else
			button:SetText(list[lineplusoffset])
			button:Show()
		end
	end
end

local scrollFrame = CreateFrame("ScrollFrame", "MyFirstNotReallyScrollFrame", UIParent, "FauxScrollFrameTemplate")
scrollFrame:SetScript("OnVerticalScroll", function(self, offset)
	FauxScrollFrame_OnVerticalScroll(self, offset, BUTTON_HEIGHT, update)
end)

for i = 1, NUM_BUTTONS do
	local button = CreateFrame("Button", nil, scrollFrame:GetParent())
	if i == 1 then
		button:SetPoint("TOP", scrollFrame)
	else
		button:SetPoint("TOP", buttons[i - 1], "BOTTOM")
	end
	button:SetSize(96, BUTTON_HEIGHT)
	buttons[i] = button
end

This is a "faux" scroll frame, named so because it doesn't actually scroll. The scroll bar merely gives you an offset value, telling you which part of your list you should display in the "view area". It is intended to be used for simple lists, where the content is visually consistent. (such as the scroll frame where you select which battleground to queue for)

NUM_BUTTONS is the max amount of buttons/frames that will be visible at any one time in the view area, and BUTTON_HEIGHT is the height of these frames. These help deterrmine the position of the scroll bar and more.

The update function will be called everytime you actually scroll, and will reflect the new "view area". The corrent button height and the update function must always be passed to FauxScrollFrame_OnVerticalScroll in the "OnVerticalScroll" handler, as shown.

In the update function you will want to call FauxScrollFrame_Update(self, numItems, NUM_BUTTONS, BUTTON_HEIGHT) to set the scroll bar position. numItems is the total amount of items the scroll frame should represent. In your case, the number of items. You then need to get the offset, which represents the number of frames you have scrolled past. After this we can iterate over all the frame and set them up. The lineplusoffset variable here represents the effective index of your list of items. Assuming 8 buttons; when at the top of the list, offset will be 0, and so items 1 through 8 will be shown. If you scroll past 4 buttons, offset will be 4 and items 5 through 12 will be shown ((1 through 8) + 4). Frames will need to be hidden if the total amount of items is less than the number of items the frame can display at any one time. (< 8, in this case)

Make sure you don't create the subframes as children of the scroll frame itself; then they will be hidden if the size of your list does not exceed the number of items the frame can show.

Maybe this was more than you needed, but there you go. Feel free to ask for more info.

[gmarco]

Thanks so much for your reply.
I'll begin to study your code now ... :-)

Thanks again.

[gmarco]

After a little bit of coding I am not able to display anything inside , probably because I think I miss something more :-/

I have in my addon a defined config frame in this way:

local options = CreateFrame("Frame", ADDON.."Options", InterfaceOptionsFramePanelContainer)
[...]

and so I changed your code in this way:

local scrollFrame = CreateFrame("ScrollFrame", "MyFirstNotReallyScrollFrame", options, "FauxScrollFrameTemplate")

Then I begin to populate the list array:

local list = {"aaa", "bbb", "ccc" }

But I don't get any output (nor errors).

I think I miss the frame to be displayed if I understand well what you wrote to me.

Thanks for attention.

[Lombra]

You need to call the update function manually once to "initialize" it. Might be it.

[gmarco]

It doesn't work either.

I have double checked everything again and again but I am not able to see any outputs even if I add a :

update(scrollFrame)

to manually initialize the frame as you suggest.

If I have understood your post, the scrollframe should be the parent frame that will contain the inner scroll child... And so I need another frame to contain all the other things I wanna to be scrolled ...

But here I really don't understand where is this second frame, where I could add, in example, the buttons.

I am sorry if it is a silly question, but I am really lost now :-)

Thanks again for you replies.

[zork]

Interesting. I'm currently in the same boat. Setting up my first config panel atm.

http://www.wowinterface.com/forums/s...75&postcount=6

Currently into getting my classes up and running. Never created my own classes.

I need a scrollframe aswell. My ScrollFrame should fit right into the huge yellow space:
http://imgur.com/a/ecy2H

It should containt a bunc of Sliders/DropDownMenus/Buttons. I hope this is possible because I read ScrollFrame just hide frames while scrolling while showing others.

The thread will be a big help anyway. Thanks.
Maybe I need to create a sort of "lineFrame" first that I can show/hide.

gmarco if you need help on uipanel template stuff you check out:
http://code.google.com/p/rothui/sour.../wow5.0/rTest/
http://code.google.com/p/rothui/sour....0/rTestPanel/

Those are my test addons.

[gmarco]

Hi Zork,
thanks for your reply . I surely check your code and study it.
Let's see if finally I succeded in learning the use of all these frames even if I really don't understand why lombra code will not work for me.

[Lombra]

SetText is there yes, but the button needs a font string to display any text. (or maybe it has one by default, can't actually remember)

Either way, the scroll frame needs dimensions and a position before it'll show up.

@ Zork:
Since FauxScrollFrameTemplate is best suited for items with identical height, you might be better off using a real scroll frame. Or it could work if you created identical frames for each widget, as you said.

[gmarco]

I am doing good progress

The code finally is displaying something :-)

local NUM_BUTTONS = 8
local BUTTON_HEIGHT = 20
local BUTTON_WIDTH = 96
 
local list = {"aaaa","bbbbb","cccccc","ddddddd","eeeeee","ffffff","gggggg","hhhhh"}
local buttons = {}
 
local function update(self)
    local numItems = #list
    print ("DEBUG: nr. items " .. numItems)
    FauxScrollFrame_Update(self, numItems, NUM_BUTTONS, BUTTON_HEIGHT)
    local offset = FauxScrollFrame_GetOffset(self)
    for line = 1, NUM_BUTTONS do
        local lineplusoffset = line + offset
        local button = buttons[line]
        if lineplusoffset > numItems then
            button:Hide()
        else
            button:SetText(list[lineplusoffset])
            button:Show()
        end
    end
end
 
local scrollFrame = CreateFrame("ScrollFrame", "MyFirstNotReallyScrollFrame", UIParent, "FauxScrollFrameTemplate")
scrollFrame:SetWidth(BUTTON_WIDTH)
scrollFrame:SetHeight(BUTTON_HEIGHT*6)
scrollFrame:SetPoint("CENTER",UIParent)
scrollFrame:EnableMouse(true)
scrollFrame:SetMovable(true)
scrollFrame:RegisterForDrag("LeftButton")
scrollFrame:SetScript("OnDragStart", function(self) self:StartMoving() end)
scrollFrame:SetScript("OnDragStop", function(self) self:StopMovingOrSizing() end)
scrollFrame:Show()
scrollFrame:SetClampedToScreen(true)
scrollFrame:SetScript("OnVerticalScroll", function(self, offset)
    FauxScrollFrame_OnVerticalScroll(self, offset, BUTTON_HEIGHT, update)
end)
 
for i = 1, NUM_BUTTONS do
    local button = CreateFrame("Button", nil, scrollFrame:GetParent())
    if i == 1 then
        button:SetPoint("TOP", scrollFrame)
    else
        button:SetPoint("TOP", buttons[i - 1], "BOTTOM")
    end
    button:SetNormalFontObject("GameFontNormal")
    button:SetSize(BUTTON_WIDTH, BUTTON_HEIGHT)
    button:SetText(list[i])
    buttons[i] = button
end
 
 
 
-- enabling the last line will make the slidebar disappears.
-- print ("DEBUG: Force updating")
-- update(scrollFrame)

Now I get the scrollframe with sliders but it is wrong. You can check the picture to see...
It doesn't cover the out of scrollframe part nor it scrolls using the slide.

Other thing: If I enable the manual update of the frame (last line) the sliders will disappears (!??!) :-)

Thanks again for any inputs/clues/tips :-)

[Lombra]

Good to hear.

This is all expected. The buttons are actually completely independant of the scroll frame and vice versa. They just happen to be anchored to it. For all the scroll frame knows, you could be simply printing different numbers in the update function instead of doing something with the buttons.

You have decided that 8 buttons be created (as per NUM_BUTTONS), and the size of the scroll frame is smaller than the total height of these. That's all there is to it. Again, the scroll frame is completely independent of the buttons, and has no idea how much screen space they take up. If you're using constants for the number of buttons and their height a simple solution would be:

scrollFrame:SetHeight(NUM_BUTTONS * BUTTON_HEIGHT)

which I just noticed you were nearly already doing, you just used 6 instead of 8 which NUM_BUTTONS was set to. This way the appropriate height will always be calculated when you change the amount and height of the buttons via the constants. At least, as long as the offset between each button is 0.

The scroll bar will always remain in its original state (visible and inactive) until you first call FauxScrollFrame_Update, which you do in the update function. The reason it disappears when you do so is that you have enough buttons that the entire list can be displayed without scrolling (you have 8 buttons and 8 items in the list). If you add one more item or remove one button, you will see that it works!

[zork]

Try this example
http://wowprogramming.com/snippets/W...roll_frames_22

It does not make use of templates yet but it shows how to handle the ScrollChild.

Of course...using FauxTemplate is handling the ScrollChild quite differently I think.

*edit*

Got exactly what I was looking for.



Code will be coming soon.

I'm using a ScrollFrame with this template: "UIPanelScrollFrameTemplate" with a twist.

To bad I wanted a ScrollBar with this template: "UIPanelScrollBarTrimTemplate". The UIPanelScrollFrameTemplate only uses UIPanelScrollBarTemplate. So I just looked up the SetTexCoord for the scrollbar border and added it manually.

*edit*

Ok here is the code that does it:
http://code.google.com/p/rothui/sour...estScrollFrame

Thanks to templates there is actually veeery few code to write.

[Aanson]

Originally Posted by gmarco Hi all, I prefer if possible to avoid this approach and so I am trying to find some links, addons, code to check how this can be implemented with the plain LUA api interface. I have tried to convert the xml approach to lua code but I didn't succeded.

They there. I wrote a complete Scroll Frame example on another forum of this website that will provide you with all of the code you're after, and an explanation:

Tutorials & Other Helpful Info

I hope you find it as useful as was intended


Aanson