Graphical User Interface otherwise known as GUI (pronounced either as G.U.I or gooey) is an interface of electronic devices – computers, mobile devices, and other digital devices such as games – that uses graphical images, icons and other visual indicators to interact with users. Most operating systems and programs that we use in our devices today are GUI-interfaced. In fact, most of us know our devices as only using GUI interface rather than a command line interface that uses text. Notably among devices that are commonly using GUI interface is Microsoft Windows – all its versions are GUI interface. In GUI interface, a user, with the help of a mouse and a monitor, clicks buttons, icons, menus and many graphical icons in order to interact with his or her devices. Many different technologies are used in order to create different compelling GUI interfaces depending on the programmer’s or designer’s knowledge, needs and job requirements. In this article, we are going to look at Java Swing as an example of GUI, its basic structure and how rich it is. And finally, as we move along the way, we are going to be looking at simple yet practical Java Swing application examples. And the source codes will be provided together with some helpful comments to aid understanding.
A bit of history:
By the way, did you know that the first GUI interface was first developed in 1981 at Xerox PARC (Xerox Corporation Palo Alto Research Center) by a group of researchers led by Alan Kay and Douglas Engelbart. Then later, on 19 January 1983, Apple Computer, INC introduced their Lisa Computer with GUI interface. From that moment, the rest is history. You can read more on the history of Graphical User Interface here.
What is Java Swing?
Java Swing is a GUI program that is built in Java JDK (Java Development Kit) in order to use Java programming language to design and implement a graphical user interface. It provides platform independent and lightweight components, meaning a Swing program can run on its own without depending on any web browser. The Swing library is built on top of the older GUI toolkit, called, Abstract Widget Toolkit (AWT) – which is a platform dependent and has heavyweight components. Thus, making Java Swing more sophisticated than the older version.
The javax.swing package provides classes for java swing API such as JButton, JTextField, JTextArea, JRadioButton, JCheckbox, JMenu, JColorChooser.
Java Swing class hierarchy diagram
Perhaps by looking at the above diagram, one may have an idea of how Java Swing class works. As shown above, from an object of Java Swing class, then all the remaining classes follow – the containers and the components, which are the things that make up the Java Swing interface.
For the purposes of this article, we are going to look at the components and containers as the classes that a programmer will always use in designing his/her Java Swing program. Also, briefly, we will discuss layout managers and their significance in design. Let’s begin.
What are Java Swing components?
Components in swing are the basic building blocks of any swing application. They include buttons, scroll bar, menu bar, radio button and so many others – and almost all of them begin with letter “J”. They are added to containers like JFrame, JDialog or JPanel, which by the way, are components themselves. They are the things that added functionality to the application containers.
As mentioned previously, most components that are being used in designing GUI in Java swing are JComponents, and they can be added to container classes. To use soup as a metaphor, one can conclude that, components are just like an ingredient for making a pot of soup; they are the ones that make the final product, the soup! Whether it tastes good or bad, it all depends on the procedures followed and the amount used in making it.
It’s important to know that, all Swing components whose names begin with “J”, descend from the JComponent class, with the exception of the top-level containers. Components like, JPanel, JScrollPane, JButton, and JTable all inherit from JComponent. But because JFrame and JDialog implement top-level containers, they don’t.
The JComponent class extends the Container class, which itself extends Component. The Component class includes everything from providing layout hints to supporting painting and events. The Container class has support for adding components to the container and laying them out. This section’s API tables summarize the most often used methods of Component and Container, as well as of JComponent. (source: Oracle)
What is a container class?
Container classes are classes that can contain a component or components in them and sometimes another container. In order to create a GUI application in Java Swing, you need at least one container object. We should have discussed container classes earlier, but for clarity and easy understanding, I decided to start with the component classes. So, we can discuss and give examples concurrently in a more presentable and timely manner.
Type of containers
There are top-level containers and low-level containers in Java Swing. In this article, we are going to look at three types of containers; panel, frame and dialog – all of which start with letter J. While JPanel is a JComponent, lightweight and low-leveled, JFrame and JDialog are top-level containers and heavyweight. Now, let’s look at them one after another.
Frame
A frame is a special container that can take so many containers and components in them. A frame is a window on its own that has its title and it’s referred to as JFrame. It inherits the AWT Frame class, an older version. A JFrame is a window that users see and interact with when using a device like cell phone, computers, video games and so on. The functionality that helps a user get to where he wants to go and accomplish a task on a device is done by different components that are added on top of that JFrame. Example of a basic JFrame is as follows:
Fig 1.0: The most basic Swing Frame example
The source code:
In the above example, as you can see, we were able to set up a simple frame or window that gives us a title, size, visibility and a bit more. The output is shown in fig 1.0 as well.
Now, we can add some components on our Swing frame. But, it’s important to note that, there are three steps to adding components on a frame; they are:
- Setting layout manager: It decides where to arrange the components in the window. Depending on the kind of layout manager a programmer chooses, there are several manners in which components are being arranged.
- Creating the Swing components: The components are built-in classes in the Java Swing kit. Because they are built-in classes, they get called by invoking their JComponents class. See the example below of how a component get invoked in the code below.
The above line of code shows how you can call JButton component. Firstly, “JButton” class is mentioned, then a name (variable) is given as ‘btn’ and it is assigned as a new “JButton”. Then finally, in the constructor, which is the word between the two brackets is set as ‘OK’. So, when the button appears on the window, the word ‘OK’ will appear on it.
4. Adding Swing components to content pane: Lastly, after components are created, then those components must be added to content pane for them to be able to appear and work on the window. When adding a particular component in the pane, the layout manager will be called in order to allow a component gets situated in the right place that a programmer wishes to place it on the window, as mentioned earlier. Pay attention to the block of code below, you will see how a component is being added in the content pane.
The following code shows how components are being added in a frame.
Fig 1.1: A window with an added text area and a button
In the above GUI app, we were able to add functionality to our Frame. We have added text field that will enable a user to enter or type a text, and we have also added a button that says, ‘click me’. If the button is clicked an embedded message will appear in the text field. The text field is the white space on the window, it’s just like a workspace. For details of how to do it, check out the block of code above the window to know how it works. Each line of code has a comment above it for clarity.
After knowing what a frame is, how it works and how to add components on it, let’s move to another container, a panel!
Panel
A panel is a low-level container that is primarily used for arranging other components like button, labels etc. The panel is not a window on its own, therefore, to be able to use the panel at least a frame must be there. And as always in Java Swing, the panel is known as JPanel.
Dialog
A dialog also known as JDialog is like a pop-up window that gets popped-up when a message is to be displayed. Dialog is a top-level container like frame, but unlike frame, is not a fully functioning window on its own. In computer applications, a dialog is used to input data, modify data and also used to change application settings if need be
Layout managers in the Java Swing
Layout manager is an interface that implements all the classes of layout managers. They are integral parts of Swing Class that help in arranging components on a container. The manner in which each component is placed depends entirely on the kind of layout manager and the constructor chosen.
Layout managers are as important as all the components that are used in application design. Because without them, the components will be as disorganized that working on a device will feel like some daunting task. A device will appear not as pleasant or even impossible to carry out a task without the help of the layout managers.
Although Layout managers appear to be so important and inevitable, there’s an alternative to them, it’s called absolute positioning. But expert advised that layout manager should always be a priority than the absolute positioning.
There are several types of layout manager. Some of the most commonly used are borderLayout, boxLayout, cardLayout, flowLayout, gridBagLayout, gridLayout, groupLayout, springLayout and etc. For more about layout managers, check out this article.
Summing it up
To summarize, therefore, we started off by looking at what the graphical user interface means and a bit of history of how it all began as a background. We then delved into the main topic – the Java Swing. We talked about the basic aspect of Java Swing; the components and the containers. We then discussed their meanings and functions along with some very basic practical examples. We then went on to conclude by discussing layout managers, their importance and how vital the role they play is to designing an application using Swing interface.
That’s all we got about Java Swing. And remember, this article only gives an overview of the basic aspect of Java Swing. There’s certainly much more to Java Swing, things like a more modern aspect of it, that we can’t cover here. God willing, in not too long-distance future, I’ll write another article to discuss drag and drop design and more. Until then, let me know, in the comment section below, what you think about this article and Java Swing in general.
