Core Controls in Mac OS X: Part 1/2

NSControl – The Building Block of Controls

NSControl is the foundation upon which all other controls are built. NSControl provides three features which are pretty fundamental for user interfaces: drawing controls on the screen, responding to user events, and sending action messages.

As NSControl is an abstract superclass, it’s entirely possible that you’ll never need to use it directly within your own apps. All of the common controls are descendants of NSControl, and therefore inherit the properties and methods defined in NSControl.

The most common methods used for a control are getting and setting the value of that control, as well as enabling or disabling the control itself. Have a look at the details behind these methods below:

Setting The Control’s Value

If you need to display information using a control, you’ll usually do this by changing the control’s value. Depending on your needs, the value can be a string, a number or even an object. In most circumstances you’ll use a value which matches the type of information being displayed, but NSControl allows you to go beyond this and set several different value types!

The methods for getting and setting a control’s value are:

// getting & setting an string
NSString *myString = [myControl stringValue];
[myControl setStringValue:myString];

// getting & setting an integer
NSInteger myInteger = [myControl integerValue];
[myControl setIntegerValue:myInteger];

// getting & setting a float
float myFloat = [myControl floatValue];
[myControl setFloatValue:myFloat];

// getting & setting a double
double myDouble = [myControl doubleValue];
[myControl setDoubleValue:myDouble];

// getting & setting an object
id myObject = [myControl objectValue];
[myControl setObjectValue:myObject];

Enabling & Disabling a Control

Enabling or disabling a control based on the current state of an app is a very common UI task. When a control is disabled, it will not respond to mouse and keyboard events, and will usually update its graphical representation to provide some visual cues that it is disabled, such as drawing itself in a lighter color.

The methods for enabling and disabling a control are:

// disable a control
[myControl setEnabled:NO];

// enable a control
[myControl setEnabled:YES];

// get a control's enabled state
BOOL isEnabled = [myControl isEnabled];

Okay, that seems pretty easy — and the great thing is that these methods are common to all controls; they’ll all work the same way for any control you use in your UI.

Now it’s time to take a look at the more common user interface controls of OS X! :]

Field of Dreams – NSTextField

One of the most common controls in any UI is a field that can be used to display or edit text. Almost any modern application will need to display some sort of text, such as a RSS reader, a Twitter client, or an address book, and almost all applications require some sort of text enty to log in, change settings, or to provide other inputs to the app.

The control responsible for this functionality in OS X is NSTextField.

NSTextField is used for both displaying and editing text. You’ll notice this is quite different than iOS, where UILabel is used to display text, and UITextField to edit it. In OS X, these two controls are combined into one, and the behaviour of the control is modified via setting the control’s properties.

If you want a text field to be a label, you simply set it as non-editable. To make the text field editable — yup, you simple set the control to be editable! These properties can either be modified programmatically, or by setting the relevant property through the Interface Builder.

To make your coding life just a little easier, Interface Builder actually provides several pre-configured controls for displaying and editing text which are all based on NSTextField. These pre-configured controls can be found in the Object Library, and are described in the graphic below:

So now that you’ve learned about the function of NSTextField, you can now add one to your Mad Libs application! :]

Living in the Past — A Past Tense Verb

In the Mad Libs application you’ll be building, you will add various UI controls which will allow the user to blindly construct a funny sentence, without knowing the final result. Once the user has finished, your app will combine all the different parts and display the result, hopefully with some comedic value. The more creative the user is, the more fun they’ll have! :]

The first control you’ll add is a text field where the user can enter a verb to be added to the sentence, as well as a label to inform the user what the text field is for.

Select MainMenu.xib in the project explorer to open it in Interface Builder, and then select the Main Window. In the Object Library palette, locate the Label control and drag it onto the window.

Next, locate the Text Field control and drag it onto the window, placing it to the right of the label. Double-click the label to edit the default text, and change it to Past Tense Verb:.

You should now have something similar to this:

Later on, you’re going to need to interact with the text field, and to do this you’ll need a property exposed on the view controller.

To create this property and connect it so that you can work with it, open the assistant editor — making sure that RootViewController.m is selected — and Ctrl-Drag the text field to the private interface to create a new property, like shown below:

In the popup window that appears, name the Outlet pastTenseVerbTextField, and click Connect, as shown in the image below:

And that’s it! You now have an NSTextField property in your view controller that is connected to the text field in the main window.

You know, it would be great to display some sample default text when the app launches, in order to give the user an idea of what to put in the field. Since everyone loves to eat, and food related Mad Libs are always the most entertaining, the word ate would be a tasty choice here! :]

A good place to put this is inside awakeFromNib that you created above. To change the text field’s default value, simply use the setStringValue method you learned about earlier.

Add the following code to the end of awakeFromNib:

// Set the default text for the pastTenseVerbTextField property
[self.pastTenseVerbTextField setStringValue:@"ate"];

Build and run your app. You should see the two controls you’ve just added, and the text field should display the word ate, as below:

Okay, that takes care of a single input with a default value. But what if you want to provide a list of values that the user can select from?

Combo Boxes to the rescue! :]