Создание простенького GUI (интерфейса для управления настройками аддона)

[DreamlØlz]

Есть библиотеки , например асе3 и им подобные. У всех свои плюсы и минусы. Самый самый и самый такой минусовый минус , это размер (много намутишь будет долго грузить вход и игровой мир и тд) . Ну и разумеется для них есть отдельные туторы на их офф сайтах. В гугл асе3 и готово =)

Я же опишу как создать нечто более легкое и гибкое своими руками. Ну это наверное будет в стиле "виндовс" или даже хз как оформить , но как получится в любом случае GUI это гребаный геморой ,куча текста , и не важно на каком языке - факт в том , что без "визуального редактора" это вызывает бугурт :p

Сейчас скорее всего пойдут мысли "вот нахринячил гору текста !!11" и тд...но где GUI и рамки - там гора текста , привыкаем , даже если юзать библиотеки , гора текста от этого не на много уменьшиться

Начнем)

Часть 1 -- Создаем так называемую основу .
Это будет библиотека , и юзать его прийдется через LibStub , в подробности можно не вдаваться , код сюда влил для того что бы увековечить , ведь на фаило обменниках и тд может произойти слет и все заново Вообщем ниже я опишу как теперь создавать менюшки и юзать либстуб.

local MAJOR_VERSION = "DreamsCfg-1.0"
local MINOR_VERSION = 0;

if not LibStub then 
    error(MAJOR_VERSION .. " нима LibStub") 
end

local DreamsCfg, oldLib = LibStub:NewLibrary(MAJOR_VERSION, MINOR_VERSION)

if not DreamsCfg then
    return
end

if oldLib then
    oldLib = {}
    for k, v in pairs(DreamsCfg) do
        DreamsCfg[k] = nil
        oldLib[k] = v
    end
end

local getArgs, doneArgs
do
    local tmp = {}
    function getArgs(...)
        assert(next(tmp) == nil)
        for i = 1, select('#', ...), 2 do
            local k, v = select(i, ...)
            tmp[k] = v
        end
        return tmp
    end
    function doneArgs(args)
        assert(args == tmp)
        for k in pairs(args) do
            args[k] = nil
        end
        return nil
    end
end

local WotLK = not not ToggleAchievementFrame

local panels
if oldLib then
    panels = oldLib.panels or {}
else
    panels = {}
end
DreamsCfg.panels = panels

local panelMeta
if oldLib then
    panelMeta = oldLib.panelMeta or {}
else
    panelMeta = {}
end
DreamsCfg.panelMeta = panelMeta
for funcName in pairs(panelMeta) do
    for panel in pairs(panels) do
        panel[funcName] = nil
    end
    panelMeta[funcName] = nil
end

do
    local function update(control, ...)
        if (...) ~= control.value then
            control:SetValue(...)
        end
    end
    function panelMeta:Refresh()
        for control in pairs(self.controls) do
            if control.getFunc then
                update(control, control.getFunc())
            end
        end
        if self.refreshFunc then
            self:refreshFunc()
        end
    end
    local function panel_OnShow(self)
        self:SetScript("OnShow", self.Refresh)
        self:controlCreationFunc()
        self.controlCreationFunc = nil
        self:Refresh()
    end
    local function panel_okay(self)
        for control in pairs(self.controls) do
            control.oldValue = control.value
            if control.okayFunc then
                control.okayFunc()
            end
        end
    end
    local function panel_cancel(self)
        for control in pairs(self.controls) do
            control:SetValue(control.oldValue)
            if control.cancelFunc then
                control.cancelFunc()
            end
        end
    end
    local function panel_default(self)
        for control in pairs(self.controls) do
            control:SetValue(control.default)
            if control.defaultFunc then
                control.defaultFunc()
            end
        end
    end
    local function CreatePanel(name, parentName, controlCreationFunc)
        local panel
        if not parentName then
            panel = CreateFrame("Frame", name .. "_Panel")
        else
            panel = CreateFrame("Frame", parentName .. "_Panel_" .. name)
        end
        panels[panel] = true

        panel.name = name
        panel.controls = {}
        panel.parent = parentName

        panel.okay = panel_okay
        panel.cancel = panel_cancel
        panel.default = panel_default

        InterfaceOptions_AddCategory(panel)

        panel.controlCreationFunc = controlCreationFunc
        panel:SetScript("OnShow", panel_OnShow)
        for k, v in pairs(panelMeta) do
            panel[k] = v
        end
        
        return panel
    end
    function DreamsCfg.AddOptionsPanel(name, controlCreationFunc)
        return CreatePanel(name, nil, controlCreationFunc)
    end
    
    function DreamsCfg.AddSuboptionsPanel(parentName, name, controlCreationFunc)
        return CreatePanel(name, parentName, controlCreationFunc)
    end
end

function panelMeta:CreateTitleTextAndSubText(titleText, subTextText)
    local title = self:CreateFontString(nil, "ARTWORK", "GameFontNormalLarge")
    title:SetText(titleText)
    title:SetJustifyH("LEFT")
    title:SetJustifyV("TOP")
    title:SetPoint("TOPLEFT", 16, -16)
    
    local subText = self:CreateFontString(nil, "ARTWORK", "GameFontHighlightSmall")
    subText:SetText(subTextText)
    subText:SetNonSpaceWrap(true)
    subText:SetJustifyH("LEFT")
    subText:SetJustifyV("TOP")
    subText:SetPoint("TOPLEFT", title, "BOTTOMLEFT", 0, -8)
    subText:SetPoint("RIGHT", -32, 0)
    
    return title, subText
end

do
    local backdrop = {
        bgFile = [=[Interface\Buttons\WHITE8X8]=],
        edgeFile = [=[Interface\Tooltips\UI-Tooltip-Border]=],
        tile = true,
        tileSize = 16,
        edgeSize = 16,
        insets = { left = 3, right = 3, top = 3, bottom = 3 },
    }

    function panelMeta:CreateScrollFrame()
        local name
        local i = 0
        repeat
            i = i + 1
            name = self:GetName() .. "_ScrollFrame" .. i
        until not _G[name]
        local scrollFrame = CreateFrame("ScrollFrame", name, self, "UIPanelScrollFrameTemplate")
        scrollFrame:SetFrameLevel(scrollFrame:GetFrameLevel() + 1)
        local bg = CreateFrame("Frame", nil, scrollFrame)
        bg:SetPoint("TOPLEFT", scrollFrame, "TOPLEFT", -3, 3)
        bg:SetPoint("BOTTOMRIGHT", scrollFrame, "BOTTOMRIGHT", 3, -3)
        bg:SetBackdrop(backdrop)
        bg:SetBackdropColor(0, 0, 0, 0.25)
        local scrollChild = CreateFrame("Frame", name .. "_Child", scrollFrame)
        scrollFrame:SetScrollChild(scrollChild)
        scrollChild:SetWidth(1)
        scrollChild:SetHeight(1)
        return scrollFrame, scrollChild
    end
end

do
    local function slider_OnValueChanged(self)
        self.value = self:GetValue()
        self:SetValue(self:GetValue())
    end
    
    local function slider_SetValue(self, value)
        getmetatable(self).__index.SetValue(self, value)
        self.value = value
        self.changeFunc(value)
        if self.currentText then
            self.currentText:SetText(self.currentTextFunc(value))
        end
    end
    
    function panelMeta:CreateSlider(...)
        local args = getArgs(...)
        local name
        local i = 0
        repeat
            i = i + 1
            name = self:GetName() .. "_Slider" .. i
        until not _G[name]
        local slider = CreateFrame("Slider", name, self, "OptionsSliderTemplate")
        self.controls[slider] = true
        _G[slider:GetName() .. "Text"]:SetText(args.name)
        slider.tooltipText = args.description
        _G[slider:GetName() .. "Text"]:SetTextColor(NORMAL_FONT_COLOR.r, NORMAL_FONT_COLOR.g, NORMAL_FONT_COLOR.b)
        _G[slider:GetName() .. "Low"]:SetText(args.minText)
        _G[slider:GetName() .. "Low"]:SetTextColor(HIGHLIGHT_FONT_COLOR.r, HIGHLIGHT_FONT_COLOR.g, HIGHLIGHT_FONT_COLOR.b)
        _G[slider:GetName() .. "High"]:SetText(args.maxText)
        _G[slider:GetName() .. "High"]:SetTextColor(HIGHLIGHT_FONT_COLOR.r, HIGHLIGHT_FONT_COLOR.g, HIGHLIGHT_FONT_COLOR.b)
        
        local current
        if args.getFunc then
            slider.getFunc = args.getFunc
            current = args.getFunc()
        else
            current = args.current
        end
        
        if args.currentTextFunc then
            slider.currentTextFunc = args.currentTextFunc
            local currentText = slider:CreateFontString(nil, "ARTWORK", "GameFontHighlightSmall")
            slider.currentText = currentText
            currentText:SetPoint("TOP", slider, "CENTER", 0, -8)
            currentText:SetText(args.currentTextFunc(current))
        end
    
        slider.default = args.default
        slider:SetMinMaxValues(args.minValue, args.maxValue)
        if args.step then
            slider:SetValueStep(args.step)
        end
        slider.oldValue = current
        slider.value = current
        slider:SetValue(slider.value)
        slider.changeFunc = args.setFunc
        slider.SetValue = slider_SetValue
        slider:SetScript("OnValueChanged", slider_OnValueChanged)
        slider.okayFunc = args.okayFunc
        slider.cancelFunc = args.cancelFunc
        slider.defaultFunc = args.defaultFunc
        args = doneArgs(args)
        return slider
    end
end

local function generic_OnEnter(self)
    GameTooltip:SetOwner(self, "ANCHOR_TOPRIGHT")
    GameTooltip:SetText(self.tooltipText, nil, nil, nil, nil, 1)
end
local function generic_OnLeave(self)
    GameTooltip:Hide()
end

do
    local function dropDown_SetValue(self, value)
        self.value = value
        UIDropDownMenu_SetSelectedValue(self, value)
        self.changeFunc(value)
    end
    local helper__num, helper__values
    local function helper()
        local value, text = helper__values[helper__num], helper__values[helper__num+1]
        if value == nil then
            helper__num, helper__values = nil, nil
            return nil
        end
        helper__num = helper__num + 2
        return value, text
    end
    local function get_iter(values)
        if type(values) == "function" then
            return values
        end
        helper__num = 1
        helper__values = values
        return helper
    end
    local SetValue_wrapper
    if WotLK then
        function SetValue_wrapper(self, ...)
            return dropDown_SetValue(...)
        end
    else
        SetValue_wrapper = dropDown_SetValue
    end
    local function dropDown_menu(self)
        for value, text in get_iter(self.values) do
            local info = UIDropDownMenu_CreateInfo()
            info.text = text
            info.value = value
            info.checked = self.value == value
            info.func = SetValue_wrapper
            info.arg1 = self
            info.arg2 = value
            UIDropDownMenu_AddButton(info)
        end
    end
    
    local tmp = {}

    function panelMeta:CreateDropDown(...)
        local args = getArgs(...)
        if type(args.values) ~= "function" then
            for i = 1, #args.values, 2 do
                local k, v = args.values[i], args.values[2]
                tmp[k] = v
            end
        end
        for k in pairs(tmp) do
            tmp[k] = nil
        end
        local name
        local i = 0
        repeat
            i = i + 1
            name = self:GetName() .. "_DropDown" .. i
        until not _G[name]
    
        local dropDown = CreateFrame("Frame", name, self, "UIDropDownMenuTemplate")
        self.controls[dropDown] = true
        if args.name ~= "" then
            local label = dropDown:CreateFontString(nil, "BACKGROUND", "GameFontNormal")
            label:SetText(args.name)
            label:SetPoint("BOTTOMLEFT", dropDown, "TOPLEFT", 16, 3)
        end
        dropDown.tooltipText = args.description
        dropDown.values = args.values
        UIDropDownMenu_Initialize(dropDown, function()
            dropDown_menu(dropDown)
        end)
        if WotLK then
            UIDropDownMenu_SetWidth(dropDown, 90)
        else
            UIDropDownMenu_SetWidth(90, dropDown)
        end
        local current
        if args.getFunc then
            dropDown.getFunc = args.getFunc
            current = args.getFunc()
        else
            current = args.current
        end
        UIDropDownMenu_SetSelectedValue(dropDown, current)
        dropDown.default = args.default
        dropDown.value = args.current
        dropDown.oldValue = args.current
        dropDown.changeFunc = args.setFunc
        dropDown.SetValue = dropDown_SetValue
        dropDown:EnableMouse(true)
        dropDown:SetScript("OnEnter", generic_OnEnter)
        dropDown:SetScript("OnLeave", generic_OnLeave)
        dropDown.okayFunc = args.okayFunc
        dropDown.cancelFunc = args.cancelFunc
        dropDown.defaultFunc = args.defaultFunc
        args = doneArgs(args)
        return dropDown
    end
end

do
    local function donothing() end
    local function button_OnClick(self)
        self.clickFunc()
    end

    function panelMeta:CreateButton(...)
        local args = getArgs(...)
        local name
        local i = 0
        repeat
            i = i + 1
            name = self:GetName() .. "_Button" .. i
        until not _G[name]
    
        local button = CreateFrame("Button", name, self, "UIPanelButtonTemplate")
        self.controls[button] = true
        button:SetText(args.name)
        button.tooltipText = args.description
        button:SetWidth(120)
        button:SetHeight(22)
        button.SetValue = donothing
        button.clickFunc = args.func
        button:SetScript("OnClick", button_OnClick)
        button:SetScript("OnEnter", generic_OnEnter)
        button:SetScript("OnLeave", generic_OnLeave)
        args = doneArgs(args)
        return button
    end
end

do
    local function toggle_SetValue(self, value)
        value = not not value
        self.changeFunc(value)
        self.value = value
        self:SetChecked(value)
    end
    local function toggle_OnClick(self)
        self:SetValue(not not self:GetChecked())
    end

    function panelMeta:CreateToggle(...)
        local args = getArgs(...)
        local name
        local i = 0
        repeat
            i = i + 1
            name = self:GetName() .. "_Toggle" .. i
        until not _G[name]
    
        local toggle = CreateFrame("CheckButton", name, self, "InterfaceOptionsCheckButtonTemplate")
        self.controls[toggle] = true
        _G[toggle:GetName() .. "Text"]:SetText(args.name)
        toggle:SetHitRectInsets(0, -_G[toggle:GetName() .. "Text"]:GetWidth() - 1, 0, 0)
        toggle.tooltipText = args.description
        toggle.default = args.default
        local current
        if args.getFunc then
            toggle.getFunc = args.getFunc
            current = args.getFunc()
        else
            current = args.current
        end
        toggle.value = current
        toggle.oldValue = current
        toggle.changeFunc = args.setFunc
        toggle.SetValue = toggle_SetValue
        toggle:SetScript("OnClick", toggle_OnClick)    
        toggle:SetChecked(current)
        toggle:SetScript("OnEnter", generic_OnEnter)
        toggle:SetScript("OnLeave", generic_OnLeave)
        toggle.okayFunc = args.okayFunc
        toggle.cancelFunc = args.cancelFunc
        toggle.defaultFunc = args.defaultFunc
        args = doneArgs(args)
        return toggle
    end
end

do
    local function update(self, r, g, b, a)
        if not self.hasAlpha then
            a = 1
        end
        self.info.r = r
        self.info.g = g
        self.info.b = b
        if self.hasAlpha then
            self.info.opacity = a
        end
        self.color:SetTexture(r, g, b, a)
        if self.value == self.oldValue then
            self.value = {}
        end
        self.value[1] = r
        self.value[2] = g
        self.value[3] = b
        if self.hasAlpha then
            self.value[4] = a
        end
        self.info.r = r
        self.info.g = g
        self.info.b = b
        if self.hasAlpha then
            self.info.opacity = 1 - a
        end
        if self.hasAlpha then
            self.changeFunc(r, g, b, a)
        else
            self.changeFunc(r, g, b)
        end
    end    
    local function button_SetValue(self, ...)
        if select('#', ...) == 1 and type((...)) == "table" then
            return button_SetValue(self, unpack(value))
        end
        update(self, ...)
    end
    local function button_OnClick(self)
        OpenColorPicker(self.info)
    end    
    local function swatchFunc(self)
        local r, g, b = ColorPickerFrame:GetColorRGB()
        local opacity = 1 - OpacitySliderFrame:GetValue()
    
        update(self, r, g, b, opacity)
    end
    local function cancelFunc(self)
        local previousValues = ColorPickerFrame.previousValues
        local r, g, b, opacity = previousValues.r, previousValues.g, previousValues.b, hasAlpha and 1 - previousValues.opacity or 1
    
        update(self, r, g, b, opacity)
    end

    function panelMeta:CreateColorPicker(...)
        local args = getArgs(...)
        local name
        local i = 0
        repeat
            i = i + 1
            name = self:GetName() .. "_ColorPicker" .. i
        until not _G[name]
    
        if not args.hasAlpha then
            args.defaultA = 1
        end
        
        local button = CreateFrame("Button", name, self)
        self.controls[button] = true
        
        
        local currentR, currentG, currentB, currentA
        if args.getFunc then
            button.getFunc = args.getFunc
            currentR, currentG, currentB, currentA = button.getFunc()
            if not args.hasAlpha then
                currentA = 1
            end
        else
            currentR = args.currentR
            currentG = args.currentG
            currentB = args.currentB
            if not args.hasAlpha then
                currentA = 1
            else
                currentA = args.currentA
            end
        end
        
        button.tooltipText = args.description
        local text = button:CreateFontString(nil, "ARTWORK", "GameFontHighlight")
        text:SetText(args.name)
        text:SetPoint("LEFT", button, "RIGHT", 0, 1)
        button:SetHitRectInsets(0, -text:GetWidth() - 1, 0, 0)
        local color = button:CreateTexture(nil, "ARTWORK")
        button.color = color
        color:SetTexture(currentR, currentG, currentB, currentA)
        local background = button:CreateTexture(nil, "BORDER")
        background:SetTexture([=[Tileset\Generic\Checkers]=])
        background:SetTexCoord(0, 0.5, 0, 0.5)
        local border = button:CreateTexture(nil, "BACKGROUND")
        border:SetTexture([=[Interface\ChatFrame\ChatFrameColorSwatch]=])
        button:SetWidth(26)
        button:SetHeight(26)
        background:SetPoint("CENTER")
        background:SetWidth(14)
        background:SetHeight(14)
        color:SetPoint("CENTER")
        color:SetWidth(14)
        color:SetHeight(14)
        border:SetAllPoints(button)
        button.default = { args.defaultR, args.defaultG, args.defaultB }
        button.oldValue = { currentR, currentG, currentB }
        if hasAlpha then
            button.default[4] = args.defaultA
            button.oldValue[4] = currentA
        end
        button.value = button.oldValue
        button.hasAlpha = args.hasAlpha
        button.changeFunc = args.setFunc
        button.SetValue = button_SetValue
        local function swatchFunc_wrapper()
            swatchFunc(button)
        end
        local function cancelFunc_wrapper()
            cancelFunc(button)
        end
        button.info = {
            swatchFunc = swatchFunc_wrapper,
            hasOpacity = args.hasAlpha,
            opacityFunc = args.hasAlpha and swatchFunc_wrapper or nil,
            r = currentR,
            g = currentG,
            b = currentB,
            opacity = args.hasAlpha and 1 - currentA or nil,
            cancelFunc = cancelFunc_wrapper,
        }
        button:SetScript("OnClick", button_OnClick)
        button:SetScript("OnEnter", generic_OnEnter)
        button:SetScript("OnLeave", generic_OnLeave)
        button:RegisterForClicks("LeftButtonUp")
        button.okayFunc = args.okayFunc
        button.cancelFunc = args.cancelFunc
        button.defaultFunc = args.defaultFunc
        args = doneArgs(args)
        return button
    end
end

function DreamsCfg.AddSlashCommand(name, ...)
    local num = 0
    local name_upper = name:upper()
    for i = 1, select('#', ...) do
        local cmd = select(i, ...)
        num = num + 1
        _G["SLASH_" .. name_upper .. num] = cmd
        local cmd_lower = cmd:lower()
        if cmd_lower ~= cmd then
            num = num + 1
            _G["SLASH_" .. name_upper .. num] = cmd_lower
        end
    end

    _G.hash_SlashCmdList[name_upper] = nil
    _G.SlashCmdList[name_upper] = function()
        InterfaceOptionsFrame_OpenToCategory(name)
    end
end

for funcName, func in pairs(panelMeta) do
    DreamsCfg[funcName] = func
    for panel in pairs(panels) do
        panel[funcName] = func
    end
end 

[DreamlØlz]

Вообщем в топик выше уже ничего не влезит ,по этому переходим сюда:p
Вот собственно собрал я код и добавил LibStub , что бы париться просто качаем и все. Там уже бд есть.
Качнуть образец можно тут:
Вложение 264793


И так качнули и видим следующие строки (если собирали руками , эта ну сваими а не маими , тогда строчки добавляем):
Это и будет функция , которая при вызове создаст намше меню. Точнее сказать в ее теле и будет меню)

LibStub("DreamsCfg-1.0").AddOptionsPanel("Dreamlol's script", function(self)  

end); 

Думаю внутри и так будет все более менее понятно. Везде где могли быть непонятки ставил комменты.

--//Это массив для сохранения дефолт настроек в нашу бд.
DoMenuDB = {
        color = {r = 1,g = 1, b = 1, a = 1},
};

LibStub("DreamsCfg-1.0").AddOptionsPanel("Dreamlol's script", function(self) 

    local scrollFrame = self:CreateScrollFrame()
    scrollFrame:SetPoint('TOPRIGHT',0,0)
    scrollFrame:SetSize(100,100)
 
    self:CreateButton(
        'name', 'Кнопка',
        'description', 'Это выплывет при наведении на кнопку',
        'func', function()
                    print("Клик на кнопку") 
                end
        ):SetPoint('TOP', 0, 0) --//позиция , небольшая хитрость , что бы не давать глобальных имен =)

    self:CreateColorPicker(
        'name', 'Выбор цвета',
        'description', 'Инфа при наведении мышкой',
        'hasAlpha', true, --будет ли ползунок прозрачности
        'defaultR', 1, --стандартный красный
        'defaultG', 1, --стандартный зеленый
        'defaultB', 1, --стандартный голубой
        'defaultA', 1, -- стандартная прозрачность
        'currentR', DoMenuDB.color.r,
        'currentG', DoMenuDB.color.g,
        'currentB', DoMenuDB.color.b,
        'currentA', DoMenuDB.color.a,
        'setFunc',  function(r, g, b, a)
                        DoMenuDB.color.r, DoMenuDB.color.g, DoMenuDB.color.b, DoMenuDB.color.a = r, g, b, a 
                    end
    ):SetPoint('CENTER', 0, 0)
    
    self:CreateDropDown(
        'name', 'Выбор',
        'description', 'Инфа при наведении',
        'values', {
            'ONE', "Выбор1",
            'TWO', "Выбор2",
            'THREE', "Выбор3",
         },
        'default', 'ONE',
        'current', DoMenuDB.choice,
        'setFunc', function(value) DoMenuDB.choice = value end
    ):SetPoint('TOPLEFT',0,0)
    
    self:CreateSlider(
        'name', 'Ползунок',
        'description', 'Инфа при наведении',
        'minText', '0%',
        'maxText', '100%',
        'minValue', 0,
        'maxValue', 100,
        'step', 0.05,
        'default', 50,
        'current', DoMenuDB.currentRange,
        'setFunc', function(value) DoMenuDB.currentRange = value end,
        'currentTextFunc', function(value) return ("%.0f%%"):format(value) end
    ):SetPoint('BOTTOMLEFT', 0, 0)
    
    self:CreateToggle(
        'name', 'Сраная галка)',
        'description', 'инфа при наведении',
        'default', false,
        'getFunc', function() return DoMenuDB.myToggle end,
        'setFunc', function(value) DoMenuDB.myToggle = value end
    ):SetPoint('BOTTOMRIGHT',0,0)
end);
LibStub("DreamsCfg-1.0").AddSlashCommand("Dreamlol's script", "/scr", "/scriptcfg"); 

[DreamlØlz]

Вот что у меня получилось :

PS не обращаем внимания на позиции , это я так на рандом поставил, а так элементы управления можно ставить куда угодно.