Lua:VGUI Basics

From GMod Wiki

Lua: Using VGUI Basics

Description:	How to use VGUI in Garry's Mod.
Original Author:	Xera
Created:	20:41, 2nd August 2007 (GMT)

Contents 1 VGUI Tutorial 1.1 The example 1.2 The explanation 1.3 Useful links

VGUI Tutorial

The old tutorial was getting.. old and still uses RES files so I decided to update it, here we go..

'Note: This tutorial assumes that you have basic knowledge of Lua syntax.' if not, goto your first lua :D

The example

 
function TestVGUI( )
 
    local Frame = vgui.Create( "Frame" ); //Create a frame
    Frame:SetSize( 200, 200 ); //Set the size to 200x200
    Frame:SetPos( 100, 100 ); //Move the frame to 100,100
    Frame:SetVisible( true );  //Visible
    Frame:MakePopup( ); //Make the frame
    Frame:PostMessage( "SetTitle", "text", "This is the title" ); //Set the title to "This is the title"   
 
    local Button = vgui.Create( "Button", Frame ); //Create a button that is attached to Frame
    Button:SetText( "Click me!" ); //Set the button's text to "Click me!"
    Button:SetPos( 30, 5 ); //Set the button's position relative to it's parent(Frame)
    Button:SetWide( 100 ); //Sets the width of the button you're making
    function Button:DoClick( ) //This is called when the button is clicked
        self:SetText( "Clicked" ); //Set the text to "Clicked"
    end
 
end
 
concommand.Add( "testvgui", TestVGUI ); 
 

If the comments didn't explain what everything does, read on.

The explanation

vgui.Create

local Frame = vgui.Create( "Frame" ); 

This function creates a VGUI element, here we're creating a Frame element which will hold all of our buttons, labels and other VGUI elements.

It takes 3 arguments, the first being the element that we want to create, in this case a Frame. The second is the parent, the VGUI element that it is attached to and will move around with. The third one isn't important. (I don't really know what it does..)

Panel.SetSize

Frame:SetSize( 200, 200 );

Here we're setting the size of Frame to 200 by 200 pixels.

Panel.SetPos

Frame:SetPos( 100, 100 );

This function sets the X and Y position of a VGUI element, it takes 2 arguments, x and y(In pixels.) If the element has a parent, the position is relative to the parent's position.

Panel.SetVisible & Panel.MakePopup

Frame:SetVisible( true );
Frame:MakePopup( );

These two functions are used in conjunction to make the frame show, I'm not quite sure if Panel.MakePopup is needed but we'll leave it in just in case.

Panel.PostMessage

Frame:PostMessage( "SetTitle", "text", "This is the title" );

I won't go into great detail on this one but it's used to directly tell an element to do something, in this case, we're setting the title.

Panel.SetText

Button:SetText( "Click me!" );

This function should be pretty self explanatory but if for some strange reason it isn't, it sets the text of things like labels, buttons, etc.

P.DoClick

 
function Button:DoClick( )
    self:SetText( "Clicked" );
end
 

This function is called whenever a button or any other clickable element is.. clicked, you can use it in one of two ways;

 
function Panel.DoClick( self )
end
 

or

 
function Panel:DoClick( )
end
 

Useful links

• VGUI Functions

Basic element list

You can also create your own VGUI elements but that's a different tutorial.