RbxGui (Library): Difference between revisions

From Legacy Roblox Wiki
Jump to navigationJump to search
>JulienDethurens
No edit summary
m Text replacement - "<SyntaxHighlight code="lua">" to "<syntaxhighlight lang="lua">"
Tags: mobile web edit mobile edit
 
(12 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 '''RbxGui''' is, how to use it and how to keep up with its ever-changing <abbr title="Application Programming Interface">API</abbr>.
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 and methods that the library has to offer.  Below is some sample code that demonstrates the use of this library.
[[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 uses fields instead of methods, so don't use a colon.  Use a period instead. The only exception is the GetApi method.'''
'''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 [[LocalScript]] that goes in either the [[StarterGui]] or [[StarterPack]] that makes a list of objects and puts them in a drop down list: <code lua>
{{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 "RbxGui" library
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
Line 41: Line 41:
holderGui.Parent = playerGui -- put the screen gui in the playergui
holderGui.Parent = playerGui -- put the screen gui in the playergui
end
end
</code>}}
}}}}


== 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 [[Studio]]:
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]]:


<code lua>for _, funcname in pairs(LoadLibrary('RbxGui'):GetApi()) do print(funcname) end</code>
<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 [[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.
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.
<code lua>
<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))
</code>
</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 75: Line 75:


==The <abbr title="Application Programming Interface">API</abbr>==
==The <abbr title="Application Programming Interface">API</abbr>==
 
<div style = "width: 90%;">
{{:CreateSlider_(Function)}}
{{:CreateSlider_(Function)}}
{{:CreateScrollingFrame_(Function)}}
{{:CreateScrollingFrame_(Function)}}
{{:AutoTruncateTextObject_(Function)}}
{{:AutoTruncateTextObject_(Function)}}
{{:CreateScrollingFrame_(Function)}}
{{:GetFontHeight_(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 90: 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.

Example
Here's example code designed for use in a LocalScript that goes in either the StarterGui or StarterPack and that makes a list of objects and puts them in a drop down list:
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.


See Also