The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

All information submitted is secure.

My developerWorks:

My notifications:

Sign out

Select a language:

Introduction to Swing

Michael Abernethy, Team Lead, IBM

Michael Abernethy is currently the test team lead on the IBM WebSphere System Management team based in Austin, TX. Prior to this assignment, he was a Swing UI developer at multiple customer locations.

Summary: This hands-on introduction to Swing, the first in a two-part series on Swing programming, walks through the essential components in the Swing library. Java developer and Swing enthusiast Michael Abernethy guides you through the basic building blocks and then assists as you build basic but functional Swing application. Along the way you'll learn how to use models to ease the process of dealing with the data.

Date: 29 Jun 2005
Level: Introductory

Activity: 49686 views
Comments:

Introduction to Swing

Introduction to UIs

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's role

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.

MVC

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.

JComponent

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:

JComponent is 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).