Thread Tools Display Modes
05-13-19, 01:45 AM   #1
urakkaamyx
A Murloc Raider
Join Date: May 2019
Posts: 8
Copy Paste Scrolling Frame template

So this code is mainly for myself, but i had so much trouble learning the whole scroll frame and how to get it all to work, but i didnt like having to redo it every time i wanted to use a scroll frame.

I made it in a way that you can do a Find&Replace(Match Case) on PREFIX and replace it with your project name on both files.

As far as i can tell, its self contained, no global variables floating around... i may have missed one or tow, but its a start

Out of the box : the attached image is what it looks like

called by
Code:
CreateFrame("Frame",'MyCopyPasteScrollFrame', UIParent, 'PREFIXScrollBaseFrameTemplate')

So heres a copy/paste scroll frame template.

PREFIXScrollFrameTemplate.xml
Xml Code:
  1. <Ui xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://www.blizzard.com/wow/ui/">
  2. <Script file="PREFIXScrollFrameTemplate.lua" />
  3.  
  4.  
  5.     <!---
  6.        Name            : PREFIXScrollFrameButtonEntriesTemplate
  7.        Inherits        : N/A | Situation Based
  8.        Inherited By    : N/A : Called By Lua
  9.        Parent Frame    : (Lua) PREFIXScrollFrameTemplate
  10.        Description     : The List of items in the scroll frame
  11.    -->
  12.  
  13.     <Button name="PREFIXScrollFrameButtonEntriesTemplate" virtual="true" parentArray="buttons" inherits="UIPanelButtonTemplate" text="Click me!">
  14.         <Size x="166"/>
  15.         <Scripts>
  16.             <OnLoad>
  17.                 PREFIXScrollFrameButtonEntriesTemplate_OnLoad(self)
  18.             </OnLoad>
  19.         </Scripts>
  20.  
  21.     </Button>
  22.  
  23.     <!---
  24.        Name            : PREFIXScrollFrameTemplate
  25.        Inherits        : FauxScrollFrameTemplate (Blizzard Frame) | Interface\FrameXML\UIPanelTemplates.xml
  26.        Inherited By    : N/A : Called By Lua
  27.        Parent Frame    : (Lua) PREFIXScrollBaseFrameTemplate
  28.        Description     : The Scrolling Frame
  29.    -->
  30.     <ScrollFrame name="PREFIXScrollFrameTemplate" inherits="FauxScrollFrameTemplate" parentKey="scrollFrame" virtual="true">
  31.         <Size x="150" y="200" />
  32.         <Anchors>
  33.             <Anchor point="TOPLEFT">
  34.                 <Offset x="0" y="-8" />
  35.             </Anchor>
  36.             <Anchor point="BOTTOMRIGHT">
  37.                 <Offset x="-30" y="8" />
  38.             </Anchor>
  39.         </Anchors>
  40.         <Scripts>
  41.             <OnVerticalScroll>
  42.                 PREFIXScrollFrameTemplate_OnVerticalScroll(self, offset)
  43.             </OnVerticalScroll>
  44.         </Scripts>
  45.     </ScrollFrame>
  46.  
  47.  
  48.     <!---
  49.        Name            : PREFIXScrollBaseFrameTemplate
  50.        Inherits        : N/A
  51.        Inherited By    : N/A : Called By Lua in CreateFrame("Frame",'iTrackerBaseFrame', UIParent, 'PREFIXScrollBaseFrameTemplate')
  52.        Description     : Base Frame For a Scrolling Frame
  53.    -->
  54.     <Frame name="PREFIXScrollBaseFrameTemplate" virtual="true" parent="UIParent">
  55.         <Size x="150" y="1" />
  56.         <Anchors>
  57.             <Anchor point="CENTER" />
  58.         </Anchors>
  59.         <Backdrop bgFile="Interface\DialogFrame\UI-DialogBox-Background"
  60.                  edgeFile="Interface\Tooltips\UI-Tooltip-Border" tile="true">
  61.             <BackgroundInsets>
  62.                 <AbsInset left="4" right="4" top="4" bottom="4"/>
  63.             </BackgroundInsets>
  64.             <EdgeSize val="16" />
  65.             <TileSize val="16" />
  66.         </Backdrop>
  67.         <Scripts>
  68.             <OnLoad>
  69.                 PREFIXScrollBaseFrameTemplate_Onload(self)
  70.             </OnLoad>
  71.         </Scripts>
  72.     </Frame>
  73. </Ui>







PREFIXScrollFrameTemplate.lua

Lua Code:
  1. -- For Testing only
  2. function testdata()
  3.     local t = {};
  4.     for i=1,50 do
  5.         t[i] = "Test "..math.random(100);
  6.     end
  7.     return t
  8. end
  9. -- End Testing
  10.  
  11. ---@param self Frame|ScrollFrame
  12. local function _updateScrollWindow(self)
  13.     --- Checks to see if its the Parent frame, if its not it gets the parent frame from scrollFrame
  14.     if self.data == nil then
  15.         self = self:GetParent()
  16.     end
  17.     --- Updates the Scroll frame to determine offset
  18.     FauxScrollFrame_Update(self.scrollFrame,#self.data,self.properties.numButtons,self.properties.buttonHeight)
  19.  
  20.     --- loops through the buttons indexes and only shows the data based on offset and properties.
  21.     for index = 1,self.properties.numButtons do
  22.         local offset = index + FauxScrollFrame_GetOffset(self.scrollFrame)
  23.         ---@type Button
  24.         local button = self.scrollFrame.buttons[index]
  25.         if offset<=#self.data then
  26.             button:SetText(self.data[offset])
  27.             button:Show()
  28.         else
  29.             button:Hide()
  30.         end
  31.     end
  32.  
  33. end
  34.  
  35. ---@param self Frame
  36. function PREFIXScrollBaseFrameTemplate_Onload(self)
  37.     --- Set these properties based on how you want to display your list
  38.  
  39.     self.properties = {}
  40.     self.properties.numButtons = 10
  41.     self.properties.buttonHeight = 16
  42.     self.data = testdata()
  43.  
  44.     --- Sets the height of a scroll window based on properties set above.
  45.     --- the + 1 add enough space to allow no over lapping of data being outside of frame
  46.     self:SetHeight((self.properties.numButtons + 1) * self.properties.buttonHeight)
  47.  
  48.     --- Setting the scroll frame AFTER properties have been set, else the children wouldnt have access to them
  49.     --- due to <OnLoad> only happening AFTER everything is loaded
  50.     ---@type ScrollFrame
  51.     local scrollFrame = CreateFrame("ScrollFrame", "PREFIXScrollFrame", self,"PREFIXScrollFrameTemplate")
  52.  
  53.     --- Generate the buttons specified in the properties.
  54.     for i=1,self.properties.numButtons do
  55.         ---@type Button
  56.        local btn = CreateFrame("Button","PREFIXScrollFrameButtonEntry".. i,scrollFrame, "PREFIXScrollFrameButtonEntriesTemplate")
  57.         btn:SetPoint("TOPLEFT",8,-(i-1)*self.properties.buttonHeight)
  58.  
  59.         --- The "- 8" is allowing to compisate for the xoffset above, so if you change the above be sure to change this as well.
  60.         btn:SetWidth(scrollFrame:GetWidth() - 8)
  61.  
  62.         --- This is where you plop in info/how you want it to be displayed
  63.         --- Anything you want to spit out on to a button should be plopped in the data field .. example
  64.         ---
  65.         --- if you want to list the number of items youve picked up in a instance or whatever, simply add that data like so (pseudo code)
  66.         ---
  67.         --- yada yada happens
  68.         --- item = picked_up_item ---- obviously you have to determine this
  69.         --- table.insert(<BASE_FRAME_NAME>.data, item)
  70.         ---
  71.         --- So, now we can access this data and set up what we want to display on the button
  72.         --- First you would need to edit the template (PREFIXScrollFrameButtonEntriesTemplate) in order to have the appropriate fields available
  73.         --- to be able to add the data, or you can do it in straight lua.
  74.         --- =============================================================================
  75.         ---
  76.         ---     DO THE THINGS HERE!!!
  77.         ---
  78.         --- =============================================================================
  79.  
  80.  
  81.  
  82.     end
  83.     _updateScrollWindow(self)
  84. end
  85.  
  86. --- Set the Height of the Buttons based on the properties in PREFIXScrollBaseFrameTemplate_Onload()
  87. ---@param self Button
  88. function PREFIXScrollFrameButtonEntriesTemplate_OnLoad(self)
  89.     self:SetHeight(self:GetParent():GetParent().properties.buttonHeight)
  90. end
  91.  
  92.  
  93. --- Updates the FauxFrame info when you scroll over the window
  94. ---@param self ScrollFrame
  95. function PREFIXScrollFrameTemplate_OnVerticalScroll(self, offset)
  96.     FauxScrollFrame_OnVerticalScroll(self:GetParent().scrollFrame, offset,self:GetParent().properties.buttonHeight, _updateScrollWindow)
  97. end
Attached Thumbnails
Click image for larger version

Name:	{119D8C19-A1FF-4E68-802C-3436B24DCB0F}.png.jpg
Views:	370
Size:	31.0 KB
ID:	9230  

Last edited by urakkaamyx : 05-13-19 at 01:59 AM. Reason: removed global
  Reply With Quote

WoWInterface » Developer Discussions » Tutorials & Other Helpful Info. » Copy Paste Scrolling Frame template

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off