wiki:AppleCurrencyConverterBuildingUserInterfaceWithTigerAddTextFields

Version 17 (modified by mikel, 7 years ago) (diff)

--

Add Text Fields

Next we will add text fields to the application window. Two of the fields are for user input: one accepts the number of dollars to convert to a foreign currency; the other accepts the exchange rate. The third text field is a read-only field that displays the dollar amount converted to the foreign currency.

In InterfaceBuilder's Palettes window, select the "Cocoa Text" view, and find the NSTextView object:

Cocoa Text palette

Drag an NSTextView object and drop it into the "Currency Converter" window:

Dropping the NSTextView

If you drag a view near the edges of a window, InterfaceBuilder? displays blue guide lines that show the standard placement. Drag the text view to the right and upward until the guide lines appear, and then let go. The text view is then positioned in the standard way.

Now add two more text fields. You can drag them from the palette as you did the first one, or you can duplicate the first one. To duplicate, select the first text view and then choose "Duplicate" from the "Edit" menu. Alternatively, you can Option-drag the text field to duplicate it.

Two more NSTextField objects

Label the Text Fields

Now add labels to the text fields, to identify their purposes for the user. For each text field, drag a Label object from the palette and drop it next to the field. (Alternatively, you can drop one Label and then duplicate it, just as you can duplicate the text fields.)

Dropping labels

Just as InterfaceBuilder displayed guide lines to help you position the text field near the edge of the window, it also displays guide lines to help you position the labels near the text fields. Just drag each text field until the blue guide lines appear, and release the label.

Now change the text of the labels. Click a label to select it. Then show the Inspector by choosing the "Show Inspector" item from the "Tools" menu. Select the "Attributes" item from the pull-down menu at the top of the Inspector window, and type the correct text into the Title field. For example, here is how to enter the text for the top label:

Changing label text

Here's how the labels should look after you have entered the text for all three:

Label text

When you first enter the text for a label, the label may not be wide enough to show it all. In that case, you'll see only part of the text in the label. You can resize the label to make the full text visible. Click the label to select it. Notice the small blue dots that surround it. Grab a dot on the left side and drag it to the left to make the label wider, until you can see the entire text.

Change the Text Field Attributes

The first two text fields accept user input; the last displays the result of the conversion. We want the first to text fields to be editable, so users can enter the values to use in the conversion. We don't want the last field to be editable, but we do want users to be able to copy text from it.

We can control all this behavior using text-field attributes, configurable in the Inspector.

  1. Select the first text field
  1. Choose "Show Inspector" from the "Tools" menu
  1. Make sure "Attributes" is selected in the pull-down menu at the top of the Inspector window
  1. Ensure that the "Editable" and "Enabled" boxes are checked in the "Attributes" display of the Inspector window
  1. Repeat this process for the second text field
  1. Finally, repeat it again for the last text field, but this time make sure the "Editable" box is not checked

Start Previous

Attachments