Editbox under slider

[Benalish]

Hi. Can I create a slider like this, with the yellow title at the top and the editbox bottom without ace libraries ? If so, how should I proceed?

[mikma]

Yeah sure. Just create a slider first and after that editbox under it.
Combine:

local slider = CreateFrame("Slider", "MySlider", nil, "OptionsSliderTemplate")
slider:SetWidth(144)
slider:SetHeight(17)
slider:SetOrientation("HORIZONTAL")
slider:SetThumbTexture("Interface\\Buttons\\UI-SliderBar-Button-Horizontal")
slider:SetMinMaxValues(1,100)
slider:SetValueStep(1)
slider:SetValue(1)

slider.tooltipText = 'Set the size of the note'
getglobal(slider:GetName() .. 'Low'):SetText('Left')
getglobal(slider:GetName() .. 'High'):SetText('Right')
getglobal(slider:GetName() .. 'Text'):SetText('Text!')
slider:SetScript("OnValueChanged", function(self, newvalue)
UpdateMySlider()
end)

and

local editbox = CreateFrame("EditBox", "MyEditBox", nil)
editbox:SetPoint("TOP")
editbox:SetPoint("LEFT")
editbox:SetPoint("RIGHT")
editbox:SetHeight(100)
editbox:SetFontObject(GameFontHighlightSmall)
editbox:SetTextInsets(2,2,2,2)
editbox:SetMultiLine(false)
editbox:SetAutoFocus(true)
editbox:SetScript("OnEscapePressed", function()
editbox:ClearFocus()
end)
editbox:SetScript("OnEditFocusLost", function(self) editbox:ClearFocus() end)
editbox:SetScript("OnShow", function(self)
self:SetText("")
self:SetFocus()
end)

Tweak and tune the rest.

[Benalish]

As I build four similar slider in xml, there is a container (frame?) where put everything inside to be used as a model to inherit?

[Duugu]

Create a new <frame> tag, add the virtual attribute, and place your stuff into <Frames></Frames> within the new frame.
Then use the new frame to inherit from.

[Benalish]

The editbox beneath the slider in ace3 libraries what inherits? I would reproduce the same smooth frame , but I have no idea how to do it

[Duugu]

It doesn't inherits from something. They build those widgets from a scratch:

local frame = CreateFrame("Frame", nil, UIParent)
 
    frame:EnableMouse(true)
    frame:SetScript("OnMouseDown", Frame_OnMouseDown)
 
    local label = frame:CreateFontString(nil, "OVERLAY", "GameFontNormal")
    label:SetPoint("TOPLEFT")
    label:SetPoint("TOPRIGHT")
    label:SetJustifyH("CENTER")
    label:SetHeight(15)
 
    local slider = CreateFrame("Slider", nil, frame)
    slider:SetOrientation("HORIZONTAL")
    slider:SetHeight(15)
    slider:SetHitRectInsets(0, 0, -10, 0)
    slider:SetBackdrop(SliderBackdrop)
    slider:SetThumbTexture("Interface\\Buttons\\UI-SliderBar-Button-Horizontal")
    slider:SetPoint("TOP", label, "BOTTOM")
    slider:SetPoint("LEFT", 3, 0)
    slider:SetPoint("RIGHT", -3, 0)
    slider:SetValue(0)
    slider:SetScript("OnValueChanged",Slider_OnValueChanged)
    slider:SetScript("OnEnter", Control_OnEnter)
    slider:SetScript("OnLeave", Control_OnLeave)
    slider:SetScript("OnMouseUp", Slider_OnMouseUp)
    slider:SetScript("OnMouseWheel", Slider_OnMouseWheel)
 
    local lowtext = slider:CreateFontString(nil, "ARTWORK", "GameFontHighlightSmall")
    lowtext:SetPoint("TOPLEFT", slider, "BOTTOMLEFT", 2, 3)
 
    local hightext = slider:CreateFontString(nil, "ARTWORK", "GameFontHighlightSmall")
    hightext:SetPoint("TOPRIGHT", slider, "BOTTOMRIGHT", -2, 3)
 
    local editbox = CreateFrame("EditBox", nil, frame)
    editbox:SetAutoFocus(false)
    editbox:SetFontObject(GameFontHighlightSmall)
    editbox:SetPoint("TOP", slider, "BOTTOM")
    editbox:SetHeight(14)
    editbox:SetWidth(70)
    editbox:SetJustifyH("CENTER")
    editbox:EnableMouse(true)
    editbox:SetBackdrop(ManualBackdrop)
    editbox:SetBackdropColor(0, 0, 0, 0.5)
    editbox:SetBackdropBorderColor(0.3, 0.3, 0.30, 0.80)
    editbox:SetScript("OnEnter", EditBox_OnEnter)
    editbox:SetScript("OnLeave", EditBox_OnLeave)
    editbox:SetScript("OnEnterPressed", EditBox_OnEnterPressed)
    editbox:SetScript("OnEscapePressed", EditBox_OnEscapePressed)

[Benalish]

In XML

...
<EditBox name="editbox" parent="frame">						
	<Scripts>
		<OnLoad>
			editbox:SetAutoFocus(false)
                        editbox:SetFontObject(GameFontHighlightSmall)
                        editbox:SetPoint("TOP", slider, "BOTTOM")
                        editbox:SetHeight(14)
                        editbox:SetWidth(70)
                        editbox:SetJustifyH("CENTER")
                        editbox:EnableMouse(true)
                        editbox:SetBackdrop(ManualBackdrop)
                        editbox:SetBackdropColor(0, 0, 0, 0.5)
                        editbox:SetBackdropBorderColor(0.3, 0.3, 0.30, 0.80)				
		</OnLoad>
	</Scripts>
</EditBox>
...

Works evertything but SetBackdropColor and SetBackdropBorderColor

[p3lim]

Why in gods name are you using xml?
Also, you're creating a global called "editbox", that will definitely create some issues!

[Phanx]

If you really want to use XML (probably because you hate kittens, yourself, life, and the universe in general) then you should be aware that all of your OnLoad, OnEvent, etc. scripts receive the same arguments that those script receive when you define them in Lua. The first argument is always a variable named "self" that refers to the frame. So, you do not need to use your frame's global name inside the script. Just use "self" to refer to it.

But really, don't use XML. It's horrible.

[Benalish]

Could you at least tell me what is the equivalent of SetBackdropBorderColor in XML?

[Lombra]

editbox:SetBackdrop(ManualBackdrop)

ManualBackdrop is not defined anywhere, so setting the colors won't have any visible effect. You'll want to do something like this:

editbox:SetBackdrop({
	bgFile = [[Interface\Buttons\WHITE8X8]],
	edgeFile = [[Interface\Buttons\WHITE8X8]],
	edgeSize = 1,
})

Also, if you're using "XML" solely for the OnLoad script, that's completely pointless as that's still Lua code. Just have everything in the Lua file for sanity!

[Benalish]

If I want solid color instead of texture?

[Resike]

Originally Posted by Benalish If I want solid color instead of texture?

Just color the white texture with:

frame:SetBackdropColor(0, 0, 0, 1) -- r, b, g, a

I personally use this for normal EditBoxes, you can remove the title and resize it for sliders if you want:

function EditBox:CreateEditBox(parent)
    local frame = CreateFrame("EditBox", nil, parent)
    frame:SetWidth(200)
    frame:SetHeight(26)
    frame:SetJustifyH("Left")
    frame:SetAutoFocus(false)
    frame:SetFontObject(GameFontHighlight)
    frame:SetTextInsets(4, 4, 2, 2)
    frame:SetHitRectInsets(0, 0, 0, 0)
    frame:SetBackdrop({
        bgFile = [[Interface\Buttons\White8X8]],
        edgeFile = [[Interface\Tooltips\UI-Tooltip-Border]],
        tile = true,
        tileSize = 16,
        edgeSize = 14,
        insets = {left = 2, right = 2, top = 2, bottom = 2}
    })
    frame:SetBackdropColor(0, 0, 0, 0.75)
    frame:SetBackdropBorderColor(0.3, 0.3, 0.3, 1.0)
    frame.Title = frame:CreateFontString(nil, "Overlay")
    frame.Title:SetFontObject(GameFontNormal)
    frame.Title:SetJustifyH("Left")
    frame.Title:SetJustifyV("Middle")
    frame.Title:SetWordWrap(false)
    frame.Title:SetSize(1, 20)
    frame.Title:SetPoint("BottomLeft", frame, "TopLeft", 3, 0)
    frame.Title:SetPoint("BottomRight", frame, "TopRight", -3, 0)
    frame.Title:SetText("EditBox")
    frame:SetScript("OnEnter", function(self)
        self:SetBackdropBorderColor(0.5, 0.5, 0.5, 1.0)
    end)
    frame:SetScript("OnLeave", function(self)
        self:SetBackdropBorderColor(0.3, 0.3, 0.3, 1.0)
    end)
    frame:SetScript("OnEscapePressed", function(self)
        self:ClearFocus()
    end)
    frame:SetScript("OnEnterPressed", function(self)
        self:ClearFocus()
    end)
    frame:SetScript("OnEditFocusLost", function(self)
        self:HighlightText(0, 0)
    end)
    frame:SetScript("OnEditFocusGained", function(self)
        self:HighlightText(0, -1)
    end)
    return frame
end

[Lombra]

Originally Posted by Benalish If I want solid color instead of texture?

When it comes to backdrops, you have to provide a real texture (eg, a file). The texture I provided is a solid white texture, so it effectively works as a simple, solid color.

[Phanx]

Your other option for a solid background would be to use a simple texture instead of a "real" backdrop. This would create a 50% opaque red background:

local bg = frame:CreateTexture(nil, "BACKGROUND") -- does not need a global name
bg:SetAllPoints(true) -- if you want it inset or outside, set explicit points
bg:SetTexture(1, 0, 0, 0.5) -- you can pass colors instead of a texture if you just want a solid color
frame.bg = bg -- so it's easy to access later from other scopes

[Benalish]

From this page: "Backdrops are deprecated in favour of the new tiling mechanisms". What it the new tiling mechanism?

[Phanx]

Backdrops weren't deprecated after all (they're still widely used in the default UI, and work just as they always have) but the "tiling mechanism" is the ability for textures to be tiled. Let's say you have a frame that's 400px square, and a texture file that's 100px square.

local tex = frame:CreateTexture(nil, "BACKGROUND")
tex:SetAllPoints()
tex:SetTexture("Path//To//The//Texture")

At this point the texture is stretched to 400% so that it covers the whole frame.

tex:SetHorizTile(true)

Now the texture will tile (repeat) horizontally, so you'll end up with 4 visual copies of the texture, side by side, each 100px wide, but still stretched to 400px height.

tex:SetVertTile(true)

Now the texture will tile in both directions, so you now have 16 visual copies of the texture in a 4x4 grid, each 100px square.

There's no way to control the tile size; it will always use the real pixel dimensions of the source file.

The idea was that Blizzard was going to use this, plus a series of individual textures to make up the border, and they do use this system on some newer things like the battle pet tooltip, but backdrops are still a thing.

[Resike]

Since i'm pretty sure i'll need this in the future here is a lua only fancy slider, it's pretty basic yet but still much better then the blizzard ones.

local function CreateSlider(parent)
    local frame = CreateFrame("Slider", nil, parent)
    frame:SetSize(200, 17)
    frame:EnableMouseWheel(true)
    frame:SetHitRectInsets(0, 0, -14, -15)
    frame:SetMinMaxValues(0, 100)
    frame:SetValue(50)
    frame:SetValueStep(1)
    frame:SetHitRectInsets(0, 0, 0, 0)
    frame:SetObeyStepOnDrag(true)
    frame:EnableMouseWheel(true)
    frame:SetOrientation("Horizontal")
    frame:SetBackdrop({
        bgFile = "Interface\\Buttons\\UI-SliderBar-Background",
        edgeFile = "Interface\\Buttons\\UI-SliderBar-Border",
        tile = true,
        edgeSize = 8,
        tileSize = 8,
        insets = {left = 3, right = 3, top = 6, bottom = 6}
    })
    frame:SetBackdropBorderColor(0.7, 0.7, 0.7, 1.0)
    frame:SetScript("OnEnter", function(self)
        self:SetBackdropBorderColor(1, 1, 1, 1)
    end)
    frame:SetScript("OnLeave", function(self)
        self:SetBackdropBorderColor(0.7, 0.7, 0.7, 1.0)
    end)
    frame:SetScript("OnMouseWheel", function(self, delta)
        if delta > 0 then
            self:SetValue(self:GetValue() + self:GetValueStep())
        else
            self:SetValue(self:GetValue() - self:GetValueStep())
        end
    end)
    frame:SetScript("OnValueChanged", function(self, value)
        frame.EditBox:SetText(value)
    end)
    frame.MinLabel = frame:CreateFontString(nil, "Overlay")
    frame.MinLabel:SetFontObject(GameFontHighlightSmall)
    frame.MinLabel:SetSize(0, 14)
    frame.MinLabel:SetWordWrap(false)
    frame.MinLabel:SetPoint("TopLeft", frame, "BottomLeft", 0, -1)
    local min, max = frame:GetMinMaxValues()
    frame.MinLabel:SetText(min)
    frame.MaxLabel = frame:CreateFontString(nil, "Overlay")
    frame.MaxLabel:SetFontObject(GameFontHighlightSmall)
    frame.MaxLabel:SetSize(0, 14)
    frame.MaxLabel:SetWordWrap(false)
    frame.MaxLabel:SetPoint("TopRight", frame, "BottomRight", 0, -1)
    frame.MaxLabel:SetText(max)
    frame.Title = frame:CreateFontString(nil, "Overlay")
    frame.Title:SetFontObject(GameFontNormal)
    frame.Title:SetSize(0, 14)
    frame.Title:SetWordWrap(false)
    frame.Title:SetPoint("Bottom", frame, "Top")
    frame.Title:SetText("Slider")
    frame.Thumb = frame:CreateTexture(nil, "Artwork")
    frame.Thumb:SetSize(32, 32)
    frame.Thumb:SetTexture("Interface\\Buttons\\UI-SliderBar-Button-Horizontal")
    frame:SetThumbTexture(frame.Thumb)
    frame.EditBox = CreateFrame("EditBox", nil, frame)
    frame.EditBox:EnableMouseWheel(true)
    frame.EditBox:SetAutoFocus(false)
    frame.EditBox:SetNumeric(false)
    frame.EditBox:SetJustifyH("Center")
    frame.EditBox:SetFontObject(GameFontHighlightSmall)
    frame.EditBox:SetSize(50, 14)
    frame.EditBox:SetPoint("Top", frame, "Bottom", 0, -1)
    frame.EditBox:SetTextInsets(4, 4, 0, 0)
    frame.EditBox:SetBackdrop({
        bgFile = "Interface\\ChatFrame\\ChatFrameBackground",
        edgeFile = "Interface\\ChatFrame\\ChatFrameBackground",
        tile = true,
        edgeSize = 1,
        tileSize = 5
    })
    frame.EditBox:SetBackdropColor(0, 0, 0, 1)
    frame.EditBox:SetBackdropBorderColor(0.2, 0.2, 0.2, 1.0)
    frame.EditBox:SetText(frame:GetValue())
    --[[frame.EditBox:SetScript("OnShow", function(self)
        self:SetText("")
        self:SetText(frame:GetValue())
    end)]]
    if InterfaceOptionsFrame then
        InterfaceOptionsFrame:HookScript("OnShow", function(self)
            frame.EditBox:SetText("")
            frame.EditBox:SetText(frame:GetValue())
        end)
    end
    frame.EditBox:SetScript("OnEnter", function(self)
        self:SetBackdropBorderColor(0.4, 0.4, 0.4, 1.0)
    end)
    frame.EditBox:SetScript("OnLeave", function(self)
        self:SetBackdropBorderColor(0.2, 0.2, 0.2, 1.0)
    end)
    frame.EditBox:SetScript("OnMouseWheel", function(self, delta)
        if delta > 0 then
            frame:SetValue(frame:GetValue() + frame:GetValueStep())
        else
            frame:SetValue(frame:GetValue() - frame:GetValueStep())
        end
    end)
    frame.EditBox:SetScript("OnEscapePressed", function(self)
        self:ClearFocus()
    end)
    frame.EditBox:SetScript("OnEnterPressed", function(self)
        local value = tonumber(self:GetText())
        if value then
            local min, max = frame:GetMinMaxValues()
            if value >= min and value <= max then
                frame:SetValue(value)
            elseif value < min then
                frame:SetValue(min)
            elseif value > max then
                frame:SetValue(max)
            end
            frame.EditBox:SetText(frame:GetValue())
        else
            frame:SetValue(frame:GetValue())
        end
        self:ClearFocus()
    end)
    frame.EditBox:SetScript("OnEditFocusLost", function(self)
        self:HighlightText(0, 0)
    end)
    frame.EditBox:SetScript("OnEditFocusGained", function(self)
        self:HighlightText(0, -1)
    end)
    frame.Plus = CreateFrame("Button", nil, frame)
    frame.Plus:SetSize(18, 18)
    frame.Plus:RegisterForClicks("AnyUp")
    frame.Plus:SetPoint("Left", frame.EditBox, "Right", 0, 0)
    frame.Plus:SetNormalTexture("Interface\\Buttons\\UI-SpellbookIcon-NextPage-Up")
    frame.Plus:SetPushedTexture("Interface\\Buttons\\UI-SpellbookIcon-NextPage-Down")
    frame.Plus:SetHighlightTexture("Interface\\ChatFrame\\UI-ChatIcon-BlinkHilight")
    frame.Plus:SetScript("OnClick", function(self)
        frame:SetValue(frame:GetValue() + frame:GetValueStep())
    end)
    frame.Minus = CreateFrame("Button", nil, frame)
    frame.Minus:SetSize(18, 18)
    frame.Minus:RegisterForClicks("AnyUp")
    frame.Minus:SetPoint("Right", frame.EditBox, "Left", 0, 0)
    frame.Minus:SetNormalTexture("Interface\\Buttons\\UI-SpellbookIcon-PrevPage-Up")
    frame.Minus:SetPushedTexture("Interface\\Buttons\\UI-SpellbookIcon-PrevPage-Down")
    frame.Minus:SetHighlightTexture("Interface\\ChatFrame\\UI-ChatIcon-BlinkHilight")
    frame.Minus:SetScript("OnClick", function(self)
        frame:SetValue(frame:GetValue() - frame:GetValueStep())
    end)
    return frame
end