welcome to part four of our series on learning how to code in the first few videos before this we've learned how to save we've designed our forms and all that um now we actually can get to the part where we want to add some code to our program and make it do things so let's get into it so first of all from the last lesson we should have had a program that you designed where you added shapes to your form and you renamed the shapes you gave them particular types of shapes like circles and that and you gave them specific colors and i told you particularly to make sure that you rename them properly so that you got like a nozzle face so this is the one i've designed for this particular video um so you can see there on the right hand side you can see all the different components i use they're all shapes and they're all shp something so they all get a nice little name so i know which one i'm referring to whenever i'm writing code that's why we want to use that prefix so let's think about this so we've got this lovely little program that we want to change we're going to change something on it so let's take for example the shp face that is a shape and in the previous lesson we learned that it is a object of type t shape class and we changed as we said the name the type of shape it is and the brush dot color properties so that's what we did in the last lesson so now what we're going to do is we're going to go to our palette and there on the standard palette you're going to see that there is a button and i really want to put a button on our form so i'm going to click on that button and add it to our form so there you can see a button has been added to the form now this is a brand new object it is an object of type t button and we've got a default name of button one i don't like that name so let's give it a better name so i'm gonna call it btn change here because i want this button to change the the hair of my little face that's on the screen now you will notice if i do that if i change the name of the button to beta and change here you might notice that the actual whatever is displayed in the button there you can see it's also changed to btn changer and we don't really have buttons that have like that type of text on it when we actually view them in everyday programs so there's another property called the caption property and that has also been changed to b2n change it now these two properties are very different the name is the name that we refer to the the component or the object directly it's the name it follows all those rules but the caption is what is displayed to the user so we can change the caption to whatever we want we can have spaces we can there's no real rules for as long as it's text so that's what i'm going to change i'm going to change that to the actual text change space here and by doing that you'll see the button actually looks like a little bit better the name hasn't changed it's still bt and change here but the caption what is being displayed is different so that's more ideal of what i want to do so there we go there's the properties of it now we're going to finally get to the methods the things that our objects can do now i don't care what the the shapes are going to be doing i want i'm care about what this button is going to do i want it to actually do something so when i go to the object inspector for the button there you can see all the details we changed the caption there we go now that little tab there next to properties that's the events tab that has all the things that this button can do and there's a whole list of them the one that's important to me is that on click of it because i want my program to do something when the user clicks on this btn change hair button so that's what's going to be important me so i will double click on that and when i do that it will take me to a place where we can write code so this is the place where we can write code we can actually type some code into this part but before we get let's just understand what we are seeing here there you can see this is a procedure for the btn change hair button when it gets clicked that's what that little part means btn change here click that means when this button gets clicked you must run this code and by this code i'm referring to anything that occurs between the begin and end for this procedure you see there's a little end at the end there with a full stop that means the end of the program that doesn't that's not a connection to the procedure the beginning and after the procedure word that is whatever's between those two it's almost like brackets whatever's between there is what will will happen what the code will execute when we click on that button okay so that's that's what event driven programming is okay and at the bottom of our screen you should see a little tab like this where you can see you can go between the code and the design this allows me to what we call toggle to go between the code and the design design was when we put the stuff on the on the form all those components and those objects that was the desired part and here we are in the code part you can switch between them by clicking on the different tabs or you can press f12 that'll also work as well that'll also help you to toggle between the two so let's just quickly talk about event driven programming now event driven program means each button or each object has its different methods they have there are events and those events we write code for these events but they they don't do anything unless that event is triggered so for example if we've got three buttons and they've got code for each of those buttons when the button gets clicked those buttons won't the code for them will not execute unless we actually click on those buttons and the way we click on them will also determine how the code is executed so for example in this case if i go and i click on button one and then i go and click on button three and then i go and click on button two then those events will be triggered in the order that we clicked on them so first button once code will be executed then button three's code will be executed and then button two's code will be executed and if i take a scenario where i click on button one first and then i click on button three next and then i'll click on button one again then again that's the how the code will be executed it'll be but on one's code first then button three's code and then button one will execute its code a second time that's how event driven programming works now when we write code for these these events we have to have a particular statement that we want to execute or a series of statements and we need to know the structure of a statement so this is the little bit we're going to get to the code part so when we write a piece of code when we want to execute a statement then it's always what you want to change okay so what is it that you want to change followed by a colon equal to sign that's what we call the assigned we assign it a value and then on the right hand side of that we will have the value or a new value that we want to change it to and then at the end we have a semicolon the semicolon indicates the end of the statement so it's always what you want to change on the left hand side and then you have the assign symbol and what you want to change it to on the right hand side so whatever's on the right and saying it won't won't be changed it'll that's just the value that it's going to be that the left thing is going to be changed to so let's take an example let's take an example so we've got our little form over there do you see the little that our tongue is sticking out now it's very rude to stick out the tongue so we want to get rid of the tongue so i'm going to select the i want to get look at that tongue so the shp tongue i need to get rid of it somehow so if i go look at the properties of the shp tongue you'll notice there is a visible property which shows which makes the tongue visible or not it makes it invisible if it's not true so that's if it's false so that's what i want to do i want to change the tongue's property of its visible property to false so when you want to access a property of an object then you just put a dot followed by the name of that property in this case dot visible and then we're going to assign it a new value currently it is true so we're going to assign it using the assigned symbol a new value and we don't want it to be true we want it to be false so we write the word false and then remember every line has a semicolon at the end don't forget the semicolon okay there we go that's great now that's what the code will be for me to make that tongue disappear now it's very important to take note of when we're dealing with this type of thing when i was when i was a little baby i had this little toy like this i don't know it was like a shape thing where we used to put little little comp those little yellow things they had different size shapes and you could slot them into the hole that the shape would match so for example if you had a star there's a little star there you could put the star into the the little ball but only if you put it into the star hole so it would only fit in there so you had to make sure that you match the shape with the right um thing that you're putting into it so you had to make sure that it matched that you match other if it didn't fit then it's because you put the the wrong shape in the wrong hole so that is very important we've got to make sure that they match the item that you put into it must match so that matches if i had for example the cross section and i wanted to put in this trapezium into it it wouldn't fit because they're not the matching shapes so that is obviously a problem that's that's wrong it doesn't fit but if i had the cross little yellow component and i could put that into the cross hole that would fit so therefore that would be fine that would work there we go so that we must if we understand that then you'll understand a little bit about how the structure of the statements must be for example if in this case did you notice that the visible property needs a true or a false and we gave it a false so therefore that's a match okay so let's take the the width of the tongue if we wanted to change the width of the tongue what is the property of the width there you go you see it's a number so i can't go and make the width equal to hello that's not a match it doesn't fit but i can give it a number i can't give it a number like 50 and that is a match and that works okay so that's great now what about the color of the tongue now if you remember the color of the tongue there's the color property is a part of the brush property so how do i get to the color part well you say dot brush because that is the property that we're referring to but to get to the color part you must say dot color after so when you get into sub properties you can add more dots with the sub property after it so the tongue shp tongue dot brush.color we want to change it to a different color and there you can see all the colors have cl in front of it so c alarm seal whatever so i'm going to change it to cl white that's a pre predefined code in delphi so we can make it cl white and therefore that is a match because it's a color special color code going into a color property so that's a match so that's exactly what i want so let's get to our code over here before we get to the position on the screen i'm going to go here to the side here i'm going to we were working with additional components you can see it's very similar before i'm going to go to standard and i'm going to find a button and put a button on the form i'm going to put a little slightly up here and i'm going to change its name all the way down here to name do you see it selected name btn change here so there we go btn change here now see i don't like that it's changed what it looks like i'm going to come up here to the caption property remember the caption property is what is actually displayed so we want to just display to change space here there we go that looks a little bit better so the button's still called beating change here but just what is displayed is called change here and now i want to go to the event where you get to click on it now there's two ways to do it the one way is to go to events and we want to go to the on click event so if i click over here and then double click i will get to the part of the code where we can write about what must happen when we change the hair or when we click on that button now let's go back to the design another way you can do it every component has a default event now a button the default event is the on click event so you can literally double click on the button and it'll take you to that code for this case okay so we want to change we want to change the hair now if i go back here that's another way place where you can go back between the form and the the code now i want to change the color of the hair now there's two parts to the hair you see there's the there's the face there's a fringe and there's hair so i want to change both of them so i'm going to change them to a different color so i'm going to let's make this person very old so their hair is going to go white i'm going to go double click yeah and we're going to say okay shp and then which property are we going to go to we're going to go to the hair property dot what property we want to change the color so there is no color you'll see that all the possible options will appear over here for you so you can see exactly what you type in so in this case we are typing clo or co sorry elliot let's type it in see what happens col and there is no color property r because it is a brush property mr long so let's go bro oh there we go you can see that the brush has been is appearing and then i'll press dot and then i can type c and there's color so i can actually get to the color property like that remember american spelling so there's no u in it and i'm going to assign it a value of cl what okay so there we go now let's just run it and see what it does now what when i mean run what does that mean like this little play button over here this is the what we click on when we want to see if the code all works and we want to actually run the program to see what it will look like if the program is actually being used by someone else so we're going to click on this run button and it's going to what we do compile the program into an exe file and now this little pro the form will pop up and but there won't be any dots this is what the program looks like when it's actually running this is what it will actually look like if it's actually executing the program so so that so when you don't see the dots you know this is the program that's running now if i click on that button it's going to execute this code so if i click on it there we go you can see that the hair color has now changed to what but obviously the fringe looks a bit weird so let me change the fringe as well so i'm going to close this if i close the program that's running it's not going to close dolphin it just closes the program and there we go i'm back into design time i'm now in designing the program i'm going to actually change the shape of the fringe as well must also change to white so it's exactly the same now i'm writing another line of code now what am i doing here this is a second line of code now the way it will work anything between that begin end will happen when i click on that button and it will execute the code in that order so it'll first do this then do that but it'll do it so quickly you won't even notice the difference so let's try it so we run and when the code pops up there we go there's my program now when i click on the button there we go you can see the nice little fringe is white and the hair is white as well okay so there we go so that you can see it changed both of them if i wanted to change that tongue to go to invisible as well then i could if i want to do that on the same button then i can shp tongue dot visible now this is a true or false value so i'm going to make it equal to false okay now delphi isn't case sensitive so it doesn't actually matter if i did this or if i did this it would all be fine it would all work the exact the same so let's run that so now the hair is going to change to white and the tongue is going to disappear there we go maybe they didn't want to stick out their tongue so much because they were frightened by their hair disappearing because it's going white so there we go so those are the types of things that you can do okay now if you made a mistake this little key if you made a mistake in your code then what will happen is you will get an error and the program will not compile so for example let's say i didn't put a semicolon over there because that's one of the rules and let's say i typed in color as a u then when i run the program it will actually tell me hey there are errors and when you click ok it will highlight the first area that it picks up and then over here it'll try to tell you what it is the possible option or solution to it says it doesn't recognize color ah mr long that's supposed to be cl oh it's a c-o-l-u-o-r-no you and then i run it again well that problem is gone but there's still another problem it's over here ah there's a missing operator or semicolon but there isn't a semicolon there are when it says missing semicolon it's normally the line above it so that's what we call debugging that means we are getting rid of the bugs in our program in these any errors that are in our program the syntax errors we'll learn about errors another time so there we go so that when it makes the program pop up and compile then you know all the errors are gone okay now i just want to talk about the position on the form so like where are these components positioned on the form so let's just take for example in mathematics you might have learned about the cartesian plane and you would have known that that is the origin in other words it's a 0 0 for the x and the y and if i move to the side a little bit if i move to the right then the what is that affecting that's affecting the x value the x value gets bigger okay and if i move up so if it moves right the x gets bigger now if i move the x a bit up if we go up and down that would obviously affect the y values so the y value is changing okay so in that case when you move up the y gets bigger when i move to the right the x gets bigger in this case if i move from the cartesian plane so that's what we'd learned in mathematics at school now on delphi or in adelphi perform it is slightly different the top right or left hand corner there the top left hand corner is the actual origin that is there isn't an x or y value but there is a top property and a left property so that will be set to 0 0 when it's at the top corner there top left corner and then if i move a little bit let's say i'm going to move to the right so i'm moving to the right of the screen that's going to affect the left property the left property will get bigger i know it doesn't make sense but if you understand that the furthest left is the zero so if you move right the left gets bigger if i move to the left the left property will get smaller that's the opposite and if i move down then the top property gets bigger so there we go so if i move down the top property gets bigger if i move up the top property will get smaller because the top left hand corner is 0 0. so you understand that so concept have i done so far i've created another button i went and put another button on my form because i want this button to do something differently i gave it the name of btn move left r so that's the name of the button and the caption is move left r with spaces so when i double click on this button you'll notice i'll go to a set of code which is different to the previous one the previous ones above it if i scroll up there's the code for the change here button and this is the code for the move left eye button so whatever happens between this begin and end will be executed when we click on this button and it won't do any of that unless we click on the change here button for that one so in this case we want to change the left property of the left r so i'm going to say btn left r it's left property i want to change it to something i'll beat in left eye do i have a bt and left eye let's have a look bts not a btn this long it is a shape so it's shp shp left out there we go that's a little bit better so shp left up so the left arm i want it to move this way so i'm moving it to the left in other words the left are its current position its current left property if i scroll up here to the left is 192. i'm going to move it this way it's going to get smaller because this is zero so it's going to get smaller so if i make that left property 150 it's obviously going to move this side if that makes sense so let's move make it 150 semicolon do they match that is a number the left needs a number yes that's a match so they fit must make sure that they fit and i'm also going to change the pupil left pupil because obviously the eye has a pupil you can move your mouse over it you see yes shpl pupil that must also move left is equal to i'm gonna make it i'm gonna see what the difference is between the two if i click the left eye you can see the coordinates there it's 192 and this is 200 so it's about eight ahead of it so i'm actually going to move this to 158 this is just my numbers over there there we go so remember make sure that you've got the right if i say hello it's going to go hey i don't know what this is there's an error there it's really picking up the error so it must be one it must be a number and it can't be a decimal number because that's also a problem because that only needs a whole number so there we go let's run that and see what it does so there's our program it's running if i move the lefter there we go i moved a little bit to the side there you see it hasn't changed the hair because we haven't executed that button if i click on that button now now it's executed button now if i click the move left eye again it looks like it's done nothing but it actually did it didn't execute that code it just the left i was already at that position so we didn't see a change in the form so there we go so there we've got our basics for the programming remember it's always what you want to change on the left followed by colon equal to followed by what you want to change it to okay so that's what you write between the begin and the end of all of your events which are probably going to be buttons when you click on them okay and remember you can toggle between them using this over here and you can use it that's over there as well the toggle f12 as well to go between the code and the form just a thing to remember that when we did this program remember we changed the properties in the object inspector this is when we were designing the program to see what it's going to look like from the very beginning and this is referred to as design time when we add design time that's what we are we're changing the properties of the components and the objects so that they appear when the program starts when i want to change using code so when i use code to change the properties that's actually changing the code at runtime which means those properties haven't changed until the program is being executed and those events are being triggered at runtime when the program has been executed and while we yeah just let's have a look when i go into the files with all my delphi files if i see this 132 folder if i double click on that 132 folder and i double click on debug here is the exe file that's the file that actually is the program that's a completed program if i double click on it it'll show me what the program runs normally so that's what i can give to people to say yes the program you don't need the code this is all you need to run the program and it does exactly what it does from the last time you compiled it if you are using delphi 2010 then that exe file will probably be somewhere over here it won't be in the 132 folder just be in this part with all your other pieces of code so what i want you to do now is take your form that you created from the previous lesson that you've got all the shapes on add buttons to your form and make sure that all the buttons have unique and suitable names and captions and then write code on each of those buttons that change different properties of the shapes go explore go look at the object inspector to see the different properties and see what you can change so that's what i encourage you to do before the next lesson please support the channel by clicking on that subscribe button go to our playlist go see the rest of the series on learning how to code as well as other topics there and remember don't do it the long way do it the mr long way