Developing Java Applications: A Tutorial | Building a Simple Application

Creating the Interface

The procedure for creating a graphical user interface in an Objective-C project is the same as the procedure for creating a graphical user interface in a Java project.

Open the Main Nib File

Each application project, when first created, includes a blank nib file called the "main nib file." This nib file contains the application menu and perhaps one or more windows. Applications automatically load the main nib file when they are launched.

  1. Locate the file TemperatureConverter.nib in the Interfaces category in the project browser.

    The main nib file has the same name as the project. A default main nib file is also provided for other platforms (in this case, Windows NT).

  2. Double-click the icon for nib files (four screws in a plate) in the upper-right corner of the project window.
Related Concepts

Resize the Window

The window provided for you in the main nib file is too large. To resize a window, drag either lower corner of the window in any direction (up, down, diagonal).

You can resize a window to exact dimensions by entering pixel values in the Size display of Interface Builder's Inspector (see Place and Resize the CustomView Object in the second part of the tutorial for an example of how this is done).

Rename the Window

Windows usually carry distinctive titles in, of course, their title bars. In the Yellow Box each window in a screen is based on an instance of NSWindow. The title of a window is an attribute of this object. Interface Builder allows you to set the attributes of NSWindows and many other objects in its Inspector.

To set the title of the TemperatureConverter window:

  1. Select the window by clicking it.
  2. Choose Inspector from Interface Builder's Tools menu.
  3. Choose Attributes from the pop-up menu (if it is not already chosen).
  4. In the Attributes display of the Inspector, enter "Temperature Converter" in the Title field, replacing "My Window."



  5. Uncheck the Close and Resize checkboxes. These window attributes don't make sense with an application as simple as this.

Put Text Fields in the Window

Interface Builder's Palette window has several palettes full of Application Kit objects. The Views palette holds many of the smaller objects, among which is the text-field object. You now will add two text fields to the TemperatureConverter interface:

  1. Select the Views palette.

    This is what the button for the Views palette looks like this when it's selected:

  2. Drag a text field object from the palette toward the Temperature Converter window.
  3. Drop the object (by releasing the mouse button) in the window at one of the locations shown below.

    Once you drop the object, you can reposition it in the window by dragging it.

  4. Delete the string "Text" from the object.

    To delete the string, double-click to highlight it, then press the Delete key.

  5. Repeat steps 2 through 4 for the other text field.

If you need to delete an object in the interface, just select it and press the Delete key.

Set Attributes of the Text Fields

Earlier you set an attribute of the TemperatureConverter window (its title). Now you need to set an attribute of each of the text fields. All objects on Interface Builder's palettes have attributes that you can set through the Inspector.

  1. Select a text field.
  2. Choose Inspector from the Tools menu.
  3. Choose Attributes from the Inspector's pop-up list, if it is not already selected.
  4. Click on the radio button labeled "Only on enter" in the Send Action group.

Repeat this sequence for the other text field.

Important
You do not have to set the "Send Action--Only on enter" attribute. If what you want is the the default behavior for text fields--the field sends its action message to its target whenever the insertion point leaves it--then leave the "Only on enter" radio button turned off. When this button is turned on, the text field sends its action message only when the user presses the Enter or Return key while the insertion point is in the field.

Add Labels for the Text Fields

Text fields without labels would be confusing to users, so solve that problem by labeling each field.

  1. Drag the "Message Text" object from the Views palette and drop it so it's just above the left text field.
  2. Triple-click the text to select all of it.
  3. Type "Fahrenheit".
  4. Change the font size of the label (since it's too large):
    1. Double-click the label to select it.
    2. Choose Format>Font>Fonts.
    3. Select "From user's application font" from the Use Family and Typeface pop-up list.
    4. In the Font panel, select 16 under Size and click Apply (Set on Yellow Box for Windows).

Repeat the steps for the other label ("Celsius").

Important
Occasionally you should save the nib file containing your work. Now is a good time: choose Save from the Document menu.


Previous | Next
© 1998 Apple Computer, Inc.