GUI Hello World application with extra features

This tutorial produces a graphical Hello World Java application with some extra features. To make a printed copy of this tutorial, click the Print icon.

Step 1: Using the Application Wizard to create a new project

First, we'll use the Application Wizard to set up the project and generate code for the application window.

  1. Choose File|Close All.
  2. Choose File|New, and double-click the Application icon.
    The Project Wizard appears; the title bar says "Project Wizard (for Application Wizard): Step 1 of 1". The Project Wizard will create a project skeleton, then the Application Wizard will appear and create the .java files to go into the project skeleton.
  3. Edit the File text field to read "C:\JBUILDER\myprojects\hello\hello.jpr" (without the quotes).
  4. Edit the Title text field to read "Turbo HelloWorld", and click the Finish button.
    The AppBrowser window appears, showing the HTML page, "Project Notes". Then the Application Wizard dialog appears; the title bar reads "Application Wizard: Step 1 of 2".
  5. Edit the Class text field to read "TurboHello". This is a case-sensitive Java class name.
  6. Set the Generate Header Comments check box, and click the Next button.
    The Application Wizard: Step 2 of 2 dialog box appears.
  7. Edit the frame's Class text field to read "TurboHelloFrame".
  8. Edit the Title text field (for Frame Style) to read "Turbo HelloWorld".
  9. Set all the check boxes, and click the Finish button.
    Some of these graphical features won't be hooked up in this tutorial, but you can see what these components and their code look like. The project tree, in the upper left of the AppBrowser window, now shows some .java files.
  10. Choose File|Save All.

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

Next, we'll use the UI Designer to customize the panel.

  1. Select the TurboHelloFrame.java node, shown in the project tree in the upper left part of the AppBrowser.
  2. Click the Design tab at the bottom of the AppBrowser.
    The UI Designer starts up, within the right half of the AppBrowser window. To the right of the AppBrowser, the Inspector window appears (also called the Component Inspector).
  3. In the Structure pane (in the lower left part of the AppBrowser), select bevelPanel1.
    The bevelPanel is now highlighted in the design surface.
  4. In the Inspector window, double-click to the right of "background", to set the background color property of bevelPanel1. Click the ellipses button [...] that appears.
    The background dialog box appears.
  5. In the Standard Colors choice menu, select White and click OK.
  6. In the Inspector, change the layout property from XYLayout to BorderLayout.

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

Now we'll use the Component Palette to add a LabelControl component to the panel.

  1. In the main window, at the top of the screen, click the Controls tab.
  2. Click the LabelControl icon, which shows the letter A (you are now carrying a LabelControl in the cursor, so be careful where you click next).
  3. Click on the bevelPanel1 node in the Structure pane (in the lower left part of the AppBrowser).
    A node for labelControl1 is added under bevelPanel1. If you drop the control in the wrong place in the tree, you can select the new node and press the Delete key.
  4. Select the labelControl1 node in the Structure pane.
  5. In the Inspector, set the constraints (for labelControl1) property to Center, instead of West.
  6. Set the text property to "Hello, World!", by double-clicking to the right of the word "text" and typing in the text field.
  7. Set the font to Serif, Bold, Italic, 72 point.
  8. In the Inspector, set the "foreground" property. In the foreground dialog, change Red to 120, and change Blue to 255, and click OK.
  9. Choose File|Save All.
  10. In the upper left part of the AppBrowser, select the TurboHelloFrame.java node.
  11. Click the Source tab to switch from the UI Designer back to the source editor. You can scroll through the file to see the blocks of code added in by the wizards, and look for places where graphical UI designers converted your dialog box values into values in the code. You can also move through the code by clicking in the Structure pane (the lower left).

Step 4: Editing Source Code

Finally, we'll add some information for the About box by directly editing the code.

  1. Choose Search|Find and find the following line:
    String version = "";
  2. Inside the quotes, type "1.0".
  3. In Windows Explorer, find a small GIF file, such as: c:\jbuilder\lib\image32\appwr.gif
  4. In the JBuilder editor, find the following line:
    imageControl1.setImageName("");
  5. Type in the GIF file name, using escape characters before the backslashes, such as: c:\\jbuilder\\lib\\image32\\appwr.gif (this is not case-sensitive).

Step 5: Compiling and Running Your Program

Now we can compile and run the application.

  1. Choose File | Save All, then Build | Make, then Run | Run.
    The Turbo Hello World application appears.
  2. Double-click the title bar to maximize the window.
  3. Choose Help | About. Your version data appears.
    The jbuilder\myprojects\hello directory now contains .class files for the Hello World application.

Next Steps

To learn more about using Borland JBuilder: