Java: Core GUI Concepts I - Example Program

Well, good to know that TL;DR is a hit! Moving on, GUIs themselves are complicated to teach beyond "Here's the libraries, get to it", so we'll start off with an example program! This should hopefully give us an idea of how certain aspects are used and whatnot.

The example we'll be using is just a window with a button. The button will toggle between 2 text messages, "Hello" and "Goodbye". It's surprisingly complex, so I'll only be doing this for example purposes, so you can see how the code works. Tomorrow, I'll be recreating the program the easy way (I hope), so don't fret if this is ridiculous. Here is the end result:

And here is the source code, if you feel like taking a look at it:
http://www.megaupload.com/?d=S2FCEBRR
It'll be in GUIExamples\src\guiexamples\HiBye.java


Followed by some screenies of the condensed version:

Here we just have the necessary imports and then the strings we'll be using as labels, as well as a string to hold the current message, whatever it is at the time. Note that this class is a subclass of JFrame.

Say hi to the main body. It's a doozy. First we need to make sure that our constructor calls on the JFrame initializer.
Following that, we need to make a label. The constructor for our label consists of our message (Either Hello or Goodbye), and then a setting for it's location. Centering it works fine for us.

Next up, we need our button. Line 19 creates our button and gives it some text in its construction. To make the button actually DO things, we need an action listener. If you just try to create a new ActionListener(), Netbeans will give you an error, and automatically place in that method for you if you ask for it to be fixed. In actionPerformed is where you put what you want to be done.
In our case, (using the compressed if-else, ya'll know how that works?) we have a toggle between our 2 strings, and then setting the text so the toggle actually shows up.
We now need to add that listener to our button to make it useful.

NOW we need a panel (bloody hell this is a lot of work for such a simple program) so we can place our label and button on. So we create the panel, then set the borders (N, E, S, W).
Lines 31 and 32 are placing our label and button on the panel in the respective positions, and line 33 is adding the panel to our frame.
Line 34 makes sure that when the window is closed, the application is done with (memory nightmare otherwise), then everything is packed up. Important to make sure the window is visible, too!

Beyond that, we have out main method to run it. This is technically a bad idea to do it like this, but not for this particular program. I'll get to that another time

TL;DR: 
Lines 16-17 create a label (the visible text)
Lines 19-25 create a button then add performance capabilities to it!
Lines 27-29 make a panel and add borders
Lines 31-36 place labels and button on panel and performs other useful tasks.
While it looks complex, its just putting things together piece by piece.



I need to get to work on figuring out the easy way to do that, because, damn. So that's it for now..Questions welcome! Comment, follow, subscribe, share etc, and see you tomorrow!

And as part of a shameless plug for a friend, if you're interested in classic movies/books/music, visit his site here (fixed), and feel free to throw loads of criticism at us.