Adding a ScrollFrame to a CharacterFrame tab

AeroMaxxD · 04-28-23, 06:46 AM

So I am trying to write my first addon, it would just list a table of results 2 columns on the tab.

My initial idea was to have next and previous buttons to look through the results.

But I have since discovered there is a scroll frame, so was wanting to use a scroll frame instead.

The table itself will have 1 row added to the results for each day that the character was logged into.

A scroll frame should be ok right if it had a lot of data, as in a year or more?

Lua Code:

local TabName="AMD";
local TabID=CharacterFrame.numTabs+1;
local Tab=CreateFrame("Button", "$parentTab"..TabID, CharacterFrame, "CharacterFrameTabTemplate", TabID);
PanelTemplates_SetNumTabs(CharacterFrame, TabID);
Tab:SetPoint("LEFT", "$parentTab"..(TabID-1), "RIGHT", -16, 0);
Tab:SetText(TabName);
-- Tab:SetID(TabID);
 
tinsert(CHARACTERFRAME_SUBFRAMES, "AMD_TabOnCharacterFrame");
 
hooksecurefunc("CharacterFrameTab_OnClick", function(self, button)
    if self:GetID() == TabID then
        ToggleCharacter("AMD_TabOnCharacterFrame")
    end
end)

Code:

<Ui xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.blizzard.com/wow/ui/ http://wowprogramming.com/FrameXML/UI.xsd">
	<Frame name="AMD_TabOnCharacterFrame" parent="CharacterFrame" frameStrata="HIGH" enableMouse="true" movable="true" setallpoints="true" id="4">
		<Size x="206" y="580"/>
		<Frames>
			<Frame name="$parent_History" parent="AMD_TabOnCharacterFrame">
				<Size x="300" y="325"/>
				<Anchors>
					<Anchor point="CENTER" relativePoint="CENTER" relativeTo="CharacterFrame"/>
				</Anchors>
				<Frames>
					<Frame name="$parent_ScrollFrame" parent="AMD_TabOnCharacterFrame_History" inherits="UIPanelScrollFrameTemplate">
					</Frame>
				</Frames>
				<Layers>
					<Layer level="OVERLAY">
						<FontString name="History_Title" parentKey="History_title" inherits="GameFontNormal">
							<Color r="1" g="1" b="1" a="1"/>
							<Anchors>
								<Anchor point="TOP">
									<Offset x="0" y="20"/>
								</Anchor>
							</Anchors>
						</FontString>
					</Layer>
				</Layers>
			</Frame>
		</Frames>
	</Frame>
</Ui>

This gives me errors and I have no idea what they mean.

Code:

Interface/SharedXML/SecureUIPanelTemplates.lua:64: attempt to call method 'SetVerticalScroll' (a nil value)

Code:

Interface/SharedXML/SecureUIPanelTemplates.xml:120 Frame AMD_TabOnCharacterFrame_History_ScrollFrame: Unknown script element OnScrollRangeChanged

Code:

Interface/SharedXML/SecureUIPanelTemplates.xml:121 Frame AMD_TabOnCharacterFrame_History_ScrollFrame: Unknown script element OnVerticalScroll

Fizzlemizz · 04-28-23, 10:38 AM

Lists are complicated until you understand them.

This is a list example created by someone else and loosly based on what I know of your addon.

The AppendListItem function is actually creating the the information table that is displayed in the list.

XML

XML Code:

<Ui xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.blizzard.com/wow/ui/ http://wowprogramming.com/FrameXML/UI.xsd">
    <!-- formatting for each row of the list -->
    <Frame name="AMD_ScrollableListItemTemplate" mixin="AMD_ScrollableListItemMixin" virtual="true">
        <Size y="21"/>
        <Layers>
            <Layer level="BACKGROUND">
                <Texture parentKey="Background" setAllPoints="true"/>
            </Layer>
            <Layer level="OVERLAY">
                <FontString parentKey="Text" inherits="GameFontHighlight" setAllPoints="true"/>
            </Layer>
        </Layers>
    </Frame>
 
    <!-- Create a list template extending the Blizzard scrollbox code for customised use -->
    <Frame name="AMD_ScrollableListTemplate" mixin="AMD_ScrollableListMixin" virtual="true">
        <Frames>
            <Frame parentKey="ScrollBox" inherits="WowScrollBoxList"/>
            <EventFrame parentKey="ScrollBar" inherits="WowTrimScrollBar">
                <Anchors>
                    <Anchor point="TOPRIGHT"/>
                    <Anchor point="BOTTOMRIGHT"/>
                </Anchors>
            </EventFrame>
        </Frames>
        <Scripts>
            <OnLoad method="OnLoad"/>
        </Scripts>
    </Frame>
 
    <Frame name="AMD_TabOnCharacterFrame" parent="CharacterFrame" mixin="AMD_TabOnCharacterFrameMixin" frameStrata="HIGH" enableMouse="true" movable="true" setallpoints="true" id="4" inherits="ButtonFrameTemplate">
        <Frames>
 
            <!-- add the listbox top you frame -->
            <Frame parentKey="ListFrame" inherits="AMD_ScrollableListTemplate">
                <Anchors>
                    <Anchor point="TOPLEFT">
                        <Offset><AbsDimension y="-50"/></Offset>
                    </Anchor>
                    <Anchor point="BOTTOMRIGHT">
                        <Offset><AbsDimension y="25"/></Offset>
                    </Anchor>
                </Anchors>
            </Frame>
 
            <Frame name="$parent_History" parent="AMD_TabOnCharacterFrame">
                <Anchors>
                    <Anchor point="CENTER" relativePoint="CENTER" relativeTo="CharacterFrame"/>
                </Anchors>
            </Frame>
            <Button name="$parent_Options" inherits="PanelTopTabButtonTemplate" text="Options">
                <Anchors>
                    <Anchor point="BOTTOMLEFT" x="98" y="440"/>
                </Anchors>
                <ButtonText parentKey="Text">
                    <Size x="0" y="10"/>
                    <Anchors>
                        <Anchor point="CENTER" x="0" y="-8"/>
                    </Anchors>
                </ButtonText>
            </Button>
            <Button name="$parent_PreviousButton" inherits="UIPanelButtonTemplate" text="NEXT">
                <Size x="109" y="22"/>
                <Anchors>
                    <Anchor point="BOTTOMRIGHT" x="-6" y="6"/>
                </Anchors>
            </Button>
            <Button name="$parent_SaveButton" inherits="UIPanelButtonTemplate" text="BACK">
                <Size x="100" y="22"/>
                <Anchors>
                    <Anchor point="BOTTOMLEFT" x="95" y="83"/>
                </Anchors>
            </Button>
            <Button name="$parent_NextButton" inherits="UIPanelButtonTemplate" text="PREVIOUS">
                <Size x="109" y="22"/>
                <Anchors>
                    <Anchor point="BOTTOMLEFT" x="6" y="6"/>
                </Anchors>
            </Button>
        </Frames>
            <Scripts>
                <OnLoad method="OnLoad"/>
            </Scripts>
    </Frame>
</Ui>

lua:

Lua Code:

AMD_ScrollableListItemMixin = {} -- does the visual row display as the list is scrolled
function AMD_ScrollableListItemMixin:Init(elementData)
    self.Background:SetColorTexture(elementData.color:GetRGBA())
    self.Text:SetText(elementData.text)
end
 
AMD_TabOnCharacterFrameMixin = {}
function AMD_TabOnCharacterFrameMixin:OnLoad() -- add 100 items to the list to be scrolled
    for _ = 1, 100 do
        self.ListFrame:AppendListItem()
    end
end
 
AMD_ScrollableListMixin = {}
function AMD_ScrollableListMixin:OnLoad() -- initialise the list
    -- The data provider acts as the backing model for a scrollview each
    -- element ("elementData") in the data provider corresponds to one row
    -- in the displayed list. The actual values can be anything. The default
    -- below creates an empty data provider, but you can pass a table in as
    -- the first argument to pre-populate it with values.
 
    self.DataProvider = CreateDataProvider()
 
    -- The scroll view is responsible for managing the acquisition of pooled
    -- frames and laying them out for display. This needs to be supplied with
    -- a data provider, an element extent (size), and an element factory or
    -- initializer at minimum.
    --
    -- The extent must be the actual height of each row. It can be dynamically
    -- calculated with a function, but a fixed extent is much more performant.
 
    local elementExtent = 21
 
    self.ScrollView = CreateScrollBoxListLinearView()
    self.ScrollView:SetDataProvider(self.DataProvider)
    self.ScrollView:SetElementExtent(elementExtent)
 
--[[ -- Currently use on Wrath pre 3.4.1 and Vanilla
    self.ScrollView:SetElementInitializer("Frame", "AMD_ScrollableListItemTemplate", function(frame, elementData)
        -- This is called each time the scrollview acquires a frame this
        -- should generally call a method on the acquired frame and update
        -- its visual state accordingly.
 
        frame:Init(elementData)
    end)
 
]]--
--[[ Use on Retail and Wrath post 3.4.1 ]]--
    self.ScrollView:SetElementInitializer("AMD_ScrollableListItemTemplate", function(frame, elementData)
        -- This is called each time the scrollview acquires a frame this
        -- should generally call a method on the acquired frame and update
        -- its visual state accordingly.
 
        frame:Init(elementData)
    end)
 
    -- Padding and spacing are optional these are just demo values. The
    -- defaults if no padding is configured will all be zero.
 
    local paddingT = 10
    local paddingB = 10
    local paddingL = 10
    local paddingR = 10
    local spacing = 5
 
    self.ScrollView:SetPadding(paddingT, paddingB, paddingL, paddingR, spacing)
 
    -- The below call is required to hook everything up automatically.
 
    ScrollUtil.InitScrollBoxListWithScrollBar(self.ScrollBox, self.ScrollBar, self.ScrollView)
 
    -- If you want the scrollbar to show or hide automatically based on
    -- whether or not the region can be scrolled, you'll need two anchor
    -- tables to configure the managed scroll visibility behavior.
 
    local anchorsWithBar = {
        CreateAnchor("TOPLEFT", self, "TOPLEFT", 4, -4),
        CreateAnchor("BOTTOMRIGHT", self.ScrollBar, "BOTTOMLEFT", 0, 4),
    }
 
    local anchorsWithoutBar = {
        CreateAnchor("TOPLEFT", self, "TOPLEFT", 4, -4),
        CreateAnchor("BOTTOMRIGHT", self, "BOTTOMRIGHT", -4, 4),
    }
 
    ScrollUtil.AddManagedScrollBarVisibilityBehavior(self.ScrollBox, self.ScrollBar, anchorsWithBar, anchorsWithoutBar)
end
 
function AMD_ScrollableListMixin:AppendListItem() -- this creates the line items 
    local color = CreateColor(fastrandom(), fastrandom(), fastrandom())
    local text = string.format("Time: %.5f", GetTime())
 
    local elementData = -- Used by the list to display each list row text and color as they're scrolled
    {
        color = color,
        text = text,
    }
 
    self.DataProvider:Insert(elementData)
    self.ScrollBox:ScrollToEnd(ScrollBoxConstants.NoScrollInterpolation)
end
 
function AMD_ScrollableListMixin:RemoveListItem()
    local lastIndex = self.DataProvider:GetSize()
    self.DataProvider:RemoveIndex(lastIndex)
end

AeroMaxxD · 04-30-23, 04:42 AM

This is what I use right now to output the list contents to the frame.

I thought I would just use the same code but change the frame that was the output.

Lua Code:

for k = ((15 - (CURRENT_PAGE * 15)) * -1) + 1, END, 1 do
    print( "k", k ); -- For debugging.
 
    offset = offset - 20;
    local dateString = AMD_Content:CreateFontString(nil, "OVERLAY", "GameFontNormalSmall");
    dateString:SetPoint("TOPLEFT", AMD_TabOnCharacterFrame_History, 0, offset);
 
    local day = string.sub(SavesSorted[k], 0, 2);
    local month = string.sub(SavesSorted[k], 3, 4);
    local year = string.sub(SavesSorted[k], 5, 6);
    if (CURRENT_DATE == day .. month .. year) then
        dateString:SetText("Today")
    else
        dateString:SetText(day .. "." .. month .. "." .. year);
    end
    dateString:SetTextColor(1, 1, 1, 1);
 
    print(day, month, year); -- For debugging
done

AeroMaxxD · 04-30-23, 05:25 AM

On another note I also asked about how to add a tab to the character frame on the official Blizzard forums, someone there responded with the code below.

This is what gave me the idea of a scroll frame, initially, I dismissed it however, and was still going to go with the next and previous buttons, I've since changed my mind.

Lua Code:

local TabName = "MyNewTab";
 
local TabID = CharacterFrame.numTabs + 1;
local Tab = CreateFrame("Button", "$parentTab"..TabID, CharacterFrame, "CharacterFrameTabTemplate", TabID);
PanelTemplates_SetNumTabs(CharacterFrame, TabID);
Tab:SetPoint("LEFT", "$parentTab" .. (TabID-1), "RIGHT", -16, 0);
Tab:SetText(TabName);
 
local Panel = CreateFrame("Frame", nil, CharacterFrame);
Panel:SetAllPoints(CharacterFrame);
 
Panel.ScrollBox = CreateFrame("ScrollFrame", nil, Panel, "UIPanelScrollFrameTemplate")
Panel.ScrollBox:SetPoint("TOPLEFT", Panel, "TOPLEFT", 10, -64) --Left / Up
Panel.ScrollBox:SetPoint("BOTTOMRIGHT", Panel, "BOTTOMRIGHT", -30, 10) --Right / Down
 
Panel.Content = CreateFrame("Frame", nil, Panel)
Panel.Content:SetPoint("CENTER", 0, -25)
Panel.Content:SetSize(305, 351) -- Width / Height 
Panel.Content.Background = Panel.Content:CreateTexture(nil, "OVERLAY")
Panel.Content.Background:SetColorTexture(math.random(), math.random(), math.random(), 0.2)
Panel.Content.Background:SetAllPoints()
 
Tab:SetScript("OnClick", function(self, arg1)
    PanelTemplates_SetTab(CharacterFrame, TabID)
    if _G["HonorFrame"] ~= nil then
        _G["HonorFrame"]:Hide()
    end
    if _G["PaperDollFrame"] ~= nil then
        _G["PaperDollFrame"]:Hide()
    end
    if _G["PetPaperDollFrame"] ~= nil then
        _G["PetPaperDollFrame"]:Hide()
    end
    if _G["HonorFrame"] ~= nil then
        _G["HonorFrame"]:Hide()
    end
    if _G["SkillFrame"] ~= nil then
        _G["SkillFrame"]:Hide()
    end
    if _G["ReputationFrame"] ~= nil then
        _G["ReputationFrame"]:Hide()
    end
    if _G["TokenFrame"] ~= nil then
        _G["TokenFrame"]:Hide()
    end
    Panel:Show()
    Panel.ScrollBox:SetScrollChild(Panel.Content)
end)
 
hooksecurefunc("ToggleCharacter", function(tab, onlyShow)
    if Panel:IsShown() then
        Panel:Hide()
    end
end)
 
local Header = Panel.Content:CreateFontString()
Header:SetFont("Fonts\\FRIZQT__.TTF", 35, "GameFontHighlightSmall")
Header:SetPoint("TOP", 0, -10)
Header:SetTextColor(0, 1, 0, 1)
Header:SetText(TabName)
 
-- This is what extends the ScrollBox, it will auto extend as you position thing further down
local EndOfScrollFrame = Panel.Content:CreateFontString()
EndOfScrollFrame:SetFont("Fonts\\FRIZQT__.TTF", 20, "GameFontHighlightSmall")
EndOfScrollFrame:SetPoint("TOP", 0, -1000)
EndOfScrollFrame:SetTextColor(1, 0, 0, 1)
EndOfScrollFrame:SetText("End of ScrollFrame")