Core Controls in Mac OS X: Part 1/2

Pop Goes the Weasel — NSPopUpButton

The pop up button allows the user to choose from an array of options, but without giving the user the option of entering their own value in the control. The control responsible for this in OS X is NSPopupButton.

Pop up buttons are incredibly common in OS X, and you can find them in almost every application — including the one that you’re using right now: Interface Builder! :] You’re using the pop up button to set many of the properties on the controls you’re using in this tutorial, as in the screenshot below:

Filling the Spaces — Adding Items To Pop Up Buttons

As you might expect, adding items to NSPopUpButton is similar to adding items to NSComboBox — except that NSPopUpButton doesn’t support using a data source for the content of the control. NSPopUpButton maintains an internal list of items and exposes several methods allowing you to manipulate it:

// Add an item to the list
[myPopUpbutton addItemWithTitle:@"Pop up buttons rock"];

// Add an array of items to the list
[myPopUpbutton addItemsWithTitles::@[@"Item 1", @"Item 2", @"Item 3"]];

// Remove all items from the list
[myPopUpbutton removeAllItems];

// Get the index of the currently selected item
NSInteger selectedIndex = [myPopUpbutton indexOfSelectedItem];

// Select an item at a specific index
[myPopUpbutton selectItemAtIndex:1];

Pretty straightforward, isn’t it? That’s the beauty of the core controls — there are a lot of similarities between them in terms of the methods used to manipulate the controls.

Time to implement a pop up button in your app! :]

The More the Merrier — A Plural Noun

You’ll now add a pop up button to your Mad Libs application which will allow the user to choose between different plural nouns to populate your comical sentence.

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 just beneath the Singular Noun label.

Note: Alternatively, a shortcut is to hold down Option and drag an existing label to duplicate it. This is handy so you can keep the same size and properties of an existing label.

Double-click the control to edit its default text, and change it to Plural Noun:. Next, locate the Pop Up Button control and drag it onto the window, placing it to the right of the label.

Your window should now look like this:

Now you need to add an NSPopUpButton property to the view controller. You’ll use the same technique as before, which should be fairly familiar by now: open the assistant editor, make sure RootViewController.m is selected, and then Ctrl-Drag the pop up button to the RootViewController.m to create a new property. This is illustrated in the screenshot below:

In the popup window that appears, name the property pluralNounPopup:

Okay, now the NSPopUpButton property is connected to the pop up button control. Now you just need some data to populate it!

Open RootViewController.m in the code editor and add the following property declaration directly below the pluralNounPopup property.

@property (nonatomic,strong) NSArray *pluralNouns;

Add the following code to the bottom of awakeFromNib:

// Setup the pop up button with plural nouns
self.pluralNouns  = @[@"tacos", @"rainbows", @"iPhones", @"gold coins"];
[self.pluralNounPopup removeAllItems];
[self.pluralNounPopup addItemsWithTitles:self.pluralNouns];
[self.pluralNounPopup selectItemAtIndex:0];

The first line in the code above initializes an array with four strings. The second line removes any existing items from the pop up button. The third line adds the array of items to the pop up button using some of the methods covered earlier. Finally, the pop up button is instructed to select the first item in the list as the default.

Build and run the application to see the result:

Once the app has launched, note that the pop up button shows the initial item, tacos, and if you click on the pop up button, you’ll see all the other items in the list.

Okay, so you now have two controls that allow the user to select from lists, as well as a control that allows the user to enter a single line of text. But what if you need the user to enter more than a few words in a text field?

Read on to learn about text views! :]

Text is Next – NSTextView

Text views, unlike text fields, are usually the control of choice for displaying rich text. Some implementations even allow for more advanced features such as displaying inline images.

The control responsible for this on OS X is NSTextView.

A great example of an application using all of what NSTextView has to offer is TextEdit, as shown in the screenshot below:

NSTextView is so feature rich that to cover everything would warrant a tutorial of its own, so here you’ll just cover a few of the basic features in order to get you up and running! (Did you just breathe a sigh of relief?) :]

Here are the basic methods you’ll need to work with text views:

// Get the text from a text view
NSString *text = [myTextView string];

// Set the text of a text view
[myTextView setString:@"Text views rock too!"];

// Set the background color of a text view
[myTextView setBackgroundColor:[NSColor whiteColor]];

// Set the text color of a text view
[[myTextView setTextColor:[NSColor blackColor]];

Relatively simple — nothing too shocking here! :]

The String’s the Thing — Attributed Strings

NSTextView has built-in support for NSAttributedString. If you pass an attributed string to a text view, the string will be displayed correctly using all the appropriate attributes such as font, font size, and font color.

Note: An attributed string is a special type of string where you can tag subsets of the string with different attributes – such as its font, it’s color, whether it’s bolded, and so on. To learn all about attributed strings, check out the Attributed Strings chapter in iOS 6 by Tutorials (most of the information in that chapter applies to Mac development as well).

NSTextView has a property called textStorage, whose type is NSTextStorage. NSTextStorage is a semi-concrete subclass of NSMutableAttributedString, which is a fancy way of saying “you can put formatted text in it, and change it later.”

In order to have NSTextView display an attributed string, you actually set the attributed string on the NSTextStorage instance returned by the textStorage property, as shown in the code below:

// Setting an attributed string on the NSTextStorage instance owned by our NSTextView
NSAttributedString *myAttributedstring = ...;
[myTextView.textStorage setAttributedString:myAttributedstring];

So that’s how to set the text view’s (attributed) string – now let’s try it out!