Graphic User Interface

Introduction Gui Form

In this lesson, the book will introduce how to design and display interfaces using Kotiln. We create a Project named LearnGUIPart1, then we create a GUI Form, select the GUI form as in the Figure 1.

Figure 1.

Select GUI form

Right-click on src ➔ select New➔then select the Swing UI Designer➔ select GUI Form, the New GUI Form screen will appear as below in the Figure 2.

Figure 2.

New GUI form

Form Name: Name of the user interface. We define name HelloWorldUI.

Base Layout Manager: Choose the default layout for the interface, of course we can change later. Layout is where the organizer arranges Controls on the interface. At this screen, IntelliJ IDEA offers the following layouts as in the Figure 3.

Figure 3.

New GUI form

For the first time, just leave it as default as IDEA chooses. And the book will explain the layout manager in the next lessons.

Create Bound Class: We check it, and the logic class is automatically created for the Form name. Then click OK to create, the tool will look like as the Figure 4.

Figure 4.

GUI Form designer

At the Figure 4, the book marked 5 areas, each section has different functions and meanings:

Area 1: Is the organizational structure of the Class, and libraries. HelloWorldUI.form use to design, HelloWorldUI class use to code logic.

Area 2: The Component Tree, which tells you the layout structure of the controls on the interface, lets you drag and drop controls here.

Area 3: Properties window, which allows you to configure parameters for the control as: Colors, letters, sizes, names ...

Area 4: The interface design, allows us to drag the control here.

Area 5: The Pallette window, which displays the list of controls (JLabel, JTextField, JButton, JRadioButon, JCheckBox, JList, JTable, JTree…), it allows you to drag the controls in and drop off area 4.

Now, we drag and drop few Controls in the HelloWorldUI.form like Figure 5.

Figure 5.

Drag and drop control