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

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

It’s a good time to be an iOS developer. Not only can you release your apps to both the iPhone and iPad App Stores, but you also have the foundational skills to become a Mac developer, since iOS development and Mac development are quite similar!

If you’re an iOS developer and you’re curious about learning the basics of becoming a Mac developer so you can start migrating your iOS apps to the desktop, this tutorial is for you.

In this tutorial, you’re going to build your first Mac application, specifically a Mac version of the app we created in the How To Create A Simple iPhone App tutorial.

If you’ve followed that tutorial, you will be familiar with most of the steps on this one, and you will be able to see the main differences between iOS and Mac programming.

If you haven’t followed it, don’t worry. It’s not required in order to read and understand this one – we’ll guide you along the way step by step.

While making this app, you’ll learn the following topics:

• How to create a Mac App in XCode
• Learn the basic structure of a Mac App
• Learn the main differences between OSX and iOS
• How to use Table Views – including adding and deleting rows
• How to use a text field, a button and an image view
• How to select an image from your hard drive, or capture a picture from your computer’s camera
• How to handle window resizing

This tutorial is for beginner Mac Developers, but it assumes that you are familiar with Objective-C programming and with XCode. Knowledge of iOS programming is recommended to follow this tutorial, but not mandatory.

In this first part of this three-part series, we’ll cover how to load your model with a list of bugs and display them in a table view. (Jump to Part two or Part three)

Getting Started

Creating a Mac project is very similar to creating an iOS project – it still uses Xcode, just a different template!

So start by going to File\New Project in XCode, and in the window that pops up, select “Application” in the “OS X” section. Then click Next.

On the Next Page, you will enter the application information. Type ScaryBugsMac in the product name and select a unique company identifier. Apple recommends using a reverse domain format. Leave the rest of the text fields blank.

Finally, make sure that only “Use Automatic Reference Counting” is checked. The rest of the checks should not be marked. When you’re done, click Next.

Now XCode will ask you for a location to save to the project. Choose a folder in your computer and click “Create”.

The project is ready, and you should have a Mac Application with an single empty window. Let’s check out how it looks. Find the “Run” button, which is located in the left side of the toolbar at the top of XCode. Click it and XCode will begin to build the app.

When XCode finishes building the application, you should see the main window of your application.

This shows you three things: first you chose the correct template and it works (yay!), second it is a good blank starting point to build upon, and third there are some big (and somewhat obvious) differences from developing for iOS:

• The window doesn’t have to be a particular fixed size such as the iPhone or iPad’s screen size – it can be fully resizable!
• Mac apps can have more than one window, and you can minimize them, etc.

Let’s do something with this window, and make it show some information about bugs. Just like in iOS, the first thing to do is to create a new View Controller. In this view, you will define the user interface of the main app.

To Create a new View Controller, go to File\New\File… , and in the window that pops up, choose OS X\Cocoa\Objective-C class, and click Next.

Name the class MasterViewController, and type NSViewController for “Subclass of”. Make sure that the option “With XIB for user Interface” is selected.
Click Next.

In the final popup, click Create again. Now your new view Controller is created and your Project Navigator should look similar to this:

Now that you’ve created the view controller, it’s time to place the UI items on it. In the Project Navigator, click on MasterViewController.xib. That will load the visual representation of the view controller you just created in Interface Builder.

Interface Builder lets you build your user interfaces in a visual way. You just need to drag a component into your view and locate or resize it according to your application’s needs.

The first thing your app needs do is to show a list with the Bugs. For that, you are going to need a table view. In OSX, the control is called NSTableView (similar to UITableView in iOS).

If you’re familiar with iOS programming, you may be able to see a pattern here. Lots user interface classes in that are in UIKit were originally derived from classes that already existed in OSX’s AppKit. So, some of them just changed the NS preffix used in Mac to the UI preffix used in iOS.

So, as a rule of thumb, if you are wondering if some iOS control you know and love may already exist in Mac, you can try and look for the same class with NS. You’ll be surprised how many you’ll find – NSScrollView, NSLabel, NSButton and more! Note that the APIs for these controls might be quite a bit different from the iOS variants in some cases though.

The user interface controls are located in the bottom right part of the screen. Make sure the third tab is selected (which is the tab with the UI controls) and find the NSTableView control. (you can scroll down the controls list until you find it, or you can type NSTableView in the panel’s search field).

Drag the table view from the panel onto the view and position it near the top left corner. Don’t worry now about the table size, you will take care of that later.

Now you have a view with a table on it, but you still haven’t added the view controller to the main window so it won’t show up. You’ll do that in the Application Delegate, so in the Project Navigator select AppDelegate.m.

In order to use the new view controller, the Application Delegate must be aware that it exists, so the first thing you need to do is to import the view controller header file. Add the following to AppDelegate.m, just below the line #import “AppDelegate.h” and before the line @implementation AppDelegate:

#include "MasterViewController.h"

Now you are going to create a property/instance variable for the view controller.
Add the following code just below the line you added before, and before the line @implementation AppDelegate. Note that properties no longer need to be synthesized due to the new auto-synthesize feature, so you’re set :]

@interface  AppDelegate()
@property (nonatomic,strong) IBOutlet MasterViewController *masterViewController;
@end

Now the Application Delegate has a MasterViewController property, but the view won’t be shown on the application’s screen yet. To do that you need to instantiate the variable to create a new view, and after that, you need to add the newly created view to the main window of the application.

This must be done when the application starts. The Application delegate has a method “applicationDidFinishLaunching”, that is called by the Operative system when the application just started. That is the point where you should add all the initialization code that is meant to run only once when the application starts.

If you are familiar with iOS programming, this method is the equivalent in OSX to the method – (BOOL)application:didFinishLaunchingWithOptions:launchOptions in iOS.

Let’s create the view controller and add it to the main window. Insert this code inside applicationDidFinishLaunching:

// 1. Create the master View Controller
self.masterViewController = [[MasterViewController alloc] initWithNibName:@"MasterViewController" bundle:nil];

// 2. Add the view controller to the Window's content view
[self.window.contentView addSubview:self.masterViewController.view];
self.masterViewController.view.frame = ((NSView*)self.window.contentView).bounds;

The code above performs two actions. First, it creates a new MasterViewController from a nib file using initWithNibName:. Once it’s created, it’s added two the main window.

The windows in OSX (NSWindow class) are always created with a default view, called contentView that is automatically resized to the window’s size. If you want to add your own views to a window, you will always need to add them to the contentView using addSubView.

The last line just sets the size of your view to match the initial size of the window. Comparing this again with iOS programming, it’s a bit different. In iOS you would set the window’s rootViewController. But rootViewController does not exist in OSX, so you need to add your view to the windows’ content View.

Now, if you click Run, you will see that the main window now shows your view with your table view. Nice – now you’re starting to get somewhere!