How to Make a Simple Mac App on OS X 10.7 Tutorial: Part 2/3

This is a post by iOS Tutorial Team Member Ernesto García, a Mac and iOS developer founder of CocoaWithChurros.

This tutorial is the second part of a three part series on how to create a simple Mac App.

In the first part of the series, you created a Mac application that showed a list of Scary Bugs.

In this second article, you’ll learn how to add a Details Section to show the complete information about a bug: its name, scariness rating, and a larger (and much more frightening!) picture of the bugs. (Jump to Part three)

You will also lean how to change that information, rate bugs, and even change their pictures!

So, let’s get started!

Download some stuff

In order to complete this tutorial, you’ll some pictures and some code files. So download this these extra project resources and uncompress it.

Note: In order to Rate the bugs from “not scary” to “totally scary”, you’re going use an open source rating control component called EDStarRating, which is included in the package.

In this tutorial we’re not going to explain how it’s built, but we’re going to teach you how to use a custom view like this one in your projects. The package also includes an NSImage category that you’ll use to create a thumbnail of the large Bug Image, and also three types of faces to show the rating.

For more information on EDStarRating, you can check out its github page.

Now, add those files to your project (as you did in the first part of the series, we’re going to create some groups to keep things organized):

• Create a new group named “Views” in XCode, and drag EDStarRating.h/EDStarRating.m to that group, making sure “Copy items into destination group’s folder (if needed)” is checked, and that “ScaryBugsMac” is selected in the “Add to Targets” section. This is the 5-star rating view.

• Repeat for NSImage+Extras.h/NSImage+Extras.m, except drag them to a new group named “Helpers”. This is some helper code we’ll need to resize images a bit later on. Again, make sure that all the required checks are selected (Copy Items check, and Add To Targets check).
• Repeat for the three shocked face images, except drag them to a new group named “Art”. These are the images we’ll be using for the “stars” in our rating view for some humorous flair :] (Don’t forget about the required checks)

This is how your Project should look like after adding those files:

Creating the Details Section

Now it’s time to change our user interface to include the controls that will show the ScaryBugs detail information.

In iOS, a typical Master/Detail application creates two views, and when a row of the table is tapped, the interface changes to a different view to display the required information.

In OSX, the paradigm is different. Since you don’t have the size restrictions of the iPhone screen, you can add the detail information in the same view. you just need to resize it to be a bit bigger. It’s similar to the way iPad’s Master/Detail applications behave.

Let’s get to work. Open MasterViewController.xib. Select the view, and increase its height and its width. you don’t need to worry now about the exact size. Just big enough to fit in the new controls.
Something like this:

The next step is adding the required controls. You need to show the following detail information: the bug’s name, rating and image.

For the Bug Name you are going to use a NSTextField Control, which can show and edit text. For the Rating, you will use the EDStarRating control. And for the image, you will use an NSImageView.

Besides that, you will add two labels with the titles, just to let the user know what’s the meaning of every field.

To do this, you just need to do what you previously did with the table View. Find the required control in the Controls Panel at the bottom right of the screen, and drag them to our view.

Drag one Text Field (for the name), two Labels (for the titles), and one Image View (this one is named ‘Image Well’ in the controls panel).

The EDStarRating control is a custom control, so it’s not included in the panel. To use it, you need to find in the controls panel a control named “Custom View”. Drag it onto the main view. Later you will configure it so that it shows the rating.

Now it’s time to arrange the controls. Place them on the empty space on the right side of the view. Vertically, from top to bottom, arrange them this way:

• First, a Label, which will be used as a title for the name. Below it, place the Text Field.
• Below it, the second label (which will become the title for the rating).
• Below that label, place the custom view (that will become later our rating control).
• And finally, place the image view below the custom view

Try to arrange them so that the left edges of the controls are aligned. After that, your view should look similar to this:

The last step is to configure our view to auto-resize to match the size of its parent window. That way, you’ll be able to see the newly created controls just resizing the main window.

To do this, select the main view (by clicking on it or in the ‘Custom View’ in the objects panel on the left). Now, on the Utilities panel on the left, select the “Size Inspector” tab.

This is fifth tab, the one with a ruler icon. There, set up the autosizing attributes like the following:

Let’s configure the EDStarRating control. In the previous step, you added a custom view. This is a basic NSView. Now, you need to tell Interface Builder that you want the view class to be EDStarRating instead of NSView.

How do you do that? Quite easy. Click on the custom view to select it. In the Utilities panel, switch over to the Identity Inspector by clicking on the third tab.

In that tab, change the name of the Class to EDStarRating.

Now you need to change the text of the labels. Select the first label, and switch over to the Attributes inspector by clicking on the fourth tab. There, change the Title to ‘Name”.

Note you can also change the text of a label by double-clicking on it, and changing the text on the label directly.

Repeat that step for the second label, and change its title to “Rating”

Ok, now it’s time to build and run the application. If everything went well, the app should run and you should see a window similar to this:

Note: If part of your controls are cut off, you can open MainMenu.xib and make the window size bigger.

You can see that all the controls are there, but the Rating control is missing. Don’t worry about it. The control is there, but since you haven’t configured it yet it doesn’t show anything.

The view currently has all the controls you need to show the details. Now you need to add the outlets to the view controller so that you can later access those controls from our code.

To do this, still with MasterViewController.xib open, bring up the Assistant Editor (second button under the “Editor” section in the top toolbar), and make sure it’s set to Automatic\MasterViewController.m.

Select the table View (remember that you may need to click twice or just select the table in the Controls panel on the left side). When you’re sure that the table view and not the scroll view is selected, control-drag from the table view into MasterViewController.m, right after @interface MasterViewController ().

A popup will appear allowing you to hook the NSTableView up to a property in your class. Name it bugsTableView, make sure the Storage is set to Weak, and click Connect.

With that simple action, we’ve added a property to the view controller, and it’s internally hooked up to the table view in Interface Builder.

Now, you need to repeat those steps for the text Field and the image view (but not for the labels. we’re not going to change anything on the labels, so you don’t need to add those outlets).

You just need to do the same. Select the text field, and control-drag from it into MasterViewController.m, right below the new line with the table View NSTableView *bugsTableView. Call the property bugTitleView.

Repeat the same action for the image View, and call the property bugImageView. And the last one. Create the property for the rating view. Call the property bugRating.

After creating those properties, your MasterViewController.m file should look like this:

@interface MasterViewController ()

@property (weak) IBOutlet NSTableView *bugsTableView;
@property (weak) IBOutlet NSTextField *bugTitleView;
@property (weak) IBOutlet NSImageView *bugImageView;
@property (weak) IBOutlet EDStarRating *bugRating;

@end

You will notice there is a warning since it can’t find the definition of EDStarRating – fix that by including the header at the top of the file:

#import "EDStarRating.h"