Blogs

Graphical User Interface: An overview of Java Swing interface as a GUI

  • 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.

    Related article: Exploring the basic of Java programming language

    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:

    1. 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.
    2. 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. Here below is an example of a panel:

    Fig 1.2: A simple window with a panel on it

    The source code

    Continuation of the source code: 

    The above window shows a simple window with a panel titled, “Personal Info” – the greyed area of the window is the panel. Some components were also added on the panel – a label, a text field and a button. Check out the block of codes that followed below the window, there’s a comment that tells what each line of code does.

    After getting conversant with the frame and the panel, now let’s look at the last container class, the Dialog class.

    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. Example of a dialog is shown below.

    Fig 1.3 A dialog box on a frame

    The source code:

    The above shows how to design a window with a dialog box. Fig 1.3 shows the dialog box appeared on the window because an ‘OK’ button on the middle of the window was clicked. The source code gives step by step of how it’s done. Also, there’s a comment that comes along with each line of code for clarity.

    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.

Recent Blogs

  • Facebook business model: A critical look

    Posted Jul 28

    With over 1.6 billion daily active users (DAUs) and 2.28 billion family daily active people (DAP) and a whopping $ 70.6 billion in revenue (2019 Annual Report), Facebook is by far the most used and most profitable social media platform in the world way above Twitter tha...

  • Types, causes and effects of water pollution

    Posted Jul 22

    Polluted water kills more people each year than war and all other forms of violence combined. So many chemicals, wastes, oils, and plastics are being dumped into our oceans, seas, rivers, lakes, and ponds. The amount of waste in our waters is largely affecting the plant...

  • Influence of the internet on children

    Posted Jul 14

    In the past twenty years, internet usage has increased rapidly amongst children. More than two-thirds of eight-year old’s go online every day, according to study by the nonprofit Joan Ganz Cooney Center. Because of this, I'd like to talk about the influence of the...

  • Secret financial solutions for students during the pandemic

    Posted Jul 9

    The world is facing a global health challenge, which is affecting every sector in each country. While this common virus, coronavirus, affects our daily activities and social life, many industries and countries are preparing for a worldwide economic crisis. This financia...

View All

Random Blogs

  • Nigeria: Progress or regression?

    Posted November 28, 2019

    When I first read that tricycles popularly called keke napeps had been banned from Abuja roads, I logged out of twitter and called my sister. “Have keke napeps truly been banned from Abuja?” “Yes o”, she said. “You need to see how we have...

  • Top eleven resourceful websites for literary students

    Posted January 9, 2017

    Students in the current age have got no excuse for failure. Technology has radically removed all the barriers hitherto encountered in the academic world. Students are no longer limited to their classroom notes and outdated/ancient textbooks imposingly piled up in their...

  • Reasons why Information Systems should be integrated into every business

    Posted October 8, 2019

    Is it any wonder that in today’s world knowledge of computers/technologies is becoming so invaluable? It is evidently clear that almost all businesses are either having a dot com address, meaning are having a website of their own, or they are enjoying/relying on s...

  • World Environment Day 2017: Connecting people to nature

    Posted June 5, 2017

    Today is World Environment Day – a day set aside for encouraging worldwide awareness and action for the environment. What is World Environment Day all about? World Environment Day, established in 1972, is celebrated annually to mobilize people and encourage the ...

View All