IntelliJ IDEA

IntelliJ IDEA GUI Designer Tutorial

In this post, we feature a comprehensive Tutorial on IntelliJ IDEA GUI Designer. We are going to take you through the process of creating a ‘Display Image’ application using a GUI.

The following table shows an overview of the whole article:

1. Introduction

Graphical User Interface (GUI) provides an enhanced user experience. Fortunately, Java provide a set of components ‘Swing components’ which allow for the creation of a User Interface.

IntelliJ provides 2 types of GUI component:

  • GUI form
  • GUI Dialog

It uses special XML format with extension .form to design GUI component.

2. Create New Project

Start by creating a new Java Project in IntelliJ.

IntelliJ IDEA GUI Designer - new java project
Create New Project
IntelliJ IDEA GUI Designer - Java project
New Java Project – step 1

Make sure not to check the creating project from template:

IntelliJ IDEA GUI Designer - step 2
New Java Project – step 2

Now choose a name for the project:

IntelliJ IDEA GUI Designer - project name
Project name

3. Structure of the Packages

As you can see there will be a package named src. We now create a new package under it:

IntelliJ IDEA GUI Designer - New Package
Create New Package

Now we choose a name for out package, for example: com.java.codegeek

IntelliJ IDEA GUI Designer - New Package name
New Package name

Creating new GUI form or Dialog can be done by right click on src → New → GUI Form or Dialog

For
both GUI form and Dialog components, two files will be created:

  • form file (extension
    .form)
  • bound class (extension .java)
IntelliJ IDEA GUI Designer - New GUI Form
Add New GUI Form

Here we choose GUI Form.

Name the form ‘DisplayImage’ and configure it as shown in the image below.

IntelliJ IDEA GUI Designer - GUI Form name
New GUI Form name

By default, IntelliJ IDEA automatically creates a Java class at the same time it creates a new GUI form. The new form automatically binds to the new class. When components are added to the design form, a field for each component is automatically inserted into the source file of the Form’s class (with some exceptions such as JPanels and JLabels which don’t automatically get field names when placed on a Form). (https://www.jetbrains.com/help/idea/bound-class.html)

The GUI Designer consists of the following main components:

  • Components Treeview
  • Properties Inspector
  • Components Palette
  • Form Workspace
IntelliJ IDEA GUI Designer - GUI designer
GUI designer components

4. Configure Components of GUI Form

4.1 Component Tree

In the component tree you can see the JPanel. This treeview displays the components contained in the design form and enables you to navigate to and select one or more components.

When you create a new Form, a JPanel component is automatically added to the Form Workspace and it appears as a child of the Form in the Component Treeview. This JPanel is the top of the UI component hierarchy (in the Java sense) for the current Form. 

4.2 Properties Inspector

The Property Inspector window shows properties for the component currently selected in the form workspace, or the form itself if no components exist or none are selected. https://www.jetbrains.com/help/idea/inspector.html

Several types of property editors appear in the Value column of the inspector:

Several types of property editors appear in the Value column of the inspector:

  • Text field: Type a value.
  • Pick list: Pick a value from a drop-down list of valid choices.
  • Checkbox: Set value for Boolean type properties.
  • Dialog: Presents an ellipsis button which opens a dialog box.
IntelliJ IDEA GUI Designer - Component Tree
Component Tree

If you switch to the DisplayImage.java file you can now see the jPanel as a variable in the DisplayImage class:

DisplayImage.java

package com.java.codegeek;

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

public class DisplayImage extends JFrame {
    private JPanel panel;
}

4.3 Components Palette

The component palette provides quick access to commonly used components (JavaBeans) available for adding to forms. It appears by default at the right side of the frame next to the Form Workspace.

You can add a new UI component to the form in following way:

Select a component in the palette move the cursor to the Form Workspace and click where you want to add the component.

Two groups of components are present by default:

  • Swing: contains components from the Swing component library.
  • Palette: contains a single component labeled Non-Palette component. When you select this component and add it to a Form, a dialog appears in which you can select any component class accessible to your project, or any other existing Form. This is useful in cases where you want to use a component without adding it to the Component Palette.
  • (https://www.jetbrains.com/help/idea/palette.html )

4.4 Form Workspace

The Form Workspace occupies the center part of the frame. It is a gray rectangle which appears when you create a new Form.

Back to the .form file, drag a JLabel onto the panel.

IntelliJ IDEA GUI Designer - Add JLable
Add JLable on the JPanel

You can change the field name of the JLable in the Component tree (as you did with the JPanel) and set it ‘lable01’.

Add another JLable on the panel and name it ‘lable02’. As you see, all these lables are contained by panel.

IntelliJ IDEA GUI Designer - Add second JLable
Add second JLable

We want to display 2 images on these lables. So first you should copy your image files into the project folder:

IntelliJ IDEA GUI Designer - Image sources
Image sources

Now we should set these images as ‘icon’ property value for the JLables.

IntelliJ IDEA GUI Designer - 'icon' Property
‘icon’ Property
IntelliJ IDEA GUI Designer - image file
Choose the image file

Repeat the same process for assigning image02 to icon property of lable02.

5. Setup Bounded Java Class

Add ‘ImageIcon’ variables to ‘DisplayImage.java’:

DisplayImage.java

package com.java.codegeek;

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

public class DisplayImage extends JFrame {
    private JPanel panel;
    private JLabel lable01;
    private JLabel lable02;
    private ImageIcon icon01;
    private ImageIcon icon02;
}

Now we should set the layout in java class, assign the images to the lables and add the panel:

DisplayImage.java

 public DisplayImage() {

        setLayout(new FlowLayout());
        setSize(50,50);

        //label01        
        icon01 = new ImageIcon(getClass().getResource("image01.jpg"));

        lable01.setIcon(icon01);
        panel.add(lable01);

        //label02
        icon02 = new ImageIcon(getClass().getResource("image02.jpg"));

        lable02.setIcon(icon02);
        panel.add(lable02);

        add(panel);
        validate();
}

We should also set the value of Layout Manager property for the panel, here we chose ‘FlowLayout’:

IntelliJ IDEA GUI Designer - Layout Manager
‘Layout Manager’ Property

6. Run the Project

In order to run the application we need a main() method for our class:

DisplayImage.java

 public static void main(String[] args) {
        DisplayImage gui = new DisplayImage();
        gui.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        gui.setSize(50, 50);
        gui.setVisible(true);
        gui.pack();
        gui.setTitle("Image");
    }

Now from the menu, Run -> Run ‘DisplayImage’:

IntelliJ IDEA GUI Designer - Project result
Project result

7. Download the Complete Source Code

This was a tutorial of IntelliJ IDEA GUI Designer for displaying images.

Download
You can download the full source code of this example here: IntelliJ IDEA GUI Designer Tutorial

Firouzeh hejazi

A self-motivated and hard-working developer with more than 4 years of extensive experience in developing software in java platforms. A multi-skilled and problem-solving engineer who has participated in implementing a range of applications in different roles. Possess a MSc in Knowledge Engineering and Decision Science.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button