RbxGui (Library): Difference between revisions
>JulienDethurens Moved to RbxGui (Library). |
m Text replacement - "<SyntaxHighlight code="lua">" to "<syntaxhighlight lang="lua">" Tags: mobile web edit mobile edit |
||
(14 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
As with many of the current [[RbxLibrary|libraries]], [[RbxGui (Library)|RbxGui]] is a Lua Asset designed to assist with the making of [[GUI]] widgets. This article will explain to you what | As with many of the current [[RbxLibrary|libraries]], [[RbxGui (Library)|RbxGui]] is a Lua Asset designed to assist with the making of [[GUI]] widgets. This article will explain to you what [[RbxGui (Library)|RbxGui]] is, how to use it and how to keep up with its ever-changing <abbr title="Application Programming Interface">API</abbr>. | ||
== What is RbxGui? == | == What is RbxGui? == | ||
[[RbxGui (Library)|RbxGui]] is (as stated above) an official Roblox-created library specifically for aiding with the creation of GUI programs. Its use is not mandatory, but is recommended for those who would like to make good looking GUI features in lesser amounts of time. | [[RbxGui (Library)|RbxGui]] is (as stated above) an official Roblox-created library specifically for aiding with the creation of GUI programs. Its use is not mandatory, but is recommended for those who would like to make good looking <abbr title="Graphical User Interface">GUI</abbr> features in lesser amounts of time. | ||
== How do I use RbxGui? == | == How do I use RbxGui? == | ||
[[RbxGui (Library)|RbxGui]] is used by simply loading the library in your code and storing it in a variable. After that, one can easily use the various API functions | [[RbxGui (Library)|RbxGui]] is used by simply loading the library in your code and storing it in a variable. After that, one can easily use the various <abbr title="Application Programming Interface">API</abbr> functions that the library has to offer. Below is some sample code that demonstrates the use of this library. | ||
'''Note: This library | '''Note: This library doesn't use methods, so don't use a colon. Use a period instead. The only exception is the GetApi method.''' | ||
{{Example|Here's example code designed for use in a | {{Example|Here's example code designed for use in a {{type|instance=LocalScript}} that goes in either the {{type|instance=StarterGui}} or {{type|instance=StarterPack}} and that makes a list of objects and puts them in a drop down list:{{code|= | ||
function waitForChild(p, c) -- utility code; don't worry about this | function waitForChild(p, c) -- utility code; don't worry about this | ||
while not p:FindFirstChild(c) do | while not p:FindFirstChild(c) do | ||
Line 17: | Line 17: | ||
end | end | ||
local library = assert(LoadLibrary('RbxGui')) -- load our | local library = assert(LoadLibrary('RbxGui')) -- load our RbxGui library | ||
function onItemSelected(item) -- create our callback that gets called when an item gets selected | function onItemSelected(item) -- create our callback that gets called when an item gets selected | ||
-- arguments: item (string) | -- arguments: item (string) | ||
print("'" .. item .. "' was selected!") | print("'" .. item .. "' was selected!") | ||
end | end | ||
local listOfItems={"This", "is", "a", "list", "of", "items."} | local listOfItems={"This", "is", "a", "list", "of", "items."} -- our list of items | ||
local dropDownList, updateSelection=library.CreateDropDownMenu(listOfItems, onItemSelected); -- create the drop down list with our list and the callback | local dropDownList, updateSelection=library.CreateDropDownMenu(listOfItems, onItemSelected); -- create the drop down list with our list and the callback | ||
dropDownList.Size = UDim2.new(1, 0, 1, 0) -- this is to make the drop down list fit in our GUI correctly | dropDownList.Size = UDim2.new(1, 0, 1, 0) -- this is to make the drop down list fit in our GUI correctly | ||
local holderGui = Instance.new( | local holderGui = Instance.new('ScreenGui') -- make the screen gui that holds everything | ||
local holderFrame = Instance.new( | local holderFrame = Instance.new('Frame') -- make a frame to hold the drop down list | ||
holderFrame.Size = UDim2.new(0, 200, 0, 26) | holderFrame.Size = UDim2.new(0, 200, 0, 26) -- make it the size you want | ||
holderFrame.Position = UDim2.new(0.5, -100, 0.5, -20) | holderFrame.Position = UDim2.new(0.5, -100, 0.5, -20) -- position it the way you want (right now it's in the center) | ||
holderFrame.BackgroundTransparency = 1 | holderFrame.BackgroundTransparency = 1 -- make it transparent for the drop down list | ||
holderFrame.Parent = holderGui | holderFrame.Parent = holderGui | ||
dropDownList.Parent = holderFrame | dropDownList.Parent = holderFrame -- put the drop down list in the frame | ||
if game.Players.LocalPlayer then -- make sure we have a player | if game.Players.LocalPlayer then -- make sure we have a player | ||
local playerGui = waitForChild(game.Players.LocalPlayer, "PlayerGui"); -- wait for playergui | local playerGui = waitForChild(game.Players.LocalPlayer, "PlayerGui"); -- wait for playergui | ||
holderGui.Parent = playerGui | holderGui.Parent = playerGui -- put the screen gui in the playergui | ||
end | end | ||
}}}} | |||
== How do you figure out what's in this library? == | == How do you figure out what's in this library? == | ||
To find all of the values in a library, you have to use a method found in every library, called ''GetApi''. This method allows you to see what exactly is in the library by returning a table of all of the function names in the library. To figure out all of the values in [[RbxGui (Library)|RbxGui]], simply run this code in your command bar in [[ | To find all of the values in a library, you have to use a method found in every library, called ''GetApi''. This method allows you to see what exactly is in the library by returning a {{type|table}} of all of the function names in the library. To figure out all of the values in [[RbxGui (Library)|RbxGui]], simply run this code in your command bar in the [[studio]]: | ||
< | <syntaxhighlight lang="lua">for _, funcname in pairs(LoadLibrary('RbxGui'):GetApi()) do print(funcname) end</syntaxhighlight> | ||
This piece of code iterates through the table returned by ''GetApi'' and prints out the contents of the table. | This piece of code iterates through the {{type|table}} returned by ''GetApi'' and prints out the contents of the {{type|table}}. | ||
Also, if it is an official library, there is often a | Also, if it is an official library, there is often a [[Help (Function)|Help]] function associated with it. To use it, just call the [[Help (Function)|Help]] function from the library loaded into your code. Help has an argument, which is either the function, or the index of the function, for example, both of these will provide help for CreateDropDownMenu. | ||
< | <syntaxhighlight lang="lua"> | ||
local RbxGui = assert(LoadLibrary('RbxGui')) | local RbxGui = assert(LoadLibrary('RbxGui')) | ||
print(RbxGui.Help("CreateDropDownMenu")) | print(RbxGui.Help("CreateDropDownMenu")) | ||
print(RbxGui.Help(RbxGui.CreateDropDownMenu)) | print(RbxGui.Help(RbxGui.CreateDropDownMenu)) | ||
</ | </syntaxhighlight> | ||
== So, is that it? == | == So, is that it? == | ||
Line 64: | Line 64: | ||
=== What is RbxGui? === | === What is RbxGui? === | ||
[[RbxGui (Library)|RbxGui]] is an official Roblox-created library consisting of useful functions that are designed to help you make enticing GUIs. | [[RbxGui (Library)|RbxGui]] is an official Roblox-created library consisting of useful functions that are designed to help you make enticing <abbr title="Graphical User Interfaces">GUIs</abbr>. | ||
=== How do I use it? === | === How do I use it? === | ||
Line 72: | Line 72: | ||
=== How do I know what's in the library? === | === How do I know what's in the library? === | ||
You can iterate through the table returned by ''GetApi'' and print out the values of it. You can also use the | You can iterate through the table returned by ''GetApi'' and print out the values of it. You can also use the [[Help (Function)|Help]] function in the library with the values of the table. | ||
==The <abbr title="Application Programming Interface">API</abbr>== | |||
<div style = "width: 90%;"> | |||
{{:CreateSlider_(Function)}} | {{:CreateSlider_(Function)}} | ||
{{:CreateScrollingFrame_(Function)}} | {{:CreateScrollingFrame_(Function)}} | ||
{{:AutoTruncateTextObject_(Function)}} | {{:AutoTruncateTextObject_(Function)}} | ||
{{:CreateStyledMessageDialog_(Function)}} | {{:CreateStyledMessageDialog_(Function)}} | ||
{{:CreateMessageDialog_(Function)}} | {{:CreateMessageDialog_(Function)}} | ||
{{:CreateDropDownMenu_(Function)}} | {{:CreateDropDownMenu_(Function)}} | ||
{{:CreatePropertyDropDownMenu_(Function)}} | {{:CreatePropertyDropDownMenu_(Function)}} | ||
{{:GetFontHeight_(Function)}} | |||
</div> | |||
== See Also == | == See Also == | ||
Line 94: | Line 90: | ||
*[[RbxLibrary]] | *[[RbxLibrary]] | ||
*[http://www.roblox.com/RbxGui-item?id=45284430 RbxGui] | *[http://www.roblox.com/RbxGui-item?id=45284430 RbxGui] | ||
[[Category:Libraries]] |
Latest revision as of 04:55, 27 April 2023
As with many of the current libraries, RbxGui is a Lua Asset designed to assist with the making of GUI widgets. This article will explain to you what RbxGui is, how to use it and how to keep up with its ever-changing API.
What is RbxGui?
RbxGui is (as stated above) an official Roblox-created library specifically for aiding with the creation of GUI programs. Its use is not mandatory, but is recommended for those who would like to make good looking GUI features in lesser amounts of time.
How do I use RbxGui?
RbxGui is used by simply loading the library in your code and storing it in a variable. After that, one can easily use the various API functions that the library has to offer. Below is some sample code that demonstrates the use of this library.
Note: This library doesn't use methods, so don't use a colon. Use a period instead. The only exception is the GetApi method.
function waitForChild(p, c) -- utility code; don't worry about this
while not p:FindFirstChild(c) do
p.ChildAdded:wait();
end
return p[c];
end
local library = assert(LoadLibrary('RbxGui')) -- load our RbxGui library
function onItemSelected(item) -- create our callback that gets called when an item gets selected
-- arguments: item (string)
print("'" .. item .. "' was selected!")
end
local listOfItems={"This", "is", "a", "list", "of", "items."} -- our list of items
local dropDownList, updateSelection=library.CreateDropDownMenu(listOfItems, onItemSelected); -- create the drop down list with our list and the callback
dropDownList.Size = UDim2.new(1, 0, 1, 0) -- this is to make the drop down list fit in our GUI correctly
local holderGui = Instance.new('ScreenGui') -- make the screen gui that holds everything
local holderFrame = Instance.new('Frame') -- make a frame to hold the drop down list
holderFrame.Size = UDim2.new(0, 200, 0, 26) -- make it the size you want
holderFrame.Position = UDim2.new(0.5, -100, 0.5, -20) -- position it the way you want (right now it's in the center)
holderFrame.BackgroundTransparency = 1 -- make it transparent for the drop down list
holderFrame.Parent = holderGui
dropDownList.Parent = holderFrame -- put the drop down list in the frame
if game.Players.LocalPlayer then -- make sure we have a player
local playerGui = waitForChild(game.Players.LocalPlayer, "PlayerGui"); -- wait for playergui
holderGui.Parent = playerGui -- put the screen gui in the playergui
end
How do you figure out what's in this library?
To find all of the values in a library, you have to use a method found in every library, called GetApi. This method allows you to see what exactly is in the library by returning a table of all of the function names in the library. To figure out all of the values in RbxGui, simply run this code in your command bar in the studio:
for _, funcname in pairs(LoadLibrary('RbxGui'):GetApi()) do print(funcname) end
This piece of code iterates through the table returned by GetApi and prints out the contents of the table.
Also, if it is an official library, there is often a Help function associated with it. To use it, just call the Help function from the library loaded into your code. Help has an argument, which is either the function, or the index of the function, for example, both of these will provide help for CreateDropDownMenu.
local RbxGui = assert(LoadLibrary('RbxGui'))
print(RbxGui.Help("CreateDropDownMenu"))
print(RbxGui.Help(RbxGui.CreateDropDownMenu))
So, is that it?
That is all there is to it. Let's recap upon what we've learned today.
What is RbxGui?
RbxGui is an official Roblox-created library consisting of useful functions that are designed to help you make enticing GUIs.
How do I use it?
To use RbxGui, you must load it into your code and then call its members, which are designed to do things that would normally take more time to do.
How do I know what's in the library?
You can iterate through the table returned by GetApi and print out the values of it. You can also use the Help function in the library with the values of the table.
The API
CreateSlider( number steps, number width, UDim2 position ) | |
Returns | Frame sliderGui, IntValue sliderPosition |
Description: | Returns 2 objects, (sliderGui, sliderPosition). sliderGui is a Frame that contains the entire slider gui. sliderPosition is an IntValue whose current value specifies the specific step the slider is currently on (This value can be modified by a script, and the slider with adjust position). The steps argument specifies how many different positions the slider can hold along the bar. width specifies in pixels how wide the bar should be (modifiable afterwards if desired). position argument should be a UDim2 for slider gui positioning. |
CreateScrollingFrame( table orderList, string style ) | |
Returns | Frame scrollFrame, ImageButton scrollUpButton, ImageButton scrollDownButton, function recalculateFunction |
Description: | Returns 4 objects, (scrollFrame, scrollUpButton, scrollDownButton, recalculateFunction). scrollFrame can be filled with GuiObjects. It will lay them out and allow scrollUpButton/scrollDownButton to interact with them. orderList is an optional argument (and specifies the order to layout the children. Without orderlist, it uses the children order) style is also optional, and allows for a 'grid' styling if style is passed 'grid' as a string. recalculateFunction can be called when a relayout is needed (when orderList changes, or when scrollFrame size changes). |
AutoTruncateTextObject( TextLabel textLabelToAutoTruncate ) | |
Returns | TextLabel autoTruncatingTextLabel, Function changeText |
Description: | Returns 2 objects, (autoTruncatingTextLabel, changeText). The textLabelToAutoTruncate input is modified to automatically truncate text (with ellipsis), if it gets too small to fit. changeText is a function that can be used to change the text, it takes 1 string as an argument. |
CreateStyledMessageDialog( string title, string message, string style, table buttons ) | |
Returns | Instance messageContainer |
Description: | Returns a gui object of a message box with title and message as passed in. buttons input is an array of Tables contains a 'Text' and 'Function' field for the text/callback of each button, style is a string, either 'Error', 'Notify' or 'Confirm'. |
CreateMessageDialog( string title, string message, table buttons ) | |
Returns | Instance messageContainer |
Description: | Returns a gui object of a message box with title and message as passed in. buttons input is an array of tables that contains a 'Text' and 'Function' field for the text/callback of each button. |
CreateDropDownMenu( table items, function onItemSelected ) | |
Returns | Instance guiContainer, function updateSelection |
Description: | First argument should be a table full of strings that will populate menu. Second argument should be a function that takes one argument, and is called when a user selects a new object in the drop down menu. Returns 2 results, a gui container to the gui object and a updateSelection function for external updating. The container is a drop-down-box created around a list of items. |
CreatePropertyDropDownMenu( Instance descendant, string propertyName, Enum enumType ) | |
Returns | Instance guiContainer |
Description: | returns a container with a drop-down-box that is linked to the propertyName field of instance which is of type enumType. |
GetFontHeight( Font font, FontSize fontSize ) | |
Returns | number pixelSize |
Description: | Returns the vertical size in pixels of the given font + fontSize. |