Tutorial: Enhancing your first application

This tutorial shows you how to customize the user interface of the application you created in the tutorial, Tutorial: Building your first application.
  1. Opening the existing project
  2. Using the UI Designer to customize your user interface
  3. Using the Component Palette to add components to your application
  4. Editing your source code
  5. Compiling and running your application
  6. Adding a JFC component to your application
  7. Deploying your application
  8. Next Steps
To make a printed copy of this tutorial, click the Print Print icon icon.


Step 2

Step 1: Opening the existing project

First, we'll open the project we created in the previous tutorial. If hello.jpr is already open, you can skip this step. (Note: hello.jpr must be an application, not an applet.)
  1. Choose File|Close All.
  2. Choose File|Reopen.
    In the drop-down list, choose hello.jpr.
  3. Press Enter.


Step 1 Step1 Step 3

Step 2: Using the UI Designer to customize your user interface

Next, we'll use the UI Designer to customize the application's user interface.

  1. Select the HelloFrame.java node displayed in the upper left part of the AppBrowser (the Navigation pane).
  2. Click the Design tab at the bottom right of the AppBrowser.
    The UI Designer displays on the right side of the AppBrowser.

    The Component Inspector displays to the right of the UI Designer.

  3. Select bevelPanel1 in the lower left of the AppBrowser. (This part of the AppBrowser is called the Component Tree.)

    The bevelPanel is now selected in the UI Designer.

  4. To set the background color of bevelPanel1, double-click in the column to the right of the background property in the Component Inspector. Click the ellipses button [...] to open the Select Colors dialog box.
  5. In the Standard Colors list, select White (at the top of the list) and click OK.
  6. To change the layout manager, click in the column to the right of the layout property in the Component Inspector. Choose BorderLayout from the drop-down list.


Step 1 Step 2 Step 4

Step 3: Using the Component Palette to add components to your application

Now we'll use the Component Palette to add a LabelControl component to the panel.
  1. Click the JBCL tab on the Component Palette.

  2. Click the LabelControl icon . You are now carrying a LabelControl in the cursor, so be careful where you click next.
  3. Click the bevelPanel1 node in the Component Tree or in the panel itself in the UI Designer. A node for labelControl1 is added below the bevelPanel1. If you drop the control in the wrong place, you can select the node and press the Delete key.
  4. Select the labelControl1 node.
  5. To set the constraints for labelControl1, click in the column to the right of the constraints property in the Component Inspector. Choose Center from the drop-down list.
  6. To display "Hello World!" in the label, double-click in the column to the right of the text property in the Component Inspector. Type Hello World! and press Enter.
  7. To set the font, click in the column to the right of the font property. Click the ellipses button [...] to open the Font dialog.
  8. Choose Serif from the list of fonts and check Bold and Italic. Enter 72 in the Size box, then click OK.
  9. To set to the color of the Hello World! text, click in the column to the right of the foreground property in the Component Inspector. Click the ellipses button [...] to open the Select Colors dialog.
  10. Enter 120 in the Red input box and 255 in the Blue input box. Click OK.
    The UI Designer will now look like this:

  11. Choose File|Save All.
  12. Click the Source tab to switch from the UI Designer to the Editor. You can scroll through the file to see the blocks of code added by the wizards and look for places where graphical UI designers converted the visual components into values in the code.


Step 1 Step 3 Step 5

Step 4: Editing your source code

Finally, we'll add some information for the About box by directly editing the code.
  1. Select HelloFrame_AboutBox.java in the Navigation pane.
  2. Choose Search|Find. Enter the following line of code into the Find Text dialog box:
    String version = "";
  3. Click OK.
    The Editor finds the selected text.

  4. Inside the quotes, enter 1.0.
  5. Return to the top of the file.
  6. Choose Search|Find to find the following line of code:
    imageControl1.setImageName("");
  7. Enter the following GIF file name inside the quotes:
    c:\\jbuilder\\lib\\image32\\appwr.gif
    Note: Use the drive letter where JBuilder is installed.
  8. Choose File|Save All.


Step 1 Step 4 Step 6

Step 5: Compiling and running your application

Now we can compile and run the application.
  1. Choose Build|Make, then Run|Run.
    The Hello World application is displayed.

  2. Choose Help|About. The version data you entered, 1.0, is displayed in the About dialog box along with the selected image.

  3. Click OK to close the dialog box.
  4. Choose File|Exit to close the application.
    The jbuilder\myclasses\hello directory now contains the .class files for the Hello World application.


Step 1 Step 5 Step 7

Step 6: Adding a JFC component to your application

Next, we'll add a JFC Swing component to your application.
  1. Select the HelloFrame.java node in the Navigation pane, then click the Design tab to display the UI Designer.
  2. Select the labelControl1 node.
  3. Change the constraints of labelControl1 from Center to South.
  4. Click the Swing tab on the Component Palette.
  5. Click the JButton component and drop it on either the bevelPanel1 node in the Component Tree or in the panel itself in the UI Designer.
    A node for JButton1 is added below the bevelPanel1.

  6. In the Inspector, change the Text property from "JButton1" to "Push Me".
    The Inspector should look like this:

  7. Click the Events tab of the Inspector.
  8. To define what happens when JButton1 is pressed, double-click in the column to the right of the ActionPerformed event in the Component Inspector.
    JBuilder switches you to the Source pane, where you can enter code that defines the event.
  9. In the Source pane enter:
    labelControl1.setForeground(new Color(255, 0, 0));
  10. Choose File|Save All, Build|Make, then Run|Run.
    The modified Hello World application is displayed.

  11. Push the "Push Me" button. The color of the "Hello World" text should turn red.


Step 1 Step 6

Step 7: Deploying your application

The last step is deploying your program. The Deployment Wizard collects all the files needed to distribute your application or applet. The wizard creates compressed Java Archive (.jar) files.
  1. Choose Wizards|Deployment Wizard.
    The Deployment Wizard is displayed.

  2. In the Select Files to Deploy list, make sure all files in the project are selected.
  3. For Dependency Options, choose Include JBCL. Include All Others is checked by default.
  4. For Delivery Options, choose JAR and Compressed. These options are the default. Do not change the entry in the Manifest File text box; JBuilder will automatically generate this file for you.
  5. Change the name in the Archive Output Path to:
    JBuilder\myclasses\hello\HelloWorld.jar
    Use the letter of the drive where JBuilder is installed.
  6. Click Finish.


Next Steps

To learn more about using Borland JBuilder: