Learn Cocoa
Cocoa Dev Central

Learn Cocoa

This tutorial shows you how to create your first Cocoa app. It assumes no previous experience with programming or Xcode.

The app you will not write any code for this app, but it will still have some impressive features. This tutorial assumes you're using Xcode 3.1 on Mac OS X 10.5 Leopard.

This tutorial is written and illustrated by Scott Stevenson
Copyright © 2006-2007 Scott Stevenson

Create a New Project

First, Launch Xcode. You can find it in /Developer/Applications. If Xcode is not there, you can download it from Apple Developer Connection, under "Mac Dev Center". You'll need to create a free account and login before the Xcode download link is enabled.

The original Leopard DVDs came with Xcode 3.0 on them, so make sure that you download Xcode 3.1 from the web site if you have an earlier version.

Once Xcode is running, open Xcode → Preferences and set your Layout to All-in-One.
Xcode All-in-One View
All-in-One is the layout preferred by many pros, and is used in all of the visuals in this tutorial.

After you've changed the layout, close the Preferences window and choose File → New Project
Choose Cocoa Project
Choose Cocoa Application. Some of the items in the project list have similar names, so choose carefully. Click the Choose... button, and you'll be asked to name the project.

Name the project "CocoaNotepad". You can choose any location you like. It's good to put all of your projects in one place, so it might make sense to create a "Development" folder.

The Xcode Window

Once you create the project, the main Xcode window appears. The Xcode window has several views you can switch between using the Page toolbar item.
Main Xcode Window
This is the Project View. It lists files, search results, build settings, and more. Clicking the Build and Go toolbar item will compile your application and run it.

There's a dropdown in the toolbar labeled Active Build Configuration, initially set to Release.
Active Build Configuration Dropdown
This dropdown controls build settings. Release means that the application will be built as a finished product. The Debug setting builds quicker and gives more information to developers, but an application built with Debug cannot be given to users. You can leave this set to Release for now.

Interface Builder

Unfold the CocoaNotepad group, then the Resources folder. Double-click the MainMenu.xib item to open it in Interface Builder.

NOTE: The screenshots below show "MainMenu.nib", but .nib and .xib files are basically equivalent.
Open MainMenu.nib
Interface Builder is used by Cocoa programmers to lay out the user interface of an application.
Interface Builder Tour
The application window is where you place items that the user will see on screen.

The menu displays the contents of your application's menu bar. You can click on a menu item to select it, and double-click to rename it. To reposition a menu item, just drag it to a new position. To delete it, select it then press the Delete key.

The Library Palette contains stock items in Cocoa that you can add to your application via drag-and-drop. Open the Library Palette now using ToolsLibrary.

The document window displays the contents of the MainMenu.xib file itself. The user doesn't see this window in the application — it's only used during development. (Keep in mind that anyone can open an application's XIB file, though.)

Add a Text View

The Library Palette has two tabs: Objects and Media. Objects are functional items like text fields, slider controls, and so on.

The Media tab contains presentation items, such as images and sounds. Items from both the Object and Media tabs can be dragged out and added to your application. For this tutorial, we'll focus on Objects.

Click on the top-level Library item then type "text view" into the search box at the bottom of the inspector window. This should display the NSTextView item object. Drag it out of the palette and onto your application window.
Add a Text View
Place the text view near the top-left of the window, then resize it using the handles around the outside:
Resize Text View
It should nearly fill the window, with a bit of space on the bottom. The exact size is not important.

Finally, we need to set the sizing attributes for the text view so that it keeps the same proportions as the window. Select the text view and choose Tools → Inspector, then click on the Size tab at the top of the inspector window.
Size Tab
The inspector window should say "Text View Size" at the top. If it says something else — such as "Scroll View Size" — select the text view again. You may have to click or double-click several times to get the correct item selected.

The bottom half of the size inspector contains a section labeled Autosizing.
Set Sizing Attributes
Click the horizontal and vertical lines in the internal box so that they become solid red lines. The animated preview shows that the text view's internal size will grow and shrink with the window.

Run the Application

Switch back to Xcode, then build and run the application by pressing ⌘-R, or by simply choose Build → Build and Run.
CocoaNotepad Screenshot
Even though this project doesn't have a single line of custom code, you can see that we already have a working application. Choose Format → Font → Show Fonts to choose a font and start typing.

It can't save files, but it uses Cocoa's built-in text view so you can use fonts, colors, international text, and spell checking. It also support drag-and-drop, text search, and many other features.

Printing and PDF

The application also supports printing and can create PDF files. To try this out, simply choose File → Print. Click Preview in the print dialog to convert the text to a PDF.
Print PDF
This document can be treated as any other PDF document, including text selection, searching and annotation.

Wrap Up

The goal of this tutorial is just to give you a taste of what Cocoa has to offer. Even though we didn't write any code, we ended up with an application which has some very sophisticated text handling. The Xcode project is contained in the following zip file.
LearnCocoa Xcode 2.4 Project (52k)
If you'd like to see more tutorials like this, please make a donation. Please consider the download a thank you gift for your contribution.
Love it? Suggestions? Send feedback on this tutorial.
Perfection and power are overrated
I think you were wise to choose happiness and love
Feedback Form
Cocoa Dev Central is a servicemark of Tree House Ideas
Site design © 2004-2007 Scott Stevenson | Made with TextMate