Guide to Derma

==Everything About Derma and VGUI==

'''What is Derma?'''
Derma is the greatest thing to happen to VGUI in Garry's Mod. Some may disagree, but I love it. Derma is a library of VGUI controls made by Garry and TAD2020 which can be used to make your gamemode/addon a lot easier to use. Some exampes of Derma controls are the those that are used on the spawnmenu (qMenu).


Here is an example of some Derma items commonly used in VGUI scripting

[[Image:DermaExample.png]]





'''Introduction'''
This is a '''really''' long guide/manual on everything there is to know about how to use Derma. So far it is not complete, but will be on about a week.

So lets begin the guide.



==DFrame==

Description:
This is a panel that you can lay out Derma items on. This item will be used 99% of the time.

Code:
<lua>
local DermaPanel = vgui.Create( "DFrame" ) -- Creates the frame itself
DermaPanel:SetPos( 50,50 ) -- Position on the players screen
DermaPanel:SetSize( 1000, 900 ) -- Size of the frame
DermaPanel:SetTitle( "Testing Derma Stuff" ) -- Title of the frame
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true ) -- Draggable by mouse?
DermaPanel:ShowCloseButton( true ) -- Show the close button?
DermaPanel:MakePopup() -- Show the frame
</lua>
[[Image:DFrame.png]]





==DButton==

Description:
This creates a simple button.

Code:
<lua>
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 50,50 )
DermaPanel:SetSize( 200, 250 )
DermaPanel:SetTitle( "Testing Derma Stuff" )
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true )
DermaPanel:ShowCloseButton( true )
DermaPanel:MakePopup()
 
local DermaButton = vgui.Create( "DButton" )
DermaButton:SetParent( DermaPanel ) -- Set parent to our "DermaPanel"
DermaButton:SetText( "Kill yourself" )
DermaButton:SetPos( 25, 50 )
DermaButton:SetSize( 150, 50 )
DermaButton.DoClick = function ()
    RunConsoleCommand( "kill" ) -- What happens when you press the button
end
</lua>
[[Image:DButton.png]]






==DSysButton==

Description:
This creates the same thing as DButton does, but you can place three different preset images on them.

Code:
<lua>
 local DermaPanel = vgui.Create( "DFrame" )
 DermaPanel:SetPos( 50,50 )
 DermaPanel:SetSize( 200, 250 )
 DermaPanel:SetTitle( "Testing Derma Stuff" )
 DermaPanel:SetVisible( true )
 DermaPanel:SetDraggable( true )
 DermaPanel:ShowCloseButton( true )
 DermaPanel:MakePopup()
  
 local SystemButtonThingOne = vgui.Create("DSysButton", DermaPanel)
 SystemButtonThingOne:SetPos( 25,50 )
 SystemButtonThingOne:SetSize( 50, 25 )
 SystemButtonThingOne:SetType( "close" ) -- This can be "close", "down", or "up"
 SystemButtonThingOne.DoClick = function()
     Msg("You clicked the button!\n") -- What happens when you left click on it
 end
 SystemButtonThingOne.DoRightClick = function()
     Msg("You right-clicked the button!\n") -- What happens when you right click on it
 end
</lua>
[[Image:Dsysbutton.png]]






==DCheckBoxLabel==

Description:
This is a checkbox with a label before it.

Code:
<lua>
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 50,50 )
DermaPanel:SetSize( 200, 250 )
DermaPanel:SetTitle( "Testing Derma Stuff" )
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true )
DermaPanel:ShowCloseButton( true )
DermaPanel:MakePopup()
 
local CheckBoxThing = vgui.Create( "DCheckBoxLabel", DermaPanel )
CheckBoxThing:SetPos( 10,50 )
CheckBoxThing:SetText( "God Mode" )
CheckBoxThing:SetConVar( "sbox_godmode" ) -- ConCommand must be a 1 or 0 value
CheckBoxThing:SetValue( 1 )
CheckBoxThing:SizeToContents() -- Make its size to the contents. Duh?
</lua>
[[Image:DCheckBoxLabel.png]]





==DNumSlider==

Description:
This creates a number slider to change an integer.

Code:
<lua>
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 50,50 )
DermaPanel:SetSize( 200, 250 )
DermaPanel:SetTitle( "Testing Derma Stuff" )
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true )
DermaPanel:ShowCloseButton( true )
DermaPanel:MakePopup()
 
local NumSliderThingy = vgui.Create( "DNumSlider", DermaPanel )
NumSliderThingy:SetPos( 25,50 )
NumSliderThingy:SetSize( 150, 100 ) -- Keep the second number at 100
NumSliderThingy:SetText( "Max Props" )
NumSliderThingy:SetMin( 0 ) -- Minimum number of the slider
NumSliderThingy:SetMax( 256 ) -- Maximum number of the slider
NumSliderThingy:SetDecimals( 0 ) -- Sets a decimal. Zero means it's a whole number
NumSliderThingy:SetConVar( "sbox_maxprops" ) -- Set the convar
</lua>
[[Image:DNumSlider.png]]





==DPanelList==

Description:
This creates some items in a list.

Code:
<lua>
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 50,50 )
DermaPanel:SetSize( 250, 250 )
DermaPanel:SetTitle( "Testing Derma Stuff" )
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true )
DermaPanel:ShowCloseButton( true )
DermaPanel:MakePopup()
 
DermaList = vgui.Create( "DPanelList", DermaPanel )
DermaList:SetPos( 25,25 )
DermaList:SetSize( 200, 200 )
DermaList:SetSpacing( 5 ) -- Spacing between items
DermaList:EnableHorizontal( false ) -- Only vertical items
DermaList:EnableVerticalScrollbar( true ) -- Allow scrollbar if you exceed the Y axis
 
    local CategoryContentOne = vgui.Create( "DCheckBoxLabel" )
    CategoryContentOne:SetText( "God Mode" )
    CategoryContentOne:SetConVar( "sbox_godmode" )
    CategoryContentOne:SetValue( 1 )
    CategoryContentOne:SizeToContents()
DermaList:AddItem( CategoryContentOne ) -- Add the item above
   
    local CategoryContentTwo = vgui.Create( "DCheckBoxLabel" )
    CategoryContentTwo:SetText( "Player Damage" )
    CategoryContentTwo:SetConVar( "sbox_plpldamage" )
    CategoryContentTwo:SetValue( 1 )
    CategoryContentTwo:SizeToContents()
DermaList:AddItem( CategoryContentTwo ) -- Add the item above
 
    local CategoryContentThree = vgui.Create( "DCheckBoxLabel" )
    CategoryContentThree:SetText( "Fall Damage" )
    CategoryContentThree:SetConVar( "mp_falldamage" )
    CategoryContentThree:SetValue( 1 )
    CategoryContentThree:SizeToContents()
DermaList:AddItem( CategoryContentThree ) -- Add the item above
   
    local CategoryContentFour = vgui.Create( "DCheckBoxLabel" )
    CategoryContentFour:SetText( "Noclip" )
    CategoryContentFour:SetConVar( "sbox_noclip" )
    CategoryContentFour:SetValue( 1 )
    CategoryContentFour:SizeToContents()
DermaList:AddItem( CategoryContentFour ) -- Add the item above
   
    local CategoryContentFive = vgui.Create( "DCheckBoxLabel" )
    CategoryContentFive:SetText( "All Talk" )
    CategoryContentFive:SetConVar( "sv_alltalk" )
    CategoryContentFive:SetValue( 1 )
    CategoryContentFive:SizeToContents()
DermaList:AddItem( CategoryContentFive ) -- Add the item above
 
    local CategoryContentSix = vgui.Create( "DNumSlider" )
    CategoryContentSix:SetSize( 150, 50 ) -- Keep the second number at 50
    CategoryContentSix:SetText( "Max Props" )
    CategoryContentSix:SetMin( 0 )
    CategoryContentSix:SetMax( 256 )
    CategoryContentSix:SetDecimals( 0 )
    CategoryContentSix:SetConVar( "sbox_maxprops" )
DermaList:AddItem( CategoryContentSix ) -- Add the item above
 
    local CategoryContentSeven = vgui.Create("DSysButton", DermaPanel)
    CategoryContentSeven:SetType( "close" )
    CategoryContentSeven.DoClick = function()
        RunConsoleCommand("sv_password", "toyboat")
    end
    CategoryContentSeven.DoRightClick = function()
        RunConsoleCommand("sv_password", "**")
    end
DermaList:AddItem( CategoryContentSeven ) -- Add the item above
</lua>
[[Image:DPanelList.png]]





==DCollapsibleCategory==

Description:
Creates a collapsable list of items.

Code:
<lua>
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 50,50 )
DermaPanel:SetSize( 250, 300 )
DermaPanel:SetTitle( "Testing Derma Stuff" )
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true )
DermaPanel:ShowCloseButton( true )
DermaPanel:MakePopup()
 
local SomeCollapsibleCategory = vgui.Create("DCollapsibleCategory", DermaPanel)
SomeCollapsibleCategory:SetPos( 25,50 )
SomeCollapsibleCategory:SetSize( 200, 50 ) -- Keep the second number at 50
SomeCollapsibleCategory:SetExpanded( 0 ) -- Expanded when popped up
SomeCollapsibleCategory:SetLabel( "Our Collapsible Category" )
 
CategoryList = vgui.Create( "DPanelList" )
CategoryList:SetAutoSize( true )
CategoryList:SetSpacing( 5 )
CategoryList:EnableHorizontal( false )
CategoryList:EnableVerticalScrollbar( true )
 
SomeCollapsibleCategory:SetContents( CategoryList ) -- Add our list above us as the contents of the collapsible category
 
    local CategoryContentOne = vgui.Create( "DCheckBoxLabel" )
    CategoryContentOne:SetText( "God Mode" )
    CategoryContentOne:SetConVar( "sbox_godmode" )
    CategoryContentOne:SetValue( 1 )
    CategoryContentOne:SizeToContents()
CategoryList:AddItem( CategoryContentOne ) -- Add the above item to our list
   
    local CategoryContentTwo = vgui.Create( "DCheckBoxLabel" )
    CategoryContentTwo:SetText( "Player Damage" )
    CategoryContentTwo:SetConVar( "sbox_plpldamage" )
    CategoryContentTwo:SetValue( 1 )
    CategoryContentTwo:SizeToContents()
CategoryList:AddItem( CategoryContentTwo )
 
    local CategoryContentThree = vgui.Create( "DCheckBoxLabel" )
    CategoryContentThree:SetText( "Fall Damage" )
    CategoryContentThree:SetConVar( "mp_falldamage" )
    CategoryContentThree:SetValue( 1 )
    CategoryContentThree:SizeToContents()
CategoryList:AddItem( CategoryContentThree )
   
    local CategoryContentFour = vgui.Create( "DCheckBoxLabel" )
    CategoryContentFour:SetText( "Noclip" )
    CategoryContentFour:SetConVar( "sbox_noclip" )
    CategoryContentFour:SetValue( 1 )
    CategoryContentFour:SizeToContents()
CategoryList:AddItem( CategoryContentFour )
   
    local CategoryContentFive = vgui.Create( "DCheckBoxLabel" )
    CategoryContentFive:SetText( "All Talk" )
    CategoryContentFive:SetConVar( "sv_alltalk" )
    CategoryContentFive:SetValue( 1 )
    CategoryContentFive:SizeToContents()
CategoryList:AddItem( CategoryContentFive )
 
    local CategoryContentSix = vgui.Create( "DNumSlider" )
    CategoryContentSix:SetSize( 150, 50 ) -- Keep the second number at 50
    CategoryContentSix:SetText( "Max Props" )
    CategoryContentSix:SetMin( 0 )
    CategoryContentSix:SetMax( 256 )
    CategoryContentSix:SetDecimals( 0 )
    CategoryContentSix:SetConVar( "sbox_maxprops" )
CategoryList:AddItem( CategoryContentSix )
 
    local CategoryContentSeven = vgui.Create( "DSysButton" )
    CategoryContentSeven:SetType( "close" )
    CategoryContentSeven.DoClick = function()
        RunConsoleCommand("sv_password", "toyboat")
    end
    CategoryContentSeven.DoRightClick = function()
        RunConsoleCommand("sv_password", "**")
    end
CategoryList:AddItem( CategoryContentSeven )
</lua>
[[Image:DCollapsibleCategory.png]]

When control clicked on.

[[Image:DCClicked.png]]





==DTextEntry==

Description:
Creates a text field to enter text into.

Code:
<lua>
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 250,250 )
DermaPanel:SetSize( 500, 50 )
DermaPanel:SetTitle( "Derma Testing Stuff" )
DermaPanel:ShowCloseButton( true )
DermaPanel:SetVisible( true )
DermaPanel:MakePopup()
 
local DermaText = vgui.Create( "DTextEntry", DermaPanel )
DermaText:SetPos( 20,25 )
DermaText:SetTall( 20 )
DermaText:SetWide( 450 )
DermaText:SetEnterAllowed( true )
DermaText.OnEnter = function()
    Msg("You entered -"..DermaText:GetValue().."-!" ) -- What happens when you press enter
    DermaPanel:SetVisible( false )
end
</lua>
[[Image:DTextEntry.png]]





==DImage==

Description:
This creates an image in .vtf format.

Code:
<lua>
DermaImage = vgui.Create( "DImageButton", DermaPanel )
DermaImage:SetPos( 25, 50 )
DermaImage:SetImage( "Brick/brickfloor001a.vtf" ) -- Set your .vtf image
DermaImage:SizeToContents()</lua>
[[Image:DImage.png]]





==DImageButton==

Description:
This creates a DButton in the shape of a .vtf image.

Code:
<lua>
local DermaImage = vgui.Create( "DImageButton", DermaPanel ) 
DermaImage:SetPos( 25, 50 )
DermaImage:SetImage( "hoverskate/clearpoints.vtf" ) -- Set your .vtf image
DermaImage:SizeToContents()
DermaImage.DoClick = function()
    Msg("You clicked the image button! :O \n") -- What happens when you press the image
    DermaPanel:SetVisible( false )
end</lua>
[[Image:DImage.png]]





==DPropertySheet==

Description:
Creates tabs so you can have multiple tabs in one frame with many items in them. Mainly used for organization.

Code:
<lua>
local PropertySheet = vgui.Create( "DPropertySheet" )
PropertySheet:SetParent( DermaPanel )
PropertySheet:SetPos( 5, 30 )
PropertySheet:SetSize( 340, 315 )
  
local SheetItemOne = vgui.Create( "DCheckBoxLabel" )
SheetItemOne:SetText( "Use Props?" )
SheetItemOne:SetConVar( "some_convar" )
SheetItemOne:SetValue( 1 )
SheetItemOne:SizeToContents()
  
local SheetItemTwo = vgui.Create( "DCheckBoxLabel" )
SheetItemTwo:SetText( "Use SENTs?" )
SheetItemTwo:SetConVar( "some_convar" )
SheetItemTwo:SetValue( 1 )
SheetItemTwo:SizeToContents()
  
PropertySheet:AddSheet( "Some Menu", SheetItemOne, "gui/silkicons/user", false, false, "WOW It's a text box!!!" )
PropertySheet:AddSheet( "Super Menu", SheetItemTwo, "gui/silkicons/group", false, false, "Can I haz meh cheezburger now?" ) </lua>
[[Image:DPropertySheet.png]]





==DPanel==

Description:
This creates a blank frame (almost like DFrame) where you can use it as a parent and use SetPos() with items. This item can be added inside other items like DPropertySheet.

Code:
<lua>
local TestingPanel = vgui.Create( "DPanel", DermaPanel )
TestingPanel:SetPos( 25, 50 )
TestingPanel:SetSize( 250, 250 )
TestingPanel.Paint = function() -- Paint function
    surface.SetDrawColor( 50, 50, 50, 255 ) -- Set our rect color below us; we do this so you can see items added to this panel
    surface.DrawRect( 0, 0, TestingPanel:GetWide(), TestingPanel:GetTall() ) -- Draw the rect
end
 
local DermaButton = vgui.Create( "DButton", TestingPanel )
DermaButton:SetText( "Click here for cheezburger!" )
DermaButton:SetPos( 20, 10 )
DermaButton:SetSize( 200, 100 )
DermaButton.DoClick = function ()
    RunConsoleCommand( "kill" )
end</lua>
[[Image:DPanel.png]]





==DComboBoxl==

Description:
This creates a list of options you can add to it then work with them later.

Code:
<lua>
local TestingComboBox = vgui.Create( "DComboBox", DermaFrame )
TestingComboBox:SetPos( 10, 35 )
TestingComboBox:SetSize( 100, 185 )
TestingComboBox:SetMultiple( false ) -- Don't use this unless you know extensive knowledge about tables
TestingComboBox:AddItem( "Add" ) -- Add our options
TestingComboBox:AddItem( "Some" )
TestingComboBox:AddItem( "Options" )
TestingComboBox:AddItem( "Here" )

local MainMenuSheet = vgui.Create( "DPanel", DermaFrame ) -- We create a panel so we can draw shit on; if we use the frame, it comes up transparent for some reason
MainMenuSheet:SetPos( 125, 50 )
MainMenuSheet:SetSize( DermaFrame:GetWide() - 25, DermaFrame:GetTall() - 25 )
MainMenuSheet.Paint = function()
    if TestingComboBox:GetSelectedItems() and TestingComboBox:GetSelectedItems()[1] then -- make sure something is selected if not we get uber spam of errors
        local OurStringThing = "Your selection is: "..TestingComboBox:GetSelectedItems()[1]:GetValue().."!" -- This was a pain in the ass to figure out; this gets the name of the option chosen
        surface.SetFont( "default" )
        surface.SetTextColor( 255, 255, 255, 255 )
        surface.SetTextPos( 50, 50 )
        surface.DrawText( OurStringThing ) -- Draws the text
    end
end</lua>
[[Image:DComboBox.png]]



==DermaMenu==

Description:
This creates a menu which you can add options to.

Code:
<lua>
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 50,50 )
DermaPanel:SetSize( 200, 250 )
DermaPanel:SetTitle( "Testing Derma Stuff" )
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true )
DermaPanel:ShowCloseButton( true )
DermaPanel:MakePopup()
 
local MenuButton = vgui.Create("DButton")
MenuButton:SetParent( DermaPanel )
MenuButton:SetText( "Menu >" )
MenuButton:SetPos(25, 50)
MenuButton:SetSize( 150, 175 )
MenuButton.DoClick = function ( btn )
    local MenuButtonOptions = DermaMenu() -- Creates the menu
    MenuButtonOptions:AddOption("hello", function() Msg("Hello") end ) -- Add options to the menu
    MenuButtonOptions:AddOption("how", function() Msg("How") end )
    MenuButtonOptions:AddOption("are", function() Msg("Are") end )
    MenuButtonOptions:AddOption("you", function() Msg("You") end )
    MenuButtonOptions:AddOption("?", function() Msg("?") end )
    MenuButtonOptions:Open() -- Open the menu AFTER adding your options
end
</lua>
[[Image:DermaMenu.png]]





==DListView==

Description:
Create a list of strings to be used with.

Code:
<lua>
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 50,50 )
DermaPanel:SetSize( 500, 700 )
DermaPanel:SetTitle( "Testing Derma Stuff" )
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true )
DermaPanel:ShowCloseButton( true )
DermaPanel:MakePopup()
 
local DermaListView = vgui.Create("DListView")
DermaListView:SetParent(DermaPanel)
DermaListView:SetPos(25, 50)
DermaListView:SetSize(450, 625)
DermaListView:SetMultiSelect(false)
DermaListView:AddColumn("Name") -- Add column
DermaListView:AddColumn("Amount of kills")
 
for k,v in pairs(player.GetAll()) do
    DermaListView:AddLine(v:Nick(),v:Frags()) -- Add lines
end
</lua>
[[Image:Dlistpanelje8.png]]

==Keyboard & Mouse==

Description:
If you want to use the keyboard or mouse add these before MakePopup().

Code:
<lua>
DermaPanel:SetMouseInputEnabled(true)
DermaPanel:SetKeyboardInputEnabled(true)
</lua>



'''ALL OF THIS CODE HAS BEEN TESTED AND WORKS AS SEEN.'''