← Home

Complex Interfaces


You have known how to put an image onto the screen and add scroll bars to it if it is too big since Chapter IV part II. But, what if you want to put two images (or panels) on to the screen next to each other, and want to be able to dictate just how much space each image takes up? For that purpose you can use a JSplitPane. This is a pane that contains two images and has a functionality with which you can change how much of the screen each image takes. To do this you will have to import javax.swing.JSplitPane, and will have to declare a new JSplitPane. Inside the parameters however, you will have to add some other things, including scroll bars (because otherwise you will not be able to dictate how much of each picture you see). The declaration will end up looking like this:

1JSplitPane split = new JSplitPane(JSplitPane.HORIZONTAL_SPLIT, new JScrollPane(label1), new JScrollPane(label2));
2//where 'label1' and 'label2' are predeclared labels.

Then, in the constructor, you set those labels to be your images of choice and add the split pane to the JFrame. This particular piece of code, along with all of the other things needed for it to function, creates this:

A horizontally split pane

You could also change the HORIZONTAL_SPLIT to VERTICAL_SPLIT, but that would not be very good for our penguins health:

A vertically split pane

He seems to now have a massive mound of rock instead of a body.

You may notice when you create the split pane that the middle bar is immediately placed on the left side of the frame. You won't see this in the pictures below because I have moved that bar by dragging it, but that is not always an acceptable solution. Luckily, there is a way to change the position of the bar by default. To do so you will have to use the following code:

2//where 'split' is the split pane declared earlier

Bear in mind that the 0.5 used in this example is not a necessity and can be changed. This changing is pretty intuitive if I tell you that 0.5 represents the middle of the frame.

Here is an example with text areas instead of images:

A split pane with text areas


Assume you have two windows, and wish to be able to switch between them at will, because they have different pieces of information for example. To do this you could use a variety of things, but one of the better ones is a JTabbedPane. This is not the most useful way of doing this - it would be far more useful to use the card layout. However, I think that this looks slightly better. To use a JTabbedPane you have to declare and instantiate a JTabbedPane, as you would do with anything else. Then you have to create two panels and two labels (or two of what you were going to put on the tabs). Then add as many tab panes as you want. Finally, add these panels to the JTabbedPane. You do this as normal, i.e. like this:

1tabbedPane.add("First pane", panel1);
2//where 'tabbedPane' is the name of the JTabbedPane, 'panel1' is the name of the panel and '"First pane"' is what will be displayed on the tab itself
3tabbedPane.add("Second pane", panel2);

This will create the following if you were to put labels on the JPanels:

A tabbed pane

Ex 1

Create your own JTabbedPane with two tabs, one with a message on it and one with a button that creates a message upon clicking.


A useful tool is the JToolBar. It is exactly what it says on the tin, it is a toolbar which can have various components put onto it. To create a JToolBar you have to declare and instantiate it as usual. The, inside the main constructor, you add components to the toolbar. Bear in mind that this is position-sensitive - if you add a button, then a text field then a label, then the button will be on the left, then the text field, then the label on the right. You can therefore make something like the following:

The various toolbar positions

As you will notice from the pictures, you can move this toolbar about by default and even separate it from the frame it is in. This may not be preferable however, so you can naturally stop this. To do so just add this to your constructor:

2//where 'tools' is the name of the toolbar

Using that, the following would be outputted:

A non-floatable toolbar

Finally you can separate the components in a JToolbar using the following code:


Bear in mind that this is position sensitive, so you place this inbetween the additions of the two components you want to separate. The following is therefore possible:

A separated toolbar


The title of this portion is not strictly correct, because this covers three things, the JMenuBar, the JMenu and the JMenuItem. However these all coalesce into one menu. What I mean by menu is the bar at the very top of the screen when you enter Eclipse or Microsoft Word i.e the bar that contains File and Edit and Help etc. To do this you will first need to declare and instantiate a new JMenuBar. Then in the constructor you need the following:

1    setJMenuBar(menu);
2    //where 'menu' is the name of the JMenuBar

This sets the menubar up, but it currently has nothing in it. So, you need to add JMenus. These are the actual buttons that you click in order to display the drop-down. To do this you need to declare JMenus and name them, then add them to the JMenuBar. As if you need a reminder, this is how you would do it:

1JMenu file = new JMenu("File");
2JMenu edit = new JMenu("Edit");

This would create the following, but notice the lack of items. That is our next job:

 A menu bar with titles

The items are easy to add, as you shall see. You simply create a JMenuItem, name it like you did with a JMenu and then add it to the respective JMenu. Bear in mind that, once again, it is position-sensitive, so you have to add them in order. If you want the line between the items that you see in most menus, just include this:


As you did with the toolbar. Once again, put it in the right place. So, if you have followed me, you could create something like this, which I have unashamedly copied from Eclipse's menu itself:

A menubar with items


In our quest to discover more complex components, we find the JTable. This is exactly as it sounds - it is a table. You will need a JTable and a ScrollPane, which you have met before. This ScrollPane is simply for use if the table has too much data in it. First thing you will need to do it set a flow layout. Then you need two arrays, one for the column names and one for the actual contents. These are the arrays that I used:

1String[] columnnames = {"Name","Age", "Gender"};
3Object[] [] data = {
4    {"Bob", "30", "Male"},
5    {"Susan", "46", "Female"},
6    {"Patrick", "22", "Male"},
7    {"Samantha", "72", "Female"}

The second array looks more complicated, and that's because it is an array of arrays. Each of the arrays inside of the data arrays represents a row, and the contents represents the data. To actually make the table, now that you have the things inside of it, you will need the following lines of code:

1table1 = new JTable(data, columnnames);
2//yes you have to create the data before the titles
3table1.setPreferredScrollableViewportSize(new Dimension(500,50));
4//creates the size of the table
6//Don't ask why this is here, it just is
8//the table is editable if this is not used

Now just add the table to the scrollpane and add the scrollpane to the JFrame, and you will create something like this:

A JTable


You will have seen a lot of progress bars before because they are commonly used to show how much of a task is completed. These are also only mainly used on loading screens. As a result the one I will be telling you about today and showing you will be on a JWindow, which acts as a basic loading screen. However, this is the only time you should ever used JWindow. It is a horrible component that you will want to never give the time of day. With that warning out of the way, onto the JProgressBar.

The JProgressbar is reasonably simple to use in itself, you only need to declare and instantiate it. The difficult part comes in the form of the Timer that is needed for the JProgressBar to actually work. This is the code for a JProgressBar that works fully, and it's explained underneath:

1t = new Timer(100, new ActionListener() {
2    public void actionPerformed(ActionEvent e) {
3        count ++;
4        bar.setValue(count);
5        if(bar.getValue() < 100) {
6            bar.setValue(bar.getValue() + 1);
7        }
8        if(bar.getValue() == 100) {
9            JOptionPane.showMessageDialog(null, "100% loading has been achieved");
10            System.exit(0);
11        }
12    }

That certainly looks complicated. The first line states that t (which is the identifier of a Timer that I declared earlier) is a new Timer, with values of 100 and an ActionListener. The value of 100 is basically how many numbers the timer has to get through, and it therefore dictates the speed of the timer. If the number is 1000, then the progressbar that works off of this timer will run slower; if the number is 50 then it will run faster. Then the actionPerformed() method is created, as usual, and inside it count ++ is run. count is an integer I set to 0 earlier. Then bar (which is the identifier of a JProgressBar I declared earlier) is set to the value of count, which is 1. Then an if statement is run. If the value of bar (which is 1) is less than 100, then the value of bar will be set the the current value + 1, which is 2. This will happen every time the timer goes up, so count will go up with it.

Then, another if statement is declared. This time, if the value of bar is 100, then a JOptionPane with the message "100% loading has been achieved" will appear, and when the close button is clicked, the program will end thanks to System.exit(0). After all that is set, the timer is started via t.start(). And finally, bar.setStringPainted(true) is added, which displays the number that the progressbar is at, and dynamically updates it.

That is a very long explanantion but it all coalesces into this:

Progress bar halfway

Finished progress bar


Before telling you how to use JToolTips, I first want to reinforce what a tool tip is. You know whenever you hold the mouse cursor over a button, and sometimes a little text box appears telling you what it is? That is an example of a tool tip, and they can be constructed in Java too. For demonstratory purposes, I am going to be adding my tool tip to a button. However, bear in mind that you can add tool tips to almost every component there is. With that in mind, let me tell you that it is really easy to make tool tips. To do so you simply add this to your code:

1btn.setToolTipText("This is a button");
2//where 'btn' is the identifier of a button

And that is that. The tool tip will now display whenever you hold your mouse over the button. If you are using this and are worried that it hasn't worked, hold your mouse over the component a bit longer because you may have just moved the mouse off of the component too soon. With that in mind, here is an example (you may not be able to see my cursor, but it is hovering over the button):

A JToolTip


Right click right now. As you can see, a menu comes up with a variety of items on it. That is a pop-up menu. You create these as usual, i.e. you declare and instantiate them as normal. But there is something different about them. Firstly, you use JMenuItem to create the items on the pop-up menu. If you have forgotten, you use them like this:

1JMenuItem cut = new JMenuItem("Cut");
3//where 'popupmenu' is the identifier of a pop-up menu

So, that's how you add items, and the line between them is created using addSeparator(), as before. I mentioned something different you have to do with pop-up menus. You basically have to add them to various components. If you add it to the JFrame however, something weird will happen which I will leave for you to discover. Similarly if you add it normally to a component it will not work. So, how do you add them? Well, what you have to do is use the setComponentPopupMenu() method. I would advise using this on a panel that covers the whole JFrame, but you can add it to specific components. Just as a visual representation, the code would look like this:

2//where 'panel' is the name of a JPanel and 'popupmenu' is the name of a JPopupMenu

That will add the pop-up menu to the panel or component in question, and once you've added the items you can create something like this:

A pop-up menu

Finally, some extra things →