Join Peggy Fisher for an in-depth discussion in this video Frames, events, and event handling, part of Learning Java (2015).
- This section introduces the basics for creating GUI forms using Java. GUI, G U I, stands for Graphical User Interface, and this allows us to create applications that have a user-friendly front end. The nice thing about NetBeans is you can use a GUI builder interface. In the project that I have open, called Contacts, you can see that the GUI builder interface is already open. On the right-hand side, I have a palette of all the options that I can use to create my GUI form.
All Java GUI applications are based on frames, and then we use panels on top of frames to group items on the frame. Once we create the frame or the window, we can then add components to the frame, such as text fields, buttons, images, et cetera. As you can see, I already have a frame called ContactUI.java. Let me show you how I created that. If I right-click on Contacts, I can go to New > JFrame Form, and this would create a blank form. For this project, I already have one panel called Name, I have two labels, First Name and Last Name, and two text fields.
Let's go ahead and add another panel together that will be an email. We'll add an email label and an email text field. On the right-hand side, in the Swing Containers, I drag over a panel. I line it up with the Name panel, gonna stretch it out. Notice, when I clicked on this new panel, on the bottom right you see Properties of jPanel2. Let's go ahead and change the border for this one. I'm gonna give it the same type of border as the top, a Titled Border, and I'm gonna change the title to E-mail.
I'm gonna click OK. Now I need to drag over a label. So the top part are containers, the bottom are controls. So I'm gonna click on Label and drag it into the E-mail box. I wanna change the name of this label, actually the text that shows up on there. So I'm gonna click where it says text, iLabel3, and change that to Email. Excellent. Now I wanna go over and grab a Text Field. Text fields are fields that allow the user to enter data into that field.
I'm gonna make it the same size, maybe even a little bit bigger than the First Name and Last Name, and again, I wanna take out the text that says jTextField3 so that it's empty. OK. Well, it's been easy so far to add labels and forms and create panels. The last thing I wanna show you is how to add a button. Let's go ahead and grab a Button. I'm gonna put it at the bottom. And we're gonna change the text here to say Done. It doesn't make much sense to have a button if it doesn't do anything, so let's go ahead and add some code so the Done button will exit.
If I double-click on it, it opens up the Code portion of my form. And I'm going to replace the TODO for the jButton1, and I'm gonna say System.exit(0). That means that it ended without a problem. Now, I don't know if you noticed this, but on the top of this page, there's three choices. You can, look at this. Source view, the Design view, which takes me back to my GUI builder, and the History. For right now, let's go back to Design view.
OK, we have our First Name field, our Last Name, our E-mail, and our Done button. Let's click on Contacts.java. This is the main program. So we created our form, but I still need to set up my main. In my main, I have JFrame frame = new ContactUI. That's the name of my form. I set the Title of the frame to say "GUI Test", I set the Default Close Operation, so when they click on the X in the upper right-hand corner, to automatically exit on close.
And finally, we have to remember to make our frame visible. So I have frame.setVisible. Let's go ahead and run it. You can see it's called GUI Test, and I can put my name in here, hit the Tab key, put my last name, and then my email. And when I'm done, I can click on the Done button. Right now, all it does is close the window. We would have to add additional logic if we wanted to capture the fields and store them, maybe in a file or in database. Let's look back at the ContactUI again.
As you can see, there are many more components that can be added to the panel and to the frame, such as a jText Area, which allows for multi-line input. We can add Radio Buttons, we can add Check Boxes. What do you think the difference is between radio buttons and check boxes? Radio buttons are mutually exclusive, so you can only have one checked at a time. Adding all these components are beyond the scope of this series, Up and Running With Java. But I hope I've sparked an interest in learning more about graphical user interfaces in Java.
And NetBeans has a very nice GUI builder for you to get started.
- Downloading and exploring NetBeans
- Understanding Java basics: data types, strings, arrays, and more
- Controlling flow with functions and loops
- Creating classes
- Sorting and searching arrays
- Manipulating files
- Handling errors
- Building GUIs