Need Help with Scrollbar

Sweetsour · 08-15-24, 08:55 PM

I have a frame that is populated with a list of buttons that uses a scrollbar to scroll the contents. I've gotten most of the code to work but the one thing I'm getting tripped up on is the contents of the frame update in the way that more list items are added.

The list get populated correctly, however each time a change occurs, it doesn't append the latest list item to the bottom of the list. Instead it adds all the previous items as well causing a massive overlapping of list items.

Frame Contents with Scroll Bar

Lua Code:

frame_main.body = CreateFrame("Frame","FrameBody",frame_main,"BackdropTemplate")
frame_main.body:SetSize(670,352)
frame_main.body:SetPoint("TOPLEFT",frame_main,"TOPLEFT",15,-60)
frame_main.body:SetBackdrop(BACKDROP_DARK_DIALOG_32_32)
frame_main.body:SetFrameStrata("MEDIUM")
frame_main.body:EnableMouse(true)
 
frame_main.body.ScrollBox = CreateFrame("Frame", "FrameBodyScrollBox", frame_main.body, "WowScrollBoxList")
frame_main.body.ScrollBox:SetPoint("TOPLEFT", frame_main.body, "TOPLEFT",4,-5)
frame_main.body.ScrollBox:SetPoint("BOTTOMRIGHT", frame_main.body, "BOTTOMRIGHT",-4,0)
 
frame_main.body.ScrollBar = CreateFrame("EventFrame", "FrameBodyScrollBar", frame_main.body, "MinimalScrollBar")
frame_main.body.ScrollBar:SetPoint("TOPLEFT", frame_main.body, "TOPRIGHT",-24,-15)
frame_main.body.ScrollBar:SetPoint("BOTTOMLEFT", frame_main.body, "BOTTOMRIGHT",0,11)
 
frame_main.body.ScrollView = CreateScrollBoxListLinearView(7,7,7,7,0)
frame_main.body.ScrollView:SetElementExtent(30)
frame_main.body.ScrollView.builder = function(button,data)
    button.id = "FrameItem"..data.info.buttonID
 
    button:SetWidth(656)
    button:RegisterForClicks( "LeftButtonUp" )
    button:SetScript("OnClick",function(self,button,down)
        -- Do things...
    end)
 
    button.info = CreateFrame("Frame",button.id.."Info",button)
    button.info:SetAllPoints(button)
    
    if (data.info.buttonID == 1) then
        button:SetPoint("TOPLEFT",frame_main.body:GetName(),"TOPLEFT",11,-11)
    else
        button:SetPoint("TOP","FrameItem"..(data.info.buttonID-1).."Info","BOTTOM")
    end
 
    if (data.info.buttonID % 2 ~= 0) then
        button.texture = button.info:CreateTexture(button.id.."Texture")
        button.texture:SetAllPoints()
        button.texture:SetColorTexture(0.2,0.2,0.2,0.5)
    end
 
    button:SetHighlightTexture("Interface\\QuestFrame\\UI-QuestTitleHighlight")
 
    button.name = button.info:CreateFontString(button.info:GetName().."Name")
    button.name:SetSize(200,12)
    button.name:SetFont("Fonts\\FRIZQT__.TTF", 10)
    button.name:SetPoint("TOPLEFT",button.info,"TOPLEFT",10,-2)
    button.name:SetJustifyH("LEFT")
    button.name:SetText(data.info.name)
 
    button.time = button.info:CreateFontString(button.info:GetName().."Time")
    button.time:SetSize(200,12)
    button.time:SetFont("Fonts\\FRIZQT__.TTF", 10)
    button.time:SetPoint("TOPLEFT",button.name,"BOTTOMLEFT",0,0)
    button.time:SetJustifyH("LEFT")
    button.time:SetText(data.info.time)
end
 
ScrollUtil.InitScrollBoxListWithScrollBar(frame_main.body.ScrollBox, frame_main.body.ScrollBar, frame_main.body.ScrollView)
 
frame_main.body.ScrollView:SetElementFactory(function(factory,data)
 
    factory("Button", function(button,data)
        frame_main.body.ScrollView.builder(button,data)
    end)
end)

Frame Content Updater

Lua Code:

local detailsData = {}
        
if (_G["MainFrame"].body.ScrollBox.view.dataProvider) then
    detailsData = _G["MainFrame"].body.ScrollBox:GetDataProvider().collection
end
 
local currentIndex = ET_CurrentIndex
 
for index = ET_CurrentIndex, #NameDetails do
    currentIndex = index+1
 
    local name, time = unpack( NameDetails[index] );
 
    local newData = {
        info = {
            name = C_YELLOW..name..C_CLOSE,
            time = date( "%Y-%m-%d %H:%M:%S", time ),
            buttonID = index
        }
    }
 
    tinsert(detailsData,newData)
end;
 
ET_CurrentIndex = currentIndex
 
_G["MainFrame"].body.ScrollBox:SetDataProvider(CreateDataProvider(detailsData))

Fizzlemizz · 08-15-24, 09:49 PM

We don't have all the code so it's a bit hard to know.

Lua Code:

local currentIndex = ET_CurrentIndex

eg. Have you tested if ET_CurrentIndex isn't being reset somewhere before "adding" the new data?

Sweetsour · 08-16-24, 09:49 AM

ET_CurrentIndex is only used within the code that I've shown

I'm just curious if my code for the scrollbar setup is correct. The documentation for it is fairly limited. I found the write up for it on warcraft.wiki.gg but it didn't have anything on adding more elements to the list. I looked for hours for possible examples across different addons and Blizzard code and this is what I've come up with it. I'm so close, haha. Hopefully it's not one of those times where it can't be done

One idea I had but not sure if it's possible is removing the existing elements from the list when running the "update" code I listed?

Fizzlemizz · 08-16-24, 12:04 PM

So the first time you do

Code:

local currentIndex = ET_CurrentIndex

ET_CurrentIndex is nil?
which means

Code:

for index = ET_CurrentIndex, #NameDetails do

would error.

I dummied this up from what I could of your code creating/setting the data providor once and then using /tst to add random elements to the list

Lua Code:

local frame_main = CreateFrame("Frame","MainFrame",UIParent)
frame_main:SetSize(5, 5)
frame_main:SetPoint("TOP", -150, 0)
 
frame_main.body = CreateFrame("Frame","FrameBody",frame_main,"BackdropTemplate")
frame_main.body:SetSize(670,352)
frame_main.body:SetPoint("TOPLEFT",frame_main,"TOPLEFT",15,-60)
frame_main.body:SetBackdrop(BACKDROP_DARK_DIALOG_32_32)
frame_main.body:SetFrameStrata("MEDIUM")
frame_main.body:EnableMouse(true)
 
frame_main.body.ScrollBox = CreateFrame("Frame", "FrameBodyScrollBox", frame_main.body, "WowScrollBoxList")
frame_main.body.ScrollBox:SetPoint("TOPLEFT", frame_main.body, "TOPLEFT",4,-5)
frame_main.body.ScrollBox:SetPoint("BOTTOMRIGHT", frame_main.body, "BOTTOMRIGHT",-4,0)
 
frame_main.body.ScrollBar = CreateFrame("EventFrame", "FrameBodyScrollBar", frame_main.body, "MinimalScrollBar")
frame_main.body.ScrollBar:SetPoint("TOPLEFT", frame_main.body, "TOPRIGHT",-24,-15)
frame_main.body.ScrollBar:SetPoint("BOTTOMLEFT", frame_main.body, "BOTTOMRIGHT",0,11)
 
frame_main.body.ScrollView = CreateScrollBoxListLinearView(7,7,7,7,0)
frame_main.body.ScrollView:SetElementExtent(30)
frame_main.body.ScrollView.builder = function(button,data)
    button.id = "FrameItem"..data.info.buttonID
 
    button:SetWidth(656)
    button:RegisterForClicks( "LeftButtonUp" )
    button:SetScript("OnClick",function(self,button,down)
        -- Do things...
    end)
 
    button.info = CreateFrame("Frame",button.id.."Info",button)
    button.info:SetAllPoints(button)
    
    if (data.info.buttonID == 1) then
        button:SetPoint("TOPLEFT",frame_main.body:GetName(),"TOPLEFT",11,-11)
    else
        button:SetPoint("TOP","FrameItem"..(data.info.buttonID-1).."Info","BOTTOM")
    end
 
    if (data.info.buttonID % 2 ~= 0) then
        button.texture = button.info:CreateTexture(button.id.."Texture")
        button.texture:SetAllPoints()
        button.texture:SetColorTexture(0.2,0.2,0.2,0.5)
    end
 
    button:SetHighlightTexture("Interface\\QuestFrame\\UI-QuestTitleHighlight")
 
    button.name = button.info:CreateFontString(button.info:GetName().."Name")
    button.name:SetSize(200,12)
    button.name:SetFont("Fonts\\FRIZQT__.TTF", 10)
    button.name:SetPoint("TOPLEFT",button.info,"TOPLEFT",10,-2)
    button.name:SetJustifyH("LEFT")
    button.name:SetText(data.info.name)
 
    button.time = button.info:CreateFontString(button.info:GetName().."Time")
    button.time:SetSize(200,12)
    button.time:SetFont("Fonts\\FRIZQT__.TTF", 10)
    button.time:SetPoint("TOPLEFT",button.name,"BOTTOMLEFT",0,0)
    button.time:SetJustifyH("LEFT")
    button.time:SetText(data.info.time)
end
 
ScrollUtil.InitScrollBoxListWithScrollBar(frame_main.body.ScrollBox, frame_main.body.ScrollBar, frame_main.body.ScrollView)
 
frame_main.body.ScrollView:SetElementFactory(function(factory,data)
 
    factory("Button", function(button,data)
        frame_main.body.ScrollView.builder(button,data)
    end)
end)
 
 
 
frame_main.body.Data = CreateDataProvider() -- create/set the data providoer once
frame_main.body.ScrollBox:SetDataProvider(frame_main.body.Data)
 
local NameDetails = {} -- dummy data
for i=1, 5 do
    tinsert(NameDetails, { "Name"..i, GetTime()})
end
 
local function AppendName(index) -- function to add new lines
    local name, time = unpack( NameDetails[index] );
    local newData = {
    info = {
            name = name,
            time = date( "%Y-%m-%d %H:%M:%S", time ),
            buttonID = index
        }
    }
    frame_main.body.Data:Insert(newData)
end
 
--Initialise the scrollbox
local ET_CurrentIndex = #NameDetails
for index=1, ET_CurrentIndex do
    AppendName(index)
end
 
frame_main.body.ScrollBox:ScrollToBegin(ScrollBoxConstants.NoScrollInterpolation)
 
-- dummy slashcommand to add random extra entries
SLASH_TESTMENU1 = "/tst"
SlashCmdList.TESTMENU = function(msg)
    local total = #NameDetails
    local add = random(1, 4)
    for i=1, add do -- add entries to the "source" table for realism
        tinsert(NameDetails, { "Name"..total+i, GetTime()})
    end
    for i= ET_CurrentIndex+1, #NameDetails do -- insert added entries into the data provider
        AppendName(i)
    end
    ET_CurrentIndex = #NameDetails
    frame_main.body.ScrollBox:ScrollToEnd(ScrollBoxConstants.NoScrollInterpolation)
end

If you wanted to completely reload the list data you could

Code:

frame_main.body.Data:Flush()

and then AppendName() all the entires in the NameDetails table and scroll to the top/end/whatever

Sweetsour · 08-16-24, 08:09 PM

That certainly did the trick! I guess it makes sense after the fact that the reason the issue was happening was because I was adding a new data provider every time, haha. Thanks for taking the time to whip that up!

Though, I seem to be having a new issue. While all the buttons are populating nicely in the list, scrolling sends the whole thing into chaos, lol. By this I mean, every scroll increment, new buttons are added but more of the overlapping is happening. In the first chunk of code you sent me, I put a print statement on line #23, inside the button builder and the print statement was firing every scroll increment. Is that normal behavior?

Fizzlemizz · 08-16-24, 08:15 PM

What buttons?

It sounds like you're creating new buttons every scroll instead of testing if the button has been added to the row already before creating/adding.

You don't get a new row for every entry in the data table, the scroll creates enough rows to fill the viewable area and then re-uses (refills) them when you scroll.

Sweetsour · 08-16-24, 08:37 PM

I wasn't sure if it was something that I did wrong when looking at the code you provided. I threw your code into a new lua file and ran it and it seems to be running into the same issue when scrolling occurs.

It's strange. Here's some screenshots to help illustrate what's going on.

Fizzlemizz · 08-16-24, 09:02 PM

I wasn't really looking at that.

Change

Code:

frame_main.body.ScrollView.builder = function(button,data)
    -- ...
end

to:

Lua Code:

frame_main.body.ScrollView.builder = function(button,data)
    if not button.info then -- setup the row if it hasn't alread been done
        button.id = "FrameItem"..data.info.buttonID
 
        button:SetWidth(656)
        button:RegisterForClicks( "LeftButtonUp" )
        button:SetScript("OnClick",function(self,button,down)
        -- Do things...
        end)
 
        button.info = CreateFrame("Frame",button.id.."Info",button)
        button.info:SetAllPoints(button)
    
        if (data.info.buttonID == 1) then
            button:SetPoint("TOPLEFT",frame_main.body:GetName(),"TOPLEFT",11,-11)
        else
            button:SetPoint("TOP","FrameItem"..(data.info.buttonID-1).."Info","BOTTOM")
        end
        button.texture = button:CreateTexture(button.id.."Texture")
        button.texture:SetAllPoints()
 
        button:SetHighlightTexture("Interface\\QuestFrame\\UI-QuestTitleHighlight")
 
        button.name = button.info:CreateFontString(button.info:GetName().."Name")
        button.name:SetSize(200,12)
        button.name:SetFont("Fonts\\FRIZQT__.TTF", 10)
        button.name:SetPoint("TOPLEFT",button.info,"TOPLEFT",10,-2)
        button.name:SetJustifyH("LEFT")
 
        button.time = button.info:CreateFontString(button.info:GetName().."Time")
        button.time:SetSize(200,12)
        button.time:SetFont("Fonts\\FRIZQT__.TTF", 10)
        button.time:SetPoint("TOPLEFT",button.name,"BOTTOMLEFT",0,0)
        button.time:SetJustifyH("LEFT")
    end
    -- update the row background (greenbar)
    if (data.info.buttonID % 2 ~= 0) then
            button.texture:SetColorTexture(0.2,0.2,0.2,0.5)
    else
            button.texture:SetColorTexture(0,0,0,1)
    end
    -- display the name/time text for the row
    button.name:SetText(data.info.name)
    button.time:SetText(data.info.time)
end

I create button.texture on the button instead of button.info to save messing around with the draw layers.

Sweetsour · 08-16-24, 10:56 PM

Spectacular, that did it!

One last issue that persisted was the button textures would lose their alternating pattern when scrolling. The fix I found for this was using button:GetOrderIndex() instead of button.id when setting the texture color

Thanks a ton for your help!