Home > Information Technology, programming, Science > JAVA Programming: Working With Swing Library

JAVA Programming: Working With Swing Library

Time for some JAVA action everyone. For today, let’s make an application interface that looks like this:


Step 1: Importing the library

To actually access the objects in the swing library, you have to import the swing library. So, start your JAVA file with:

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

Now, you have the access of swing objects and some additional object such as Listener object that will react on an event like mouse click or keyboard pressed.

Step 2: Constructing the class

Now, you have to choose the class name which will be the template of the application:

public class LibraryMDI implements ActionListener {

this class is named LibraryMDI and implements ActionListener. ActionListener is the event library that will provide you with the capability of listening to an event that user do in your application (in this case, we want the toolbar to react to a user’s mouse click). Now, you can save your work and name your class

Step 3: Constructing the frame

Just like any other application, the frame is a window to components in an application such as toolbar, menu, workspace, and any other else. To construct the frame, all you need to do is:

private JFrame frame;
public LibraryMDI() {
 this.frame = new JFrame(“Library Information System”);

This will create a frame object that has a header title “Library Information System”.

Step 4: Arrange your frame for the components

Next, you will have to arrange your frame so that the components can be neatly placed in the frame. If you look at the picture, you will see that we need 4 space. The upper part where to put our toolbar icon, the middle part where the workspace will be placed, the right part where to put the logo image and memory monitor, and the bottom part to place the text “Library Information System — Created by Souza Nurafrianto IT5B”.

So, you have to define a panel and a layout for the panel to do this job. A panel is an invisible board which the components can be placed to it and layout is how the panel will arrange the components. So, define these components in your global variable:

private JPanel subMenu = new JPanel();
private BorderLayout subLayout = new BorderLayout();

We use BorderLayout as our layout because we only need to seperate four tiles in our panel (upper, middle, right, and bottom). BorderLayout does the job since it has up to 5 splitting tiles (north, west, center, east, and south). Consider the arrangement in the BorderLayout just like the compass: north for upper, west for right, etc. Now, you have to add four of the main components which will be placed in the subMenu panel (the toolbar, workspace, right panel, and bottom panel) as your global variable:
private JDesktopPane desktop = new JDesktopPane();
private JToolBar toolbar = new JToolBar(“Command Docker”, JToolBar.HORIZONTAL);
MessageBox box = new MessageBox(); // MessageBox class for right panel
private JPanel pMtitle = new JPanel();

Now, arrange these components into the your subMenu panel in your constructor class “public LibraryMDI()”:

subMenu.add(toolbar, BorderLayout.NORTH);
subMenu.add(this.desktop, BorderLayout.CENTER);
subMenu.add(box, BorderLayout.EAST);
subMenu.add(pMTitle, BorderLayout.SOUTH);

So, you have arranged these components into subMenu panel. Now, the subMenu panel has four components in it, toolbar which resides in the upper part, desktop which resides in the center (or right since WEST is not used), box which resides in the right, and pMTitle which resides in the bottom.

Step 5: Adding your toolbar some buttons

The toolbar that we just inserted in the subMenu panel still doesn’t have buttons, so let’s add a button. To define a button in swing you can use JButton:

private JButton btn1 = new JButton(new ImageIcon(getImage(“icon\\addItem.gif”)));

JButton can either receive ImageIcon or String. In this case, ImageIcon will put the button with a picture. You can also use a tool tip so that whenever you hover your mouse to the button, a text balloon will appear to describe what does the button do:

btn1.setToolTipText(“Order Resource”);

Next, put the button in the toolbar:

toolbar.add( btn1 );

Now, your toolbar has a button that can be pressed. However nothing will happen if you pressed it.

Step 6: Adding EventListener to the button

Now, you want the button to react if a user press on it, right? Remember that our LibraryMDI implements the ActionListener class? You can use the method to create a listener which will listen to any particular event done by the user. So, put the listener to the button:

btn1.setActionCommand(“Order Resource”);

“this” in this context means that the button will go to the ActionListener of this particular class (the LibraryMDI class). Therefore, you have to define a method called “actionPerformed (ActionEvent e)” to catch any event that user’s made (if you don’t use “this”, the event that happened will not be catched by the actionPerformed of the LibraryMDI class). So, fill your method with this:

actionPerformed (ActionEvent e) {
 String command = e.getActionCommand();
 if (command.equals(“Order Resource”)) {
  System.out.println(“Order Resource was pressed”);

Remember that we have defined if btn1 was pressed it will send a string “Order Resource” to the actionPerformed method (since you set the btn1.setActionCommand to be “Order Resource”). So, whenever ActionEvent contains “Order Resource” string, it knows that btn1 has been pressed by the user. Thus, the system will print “Order Resource was pressed” string in the command prompt.

Step 7: Inserting image to the workspace

Well, you want your workspace to have a background, right? Instead of plain white, you want to add logo and stuff to the workspace. To do this, just right this simple code:

Image a = Toolkit.getDefaultToolkit().getImage(System.getProperty(“user.dir”) + “\\image\\icon\\brokeBuckWall.jpg”);

This will set the desktop with the image \image\icon\brockBuckWall.jpg.

Step 8: Putting it together to the frame

Now, your components are finished. Time to put it to the frame and show it to the world. Configure and place the subMenu panel to the frame:


There you go your frame is done and ready for testing. Just do your usual “public void static main(String[] args)” and call on the object of LibraryMDI class.

Anyway, that was just a simple explanation how to do it. I’ll include the more sophisticated yet elegant way in the file that you can download below. Just execute the compile.bat to run the program.

File Name: Library Application (LISA)

File Size: 568 KB


  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: