Derma VGUI Example

From GMod Wiki

Using Derma is actually very easy, Here is an example which I will then go through step by step:

 
 
function testpanel() -- Create the function
test = vgui.Create("DFrame") -- Create the frame
menu1 = vgui.Create("DButton") -- Create the button 
 
	test:SetPos(50,50) -- set the frame's position on the screen
	test:SetSize(300, 300) -- set the frame size
	test:SetTitle( "Test" ) -- set the frame title
	test:SetVisible( true ) -- Make the frame visible
	test:MakePopup() -- make the frame popup
	menu1:SetParent( test ) -- parent the button to the frame
	menu1:SetText( "Menu >" ) -- set the button text
	menu1:SetPos(150, 150) -- set the button position in the frame
	menu1:SetSize( 100, 20 ) -- set the button size
	menu1.DoClick = function ( btn ) -- this will be called when the button is clicked
				local menu123 = DermaMenu() -- create a derma menu
				menu123:AddOption("hello", function() Msg("Hello") end ) -- adding options
				menu123:AddOption("how", function() Msg("How") end )
				menu123:AddOption("are", function() Msg("Are") end )
				menu123:AddOption("you", function() Msg("You") end )
				menu123:AddOption("?", function() Msg("?") end )
				menu123:Open()
		end  -- ending the doclick function
end -- ending the function
concommand.Add("menutest", testpanel) -- adding the console command
 

Right so I'm going to assume that you know how to use functions because if you don't then you should go back to the starter Lua Tutorial.

So the first bit:

 
 
test = vgui.Create("DFrame") // Create the frame
 
 

This simply means that you are creating the frame and from now on when you call test it will know you mean that frame.

 
 menu1 = vgui.Create("DButton") // Create the button  
 

This just means that you are creating a button and as above from now on when you call menu1 it will know you mean the button.

Right so next are just the variables that define the frame and button they are pretty self explanatory.

 
test:SetPos(50,50) // set the frame's position on the screen 
 

This is just the frame's position on your screen, so it is 50 pixels across and 50 down that it starts.

 
test:SetSize(300, 300) // set the frame size 
 

This set's the size of the frame so in this case it is 300 pixels wide and 300 tall.

 
test:SetTitle( "Test" ) // set the frame title 
 

This sets the title that will appear at the top of the screen. in this case it says test.

 
test:SetVisible( true ) // Make the frame visible 
 

This sets the frame to visible. This is not actually needed as it will be set so anyway but i like to have it in there.

 
test:MakePopup() // make the frame popup 
 

This makes the frame pop up as it says in the name. again this is not needed but i like to have it in.

 
menu1:SetParent( test ) // parent the button to the frame 
 

This parents the button to the frame so it moves with it where ever the frame may move. you can also do this by doing:

 
menu1 = vgui.Create("Dbutton", test)
 

If you feel like saving a line of code.

 
menu1:SetText( "Menu >" ) // set the button text 
 

This just sets what the button says.

 
menu1:SetPos(150, 150) // set the button position in the frame
menu1:SetSize( 100, 20 ) // set the button size 
 

See test:SetPos and test:SetSize

 
menu1.DoClick = function ( btn ) // this will be called when the button is clicked 
 

This is what is called when the button is clicked you can also use: DoRightClick and DoDoubleClick. Notice we are starting a new function here.

 
local menu123 = DermaMenu() // create a derma menu 
 

This just tells it that we are making a Derma Menu

 
menu123:AddOption("hello", function() Msg("Hello") end )
 

This adds an option to the menu with the name of hello and when you click it it prints Hello to the console.

The rest should be pretty self explanatory. Hope this helped. Any questions PM me on Facepunch(Carnag3). Carnag3 06:02, 21 December 2007 (GMT+1)