Create Java Application with JTable and Form using Swing GUI Builder of Netbeans IDE (+ Source Code)

hello everyone in this video i will show you how to create this simple java application using netbeans so this application allows us to create new clients and to add them into this table also this application is dynamic so if i increase the width we can see that the width of this table will be increased also if i increase the high we can see that it is dynamic now let's create a new user so if i don't provide all the information and i click on add i will obtain this error message so it is required to provide all the information so let's click on ok and let's provide the address now let's add this new client and you can see that this client has been added into this table let's add a new client now if i click on this delete button i will obtain this error this is because i did not select any row to delete now let's delete this row so let's select it and let's click on delete and you can see that the row has been deleted also the data of this table will not be lost when we close this application because the data will be saved into a file and when we start the application again we will find the data again so let's close the application and let's open it again and you can see that the data has been saved now let's close this application and let's create it again using netbeans so with the netbeans let's create a new project so i will create a new java project with aint so let's select java with ain't and let's select java application now let's click on next so i will call this application java dashboard also i don't need to create the main class so i will uncheck this box now let's click on finish so the project has been created and it is empty now let's create a new java class so i will select swing gui forms then i need to create a new g-frame so let's select g-frame form now let's click on next so i will call this class mainframe and let's click on finish so this is the user interface and if we want to see the source code we have to click on source and this is the source code now let's go back to the designer and let's increase the size of this interface now i need to modify the background color of this frame so to do this i need to add a panel so let's drag and drop a panel and let's provide this panel with all the size of the frame now we can modify the background color of this panel so we need to modify the background property so we need to click on this button and here we can select this color for example now let's click on ok and we can see that the background color has been modified now let's add a label let's provide it with the full width now let's modify the text property and i will write list of clients let's hit enter and we can see that the text has been modified now let's modify the font of this text so we need to modify the font property and you can see that the font has been modified also i want this text to be in the center so let's modify the horizontal alignment property and let's select center also i want to provide this label with an icon so let's go to the navigator and let's go to the website flat icon so this is the website so let's click on this link so i need to download some icons let's select this one let's select a small size and let's click on free download so i will save it and i will save it on the desktop also let's download other icons so let's download this icon i need a small size and let's click on free download also i need the clear icon so i will download this icon and finally i need the delayed icon so let's download this one now let's go back to our application so to add the icon to this label i have to find the icon property and let's click on this button so i want to import the icon to my project so let's click on import to project and my icons are available on the desktop so let's select the group and let's click on finish now let's click on ok and we can see that this icon has been added to this label and also to the project now let's add a new panel that allows us to add new clients so let's drag and drop a new panel let's provide it with the full high now i need this panel to be transparent so let's find the pack property and let's uncheck this box now i need to provide this panel with a title so let's add a border to this panel so this is the border property let's click on this button and let's select the titled border so let's provide it with a title let's say new client also let's modify the font of this title and let's click on ok now let's add some labels and some text fields to this panel okay okay do now let's add two buttons at the bottom of this panel so let's drag and drop two buttons we can also increase the width of these two buttons now let's modify the text of these two buttons so for the first button the text will be add and for the second button the text will be clear also i want the width of these two buttons to be the same so let's select these two buttons simultaneously using the control button and let's make a right click on one of them now let's go to same size and let's select same width now the two buttons have the same width so let's put them at the center also let's modify the font of the different fields so let's select all of them and let's modify the font property so this is the font property let's click on this button and let's modify the font let's click on ok and you can see that the font of the different fields have been modified now let's modify the object name of the different text fields so let's select this first text field and let's go to code then let's modify the variable name so i will call it tf for text field name let's hit enter and we can see that the variable name has been modified let's do the same thing with the other text fields so let's select this one and let's modify the variable name let's call it tf email let's hit enter let's do the same thing with this one also let's modify the variable name of these two buttons so let's select the first button and let's call it btn add then the second button i will call it btnclear now let's add an icon to these two buttons so let's select the first button let's go to properties now let's go to icon and let's click on this bottle so let's import a new icon let's select add and let's click on finish now let's click on ok and we can see that the icon has been added now let's select the second button let's click on this icon property and let's import the new icon so it will be eraser let's click on finish then ok now let's create the delete button let's increase the width a little bit and let's modify the text also let's modify the font and let's add an icon now let's add a table so let's go to this palette and let's find the table which is this one let's drag and drop it now i need to modify the title of the different columns also i need to remove the different rows so let's make a right click then table contents then let's go to columns in my case i only need four columns so i don't need to add a new column now let's select the first column and let's modify its title so let's call it name let's hit enter let's select the second column and let's modify the title so it will be email now let's select the third column and let's modify the title it will be phone and finally let's modify the title of the fourth column so it will be address now let's go to rows and let's delete these rows now let's click on close for the moment this table is called gtable1 i want to modify the variable name so let's go to code and let's modify the variable name i will call it table clients let's hit enter now let's modify the font so let's go to properties then let's find the font property which is this one let's click on this button then let's select the font now let's adjust the dimension of this interface also let's modify the name of this button so i will call it btn delayed now let's take a look on the source code so this is the source code and here we have the different variables so these variables are global variables because they are declared in the class but i only need the text fields and the g table to be global variables the other variables should be local so let's make them local let's go to the design let's select this button let's go to code and let's select this checkbox to make this button local variable also let's select the other components this is gpanel1 and this is the g-scroll pane now let's take a look on the source code and this time only the text fields and the g-table are declared as global variables now let's go back to our designer and let's add a listener to the add button so let's make a double click on this button so this method will be executed when we click on the add button what i want to do here is to read the text of the different text fields and to add it to the table so let's do this now let's check if there is any empty field so if any field is empty we have to display an error message also we need to import this class so let's click on this error icon and let's add the import if all the fields are not empty we have to add a new row to the table so to add a new row to the table we need first to obtain the model and then we need to add the row to this model but here this class is not recognized so we need to import it then we need to make all the fields clear now let's go to the designer and let's add a listener to this clear button so this method will be executed when we click on the clear button and what i want to do here is to make all the text fields clear so let's do this now let's add a listener to the delayed button so first let's obtain the selected row of the table if no row is selected we have to display an error otherwise we need to delete the row from the table now i need to save the data of the table when i close the application so let's add a listener to the frame that is executed when the frame is closed so let's go to the designer let's make a right click on the g-frame then event then window then window closing so this method will be executed when we close the application what i want to do here is to save the data of the table so first let's read the data of the table then let's import the vector class then let's save this object into a file now we need to import these two classes so this is the name of the file that will contain the data of our table also i need to read this file to fill the table when we start the application so let's add a new method that will be executed when we start the application so let's go to the designer then let's make a right click on the gframe then events then window then window opened so this method will be executed when we start the application what i want to do here is to read the file that contains the data of our table and to fill the table so let's do this let's add the required imports so this is the data that we obtained from the file we need to add it to the table now we can modify the title of the gframe and we can provide it with a minimum size so let's select the g frame then let's modify the title property so i will call it dashboard also let's suppose that this is the minimum size of the window so let's find this current size so this is the current size i need just to copy it and let's paste it in the minimum size now let's hit enter let's go back to our source code and let's run our application so this is the obtained window it has this appearance and you can modify this appearance by modifying the source code so let's close it let's go to the main method and here we can remove this part of the source code now let's run the application again and this is the new appearance now let's add a new user so let's click on add without providing any value and we obtain this error message now let's provide a new client and let's click on add so this user has been added to this table we can also increase the width of this window and we can increase its high also to modify any value from this table we have just to make double click on the value now let's modify the text and let's hit enter now let's add a new user if i click on clear these two fields will be clear now let's add a new user and let's click on add let's add another user so to remove a user i have just to select it and to click on delete and we can see that the row has been deleted if i click on delay without selecting any row i will obtain this error now let's click on ok and if i close this application the data will be saved in a file so let's close the application and let's run it again so this time we can see that this table is not empty because we failed it from a file you can download the source code of this application from the link that you can find in the description finally thank you very much for watching and please subscribe to the channel

Channel: BoostMyTool

Views: 506

Keywords:

Id: ohEFX1OngxE

Length: 23min 12sec (1392 seconds)

Published: Sun Nov 28 2021