First sample program with WindowBuilder part 1

Let's create our first program with the tool WindowBuilder. In the past few weeks, we've been thinking about programming with Graphical User Interface. Of course, we did not have to wait long to realize that this is a lot of work, which is why we installed the WindowBuilder to make it easier. In the first part we will get acquainted with the introduction to the WindowBuilder and the most important features of the tool. In the second part, which we will upload in the next few days, we will construct a sample program complete with WindowBuilder.

In the following steps we will create a new project and a sample class in which we present the settings of the tool to you.

Step 1: Start Eclipse

Step 2: Select a component from the extended area

Step 3: Select a JFrame from WindowBuilder

Step 4: Set name for the package and the class

After creating a new project with a JFrame, we will now have the following image in front of us.

We will now gradually discuss the Marked Terms.
A JFrame is a floating window and is therefore very well suited as a base object for the program window of an application. Since user interfaces offer a pleasant user-friendliness, the programmer also has to set or program more for this luxury.
After the start, the empty program window appears, which has the functions described above. We can use these functionalities via the frame and the known switches in the header. See picture.

WindowBuilder also displays the first frame in a preview view within the Eclipse interface in addition to the program's usual source code. At the bottom of the editor window we have two tabs labeled SOURCE and DESIGN, respectively. With these tabs we can switch between the source code and the preview view.

In the left part of the window you can see (STRUCTURE) the two sub windows Component and Properties (Components), (Properties). Under Components, we find all the components that are included in the preview. Under Properties we see the properties of our JFrames.

If we mark an entry in the Components area, the corresponding component is also marked in the preview.

If we select the component javax.swing, JFrame, the entire program window is highlighted in the preview. If, on the other hand, we select the ContentPane component, only the so-called client area of the frame is selected.

From this we realize that ContentPane is the button to which we can later place buttons, labels, input fields and much more for the user.

In the Properties window, the properties or methods of the selected component are displayed.

If we first mark the component javax.swing.JFrame, we have four small buttons at the right side of the Properties window:

With the first button (Show Events) we can toggle between the view of the properties and the view of the so-called events. Events are methods that allow us, as programmers, to determine how the component should respond to a specific event. Each component is already prepared to respond to a variety of events. Press the button and see the list of event groups to which the highlighted component can respond.

With the second button (GOTO Definition) we are very easily and quickly guided to the place in the source code where the marked component was defined.

The third button (Show Advanced Properties) displays additional attributes in the Properties window.

With the fourth button (Restore default Value), whenever we have changed an attribute, we can cause the WindowBuilder to reenter the start value.

If we mark an attribute of a higher-level component in the component window, we have a fifth button available in the Properties window (Convert Field to local). This allows us to turn an attribute into a local variable. Thus, this component is only available in the method in which it was defined.

To be continued in Part II.