wiki:AppleCurrencyConverterBuildingUserInterfaceWithTigerAddClasses

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

--

Set Up the Classes Used In the User Interface

The visual elements of your application's user interface are all ready now. The last thing you must do is create descruptions of any custom classes used by the application when users interact with the interface.

When a user clicks the "Convert" button, it should send a message to an instance of a custom class that causes the conversion to take place, and the result to be displayed in the "Amount" field. In order for the application to connect the user interface to objects that perform these actions, you must add descriptions of your classes and instances to the nibfile. Fortunately, InterfaceBuilder can create class and instance descriptions and save them in the nibfile for you.

ConverterController

ConverterController is the controller class; an instance of it handles messages sent when the "Convert" button is pressed. Create a description of the ConverterController class, and then create an instance of it.

  1. In InterfaceBuilder's "CurrencyConverter.nib" window, click the "Classes" tab. The window shows a browser view of all available Objective-C classes:

Classes in !InterfaceBuilder

  1. Control-click the "NSObject" entry in the browser, and choose "Subclass NSObject" from the popup menu. InterfaceBuilder creates a new entry initially called "MyObject". Change the name from "MyObject" to "ConverterController".
  1. Select the "ConverterController" class in the browser, then activate the Inspector window and choose "Attributes" from the popup menu at the top of the Inspector. At the bottom of the "Attributes" view is a list of actions or outlets. Select "Outlets", and use the "Add" button to add four fields:

Adding outlets

Rename these four fields to: "amountField", "dollarField", "rateField", and "converter":

Renamig outlets

  1. Now add the action that is triggered when the "Convert" button is pressed: switch to the Actions view and use the "Add" button to add a new action:

Adding an action

Change the name of the action from "myAction:" to "convert:"

  1. Now create an instance of the ConverterController class. In the browser, Right-click the ConverterController class and choose "Instantiate ConverterController". The browser view automatically switches to the Instances view to show you the newly-created instance of ConverterController as a blue box icon. There is a small yellow flag next to the ConverterController instances to show that it has outlets that are not connected to anything. In our final step, we'll create the correct connections for the instance's outlets, which will enable the application to send messages correctly to the objects that implement its behavior.

Converter

Converter is the model class that implements the actual conversion code. Create a description of the Converter class, and then create an instance of it. Repeat the steps you used to create the ConverterController class and instance to create a Converter class and instance:

  1. Switch to the browser view in the "CurrencyConverter.nib" window.
  1. Control-click NSObject and choose "Subclass NSObject" from the resulting popup menu.
  1. Change the name of the newly-created class from "MyObject" to "Converter".
  1. Control-click the "Converter" class and choose "Instantiate Converter" to create an instance of the Converter class.

The model class, "Converter", has no outlets or actions, so you don't need to add anything to it before instantiating it. Your code will implement a conversion method, but InterfaceBuilder doesn't need to know about it; the "convert:" method in your code will know everything it needs to about the "Converter" class. You just need to create the class description and the instance so that your application will start up with the correct objects created and connected.

Connecting the Outlets

The final step in setting up the user interface is establishing connections between the outlets and objects in the interface, so that messages are sent from the user interface to the correct objects.

  1. Connect the "Convert" button to the "ConverterController" instance. Control-drag from the "Convert" button to the "ConverterController" instance. Make sure the "convert:" action is selected in the "Target/Action?" view of the Inspector window, then click the "connect" button to confirm.
  1. Connect the "ConverterController" instance to text fields. Control-drag from the "ConverterController" instance to the "Exchange Rate" field. Select "rateField" in the "Outlets" view of the Inspector window and click "connect" to confirm. Then repeat this process, connecting "dollarField" to the "Dollars" text field, and "amountField" to the "Amount" field.
  1. Finally, connect the "ConverterController" to the "Converter" instance. Control-drag from the "ConverterController" instance to the "Converter" instance. Select the "converter" outlet in the Inspector window and click "connect" to confirm.

The nibfile now contains descriptions of the custom classes that your code will implement, including connections between their outlets and the objects with which they must communicate. You can save the nibfile and proceed to write the code that implements their behavior.

You can continue now with the section on Creating a Lisp File.

Start Previous

Attachments