Derma Tutorial1

== '''Derma Tutorial Series Lesson 1''' ==

You may have seen my [[Derma VGUI Example]], It was very successful so i thought that i would make an entire series of derma tutorials.

This First tutorial will go over the very basics of Derma, and then as we move on we will see how to use the various Derma Controls and then get on to making your own derma controls.

So let's get started:

First off i will tell you what Derma is, Derma is a whole load of controls made by Garry and TAD2020 so that coders would not have to code their own VGUI Controls everytime they wanted to make a VGUI and it is really simple to use and pick up. Now let's get down to some coding.

I am now going to show you how to make a simple derma frame, i will show you the code then go through it step by step.

<lua>
function testframe()
        local frame1 = vgui.Create("DFrame")

        frame1:SetPos(100,100)
        frame1:SetSize(200,200)
        frame1:SetTitle("Test")
        frame1:MakePopup()
end
concommand.Add("testframe", testframe)

</lua>

As you can see not a particularly long piece of code but that will create this:

[[Image:Example1.JPG]]

I will now go through this step by step.
----

<lua>
function testframe()
</lua>
Here we are just creating the function, you don't know about this then see here: [[Basic_Lua]]
----

<lua>
local frame1 = vgui.Create("DFrame")
</lua>
Here we are creating the frame and calling it frame1 for use lower in the script, note that i use [[Local]] this makes it so that frame1 cannot be called outside of this function and therefore we cannot get conflicting variable names. '''You should always use locals.'''
----

<lua>
frame1:SetPos(100,100)
</lua>
This is simply setting the position of the frame on the screen so in this example it is 100 pixels across and 100 pixels down.
----

<lua>
frame1:SetSize(200,200)
</lua>
This just sets the size of the frame so in this example it sets it to 200 pixels wide by 200 pixels tall.
----

<lua>
frame1:SetTitle("Test")
</lua>
This sets the title seen at the top of the frame. If this is not set then it will default to Untitled.
----

<lua>
frame1:MakePopup()
</lua>
This basically brings the frame into being. The frame will still show up if you do not put this in but your mouse pointer will not and even if you call SetMouseInputEnabled(true) and SetKeyboardInputEnabled(true) it still will not work.
----

<lua>
end
</lua>
End the function
----

<lua>
concommand.Add("testframe", testframe)
</lua>
This adds the console command the first argument is the command and the second is the function to call.
----

I hope you enjoyed this first derma tutorial in the series more coming soon. [[User:Carnag3|Carnag3]] 22:14, 18 April 2008 (GMT-6)
----

See also:

[[Derma Tutorial2]]