When approaching the scroll frames, it's best to realize that to the WoW UI, a scrollframe is just a glorified verticle slider. All the displaying/referencing functionality is up to the modder. It's only concerned about keeping track of the thumb.
My basic ScrollFrame looks like below, with the bits I change in bold. (Sorry for no (code) tags. imho it looks less readable with the enormous spacing/side scrolling than it does without indents) It may not be the best way:
<ScrollFrame name=
"RecapPanelDetailsScrollBar" inherits="FauxScrollFrameTemplate">
<Size>
<AbsDimension x="30" y=
"78"/>
</Size>
<Anchors>
<
Anchor point="TOPLEFT" relativeTo="RecapPanelDetail1" relativePoint="TOPRIGHT">
<Offset>
<AbsDimension x="-29" y="9"/>
</Offset>
</Anchor>
</Anchors>
<Layers>
<Layer level="BACKGROUND">
<Texture name="$parentScrollBarTop" file="Interface\PaperDollInfoFrame\UI-Character-ScrollBar">
<Size>
<AbsDimension x="30" y=
"78"/>
</Size>
<Anchors>
<Anchor point="TOP" relativeTo="$parentScrollBarScrollUpButton">
<Offset>
<AbsDimension x="0" y="5"/>
</Offset>
</Anchor>
</Anchors>
<TexCoords left="0" right="0.484375" top="0" bottom="1.0"/>
</Texture>
<Texture file="Interface\PaperDollInfoFrame\UI-Character-ScrollBar">
<Size>
<AbsDimension x="30" y="30"/>
</Size>
<Anchors>
<Anchor point="BOTTOM" relativeTo="$parentScrollBarScrollDownButton">
<Offset>
<AbsDimension x="0" y="-2"/>
</Offset>
</Anchor>
</Anchors>
<TexCoords left="0.515625" right="1.0" top="0" bottom="0.4140625"/>
</Texture>
</Layer>
</Layers>
<Scripts>
<OnVerticalScroll>
FauxScrollFrame_OnVerticalScroll(5, RecapPanelDetailsScrollBar_Update);
</OnVerticalScroll>
</Scripts>
</ScrollFrame>
The important bit is FauxScrollFrame_OnVerticleScroll. This will be called when the scrollframe is initialized and later when the user scrolls. In the Win API terms, it's the Paint message basically. This has no contents for the scrolled window at all. It's just the scrollbar.
For scrolled windows I create a bunch of elements, usually build from one template:
<Button name = "RecapPanelDetailTemplate" virtual="true">
<Size>
<AbsDimension x="230" y="14" />
</Size>
<Layers>
<Layer level="BORDER">
<FontString name="$parent_Name" inherits="GameFontHighlight" wraponspaces="false" justifyH="LEFT" text="Spell or ability">
<Size>
<AbsDimension x="145" y="14"/>
</Size>
<Anchors>
<Anchor point="TOPLEFT"/>
</Anchors>
</FontString>
<FontString name="$parent_Total" inherits="GameFontHighlightSmall" justifyH="RIGHT" text="Total">
<Size>
<AbsDimension x="50" y="14"/>
</Size>
<Anchors>
<Anchor point="TOPLEFT" relativeTo="$parent_Name" relativePoint="TOPRIGHT"/>
</Anchors>
</FontString>
<FontString name="$parent_TotalP" inherits="GameFontHighlightSmall" justifyH="RIGHT" text="100%">
<Size>
<AbsDimension x="35" y="14"/>
</Size>
<Anchors>
<Anchor point="TOPLEFT" relativeTo="$parent_Total" relativePoint="TOPRIGHT"/>
</Anchors>
</FontString>
</Layer>
</Layers>
<HighlightTexture file="Interface\QuestFrame\UI-QuestTitleHighlight" alphaMode="ADD"/>
<Scripts>
<OnEnter>
RecapPanel_Detail_OnEnter()
</OnEnter>
<OnLeave>
RecapPanel_Detail_OnLeave()
</OnLeave>
<OnClick>
RecapPanel_Detail_OnClick()
</OnClick>
<OnMouseDown>
RecapPanel_OnMouseDown(arg1);
</OnMouseDown>
<OnMouseUp>
RecapPanel_OnMouseUp(arg1);
</OnMouseUp>
</Scripts>
</Button>
Then later in a <Frames> section:
<Button name="RecapPanelDetail1" inherits="RecapPanelDetailTemplate" id="1">
<Anchors>
<Anchor point="TOPLEFT" relativeTo="RecapPanelOutgoingLabel" relativePoint="BOTTOMLEFT">
<Offset>
<AbsDimension x="0" y="-2"/>
</Offset>
</Anchor>
</Anchors>
</Button>
<Button name="RecapPanelDetail2" inherits="RecapPanelDetailTemplate" id="2">
<Anchors>
<Anchor point="TOPLEFT" relativeTo="RecapPanelDetail1" relativePoint="BOTTOMLEFT"/>
</Anchors>
</Button>
<Button name="RecapPanelDetail3" inherits="RecapPanelDetailTemplate" id="3">
<Anchors>
<Anchor point="TOPLEFT" relativeTo="RecapPanelDetail2" relativePoint="BOTTOMLEFT"/>
</Anchors>
</Button>
<Button name="RecapPanelDetail4" inherits="RecapPanelDetailTemplate" id="4">
<Anchors>
<Anchor point="TOPLEFT" relativeTo="RecapPanelDetail3" relativePoint="BOTTOMLEFT"/>
</Anchors>
</Button>
<Button name="RecapPanelDetail5" inherits="RecapPanelDetailTemplate" id="5">
<Anchors>
<Anchor point="TOPLEFT" relativeTo="RecapPanelDetail4" relativePoint="BOTTOMLEFT"/>
</Anchors>
</Button>
So now I have 5 buttons that contain 3 subelements. In the lua all you need is the function you gave as the second parameter of the OnVerticalScrollEvent (FauxScrollFrame_OnVerticalScroll(5, RecapPanelDetailsScrollBar_Update))
function RecapPanelDetailsScrollBar_Update()
local i, index, item;
if recap_temp.Loaded and recap_temp.DetailsListSize then
FauxScrollFrame_Update(RecapPanelDetailsScrollBar,recap_temp.DetailsListSize-1,5,5);
for i=1,5 do
index = i + FauxScrollFrame_GetOffset(RecapPanelDetailsScrollBar);
if index < recap_temp.DetailsListSize then
getglobal("RecapPanelDetail"..i.."_Name"):SetText(string.sub(recap_temp.DetailsList[index].Effect,2));
getglobal("RecapPanelDetail"..i.."_Total"):SetText(recap_temp.DetailsList[index].Total);
getglobal("RecapPanelDetail"..i.."_TotalP"):SetText(recap_temp.DetailsList[index].TotalP.."%");
getglobal("RecapPanelDetail"..i):Show();
else
getglobal("RecapPanelDetail"..i):Hide();
end
end
end
end
The line in bold above is the important one. In UITemplates.lua:
-- Function to handle the update of manually calculated scrollframes. Used mostly for listings with an indeterminate number of items
function FauxScrollFrame_Update(frame, numItems, numToDisplay, valueStep, button, smallWidth, bigWidth, highlightFrame, smallHighlightWidth, bigHighlightWidth )
Vika on the official WoW forums wrote a very nice explanation for it, that's unfortunately dropped off the forums. But she made this to clarify:
I go about scrollframes all wrong I'm sure. So hopefully others have more insight.
Again sorry for poor formatting. Someday there will be a forum that lets us indent!
edit: copied picture to photobucket to display since not sure Vika would want random links to her url.