Introduction

Making GUIs in Java can be quite difficult. Some prefer to use layouts such as BoxLayout, SpringLayout, and more (I will focus in this later). If you are not familiar with these ones, or if you want a really personalized layout, I recommend using the null layout. I will focus on this one in this tutorial. From now on, I assume you have some basic knowledge about Java.

Comparing the layouts

Here are the basic layouts and how they work:

BoxLayout: The components are aligned horizontally.
FlowLayout: The components are aligned vertically.
GridLayout: The components are placed in a grid.
GridBagLayout: More elaborate form of GridLayout. The components are in a grid, but with constraints.
SpringLayout: The components are placed using relationships between all parts.

I am passing some. As you figured out, a bunch of layouts are available and do different things. But how about using the null one? Although absolute positonning may be a problem, it's easy to program your form so the components resize or move. Using this layout, I build a form with resizing bars to adjust the GUI! All is possible, let's dig in!

Creating our form

First of all, we need to create our JFrame. This is simply the window. In this tutorial, we will use a file called gui1.java, so adapt the code for your file. Anyway, here's the basic code:



First, we need to import the Swing and AWT packages, which will be used in our GUI. We start by creating the frame. The constructor takes a string as a parameter, which will be the title of the frame (window). We resize it, and we apply the null layout to it. It is important you fully understand the above code before proceeding.

Creating the controls

We declared the controls, but we did not create them! Don't worry, it's much easier than you think. It is done the same way than in any layout. Look at the code:



The components are now created. Let's take a look at the constructors:
JButton: String, the text on the button.
JLabel: String, the text on the label.
JTextField: Integer, the size of the text field in characters. This has no influence on the maximum number of characters the user can input.

Note that for a password field you can use JPasswordField, but to keep things simple we will use JTextField.

Creating and placing a component

Placing a component is much easier in the null layout than in any other one. We, of course, add it to the panel, and then we call the method setBounds (x,y,width,height) of this component. We will start by placing the server label:



This may seem complicated, but it is not. First, the pand.add instruction just puts the label in the panel, and the lblServer.setBounds places it. Let's take a look at its parameters:
1) X: The position on the X axis of the component. Remember, insets contains the coordinates of the pane's bounds. We place it at (insets+5), 5 pixels right from the left border.
2) Y: The position on the Y axis of the component. Here we specify 5 pixels down from the top of the pane.
3) Width: The width, in pixels, of the component. The getPreferredSize() method returns an object with the coordinates of its initial size.
4) Height: The height, in pixels, of the component. We do not modify its height as you can see.

Before we continue, you need to understand some other methods used to retrieve coordinates: getX(), getY(), getWidth() and getHeight(). They all return an integer. We will use them later. Make sure you understand all the previous stuff before proceeding.

Placing all components

Now that you know how to place a component, I will show you the full code to place them:



This used only methods you already know, there is nothing new here.

Finishing the layout

We are almost finished. If you run the program now, nothing shows. We need a last line:



Now run the program. All controls are placed! However, the Java default style is used. It is different depending on your version of JVM (Java Virtual Machine). To use the correct style, we must use Look and Feel.

Look and Feel

Look and Feel, also known as L&F, sets the style of your form to the one of your operating system. Don't forget that Java is cross-platform! This way, Windows users will have the Windows style, and Mac OS users will have their own style. Put these lines in your code:



This does all the job. Now what about actions and getting the input from the GUI? This is not quite a hard thing, so let's give it a shot:

Registering actions

Import the package java.awt.event.*, it will be used (I assume you know how to import a package). Now, we must add an action to the Connect button to make it do something. Use:



The addActionListener method takes a ActionListener as a parameter. We must create a class which will inherit all attributes from that superclass:



Since we create an interface (with the "implements" keyword), we absolutly need to create some methods inherited from the super interface:



Add any instructions you want in that method, they will be executed when you will click the button. Example, if you want to know what the user entered in the User name field, use:



Feel free to explore the methods of the text fields, radio buttons, checkboxes, and more to find out how you can get user input. It is often a simple thing.

Putting it all together

If you followed this tutorial correcty, you should have this:



Run the program. Everything should be fine.

Conclusion

Java is a powerful language, and therefore it can create impressive GUIs. I recommend using the null layout, it is not harder than the others and you can create really nice things. I managed to make splitter bars to move all parts of my GUI, and it works fine! If you have questions, do not hesitate to contact me!

This post has been edited by alpha02: 11 Oct, 2007 - 06:53 PM

Very nice, it helps

Very nice, easy to follow tutorial. Although, I'm getting a "void is an invalid type for the variable main" error, and a "Syntax error on token ")", ; expected" on the same line. I put the code together as follows:



I'm using Eclipse.

Also, when I take out that third curly brace, which looks like it's not necessary to me, it gives me a ton of errors.

Any clues?

Thanks in advance.

This tutorial has been tested throughly and works fine. You used:



which makes absolutely no sense. Just copy and paste the code without forgetting anything!

Hi alpha02, I just tried your "Putting it all together" code but it doesn't compile.
Please check. All of them are referencing a non-static variable from a static context.

Brilliant Tutorial, Thanks alot, i understand Gui's alot better now