ik nobody cares about this project anymore,
so this will be the last update of this post.
Download RBXM : cxui.rbxm (9.6 KB)
**Download RBXL Showcase :
cxuishowcase.rbxl (63.1 KB)
The new, the better user interface framework for advanced programmers.
CXUI, pronounced with each letter, is a lightweight & free framework for advanced scripters in roblox.
It’s features coupled with its free type / natural format makes it a useful tool when working with interfaces.
Specifically made with developers in mind, this framework is adaptable and easy to understand.
Features include
- Free type / natural typing format
- Bulit-in functions (Like for tweening you could say
obj:Tween(TweenInfo, Properties))
- Connections manager (When the object is destroyed, connections made with it are disconnect with it, more info later)
- Component library (A library to build components to use inside your code)
PSUEDOCODE
cxui.New("ClassName", {
-- Properties
}, {
-- Children (you will literally never use this)
})
cxui.New(nil, {
"ClassName"
}) -- Pure data example
-- Making a ScreenGui with a Frame in it
cxui.New("ScreenGui", {}, {
{
"Frame",
Size = UDim2.fromOffset(100, 100)
}
})
-- or, in a better way
cxui.New("ScreenGui", { -- inside the properties table
{ -- you can add in data for children
"Frame",
Size = UDim2.fromOffset(100, 100)
}
})
{ -- Data analogy
ClassName, -- WILL ALWAYS BE IN THIS POSITION, or data[1]
-- oh yeah I forgot you can add names too, its the same deal with the classname just make sure it comes after the classname.
Properties, --- anywhere really
Children, --- Same thing
Wraps, -- functions bulitin, they are called and given the cClass, cStack, or cxuiStack (more later)
}
{ -- Example with a textbutton that prints "Hello World!" each time it is clicked
"ScreenGui",
{
"TextButton",
Size = UDim2.fromOffset(200, 50),
Position = UDim2.fromScale(.5, .5),
AnchorPoint = Vector2.new(.5, .5),
function(cStack)
cStack.MouseButton1Click:Connect(function()
print("Hello World!")
end)
end,
}
}
{ -- or in a different sense, you can make the cxui stack button and implement it into the data
"ScreenGui",
cxui.New("TextButton", {
Size = UDim2.fromOffset(200, 50),
Position = UDim2.fromScale(.5, .5),
AnchorPoint = Vector2.new(.5, .5),
function(cStack)
cStack.MouseButton1Click:Connect(function()
print("Hello World!")
end)
end,
})
}
{ -- There are special wraps for some GuiObjects (buttons, canvasgroups, textboxes)
"TextButton",
Size = UDim2.fromOffset(200, 50),
Position = UDim2.fromScale(.5, .5),
AnchorPoint = Vector2.new(.5, .5),
onClick = function()
print('Hello World!')
end,
}
{
"ScreenGui",
{ -- works anywhere.
"TextButton",
Size = UDim2.fromOffset(200, 50),
Position = UDim2.fromScale(.5, .5),
AnchorPoint = Vector2.new(.5, .5),
onClick = function()
print('Hello World!')
end,
}
}
-- What is a cxuiStack?
-- It's basically a metatable, that mimics a real instance
-- It saves connections in its _connections table, which explains connection manager
-- Just know you can't substitude it for actual instances, to get the actual instance, you would do cxuiStack.inst
-- This code is open source and I'm too lazy to write a doc, you can search in inst! and cxui to find special functions and whatnot.
--[[ cxui itself (the module i mean)
cxui.New(classname?, data, children?) yeah this is want you'll need to use most of the time
cxui.fromExisting(instance), creates a cxuiStack from an existing instance, will NOT support Clone or for cxuiStack so just clone the actual instance,
and you can't export that cxuiStack either.
bulitin to each cxuiStack (example: cxuiStack:getElementFromId(id), cxui.getElementFromId(stack, id), like string and string literals)
:/.getElementFromId(stack?, id)
how to apply ids,
add id and a value that isn't nil to the data
exam: cxui.New("Frame", {
id = true
})
:/.getElementFromName(stack?, name)
:/.mount(rootClass) rootClass could be an instance or cxuiClass, mounts it and parents it to that rootClass.
:/.unmount(). destroys the whole cxuiStack and literally everything else with it, you could also do cxuiStack()
]]
-- done