Core Controls in Mac OS X: Part 2/2

Just a Pretty Face – Populating the Image Well

OK, time to add an image view to your application! In the Object Library palette, find the Image Well and drag it onto the window, just below the wrapping label. Feel free to resize the app window if necessary.

Create a new property for the image view in the same way you’ve done for all the previous controls: Ctrl-Drag the image view to the RootViewController.m file, and in the popup window name the property imageView.

Build and run. Your app should now look like this:

Phew! Your user interface is finally finished — the only thing that’s left to do is to create the code that will assemble your hilarious sentence and populate the image view that you added above!

Time To Make It Work

Now that you have all the controls you need to allow the user to select the various inputs to the application, you need to construct the sentence based on those inputs.

When the user clicks the Go! button, you’ll collect all the values from the different controls and combine them to construct the full sentence, and then display that sentence in the wrapping label you added previously.

Finally, in order to spice up your all-text interface, you will also display a picture in the image view that you added in the last section.

To do this, download the resources for this project, unzip the file, and add the single image to your project.

When the options window appears, make sure the Copy items into destination group’s folder (if needed) option is checked, as shown below:

Clicking Finish will add the image file to your project and make it available for your use!

It’s finally time to add the core of the application — the code which constructs the mad lib sentence! Since this needs to happen when the Go! button is clicked, you’ll add the necessary code to the goButton method.

Add the following code to goButton:

// Past tense verb
NSString *pastTenseVerb = [self.pastTenseVerbTextField stringValue];

// Singular noun
NSString *singularNoun = [self.singularNounCombo stringValue];

// Place
NSString *placeString;
NSInteger row = [self.placeRadioButton selectedRow];
if( row == 0)
placeString = @"WWDC";
else if( row==1)
placeString = @"360iDev";

// Amount
NSInteger amount = [self.amountSlider integerValue];

// Plural noun
NSString *pluralNoun = nil;
NSInteger selectedIndex = [self.pluralNounPopup indexOfSelectedItem];
pluralNoun = self.pluralNouns[selectedIndex];

// Phrase
NSString *phrase = [self.phraseTextView string];

// Date
NSString *date = nil;
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
[dateFormatter setDateStyle:NSDateFormatterLongStyle];
date = [dateFormatter stringFromDate:[self.datePicker dateValue]];

// Speak or SHOUT
NSString *voice = @"said";
if( self.yellCheck.state == NSOnState)
voice = @"yelled";

// Create the mad lib sentence
NSString *results = [NSString stringWithFormat:
                     @"On %@, at %@ a %@ %@ %@ %@ and %@, %@!",
                     date,
                     placeString,
                     singularNoun,
                     pastTenseVerb,
                     @(amount),
                     pluralNoun,
                     voice,
                     phrase];

// Display the mad lib sentence
[self.resultTextField setStringValue:results];

// Load the rage face image
self.imageView.image = [NSImage imageNamed:@"face.png"];

That may seem like a lot of code, but don’t worry — it will be explained step by step! :]

NSString *pastTenseVerb = [self.pastTenseVerbTextField stringValue];

Here you’re getting the string value from the pastTenseVerbTextField by calling its stringValue method.

NSString *singularNoun = [self.singularNounCombo stringValue];

In this section of code, you get the string from the combo box by calling its stringValue method.

You might ask why you don’t just look up the selected row, and then retrieve the string associated with that row? Quite simply, it’s because the user can enter their own text into the combo box. So use the stringValue to get the current string, which could have been either selected or typed.

NSString *placeString;
NSInteger row = [self.placeRadioButton selectedRow];
if( row == 0)
  placeString = @"WWDC";
else if( row==1)
  placeString = @"360iDev";

Here you get the currently selected radio button by calling NSMatrix’s selectedRow method, and assign the necessary string value to the placeString variable, based on the selected index.

NSInteger amount = [self.amountSlider integerValue];

Next, read the slider’s current value using its integerValue method. Remember that if you need more precision with this control, you could also use either floatValue or doubleValue.

NSString *pluralNoun = nil;
NSInteger selectedIndex = [self.pluralNounPopup indexOfSelectedItem];
pluralNoun = self.pluralNouns[selectedIndex];

Here you get the plural noun, selected from the popup button. How is this done? First, get the index of the selected item in the popup by calling its indexOfSelectedItem method. Then, look up the appropriate plural noun in your pluralNouns array.

NSString *phrase = [self.phraseTextView string];

Next up is the phrase the user typed. To acquire it, simply retrieve the string value of our text view by calling its string method. It’s really as easy as that! :]

NSString *date = nil;
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
[dateFormatter setDateStyle:NSDateFormatterLongStyle];
date = [dateFormatter stringFromDate:[self.datePicker dateValue]];

To get the date, call the date picker’s dateValue method. Then, convert the returned date to a human-readable string using an NSDateFormatter.

NSString *voice = @"said";
if( self.yellCheck.state == NSOnState)
  voice = @"yelled";

The final piece of the jigsaw: should you speak or shout? Simply get the checkbox state: if it’s NSOnState, assign yelled to the string variable. Otherwise, set the string to said.

NSString *results = [NSString stringWithFormat:
                         @"On %@, at %@ a %@ %@ %@ %@ and %@, %@!",
                         date,
                         placeString,
                         singularNoun,
                         pastTenseVerb,
                         @(amount),
                         pluralNoun,
                         voice,
                         phrase];

At this point, you’ve collected all the information you need to construct the mad lib sentence! This is where the magic happens. Use the different values read from the various controls to build a string, based on the user’s input.

[self.resultTextField setStringValue:results];

self.imageView.image = [NSImage imageNamed:@"face.png"];

Finally — you can display the results of all your hard work! First, display the sentence in the results label, by calling its setStringValue method. Then, add some pizazz to the app by displaying an image to the user, which is as easy as loading the image and setting the image property of the image view control.

That’s it! You’re done! Run and build the app, so you can construct some hilarious sentences for yourself!

Congratulations! You’ve finished building the Mad Libs application, and have learned a ton about the most common Mac OSX controls along the way.

Feel free to play with the controls, select different values, type funny nouns or verbs and see the results each time you click the Go! button, and see what funny stories you can create! :]