Build C++ GUI apps FAST! Your first C++ GUI app!

[Music] hi everyone and welcome to my channel it is currently half past 3 am and i am filming a youtube video so it better be worth it and you better give this video a thumbs up so in this video i want to show you how you can build a c plus application with user interface in just a couple of minutes and it is going to be very easy you will see so here i am going to insert the final result and the application that we are going to build in this video this is the application that we are going to build it is a to-do list app and it has a couple of components so it has a label which says add task and then an input field where we are going to type the text of our task and then a button which says add and it is used in order to add the task that we type here into this list box here and here we will see the list of all of our tasks so let's demonstrate how the app is going to work let's type task 1 and let's add that task and as you can see it has been added into this list here let's add another task let's say task 2 and then task 3 task 4 and so on so that is the first functionality and then the second functionality that i have implemented is removing existing tasks from this list here so in order to remove a task you just click on it as you can see so again and again and again and this means that we have successfully completed all of our tasks in order to build this app i'm going to use c plus builder and rad studio and first i'm going to show you how to install it so i will leave a link in the description that you can use in order to download it and try it out for free so as i said the first step is to show you how to install it so when you click the link in the description you will be navigated to this site here and you will have to fill this form so let me do that very quickly and then i will be back okay so here is the filled form i am not a robot okay what are bridges here verify and let's click start your trial okay and soon after this the download should start so you should get the installer here and i will be back once this is downloaded once the download is finished you are going to click on the installer and here you are going to accept terms and conditions and click next and then enter new license and then next again and here you are going to select i have signed up for a free trial at embarcadero.com and then click install and the installation process should start so i will be back once it's finished so once the installation of red studio is finished you are going to get a window like this one and here you have to select the platforms that you want to install the one that i will select is c plus builder windows enterprise trial and i'm going to unselect these other ones okay and i am going to click continue okay and here you can select additional languages help samples and so on i will just click install so that it finishes faster and the installation process should start once more and this one is going to take a little bit longer so again i will be back once this is finished and when the installation finishes you will click start working okay and now the rad studio should start okay here you will select the theme i will select dark mode and click next and click get started okay so here i have opened rad studio and first i want to make an introduction so that you understand the main parts and components that we are going to use and then we are going to build the application that you saw at the beginning of this video so let's create a new project you can click here on create a new multi-device application with c builder or you can click on file new and then other okay and here you are going to see multi-device application and it says that multi-device application is an ui application that works on any operating system or device so that is what we are going to select and i will click ok and then here i am going to select blank application and i will click ok again after you create a new project you will get a window that looks like this and there are four parts of this window that i want to explain because we will use them a lot and that is projects part in the upper right corner and then structure in the upper left and then we have object inspector in the bottom left and in the bottom right corner we have this palette and if you don't see any one of these four what you can do is you can click on view and then tool windows and here you have all of these and you can enable whichever one you want so project structure object inspector palette and so on okay so now i'm going to explain what each one of these four is used for inside this projects part we have all of the files that our application contains and there are three that i want to explain and focus on and those are under this unit 1.cpp and as you can see you can collapse it and expand it and those three are unit1.cpp unit1.fmx and then unit1.h so this unit1.cpp and unit1.h are used to write c plus code and then this unit1.fmx is used to store the information about the design of your application so if you click or actually double click on the unit 1.cpp you are going to get c plus code and then unit 1.h as well contains c plus plus code and then if you double click on unit 1.fmx here you have the design of your application which is just an empty blank form because we created an empty application so that is the first way to navigate between these three and then another way is at the bottom you have a tab control which has unit 1.cpp unit1.h and then the design mode of your application and you can use that as well so let's move to this upper left corner where it says structure and here we will have all of the components slash controls that our application contains and currently our application contains only one form which is completely empty because we created a blank application but if you decide to add new controls to your application like text labels input fields buttons list boxes and so on those are going to be shown here as well so now your question might be okay selena but how can i add new controls or components to my application and the answer is very easy so let's move to this bottom right corner where it says palette and inside this palette we have a lot of the components which are already available for you to use so you can basically drag and drop them and you don't have to write the code yourself which is going to save you a lot of time so let's see what kind of components we have under this standard category so standard components are components like buttons checkboxes radio buttons what else labels image controls progress bars scroll bars and so on and you can check this out on your own after you finish this video so that is what we use this palette window for and let's drag and drop a couple of components so let's use this label component i'm going to put it here and then let's add an input field it's called t edit so you can search it here you can type t edit and here it is i'm going to drag and drop that as well i'll put it here and i'll just make it a little bit bigger like this and align it with my label okay and then let's add a button it is here i'm going to place it here and i will also make it the same size as my input field okay maybe i'll make this input field a little bit bigger like this and then another component that i'm going to need is a list box so a place where i'm going to show my tasks so let's search for list box here it is and i will put it here and make it the same size as my input field like this okay and let's adjust the size of this form okay perfect so here we have added all of the components that our application is going to contain and you can even run your application now so let's do that let's see what's going to happen okay no errors and here is our application as you can see it contains all of the components that we need but our application is currently dumb which means that it does not have any logic so this button here for example does not know how to behave when it is clicked so that is the next thing that i want to change i am going to stop my application and let's see the first thing that i want to change is the text of this label so i'm going to click on this label and if you look at this bottom left part where it says object inspector you will notice that here we have properties and events and this properties tab contains all the properties of the control that has been selected so in this situation we selected our label control and here you can change all of the properties of your label and the property that i want to change is called text so let's find that okay here it says label one and that is the text that is shown here so that is what i want to change i wanted to say for example add task like this and i will press enter and as you can see the text has been changed okay so that is the first thing that i want to do and then let's change also the text of this button here so if i click on this button again on this object inspector window you will have all the properties and events of this button and later i'm going to explain what are events and how to work with events for now i'm focusing only on properties part so click on button and then select properties and here you can change the properties of your button the one that i want to change again is called text so let's do that instead of having button one text on this button let's say add like this and i'm going to press enter okay so if i run my application again as you can see here we have add task and then add button so now we have a better idea of what this application here is doing in order to make it easier to work with these controls let's change their names so that they make more sense and let me show you what i mean by this so if i click on this add button properties and i look for a name property you will notice that the name of this button here is button one and then if i click on this input field you will notice that its name is edit one and then if i click on the list box the name of the list box is list box one so the same way that you should give meaningful names to your variables you should also give meaningful names to your controls because if you have for example 10 buttons in your application and you leave them with their default names of button 1 button 2 button 3 and so on it is just a matter of time when you are going to forget what button 3 means or what button 7 means and so on so that is the reason why you should use meaningful names for your controls so let's do that i'm going to click on this button and instead of having the name of button1 i'm going to change it so that its name is add button or add task button you can use whichever name you want as long as it is meaningful so let's press enter here and then i'm going to click on this input field its name is edit i am going to call it for example task edit or you can call it task input field whichever name you find easier to remember so i'm going to save the change here as well and then i will click on my list box and the name of this list box will be tasks list box okay like this so what we have achieved with this is that when we want to refer a specific component from our c plus code we are going to use the name of that component and it is going to be much easier for us if that component has a meaningful name now one thing that just happened and you noticed that if you paid attention since the beginning of this video is the following inside this structure window now we have additional four components and those four components are part of this form one so in the beginning we had form one and now we have add button which is this button here and then label one as you can see we have not changed the name of this label here that is why it has the default name of label one and then task edit which is this input field here and then task list box which is this list box here and here are the names of all of our components that our application contains so if i run this application now nothing has changed in terms of the appearance of the application but what has changed is that the names of all of these components are different so when we decide to use those components from our c code we are going to use those names that we assigned to each one of these three components the next thing that i want to do is i want to implement the logic for this application here so when i type the text inside this input field when i say for example this is task 1 and i click on this add button it should add this text to my list of tasks so that is the next thing that i want to do and in order to know how to do that you will first need to understand a little bit about events and how to work with events so that is the next thing that i'm going to explain so what is an event in programming an event is just an action that can be caused by the user or by the software itself the examples of some events are for example a mouse click and that event is called on click or when you press a key and that event is called on key down or for example when you hover over a button and that event is called on hover or on mouse enter depending on the language in which you work the naming is a little bit different but the logic is absolutely the same so one event is when you hover over a button and then another event is when you leave that button so let me show you how this hover event works because it is implemented by default so i'm going to run my application and if i hover over this add button as you can see it becomes blue so someone has written the code which says on hover please become blue and that please become blue part is called event handler which means that that is the behavior that is going to happen when a certain event is raised so what i want to do now is i want to handle another event which is mouse click that event is called on click and the behavior that i want on click of this button here is i want to take text from this input field this task edit and i want to add that task to my task list box so that is the event that we are going to handle now let's close this application and as i said the event that i want to handle will be the event of this button here and i'm going to switch to this events tab and i will find event called on click and here if i want to create an event i just need to double click on this input field and as you can see two things happened the first one is that we created a function called add button click and here we are going to implement that function so here we are going to write the code of what is going to happen when add button is clicked and then this function also has been connected with this on click event which means that when that button is clicked so on click please invoke this function here and as i said here we are going to describe the behavior of that function and one tip if you're not familiar with functions i will link in the upper right corner a playlist where i explain everything that you need to know about functions and i will also link that playlist in the description of this video so make sure to watch that if you don't understand what are functions so now if you watched all of my previous videos you can see how all the things that i explained come together and make perfect sense so before i implement this function let me show you very quickly what has changed in these other files so if i open my design tab you will notice that nothing has changed in terms of design and then in this unit 1.h we have added a declaration of function called add button click okay and then inside this unit 1.cpp we are going to implement that function so once more what i want to happen when add button is clicked is the following let's move to design mode and when this button is clicked i want to take the text from this input field which is called task edit and i want to add that text to my tasks list box so that is the code that i will write in my unit 1.cpp so here i'm going to create a variable of type string and i will call it task text like this so i want to access a control called task edit so i will say task edit and i want to access its property called text like this and make sure to use this pointer because if you use a dot it is not going to work so again make sure to use this symbol here okay so with this we have taken the text from our task edit and we have stored that text inside this string variable that is the first step and the second step is to add this task text into our list box so i will refer to my list box and its name is tasks list box like this and i want to access the items of my tasks list box so i will say items and then what i want to do is i want to add a new item so i will use add method and that item will be this text here so i will pass a parameter which is the text from our task edit and with this we have successfully implemented the handler for add button click so if i run my program now let's see what is going to happen okay perfect so let's type for example task 1 and let's click add and as you can see this task has been added to our tasks list let's add another task okay and then third task forth and so on now one thing that i would like to happen is when i add this task i would like this text to be deleted so let's add that code as well i'm going to close the program and here after i have added the task to my tasks list box and what i want to do is i want to say that the text of my task edit is now going to be equal to an empty string like this so if i run my program again okay and if i add task 1 and click add as you can see the text has been cleared let's add another task add and again the text has been cleared so that is the first functionality and the second functionality that i want to implement is when i click a specific item of this list i want that task to be removed which means that that task has been completed so i remove it from my list okay so that is another functionality that we are going to implement and in order to implement that functionality we need to handle another event so let's switch to our design mode and the event that we want to implement is the event of this list box here and that event is called on item click so let's find that event it is here so when an item of this list box is clicked what do we want to happen so again in order to implement the event we need to double click on this field here and as you can see it has added task list box item click so it has added a method which we are going to implement here again the declaration of that method has been added inside our unit 1.h nothing has changed in terms of our design and then we are going to implement that method here so if i scroll up you are going to see that here is the implementation of our add button click event and then below it we are going to implement tasks list box item click so what do we want to happen when an item of our list is clicked the answer is we want to remove that item so how we are going to do that well we are going to use one of these two parameters that we received inside this function so if you pay attention this function has two parameters the first one is the sender and then the second one which we are going to use is called item and this item represents the exact item of our list that has been clicked so if you have a list that has three tasks for example and you click on the second one here you are going to get that second task so we need to remove this item from our list now the way to remove items from a list box is by using their index so the same way that an array has indexes a list also has indexes so what we need to do is we need to ask this item hey what is your index and then we are going to tell to our list box please remove the item that has that specific index so let's do that so the first thing that i want to do is create an int variable called index and what i want to store inside this index variable is index of this item here so i am going to say item index again make sure to use this pointer because if you use dot it's not going to work okay so here we have the index of the item that has been clicked and now what we need to do is we need to remove the item with that index from our list box so in order to do that i will say tasks list box like this items delete okay and this delete method receives the index of the item that we want to delete so i'm going to say please delete the item that has this index here so with this we have successfully implemented item click event on our list box so if i run my program now let's see what is going to happen so let's move it here and let's add a task let's say task one add and then task two add task three okay that's enough so if i click a specific task as you can see that task is going to be removed and then this one and this one as well so those are two functionalities that i wanted to show you but this application also has some bugs and the first part that i notice is that this add button will add a new task even if this field is empty so it will add an empty task basically so if i click add at add and if i add for example task 5 as you can see that task is going to be added on this position here because here we have tasks with empty text and you can remove those tasks as you can see so that is one bug that i'm going to leave to you so that you can fix it on your own and then if you find any other way to upgrade this application and add some additional features feel free to leave your ideas in the comments section so thank you very much for watching please give this video a thumbs up for the youtube algorithm because that helps me a lot to reach more people and then also share it with someone who would like to learn programming because that way our community is going to grow faster so that is all for this video it's currently 5 am and i have to go to sleep bye

Channel: CodeBeauty

Views: 147,394

Rating: 4.8824172 out of 5

Keywords: c++ builder, embarcadero, c++ gui, c++ gui app, first gui app, how to install c++ builder, how to install rad studio, rad studio introduction, how to build gui apps, how to build gui apps with c++, events in c++, event handling in c++, events and event handling, how to create gui application, how to create gui application using c++, gui application in c++, gui for c++, cross platform graphical user interfaces in c++, cross platform gui in c++, first c++ app, first c++ gui app

Id: FxQTXyR4mjs

Length: 27min 10sec (1630 seconds)

Published: Wed Jun 16 2021