Core Controls in Mac OS X: Part 2/2

A Place to Call Home – Adding Radio Buttons

Add a new label to your app (you should be getting pretty comfortable with this by now!), and change its title to Place:. Locate Radio Group in the Object Library palette, and drag it onto the window, just beside the label.

Select the group of radio buttons and open the attributes inspector in the utilities panel. Set Rows to 2, and Columns to 1. Change the title of the first radio button to read WWDC and the title of the second one to read 360iDev, as in the image below:

Now, create a new property for the radio buttons group — another action you should be quite familiar with by now! Ctrl-Drag the group into the RootViewController.m source file, just below the existing properties, like so:

In the popup window that appears, name the property placeRadioButton, as below:

Again, you’ll need to select a default value for your radio button control when the app launches. To make the 360iDev radio button the default, you’ll need to know the row and column index of the radio button you want to set as default. As the index of both the rows and columns in the radio button control is zero based, that makes it row 1, column 0.

Add the following code to the end of awakeFromNib:

// Set the radio group's initial selection
[self.placeRadioButton selectCellAtRow:1 column:0];

Build and run the application. You should see your radio button control on the window, ready to be selected, and the 360iDev as the default:

Radio buttons are one way to toggle values in your app, but there’s another class of controls that perform a similar function — check boxes!

Ticking all the Boxes — NSButton

Check boxes are in fact the same as push buttons, but they warrant their own section because they’re used in a different manner. Typically, push buttons are used to send a message to an action when clicked; you don’t necessarily care about their state. With check boxes however, you need to know about their state, but most of the time, you don’t care if or when they’re clicked! :]

You typically use check boxes in an app to display the state of some boolean value. That state tends to influence the app in some way such as enabling a feature, or changing a property of an object.

You can find a good example of check boxes in the Reminders app. The check box informs both the app and the user if a task has been completed, and you can toggle the state of the task by clicking on the checkbox, as below:

Working with check boxes is relatively easy; most of the time you’ll only be concerned with getting and setting the state of the control. The state of the check box can be one of three states: NSOnState (feature on everywhere), NSOffState (feature off everywhere) and NSMixedState (feature on somewhere, but not everywhere).

Here’s how you can use it:

// Set the state to On
[myCheckBox setState:NSOnState];

// Set the state to Off
[myCheckBox setState:NSOffState];

// Get the state of a check box
NSInteger state = [myCheckBox state];

Super simple! Time to add a checkbox to your app. You should be pretty familiar with adding controls and properties to your app by now — if you’re up for the challenge, see if you can figure out how to add the control without looking at the steps below! :]

Check and Double Check – Adding Checkboxes

Find the Check Box in the Object Library and drag it onto the window, changing it’s title to Yell !! as in the image below:

As you’ve done many times now, add a property for the check box. Ctrl-Drag the check box to RootViewController.m and in the popup window, name the property yellCheck, like so:

For this tutorial, make the check box default to the off state when the app launches. To do that, add the following code to awakeFromNib::

// set check button state
self.yellCheck.state = NSOffState;

Build and run the application! :] You should see the check box, and it’s state should be unchecked. Click it to see it in action:

Okay! You’ve finally added all the controls you need to create your funny mad lib sentences. All you’re missing is a way to collect the value of each control, combine those values into a sentence, and display the sentence on-screen!

Pulling it All Together

First, you will need to add the controls to your app where the results will be displayed. You’re going to use two controls: a label to display the complete sentence, and an image view to display a picture, which should liven up the user interface!

Find the Wrapping Label in the Object Library palette and drag it onto the window, just below the Go!! button. Make it look a little more attractive by using the attributes inspector to change the border of the label to Frame, which is the first of the four buttons.

After that, remove the default text of the label by double-clicking it, selecting the text and hitting backspace, like below:

You’ll need to create a property to set the value of this new label to contain your new hilarious sentence! As before, Ctrl-Drag the label to the RootViewController.m file, and in the popup window. name the property resultTextField.

Leave this control as it is for now; you’ll write the code that populates this control in just a bit. The last control you’ll need — an Image View, to show your image on the screen — is described below.

Room with a View — NSImageView

An Image View is a simple and easy to use control that — surprise! — displays an image. Bet you didn’t expect that! :]

There’s very few methods you need to interact with the Image View at runtime:

// Get the image from an image view
NSImage *myImage = [myImageView image];

// Set the image of an image view
[myImageView setImage:myImage];

At design time, you can configure the visual aspects: the border, scaling and alignment. Yes, these properties can be set in code as well, but it’s far easier to set them in Interface Builder at design time, as below: