Derma VGUI Example

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

<lua>

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
</lua>

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:

<lua>

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

</lua>

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

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

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.

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

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

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

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

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

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

<lua>
test:SetVisible( true ) // Make the frame visible 
</lua>

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.

<lua>
test:MakePopup() // make the frame popup 
</lua>

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

<lua>
menu1:SetParent( test ) // parent the button to the frame 
</lua>
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:
<lua> 
menu1 = vgui.Create("Dbutton", test)
</lua> 
If you feel like saving a line of code.

<lua>
menu1:SetText( "Menu >" ) // set the button text 
</lua>
This just sets what the button says.

<lua>
menu1:SetPos(150, 150) // set the button position in the frame
menu1:SetSize( 100, 20 ) // set the button size 
</lua>
See test:SetPos and test:SetSize

<lua>
menu1.DoClick = function ( btn ) // this will be called when the button is clicked 
</lua>
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.

<lua>
local menu123 = DermaMenu() // create a derma menu 
</lua>
This just tells it that we are making a Derma Menu

<lua>
menu123:AddOption("hello", function() Msg("Hello") end )
</lua>
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). [[User:Carnag3|Carnag3]] 06:02, 21 December 2007 (GMT+1)