Step 2: Creating a User Interface

In this section, you are going to create a user interface which contains a combo box, a text field, and a button. When the user selects a status code from the dropdown list in the combo box and clicks the button, the text field will update with the message associated with that status code.

To create the UI, you will:

Create a frame to contain the UI elements
Add a combo box, a text field, and a button to the frame
Edit the source code to add the status codes that appear in the combo box, and the messages associated with each code
Add an event to the button so that when the button is selected, the text for the currently selected status code is displayed

To create a frame:

In the Navigator, click on the new project node, Project1.jpr, to select it. Right-click and choose New from the context menu.
The New Gallery appears, displaying the last selection made.
In the Categories tree, expand the Client Tier node and select Swing/AWT.
In the Items list, select Frame and click OK.
In the New Frame dialog, click OK to accept the default settings.
You can see that a new node for the frame class, Frame1.java, has been added to the Navigator. The simple, initial UI for the frame should be displayed now in the center portion of JDeveloper, to the right of the Navigator. The Property Editor also appears, to the right of the UI Editor, as part of the UI layout.
With Frame1.java selected in the Navigator, right-click and choose Code Editor from the context menu. As the Code Editor is the default editor for .java files, you can also double-click the node.

Take a look at the generated code and observe the classes that have been imported, and the JFrame class that has been created.
With Frame1.java still selected in the Navigator, right-click now and choose UI Editor from the context menu.
The UI view reappears, displaying the empty frame.

Take a closer look at the Property Inspector. It displays the current properties of the selected item and allows you to use predefined attributes and methods for a class.

To close the Property Inspector, or to open it explicitly, from the main menu choose View | Property Inspector. If nothing that it can inspect is selected in the Navigator, and the UI Editor is not active, it will open with an empty panel.
In the Structure window (below the Navigator), you can see the UI components of your frame. Expand the tree by clicking on the + signs so that you can observe how it changes as you add to your UI.
In the Property Inspector, with the Properties tab selected, find the title property and in the field to the right, type in View Status Code.
Notice that when you press Enter or shift the focus, either to another property or outside the Inspector altogether, the title bar of your UI updates to display this title. You can change other properties of the frame, such as color or size, using the Property Inspector.
You are going to use the Component Palette to continue with the design of your UI. If the Palette is not already visible, from the main menu, choose View | Component Palette. (If the menu item is already checked, the Palette is open. Look for it above the Property Inspector.)
Notice the dropdown list in the Component Palette which allows you to select from the list of available palettes.
If Swing is not the currently selected Palette, select it now from the dropdown list to build your UI using Java Swing UI components.
In the Component Palette, you can choose to display icons alone or to show the icons with a text label. When a label appears, the icons are displayed in alphabetical order. To toggle between these two views, right-click in the Palette and choose either Icon View or List View from the context menu. For this tutorial, you might find it helpful to work in the list view.

Next, you will add some items to the UI.

To create a combo box, text field, and button:

From the Swing Component Palette, click the JComboBox icon to select it, and then click within the frame in the UI Editor.
The empty combo box appears in the frame wherever you clicked.
Alternately, you can add components by first selecting an icon in the Component Palette and then selecting the node for the UI (labeled this for the frame you are creating) in the Structure window.
This method can be a more accurate way of creating a UI since not all components are visible in the UI Editor.
Adjust the position and size of the combo box by clicking on it and dragging it until it resembles the target example shown in Step 5: Compiling and Running your Application.
To alter the position of the combo box, grab it in the middle and drag it. To alter its size, click in it to display its grab bars, and then click on any grab bar to resize the box in either of the two directions shown by the cursor image.
Now you will add a text field to the frame. In the Component Palette, scroll to the right, select the JTextField icon , and then click in the frame.
Once the text field appears, adjust its position and size as you did with the combo box, again so that your frame begins to resemble the target example in Step 5: Compiling and Running your Application.
Now add a button to the UI. In the Component Palette, select JButton and then again click in the frame. As you did with the other two components, adjust the position of the button to match the target example.
Next you will create a label for the combo box. Select JLabel and then click in the frame.
With the new JLabel selected in the frame, turn to the Property Inspector and, with the Properties tab selected, change the text for the label to Select Status Code:
To enter text for the label, type into the field to the right of the text property.
Now adjust the size and position of the label in the frame so that it is displayed to the left of the combo box.
Repeat these last two steps to create a label for the text field, but this time change the text property to Status Result:
Now you will change the text for the button, but this time directly in the code. Bring the Code Editor for Frame1.java to the foreground, this time by clicking in the document bar, just above the Navigator.
With the document bar, you can quickly and easily navigate among all the currently open instances of files in the editor. To open the document bar explicitly, or to close it, from the main menu choose View | Document Bar.

The Code Editor view for Frame1.java is marked with the number 2 because in this tutorial, it was opened second.
In the Code Editor, locate the following line:

jButton1.setText("jButton1");

Change jButton1 to OK.
To find the line quickly, you can search incrementally forward or backward. Place your cursor in the Code Editor and from the main menu, choose Search | Incremental Search Forward or Search | Incremental Search Backward. In the search box that appears, type in the search string. As you type, the cursor jumps to the next instance of the text that currently appears in the search box. The search is case sensitive.
Return to the UI Editor and note that the text on the button in the frame has changed to OK.

Next, you will edit the source code to add the status codes that are displayed in the combo box.

To add the status codes:

Return to the Code Editor and find the jbInit() function.
Click just before, on, or following the opening curly brace.
Notice that the opening brace appears now highlighted in a different color. Its matching closing brace is highlighted in the same color, at the same time. If you cannot see the closing brace, scroll down until you come to it. This brace-matching feature is very useful when you have long or nested conditional statements or parentheses, and you want to make sure you have matched them all correctly. If the editor finds a mismatching brace or parenthesis, it highlights the mismatch in a different color.

You can customize this and other highlighting features in the Preferences dialog. From the main menu, choose Tools | Preferences. Expand the Code Editor node and select Syntax Colors. To work with highlighting features, in the Category list, select Highlights. Choose foreground and background colors for the current selection in the Available Styles list.
In the Code Editor, after the line this.getContentPane().add(jLabel2, null); add the following code:
```
// Status Code
jComboBox1.addItem("0");
jComboBox1.addItem("1");
jComboBox1.addItem("2");
jComboBox1.addItem("3");
jComboBox1.addItem("4");
jComboBox1.addItem("5");
jComboBox1.addItem("6");
jComboBox1.addItem("7");
jComboBox1.addItem("8");
jComboBox1.addItem("9"); 
jComboBox1.addItem("10");
```
You can copy the code directly into the Code Editor by highlighting it above and using (on Windows) Ctrl+C and Ctrl+V.

This is the code for the order status codes that will be displayed in the combo box. Notice that the strings enclosed in quotes appear in one color and that the comment line appears in another. As with the brace matching, you can change these settings in the Syntax Colors page of the Preferences dialog. To work with Java syntax highlighting, in the Category list, select Java.
From the main menu, choose File | Save All to save your changes before continuing.

Next, you will create an event so that when the user clicks OK, the message associated with the status code is displayed.

To create the event:

Return to the UI Editor, select the OK button, and in the Property Inspector select the Events tab.
Locate the actionPerformed event (at the top of the list), and in the field to the fight, type displayIt.
When you press Enter, the Code Editor should be displayed automatically with the cursor in the correct place to add code between the curly braces of the displayIt() method. If not, open the Code Editor and scroll down until you see the code for the method:
```
void displayIt(ActionEvent e)
{

}
```

Add the following code between the curly braces:



if (jComboBox1.getSelectedItem()== "0") {
jTextField1.setText("Not fully entered");
}
if (jComboBox1.getSelectedItem()== "1") {
jTextField1.setText("Entered");
}
if (jComboBox1.getSelectedItem()== "2") {
jTextField1.setText("Canceled - bad credit");
}
if (jComboBox1.getSelectedItem()== "3") {
jTextField1.setText("Canceled - by customer");
}
if (jComboBox1.getSelectedItem()== "4") {
jTextField1.setText("Shipped - whole order");
}
if (jComboBox1.getSelectedItem()== "5") {
jTextField1.setText("Shipped - replacement items");
}
if (jComboBox1.getSelectedItem()== "6") {
jTextField1.setText("Shipped - backlog on items");
}
if (jComboBox1.getSelectedItem()== "7") {
jTextField1.setText("Shipped - special delivery");
}
if (jComboBox1.getSelectedItem()== "8") {
jTextField1.setText("Shipped - billed");
}
if (jComboBox1.getSelectedItem()== "9") {
jTextField1.setText("Shipped - payment plan");
}
if (jComboBox1.getSelectedItem()== "10") {
jTextField1.setText("Shipped - paid");
}

Return to the UI Editor and select the JTextField component.
In the Property Inspector, with the Property tab selected, locate the text property and delete the text jTextField1.
Locate the editable property and change it to False.
With the editable property set to False, the user will not be able to edit this field. For the UI you are designing, this means that once the user has selected a status code from the combo box, the next control that is enabled is the OK button.
Save your work before proceeding.

Now that you have created the user interface, the next task is to create an application from which to run it. To do this, go on to Step 3: Creating an Application for the UI.