AIOS UI Framework

Modern, modular UI toolkit for AIOS Core addons.

Features:

• Widget system with Attach() pattern
• Layouts: Stack, Flex, Grid, Base
• Reactive state with UI::State
• Draggable & persistent windows
• Lazy-loading & service registry integration

Version: 0.3.0 • Requires AIOS Core

UI::Frames — Main Service

Central entry point. Access via:

local UIFrames = AIOS.ServiceRegistry:Get("UI::Frames")

Key methods (proxied + extended):

• :CreateFrame(parent, template)
• :CreatePanel(parent, {width, height})
• :CreateButton(parent, {text, width, ...})
• :CreateStack / :CreateFlex / :CreateGrid

UI::State — Reactive Bindings

local UIState = AIOS.ServiceRegistry:Get("UI::State")
local count = UIState(0)

count:Bind(function(new)
  label:SetText("Count: " .. new)
end)

count:Set(count:Get() + 1)   -- triggers UI update

Extensions: Panel & Window

Panel

local panel = UIFrames:CreatePanel(parent, {width=320, height=240})
panel:SetBackground(0.08, 0.08, 0.12, 0.94)
panel:SetPadding(16,16,16,16)

local content = panel:GetContent()
-- add children to content

Window (draggable + persistent)

local win = UIFrames:CreateFrame("Frame", UIParent, "BackdropTemplate")
UIFrames:SetWindow(win, {key = "MyAddon_Main", locked = false})

Layouts

• Stack — vertical stacking, weight/distribution
• Flex — direction, wrap, justify, align
• Grid — tabular data with sorting & click callbacks
• BaseLayout — common parent with batch updates

local stack = UIFrames:CreateStack(content, {spacing=12, align="stretch"})
stack:Add(btn1, {weight=1})
stack:Add(btn2, {weight=2})

Widgets Overview

Button Example

local btn = UIFrames:CreateButton(content, {text="Apply", width=140})
btn:SetOnClick(function() print("Clicked!") end)

local busy = UIState(false)
btn:BindBusy(busy)

Toggle / Checkbox

local tog = UIFrames:CreateToggle(content, {text="Dark Mode", value=true})
tog:SetOnValueChanged(function(v) ApplyTheme(v) end)

Slider

local slider = UIFrames:CreateSlider(content, {min=0, max=100, value=50, step=5})
slider:SetOnValueChanged(function(self, val) SetVolume(val) end)

Grid (Data Table)

local grid = UIFrames:CreateGrid(content, {
  columns = {
    {header="Name", width=180},
    {header="Level", width=80, justify="CENTER"}
  }
})

grid:SetData({
  {"PlayerOne", "72"},
  {"MageMain",   "68"}
})

Quick Start Example

-- Basic window with toggle + button
local win = UIFrames:CreateFrame("Frame", UIParent)
win:SetSize(380, 260)
UIFrames:SetWindow(win, {key="SettingsWin"})

local panel = UIFrames:CreatePanel(win, {width=360,height=220})
panel:SetPoint("CENTER")
panel:SetBackground(0.1,0.1,0.12,0.96)

local content = panel:GetContent()

local tog = UIFrames:CreateToggle(content, {text="Enabled"})
tog:SetPoint("TOP", content, "TOP", 0, -20)

local btn = UIFrames:CreateButton(content, {text="Save"})
btn:SetPoint("BOTTOM", content, "BOTTOM", 0, 20)
btn:SetOnClick(function() print("Saved!") end)

win:Show()