Introduction to Swing
Before you start to learn Swing, you must address the true beginner's question: What is a UI? Well, the beginner's answer is a "user interface." But because this tutorial's goal is to ensure you are no longer a mere beginner, we need a more advanced definition than that.
So, I'll pose the question again: What's a UI? Well, you could define it by saying it's the buttons you press, the address bar you type in, and the windows you open and close, which are all elements of a UI, but there's more to it than just things you see on the screen. The mouse, keyboard, volume of the music, colors on the screen, fonts used, and the position of an object compared to another object are all included in the UI. Basically, any object that plays a role in the interaction between the computer and the user is part of the UI. That seems simple enough, but you'd be surprised how many people and huge corporations have screwed this up over the years. In fact, there are now college majors whose sole coursework is studying this interaction.
Swing is the Java platform's UI -- it acts as the software to handle all the interaction between a user and the computer. It essentially serves as the middleman between the user and the guts of the computer. How exactly does Swing do this? It provides mechanisms to handle the UI aspects described in the previous panel:
- Keyboard: Swing provides a way to capture user input.
- Colors: Swing provides a way to change the colors you see on the screen.
- The address bar you type into: Swing provides text components that handle all the mundane tasks.
- The volume of the music: Well ... Swing's not perfect.
In any case, Swing gives you all the tools you need to create your own UI.
Swing even goes a step further and puts a common design pattern on top of the basic UI principles. This design pattern is called Model-View-Controller (MVC) and seeks to "separate the roles." MVC keeps the code responsible for how something looks separate from the code to handle the data separate from the code that reacts to interaction and drives changes.
Confused? It's easier if I give you a non-technical example of this design pattern in the real world. Think about a fashion show. Consider this your UI and pretend that the clothes are the data, the computer information you present to your user. Now, imagine that this fashion show has only one person in it. This person designed the clothes, modified the clothes, and walked them down the runway all at the same time. That doesn't seem like a well-constructed or efficient design.
Now, consider this same fashion show using the MVC design pattern. Instead of one person doing everything, the roles are divided up. The fashion models (not to be confused with the model in the acronym MVC of course) present the clothes. They act as the view. They know the proper way to display the clothes (data), but have no knowledge at all about how to create or design the clothes. On the other hand, the clothing designer works behind the scenes, making changes to the clothes as necessary. The designer acts as the controller. This person has no concept of how to walk a runway but can create and manipulate the clothes. Both the fashion models and the designer work independently with the clothes, and both have an area of expertise.
That is the concept behind the MVC design pattern: Let each aspect of the UI deal with what it's good at. If you're still confused, the examples in the rest of the tutorial will hopefully alleviate that -- but keep the basic principle in mind as you continue: Visual components display data, and other classes manipulate it.
The basic building block of the entire visual component library of Swing is the
JComponent. It's the super class of every component. It's an abstract class, so you can't actually create a
JComponent, but it contains literally hundreds of functions every component in Swing can use as a result of the class hierarchy. Obviously, some concepts are more important than others, so for this tutorial, the important things to learn are:
JComponentis the base class not only for the Swing components but also for custom components as well (more information in the "Intermediate Swing" tutorial).
- It provides the painting infrastructure for all components -- something that comes in handy for custom components (again, there's more info on this subject in "Intermediate Swing").
- It knows how to handle all keyboard presses. Subclasses then only need to listen for specific keys.
- It contains the
add()method that lets you add other
JComponents. Looking at this another way, you can seemingly add any Swing component to any other Swing component to build nested components (for example, a JPanel containing a JButton, or even weirder combinations such as a JMenu containing a JButton).