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.
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
, 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
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 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
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.
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
There's a dropdown in the toolbar labeled Active Build Configuration, initially set to
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.
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
Interface Builder is used by Cocoa programmers to lay out the user interface of
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
Tools → Library.
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.
Place the text view near the top-left of the window, then resize it using the
handles around the outside:
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.
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
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.
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
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.
This document can be treated as any other PDF document, including text selection,
searching and annotation.
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.
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.
Perfection and power are overrated
I think you were wise to choose happiness and love