Designing User Interfaces Using the UI Designer

JBuilder provides tools for visually designing and programming Java classes. This enables you to quickly and easily assemble the elements of a user interface (UI) for a Java application or applet. You can construct the UI with various building blocks chosen from the Component palette that contains such components as buttons, text areas, lists, dialogs, and menus. Then you set the values of the component properties and attach event-handler code to the component events, telling the program how to respond to UI events.

The JBuilder's visual tools make programming in Java easier and more productive. No tools, however, can accomplish everything you need. You have to modify the program produced by the tools. Thus, it is imperative to know the basic concept of Java graphics programming before starting to use the visual tools. 

J Builder's visual tools are designed to work well with the class templates created from the wizards. To use the UI Designer, you should use the wizards in the Object Gallery to create classes.

Follow the steps below to create a new application to demonstrate the UI Designer in the ApplicationDemo project.

  1. Choose File, New Project to create a new project file. Name it UI2.jpr and click Finish.
  2. Choose File, New and then select the Application icon. Name the package UI2 and the class UI_Test. Click Next.
  3. Name the class UI2_Frame and give it the title UI Design Test.

The following are the steps to complete the example:

  1. With the UI2_Frame.java selected in the Navigation pane, choose the Design tab in the Content pane to switch to the UI Designer, as shown in the figure below.

  1. Click the Swing Containers tab, and then click JPanel and drop it to the center of the UI Designer or to the Component tree.  A new object named jPanel1 is created.  You can see it in the Component tree under the this node.  See the figure below.

 

  1. Select jpanel1 in the Component tree. In the Inspector of jPanel1 , set its constraints property to Center if it is not Center, set its layout property to FlowLayout. (By default, the layout of a JPanel is FlowLayout.) If the Inspector is not on-screen, choose View, Show Inspector to display it.
  2. With the this node selected in the Component tree, click JButton from the Swing page of the Component palette and drop it to the south of the frame. An object named jButton1 is created. You can see the object under the this node in the Component tree (see figure below).

  1. Select jButton1 in the Component tree. In the Inspector of jButton1 , change its name property to jbtAdd, set its constraints to South, and change its text to Add. Whenever you make changes in the Inspector, you will see their effects in the UI and in the Component tree (see figure below) as well as in the source code (see second figure below).

 

  1. With jPanel1 selected in the Component tree, drop a JLabel, a JTextField, a JLabel, a JTextField, a JLabel, a JTextField from the Swing page of the Component palette into jPanel1 to create objects named jLabel1, jTextField1, jLabel2, jTextField2, jLabel3, and jTextField3, as shown in the figure below.

  1. In the Inspector of jLabel1, change its name to jlblNum1 and its text property to Number 1. Similarly, change jLabel2's name to jlblNum2 and its text to Number 2, and jLabel3's name to jlblResult and text to Result.
  2. In the Inspector of jTextField1, change its name property to jtfNum1, set its columns to 3, and set its text property to empty.  Similarly, set jTextField2's name property to jtfNum2, set its columns to 3, and set its text property to empty, and set jTextField3's name property to jtfResult, set its columns to 4, and set its text property to empty.  See the figure below.

Tip
You can set properties for multiple components. When more than one component is selected, the Component Inspector displays only the properties they have in common that you can edit. When the values for the shared property differ among the selected components, the property value displayed is either the default or the value of the first component selected. When you change any of the shared properties in the Component Inspector, the property value changes to the new value in all the selected components. To select multiple components, hold down the Shift key and select each of the components in the UI Designer.

 

  1. At this point you have created the user interface. You are ready to implement the code for handling the Add button action. Use one of the following two approaches to generate the event handling code:
    • Double-click the Add button, or
    • In the Events page of the Inspector for the Add button, double-click the value field of actionPerformed.

    Either of the above actions will cause JBuilder to generate the following code:

    • The line import java.awt.event.*; was inserted.
    • A listener was created and registered with jbtAdd using the anonymous adapter as follows.

              jbtAdd.addActionListener(new java.awt.event.ActionListener ( )
              {
                   public void actionPerformed(ActionEvent e)
                   {
                        jbtAdd-actionPerformed(e);
                   }
               } );

    • The method jbtAdd_actionPerformed( ) for handling the action event is created.  You need to fill in the code to carry out the initial action, using the code below.

    int num1 = (Integer.valueOf(jtfNum1.getText().trim())).intValue();
    int num2 = (Integer.valueOf(jtfNum2.getText().trim())).intValue();
    int result = num1 + num2;

    // Display result
    jtfResult.setText(String.valueOf(result));

  1. The remainder of the code for UI2_Frame.java is automatically generated (except the body of the jbtAdd_actionPerformed( )) method.  The UI Designer enables you to rapidly develop Java programs with minimal coding.