Thread Tools Display Modes
06-24-05, 10:24 AM   #1
Klindel
A Deviate Faerie Dragon
Join Date: Jun 2005
Posts: 10
Question Help with the ScrollFrame and FauxScrollFrame

I'm trying to figure out the functionality of these two frames. I've created a ScrollFrame but I'm trying to get functionality similar to that of the ScrollFrame used in the AuctionFrame. I want to be able to scroll selectable frames in a window. Where I can add buttons and text to the frames at will.

Anyone able to point me to something that can show me how to do this? This appears to be the last thing thats stopping me from completing my mod.

Thanks
  Reply With Quote
06-24-05, 10:59 AM   #2
Gello
A Molten Giant
AddOn Author - Click to view addons
Join Date: Jan 2005
Posts: 521
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.

Last edited by Gello : 06-24-05 at 11:02 AM.
  Reply With Quote
06-24-05, 11:32 AM   #3
Klindel
A Deviate Faerie Dragon
Join Date: Jun 2005
Posts: 10
Thanks, as soon as I get off from work I'll give this a try. So far this is the best explaination I've seen, hpefully it allows me to do what I need to do.
  Reply With Quote
06-24-05, 12:06 PM   #4
Klindel
A Deviate Faerie Dragon
Join Date: Jun 2005
Posts: 10
I just noticed something, the image references a ScrollFrameChild but the XML you posted doesn't have that, is the scrollframechild going to be what contains all the frames I create and the code tells it Frames in the child to display?
  Reply With Quote
06-24-05, 12:45 PM   #5
Gello
A Molten Giant
AddOn Author - Click to view addons
Join Date: Jan 2005
Posts: 521
It's from the FauxScrollFrame_Update function in UIPanelTemplates.lua.

You don't need to worry about it so much as it explains that the child window referenced in the function is the total height of all the data. It confused me because I wrongly assumed "child" was a subset of the whole, when it's the opposite. And just to reiterate the scrollbar is just a slider, it doesn't know or care what data you use. You act on the position of the scrollbar and paint the window based on its position.
  Reply With Quote
06-24-05, 08:45 PM   #6
Klindel
A Deviate Faerie Dragon
Join Date: Jun 2005
Posts: 10
Hrm, well I'll say upfront I don't know XML very well, I'm a coder, learning XML is a bit weird to me. I can't seem to get this to work the way I want. I currently have a window and the scroll bar appears but there appears to be a gap in the scroll bar for no reason. None of the other frames are appearing either. Hoping you might be able to help. Here is what I have ( I apologize for the formatting, you can go to http://www.rafb.net/paste/results/jwVVmE31.html to check it out a bit better):

(cut out top stuff for length reasons)

<Frame>...

<Backdrop bgFile="Interface\DialogFrame\UI-DialogBox-Background" edgeFile="Interface\DialogFrame\UI-DialogBox-Border" tile="true">
<BackgroundInsets>
<AbsInset left="11" right="12" top="12" bottom="11"/>
</BackgroundInsets>
<TileSize>
<AbsValue val="32"/>
</TileSize>
<EdgeSize>
<AbsValue val="32"/>
</EdgeSize>
</Backdrop>


<Layers>
<Layer level="ARTWORK">
(Layer Stuff here)
</Layer>
</Layers>



<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>

<Frames>
<ScrollFrame name="RecapPanelDetailsScrollBar" inherits="FauxScrollFrameTemplate">
<Size>
<AbsDimension x="-5" y="300"/>
</Size>
<Anchors>
<Anchor point="TOPLEFT" relativeTo="DruidText" relativePoint="BOTTOMRIGHT">
<Offset>
<AbsDimension x="130" y="-20"/>
</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>
<Button name="SearchButton" inherits="UIPanelButtonTemplate" text="SEARCH">
<Size>
<AbsDimension x="140" y="25"/>
</Size>
<Anchors>
<Anchor point="TOPLEFT">
<Offset>
<AbsDimension x="25" y="-50"/>
</Offset>
</Anchor>
</Anchors>
<Scripts>
<OnClick>
message("Button Pushed");
</OnClick>
</Scripts>
<FontString inherits="ChatFontNormal" bytes="64"/>
</Button>
<CheckButton name="RogueButton" inherits="UICheckButtonTemplate" id="1">
<Size>
<AbsDimension x="24" y="24"/>
</Size>
<Anchors>
<Anchor point="TOPLEFT" relativeTo="LFGSearchFrame">
<Offset>
<AbsDimension x="20" y="-100"/>
</Offset>
</Anchor>
</Anchors>
</CheckButton>
<CheckButton name="MageButton" inherits="UICheckButtonTemplate" id="2">
<Size>
<AbsDimension x="24" y="24"/>
</Size>
<Anchors>
<Anchor point="RIGHT" relativeTo="RogueButton">
<Offset>
<AbsDimension x="55" y="0"/>
</Offset>
</Anchor>
</Anchors>
</CheckButton>
<CheckButton name="WarlockButton" inherits="UICheckButtonTemplate" id="3">
<Size>
<AbsDimension x="24" y="24"/>
</Size>
<Anchors>
<Anchor point="RIGHT" relativeTo="MageButton">
<Offset>
<AbsDimension x="55" y="0"/>
</Offset>
</Anchor>
</Anchors>
</CheckButton>
<CheckButton name="PriestButton" inherits="UICheckButtonTemplate" id="4">
<Size>
<AbsDimension x="24" y="24"/>
</Size>
<Anchors>
<Anchor point="RIGHT" relativeTo="WarlockButton">
<Offset>
<AbsDimension x="55" y="0"/>
</Offset>
</Anchor>
</Anchors>
</CheckButton>
<CheckButton name="PalShmButton" inherits="UICheckButtonTemplate" id="5">
<Size>
<AbsDimension x="24" y="24"/>
</Size>
<Anchors>
<Anchor point="BOTTOM" relativeTo="PriestButton">
<Offset>
<AbsDimension x="0" y="-20"/>
</Offset>
</Anchor>
</Anchors>
</CheckButton>
<CheckButton name="WarriorButton" inherits="UICheckButtonTemplate" id="6">
<Size>
<AbsDimension x="24" y="24"/>
</Size>
<Anchors>
<Anchor point="BOTTOM" relativeTo="RogueButton">
<Offset>
<AbsDimension x="0" y="-20"/>
</Offset>
</Anchor>
</Anchors>
</CheckButton>
<CheckButton name="HunterButton" inherits="UICheckButtonTemplate" id="7">
<Size>
<AbsDimension x="24" y="24"/>
</Size>
<Anchors>
<Anchor point="BOTTOM" relativeTo="MageButton">
<Offset>
<AbsDimension x="0" y="-20"/>
</Offset>
</Anchor>
</Anchors>
</CheckButton>
<CheckButton name="DruidButton" inherits="UICheckButtonTemplate" id="8">
<Size>
<AbsDimension x="24" y="24"/>
</Size>
<Anchors>
<Anchor point="BOTTOM" relativeTo="WarlockButton">
<Offset>
<AbsDimension x="0" y="-20"/>
</Offset>
</Anchor>
</Anchors>
</CheckButton>
<CheckButton name="AnyButton" inherits="UICheckButtonTemplate" id="9">
<Size>
<AbsDimension x="24" y="24"/>
</Size>
<Anchors>
<Anchor point="BOTTOM" relativeTo="PriestButton">
<Offset>
<AbsDimension x="55" y="0"/>
</Offset>
</Anchor>
</Anchors>
</CheckButton>

<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>
</Frames>
</Frame>
</Ui>
  Reply With Quote
06-24-05, 09:10 PM   #7
Gello
A Molten Giant
AddOn Author - Click to view addons
Join Date: Jan 2005
Posts: 521
<Anchor point="TOPLEFT" relativeTo="RecapPanelOutgoingLabel" relativePoint="BOTTOMLEFT">
That relativeTo isn't defined likely. Sorry I didn't make a more generic example to copy/paste hehe

</Layers>

<Button name = "RecapPanelDetailTemplate" virtual="true">
...
<Frames>
I would also move this virtual button outside the frame entirely. I stick these at the very start. So an xml looks like:

<Button name="SomeTemplate" virtual="true">
etc
</Button>

<Frame name="MyFrame">
<Layers>
etc
</Layers>
<Frames>
</Frames>
<Scripts>
</Scripts>
</Frame>

I'll look at it more in depth later.

Last edited by Gello : 06-24-05 at 09:14 PM.
  Reply With Quote
06-24-05, 10:07 PM   #8
Klindel
A Deviate Faerie Dragon
Join Date: Jun 2005
Posts: 10
Thanks for that, this is my first XML attempt. I'm usually much better at coding if I know what the function calls are hehe.



I'm also confused as to what recap_temp is, I'm getting an error so I know something is wrong but I'm just trying to figure out where I would declare something like that?
  Reply With Quote
06-25-05, 09:30 AM   #9
Gello
A Molten Giant
AddOn Author - Click to view addons
Join Date: Jan 2005
Posts: 521
Well recap_temp is the table I store all temporary values to. You're going to have a ton of problems using the copy/pasted examples above. They were meant as examples. Trying to plug them into a working mod without the rest of the code to support it is a disaster. Stop now lol

Start with a simple one first using your own names and stuff and work from there.

Start from scratch. Ditch all the scrollbar stuff you have now. Identify the steps and go from simple to complex:

1. You need data to scroll through
2. You need to make a scrollbar on the window
3. You need to display the data depending on the position of the scrollbar

Then work with it one step at a time without copy/pasting and poking it until it works.

I learned how to make scrollframes from the FriendsFrame.xml. I didn't just copy/paste as it would've taught me nothing and some parts that would've worked coincidentally could've broken later. Break down the parts so that you understand them.

1. You need data to scroll through:

For now, since you're just starting (btw scrollframes are a really really bad first xml project), make a simple table:

_OnLoad()
t = {};
for i=1,50 do t[i] = "Test "..math.random(100); end
end

Now you have an array of 50 entries with "Test (some random number)"

2. You need a scrollbar on the window:

<ScrollFrame name="TestModScrollBar" inherits="FauxScrollFrameTemplate">
<Size>
<AbsDimension x="30" y="80"/>
</Size>
<Anchors>
<Anchor point="TOPLEFT" relativeTo="DruidText" relativePoint="BOTTOMRIGHT">
<Offset>
<AbsDimension x="130" y="-20"/>
</Offset>
</Anchor>
</Anchors>
<Scripts>
<OnVerticalScroll>
FauxScrollFrame_OnVerticalScroll(16, TestModScrollBar_Update);
</OnVerticalScroll>
</Scripts>
</ScrollFrame>

The layers are just textures you don't need. The above is a scrollbar of <Size> with <Anchors> and the most important part, a FauxScrollFrame_OnVerticalScroll that points to your function. The 16 is the pixel height of each entry you'll eventually make. We're only doing 5 lines in this example, 16x5 is 80 so that's the height of the scrollbar.

Then call the _Update to make it work:

function TestModScrollBar_Update()
FauxScrollFrame_Update(TestModScrollBar,50,5,16); -- 50 is max entries, 5 is number of lines, 16 is pixel height of each line
end

Now the scrollbar is function. You can test by getting the offset and printing it:

function TestModScrollBar_Update()
FauxScrollFrame_Update(TestModScrollBar,50,5,16); -- 50 is max entries, 5 is number of lines, 16 is pixel height of each line
DEFAULT_CHAT_FRAME:AddMessage("We're at "..FauxScrollFrame_GetOffset(TestModScrollBar));
end

Try that and scroll the bar around. You'll see that _GetOffset will return from 0 to 45, which happens to be 50-5.

3. You need to display the data depending on the position of the scrollbar

We have an indexed array of data, and a scrollbar. Now we need to display the data based on the scrollbar's position. First we need to construct the xml elements of the display.

Start simple and make one button template:

<Button name = "TestModEntryTemplate" virtual="true">
<Size>
<AbsDimension x="150" y="16" />
</Size>
<Layers>
<Layer level="BORDER">
<FontString name="$parent_Text" inherits="GameFontHighlight" wraponspaces="false" justifyH="LEFT" text="TestModEntry"/>
</Layer>
</Layers>
</Button>

This is a virtual button, 150 pixels wide and 16 pixels tall, that contains a FontString named $parent_Text

Now use this template to draw your series of buttons:

<Button name="TestModEntry1" inherits="TestModEntryTemplate">
<Anchors>
<Anchor point="TOPRIGHT" relativeTo="TestModScrollBar" relativePoint="TOPLEFT"/>
</Anchors>
</Button>
<Button name="TestModEntry2" inherits="TestModEntryTemplate">
<Anchors>
<Anchor point="TOPLEFT" relativeTo="TestModEntry1" relativePoint="BOTTOMLEFT"/>
</Anchors>
</Button>
<Button name="TestModEntry3" inherits="TestModEntryTemplate">
<Anchors>
<Anchor point="TOPLEFT" relativeTo="TestModEntry2" relativePoint="BOTTOMLEFT"/>
</Anchors>
</Button>
<Button name="TestModEntry4" inherits="TestModEntryTemplate">
<Anchors>
<Anchor point="TOPLEFT" relativeTo="TestModEntry3" relativePoint="BOTTOMLEFT"/>
</Anchors>
</Button>
<Button name="TestModEntry5" inherits="TestModEntryTemplate">
<Anchors>
<Anchor point="TOPLEFT" relativeTo="TestModEntry4" relativePoint="BOTTOMLEFT"/>
</Anchors>
</Button>

Draws the first with top-right aligned to top-left of the scrollbar, then it draws each one below aligned with top-left of next one aligned to bottom-left of previous.

Now we go back to the update function and add the code to display our data depending on the position of the bar:

We have 5 lines on the screen at all times: TestModEntry1, TestModEntry2, etc. Each entry has a text inside named TestModEntry1_Text, TestModEntry2_Text, etc.

function TestModScrollBar_Update()

local line, lineplusoffset;

FauxScrollFrame_Update(TestModScrollBar,50,5,16);

for line=1,5 do
lineplusoffset = line + FauxScrollFrame_GetOffset(TestModScrollBar);

if lineplusoffset < 50 then
getglobal("TestModEntry"..line.."_Text"):SetText(t[lineplusoffset]);
getglobal("TestModEntry"..line):Show();
else
getglobal("TestModEntry"..line):Hide();
end
end

end

Now we have a scrollbar that scrolls through the data and redisplays it when we move.

Now you can customize it to your mod's needs. First step would be to make the values fit your mod, especially the size and shape of the data. Then you can worry about the graphic elements like adding the highlight element to the template button:

<HighlightTexture file="Interface\QuestFrame\UI-QuestTitleHighlight" alphaMode="ADD"/>

So a highlight appears beneath buttons. You can add the textures to the scrollbar so there's a border around the scrollbar. You can add other "columns" to the template button to display columns of information.

Last edited by Gello : 06-25-05 at 09:33 AM.
  Reply With Quote
06-25-05, 01:13 PM   #10
Beladona
A Molten Giant
 
Beladona's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2005
Posts: 539
please wrap code lines in [ CODE] brackets, because posting it the way you did is very distracting and makes your thread hard to read. I know you think it looks less readable, but it is a courtesy to others, as most people refuse to read something this garbled...

Last edited by Beladona : 06-25-05 at 01:18 PM.
  Reply With Quote
06-25-05, 11:29 PM   #11
Gello
A Molten Giant
AddOn Author - Click to view addons
Join Date: Jan 2005
Posts: 521
I know you think it looks less readable, but it is a courtesy to others, as most people refuse to read something this garbled...
Not to be smarmy or anything, but then don't read it? Consume or ignore.

In the future I'll refrain from posting code unless necessary to get a point across, but it will be without (code) tags sorry in advance.
  Reply With Quote
06-26-05, 11:48 AM   #12
Remelio
 
Remelio's Avatar
Join Date: Dec 2004
Posts: 696
I have a solution. If you don't want to use the CODE option, there is also a little button up top on the second row of buttons that is for "Increase Indent" and then to the left of it, "Decrease Indent"



Basically you can use those
when you want to indent.. it does put a line inbetween though, but
at least it automatically remembers when you've indented, so you only have to indent once - also when the words wrap it still indents as well... then when you're done with indenting
(you can use it more than once by the way)

simply hit the other button labeled "Decrease Indent"
Also, for an example:

You can hit it more than once



Hope this helps.



One more thing.. it doesn't cut/paste into notepad tabbed, so you'll have to re-do the indenting in your code, but at least it looks better on the screen when you're reading through it on the board



Last edited by Remelio : 06-26-05 at 12:21 PM. Reason: Be careful when editing your message though, because apparently it has a tendency to put extra lines in all over the place and then you have to go back in and fix it so it doesn't look silly ;)
  Reply With Quote
06-26-05, 12:08 PM   #13
Cairenn
Credendo Vides
 
Cairenn's Avatar
Premium Member
WoWInterface Admin
Join Date: Mar 2004
Posts: 7,134
Remmy has a good suggestion. Either way, though, go ahead and continue to post code. I'd rather have it, without code tags around it, than not have it at all.
  Reply With Quote
06-26-05, 12:19 PM   #14
Remelio
 
Remelio's Avatar
Join Date: Dec 2004
Posts: 696
Originally Posted by Cairenn
I'd rather have it, without code tags around it, than not have it at all.
I completely agree with what Cairenn said
  Reply With Quote
06-26-05, 01:04 PM   #15
Beladona
A Molten Giant
 
Beladona's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2005
Posts: 539
agreed. I just prefer to be able to read it before I try to help
  Reply With Quote
06-26-05, 04:21 PM   #16
Gello
A Molten Giant
AddOn Author - Click to view addons
Join Date: Jan 2005
Posts: 521
function test()
-- test
end

Much better thanks Sorry to derail to OP's post.
  Reply With Quote

WoWInterface » Developer Discussions » General Authoring Discussion » Help with the ScrollFrame and FauxScrollFrame

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