Quantcast
WoWInterface - View Single Post - Copy Paste Scrolling Frame template
View Single Post
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. [email protected] 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.         [email protected] 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. function PREFIXScrollBaseFrameTemplate_Onload(self)
  36.     --- Set these properties based on how you want to display your list
  37.  
  38.     self.properties = {}
  39.     self.properties.numButtons = 10
  40.     self.properties.buttonHeight = 16
  41.     self.data = testdata()
  42.  
  43.     --- Sets the height of a scroll window based on properties set above.
  44.     --- the + 1 add enough space to allow no over lapping of data being outside of frame
  45.     self:SetHeight((self.properties.numButtons + 1) * self.properties.buttonHeight)
  46.  
  47.     --- Setting the scroll frame AFTER properties have been set, else the children wouldnt have access to them
  48.     --- due to <OnLoad> only happening AFTER everything is loaded
  49.     [email protected] ScrollFrame
  50.     local scrollFrame = CreateFrame("ScrollFrame", "PREFIXScrollFrame", self,"PREFIXScrollFrameTemplate")
  51.  
  52.     --- Generate the buttons specified in the properties.
  53.     for i=1,self.properties.numButtons do
  54.         [email protected] Button
  55.        local btn = CreateFrame("Button","PREFIXScrollFrameButtonEntry".. i,scrollFrame, "PREFIXScrollFrameButtonEntriesTemplate")
  56.         btn:SetPoint("TOPLEFT",8,-(i-1)*self.properties.buttonHeight)
  57.  
  58.         --- The "- 8" is allowing to compisate for the xoffset above, so if you change the above be sure to change this as well.
  59.         btn:SetWidth(scrollFrame:GetWidth() - 8)
  60.  
  61.         --- This is where you plop in info/how you want it to be displayed
  62.         --- Anything you want to spit out on to a button should be plopped in the data field .. example
  63.         ---
  64.         --- 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)
  65.         ---
  66.         --- yada yada happens
  67.         --- item = picked_up_item ---- obviously you have to determine this
  68.         --- table.insert(<BASE_FRAME_NAME>.data, item)
  69.         ---
  70.         --- So, now we can access this data and set up what we want to display on the button
  71.         --- First you would need to edit the template (PREFIXScrollFrameButtonEntriesTemplate) in order to have the appropriate fields available
  72.         --- to be able to add the data, or you can do it in straight lua.
  73.         --- =============================================================================
  74.         ---
  75.         ---     DO THE THINGS HERE!!!
  76.         ---
  77.         --- =============================================================================
  78.  
  79.  
  80.  
  81.     end
  82.     _updateScrollWindow(self)
  83. end
  84.  
  85. --- Set the Height of the Buttons based on the properties in PREFIXScrollBaseFrameTemplate_Onload()
  86. [email protected] self Button
  87. function PREFIXScrollFrameButtonEntriesTemplate_OnLoad(self)
  88.     self:SetHeight(self:GetParent():GetParent().properties.buttonHeight)
  89. end
  90.  
  91.  
  92. --- Updates the FauxFrame info when you scroll over the window
  93. [email protected] self ScrollFrame
  94. function PREFIXScrollFrameTemplate_OnVerticalScroll(self, offset)
  95.     FauxScrollFrame_OnVerticalScroll(self:GetParent().scrollFrame, offset,self:GetParent().properties.buttonHeight, _updateScrollWindow)
  96. end
Attached Thumbnails
Click image for larger version

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

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