Choose jour language!

---

|

GRAPHICAL USER INTERFACE(GUI)​ IN JAVA

A Graphical User Interface (GUI) is a collection of classes and components that build the visual part of an application, allowing users to interact with software through graphical elements rather than text commands. It includes windows, forms, dialogs, and various controls like buttons, text fields, and menus. GUIs provide an intuitive, accessible layer that enhances the user experience by visually organizing and managing the application's interactive elements, making it easier for users to navigate and control functionality.

The required classes are contained in packages (java.awt and javax. Swing).
AWT (Abstract Window Toolkit)  components are platform dependent, as they use the operating system for rendering, which may result in different appearance on different systems.
AWT provides the use of a minimal set of graphical interface components, which is owned by all Java-enabled platforms. It looks "equally mediocre" across all platforms. Packages:

• java.awt
• java.awt.event
• java.awt.image
• java.awt.datatransfer

      Swing is a library written from scratch in Java. It does not rely on the operating system. It looks the same and works on all platforms. It has a large number of components. Supports Drag & Drop as well as clipboard work. Complete support for the Unicode code page. Swing components, such as buttons, lists, and menus, work independently of the system, providing a uniform appearance and greater functionality.
     Javafx supports Rich Internet Applications (RIAs) that enable more advanced visual effects and animations compared to Swing, thus providing a more modern and dynamic user experience.

Swing Pack​age in java

Forms can be created dynamically by writing their own code or statically using programming tools e.g. Netbeans by dragging components to form.

Dynamic form creation.

It consists of making objects that represent components on a form. We use the following objects:

• Font Object
• Color Object.
• JFrame Object
• Frame Layout and Centering
• as well as swing controls:
• JButton Control
• JLabel Control
• JTextField Control
• JTextArea Control
• JCheckBox Control
• JRadioButton Control.
• JPanel Control
• JList Control
• JScrollPane Control
• JComboBox Control

Key Swing Objects and ControlsThe listed Swing controls (e.g., JButton, JTextField, JPanel) are essential. Each of these components inherits from JComponent, a class within the Swing package that provides core functionality for GUI elements.

​ Notably:

• JFrame: The main container that hosts the application window.
• JPanel: A container for organizing other components and often used for layout management.
• Swing Controls: Include interactive elements (JButton, JCheckBox, JRadioButton, etc.) that can trigger events.

JFrame class

​Each graphics application in java must have at least one dialog box. To create such a window, a JFrame class object must be created (the class is in the swing package in the class library). In doing so, this package must be imported into the application with the command:

import javax.swing.JOptionPane;

javax is a package containing a subpackage swing, while JFrame is a class that is imported into the program. Otherwise, all the components that need to be put on the dialog later are mostly in the swing package. The object that represents the dialog is called win and is defined as follows:

win = new JFrame();

Next, the attributes of the win object need to be defined. Attribute values ​​are set using "setter", the methods they employ with set ... For example, to set the title we use setter setTitle:

win.setTitle(“Title of graphics”);

In order for the JFrame dialog to be displayed, at least the following must be set:

• Size (setSize method)
• Behavior of the application after clicking the close button (x-button in the upper left corner of the window), the method is setDefaultCloseOperation
• visibility, using the setVisible (true) method

The current code looks like:

import javax.swing.JOptionPane;
package solarsystem;
import import javax.swing.JFrame; //Import of class JFrame
public class SolarSystemFrame {

/**
* @param args the command line arguments
*/
public static void main(String[] args) {

//Creating object
JFrame win = new JFrame();
//Sets attributes
JFrame win.setTitle("Solar system"); //Sets the title
JFrame win.setSize(800, 600); //Setting the window size to 800 * 600px
//clicking the close button exits the program
JFrame win.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
/*
* visibility is set, the JFrame object
         * is invisible by default
*/
JFrame win.setVisible(true);//the last command will remain

}

}

Figure 8: Swing User Package. Creating a JFrame class object

Upon startup we will get an empty JFrame window with a title bar. The image also shows the coordinate system:

Figure 9: Swing user package. JFrame Class Object (Window)

EXAMPLE: Graphics with text and image:​

​Task: Create a JFrame window and place two labels on it with one text and one with an image.
Solution:
Our graphics should look like the following:

Figure 10: Swing User Package. JFrame object with text and image

​It can be noticed that 3 components should be placed on the JFrame window. make three objects: a panel of blue that carries two labels, one with text, the other with a picture.
To display an image, you need to find the appropriate image and copy it somewhere inside the folder that represents the application. It is best to put all the pictures in a subfolder that, for example. called "pictures." If the file representing our image is called the Solar System and has an extension of .jpg, the relative URL of the file path relative to the application folder is:

String path=”images/SolarSystem.jpg”;

The following code is required to create the blue panel:

import javax.swing.JOptionPane;
package solarsystem;
import import javax.swing.JFrame; //Import of class JFrame
public class SolarSystemFrame {

/**
* @param args the command line arguments
*/
public static void main(String[] args) {

//Creating object
JFrame win = new JFrame();
//Sets attributes
win.setTitle("Solar system"); //Sets the title
win.setSize(800, 600); //Setting the window size to 800 * 600px
//clicking the close button exits the program
win.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JPanel pan = new JPanel(); //A panel carrying other components
pan.setLayout(null); /*The setLayout method passes a null object
                                       in charge of component layout per panel yes
                                       the layout would be done using coordinates
*/
pan.setBackground(Color.BLUE); //Panel color
win.setContentPane(pan); //Connecting the panel to the win object

/*
* visibility is set, the JFrame object
         * is invisible by default
*/
win.setVisible(true);//the last command will remain

}

}

Figure 11: Swing User Package. JPanel object.

The setLayout method is responsible for the layout of the panel and should be passed to an object of the class inherited from the LayoutManager class. It is the object responsible for the arrangement of components per panel. If this object is null, then it will be arranged by defining the coordinates within which the component will be located (setBounds method).
The setContentPane method connects a panel to a win object.
Next, we create a label for the text (object of the class JLabel), place text on it, define borders ie. the rectangle within which it will be placed, and finally we add it to the panel. A rectangle is defined by 4 numbers where the first two refer to the position of the rectangle defined by the x and y coordinates of the point of the upper left corner of the rectangle, while the remaining two numbers represent the size, ie. the width and height of the rectangle.

pan.setBackground(Color.BLUE); //Panel color

/*
* Makes a label with text
*/
JLabel textLabel = new JLabel();//Defining a label object
textLabel.setText("Solar system");
textLabel.setForeground(Color.white);//Font color
Font f = new Font("Vedrana", Font.BOLD, 20);
textLabel.setFont(f);
/*defines a rectangle that represents the boundary within which the component is placed
                             adds a label to the panel*/
textLabel.setBounds(5, 5, 300, 30);
pan.add(textLabel);

win.setContentPane(pan); //Connecting the panel to the win object
/*
* visibility is set, the JFrame object
*is invisible by default
*/
win.setVisible(true);//the last command will
remain

}

}

Figure 12: Swing User Package. JLabel text object.

​To make the text more visible, we created an object of class Font f, type "Vedrana", bold style, 20px in size, and set it for the current font label with text.
Creating an image label is similar, except that the setText method now uses the setIcon method to set the image. The image here is actually an object of the ImageIcon class. The constructor of this class is passed the path to the file representing the image. Of course, the image file must be copied to the application folder as explained earlier.

pan.setBackground(Color.BLUE); //Panel color

JLabel imageLabel = new JLabel();//Defining a label object
ImageIcon image = new ImageIcon("images/SolarSystem.jpg");
imageLabel.setIcon(image);
imageLabel.setBounds(5, 40, 450, 338);
pan.add(imageLabel); //Adding a label to the panel

win.setContentPane(pan); //Connecting the panel to the win object
/*
* visibility is set, the JFrame object
*is invisible by default
*/
win.setVisible(true);//the last command will
remain

}

}

Figure 13: Swing User Package. JLabel image object.

EXAMPLE: Friction force:

​Task: Body mass m slides on a flat surface. It is necessary to calculate the friction force that occurs between the body mass m and the substrate.

• Create a GUI to enter the coefficient of friction and body mass m.
• Calculate the friction force for the default mass values ​​of 1kg, as well as the coefficient. friction of 0.03 and display the result in the report.

Solution: As in the previous example, for everything seen in the image below, you need to create an object, adjust their attributes to the setters, and finally associate the created objects.

Figure 14: Swing User Package. GUI friction force

The following should be created: a JFrame class object (main application window), a JPanel class panel that carries other components. These are two text labels (JLabel), two text boxes (JTextField), a JButton class input button, and the text area where the report (JTextArea) will be written.
Initially, a JFrame object is created, that is, an object of the class that inherits the JFrame.

public static void main(String[] args) {

FrictionGUI app=new FrictionGUI("Friction of Force GUI");

}

Figure 15: Swing user package. Friction force GUI-object creation

The constructor controls the execution of the program:

/**
* @param args the command line arguments
*/
public FrictionGUI(String title) throws HeadlessException{

super(title);
createGUI();
force = new FrictionForce();
force.calculate();
reportTA.append(force.toString());

}

​First, using the official word super, the constructor of the parent class is called and the title is passed to it. The graphic creation was moved to the special createGUI () method. Then a Friction class object is created in which the data related to the friction force is stored. The attributes of this object, as well as the friction force calculation method and the toString method, which returns text for the result report, are also in the same class:

package frictionforcegui;
public class FrictionForce{

public double m = 1,coefOfFriction = 0.03, frictionForce, g = 9.81;

public void calculate() {

frictionForce = m * g * coefOfFriction;

}


@Override
public String toString() {

return "The magnitude of friction force is:"+frictionForce+" N";

}

}

Figure 17: Friction force - class

​Now let's look at how to create a GUI:
In Part One, the code is similar to the previous example where the JFrame object is first created. The official word this is used to access the object of the class in which this method is located. A panel is then created and linked to the main application window by the setContentPane method.

/**
* @param args the command line arguments
*/
private void createGUI() {

this.setSize(400, 300);
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JPanel pan = new JPanel(null);
pan.setBackground(Color.LIGHT_GRAY);
this.setContentPane(pan);

JLabel coeffOfFrictionLab = new JLabel("Coefficient of friction:");
coeffOfFrictionLab.setBounds(5, 10, 200, 25);
pan.add(coeffOfFrictionLab);

JTextField coeffOfFrictionTF= new JTextField();
coeffOfFrictionTF.setBounds(220, 10, 50, 25);
pan.add(coeffOfFrictionTF);

JLabel massLab=new JLabel("Enter mass:");
massLab.setBounds(5, 50, 200, 25);
pan.add(massLab);

JTextField masaTF = new JTextField();
masaTF.setBounds(220, 50, 50, 25);
pan.add(masaTF);

JButton inputBtn = new JButton("Input");
inputBtn.setBounds(5, 100, 120, 25);
pan.add(inputBtn);

reportTA = new JTextArea(10, 20);
reportTA.setBounds(5, 130, 300, 120);
pan.add(reportTA);
this.setVisible(true);

}

Figure 18: CreateGUI method

Then, two text labels are created, two text boxes (JTextField), one button (JButton) and one text area (JTextArea).

We see that for each of these objects it is necessary to create an instance of the object, adjust the boundaries and add the object to the panel containing them.

Java's GUI framework includes both AWT (Abstract Window Toolkit) and Swing, each playing a unique role in creating graphical user interfaces (GUIs).
The Hierarchy of Swing ComponentsSwing builds on top of AWT, meaning it leverages AWT’s foundational capabilities while adding more advanced components. The hierarchy in Swing starts from a base class called JComponent, which extends AWT’s Container class. This structure allows Swing components to inherit fundamental properties like size, position, and event handling, which are defined in AWT. Here’s a quick look at some key points in the Swing hierarchy:

1. JComponent: The root of all Swing components, like JButton, JLabel, JTextField, etc.
2. Top-Level Containers: JFrame, JDialog, JApplet, and JWindow serve as primary containers. They contain other Swing components and define the main window structure.
3. Containers and Layouts: Components like JPanel act as containers that hold other components and can use various layout managers (BorderLayout, FlowLayout, etc.) for arranging these components.

Relationship between AWT and SwingAWT was Java’s original GUI toolkit. However, AWT’s components rely on native code, which means they are rendered using the operating system’s graphical components. This reliance on native resources made AWT less flexible and led to inconsistencies across platforms. Swing addresses these limitations by using lightweight components, meaning they are drawn by Java rather than the OS. This approach gives Swing a uniform look and feel across different systems and enables more customization.
Swing also includes a pluggable look-and-feel system, allowing developers to choose different styles (like “Nimbus” or “Metal”) without altering the underlying code. Despite these differences, Swing components still use AWT’s event-handling mechanism, so both frameworks remain interconnected.
By understanding this relationship and hierarchy, developers can appreciate Swing’s ability to offer rich GUI components while retaining the foundational capabilities provided by AWT.

Netbeans forms in Java

IDEs have support for working with Forms (windows of the JFrame class or the class that inherits the JFrame). The following text shows how to create forms using the Netbeans (IDE) development environment.
To create an object that represents a form, it is entered by clicking on the appropriate package, and clicking on new - JFrame Forms, as shown in the image below.

Figure 19: Graphical User Interface. Creating netbeans forms.

A dialog will appear where you need to specify a name and location:

Figure 20: Graphical User Interface. Creating netbeans forms. Name and location

Clicking Finish opens a window for designers to drag controls from the toolbox:

Figure 21: Graphical User Interface. Creating netbeans forms. Designer

In the lower right corner there is a Properties dialog showing the properties of the selected controls.

Example 3: Entering User Information

Task: Create a form to enter user information for a cd club.

Solution: After dragging components onto a form, it should look like:

Figure 22: Graphical User Interface. Creating netbeans forms. Example - CD club

The following objects are on the form:

• JLabel class objects that contain static text: name, surname, etc.

Figure 23: Graphical User Interface. Creating netbeans forms. Example - CD club - label display

• Objects of the JTextField class into which the user enters their data:

Figure 24: Graphical User Interface. Creating netbeans forms. Example - CD Club - View the input field

JButton Class Objects:

Figure 26: Graphical User Interface. Creating netbeans forms. Example - CD club - display of buttons for actions

JTable object to display data from the database

Figure 26: Graphical User Interface. Creating netbeans forms. Example - CD club - view of empty table

After launching the application, this form will look like this:

Figure 27: Graphical User Interface. Creating netbeans forms. Example - CD club - view of user table

For any component, we can adjust the attributes in the Properties window by first selecting the appropriate component.

Figure 28: Graphical User Interface. Creating netbeans forms. Example - CD club - feature view

​Layout of components - LayoutManager

We usually start the visual part of the application (GUI) with either a JFrame object or some object of a class that inherits from JFrame. Next, we add other components, panels, buttons, drop-down lists, text fields, etc. to the JPanel object (Container) which is nested in the JFrame object. All those components that we put on that panel or create more panels that need to be added to the container panel, and the rest of the components are arranged on those panels. In any case, an object must be created which is in charge of arranging components according to a "parent" component. Such an object belongs to a class that inherits from the LayoutManager class. Those classes describe different deployment methods. For example BorderLayout layout is basically the edge of the world and that's how we usually start every application. See in the following video how 5 different panels are arranged around the main panel using the netbeans designer.
The default layout is FlowLayout, a natural way of layout. With this arrangement, components are added in one row, next to each other until they fit in that row, and then moved to the next. In doing so, their size is taken into account, and they are centered when added to a certain row.
The GridLayout layout is useful when the layout is in the form of a checkerboard or grid. 
BoxLayout is useful for a single row or column layout.

Figure 29: GUI Java - Layout of panels of different colors using the BorderLayout class

BorderLayout

Figure 29 shows the BorderLayout layout of components.
It distributes the components into five zones: North, South, East, West and Center. Each zone can contain one component, and the components scale to the size of the zone.

JFrame frame = new JFrame();
frame.setLayout(new BorderLayout());
frame.add(new JButton("North"), BorderLayout.NORTH);
frame.add(new JButton("South"), BorderLayout.SOUTH);
frame.add(new JButton("East"), BorderLayout.EAST);
frame.add(new JButton("West"), BorderLayout.WEST);
frame.add(new JButton("Center"), BorderLayout.CENTER);

FlowLayout

​Components are arranged in one row, moving to the next row when there is no more room. By default, they are centered in a row.

JPanel panel = new JPanel(new FlowLayout());
panel.add(new JButton("Button 1"));
panel.add(new JButton("Button 2"));
panel.add(new JButton("Button 3"));

GridLayout

​Arranges components in a grid defined by rows and columns. Each component occupies the same space.

JPanel panel = new JPanel(new GridLayout(2, 2));
panel.add(new JButton("Button 1"));
panel.add(new JButton("Button 2"));
panel.add(new JButton("Button 3"));
panel.add(new JButton("Button 4"));

BoxLayout

It is used for vertical or horizontal layout, ideal when we want components arranged in one row or column.

JPanel panel = new JPanel();
panel.setLayout(new BoxLayout(panel, BoxLayout.Y_AXIS));
panel.add(new JButton("Button 1"));
panel.add(new JButton("Button 2"));
panel.add(new JButton("Button 3"));

JavaFX

For an advanced topics section, JavaFX is worth highlighting as a modern alternative to Swing for creating Java GUIs with a more up-to-date, visually appealing look. Unlike Swing, JavaFX uses hardware-accelerated graphics, supports CSS for styling, and offers richer UI components, making it ideal for developing sleek, cross-platform applications. It integrates well with multimedia, 3D graphics, and responsive layouts, which allows for a more dynamic and customizable user experience. JavaFX also simplifies scaling and adapting GUIs to various screen sizes and resolutions.

JavaFX example

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class SimpleJavaFXApp extends Application {

    @Override
    public void start(Stage primaryStage) {
        Button btn = new Button("Click me!");
        btn.setOnAction(e -> System.out.println("Button clicked!"));

        StackPane root = new StackPane(); // A layout that centers the content
        root.getChildren().add(btn); // Adding a button to a layout

        Scene scene = new Scene(root, 300, 200); // Scene with size 300x200
        primaryStage.setTitle("JavaFX Example"); // Setting the title
        primaryStage.setScene(scene); // Connecting a scene and a window
        primaryStage.show(); // Displaying the application
    }

    public static void main(String[] args) {
        launch(args); // Launching the application
    }
}

Explanations:
Stage - The main window of the application.
Scenes - A pad for organizing elements (such as a button).
StackPane - Layout that centers all added elements.
Button - Creates a button with text and a click action.
​
This example creates a window with a button that prints a message to the console when clicked.

---

​​​​​Previous
​|<The visual part of the application

Next
​​Events in JAVA>|

---

Related articles

Classes and objects
Arrays in Java
Euclidean algorithm
Matrix examples
String in C / C ++