A very simple introduction to XCode, Cocoa and Quartz by zzz22140


									  A very simple introduction to XCode,
           Cocoa and Quartz
XCode is a Mac application which provides a programming environment (editor, documentation,
project manager, debugger and compiler) for writing scripts and applications. It is especially suited
for writing programs in C, C++, Objective C, Cocoa, Ruby and Python. XCode is installed on all the
CoMPLEX computers and can also be downloaded for free from the Mac Dev Center after you sign up
for a free account.

Cocoa is a programming language which is what native Mac applications are written in. It is based on
Objective C, which is in turn based on C. It is object-oriented. Objective C can be compiled to run on
any platform, but Cocoa contains frameworks which are only designed to run on the Mac.

Quartz is a technology used for rendering 2D graphics on the Mac. It provides a means for drawing
simple shapes (rectangles, ovals, paths and text) onto the screen. There are a range of Cocoa drawing
commands which let you create Quartz graphics and display them in application windows. Core
Image is a technology which extends the capabilities of Quartz with extra effects.

The ButtonPush project makes a simple application that increments a counter each time a button is
pushed and displays it in a window. To make this, open a new Cocoa Application project in XCode.
Double click the NIB file: MainMenu.xib. This opens Interface Builder – an application that lets you
build graphical user interfaces for your application.

The Library window contains GUI elements that you can drag onto your window. Search for "Button"
and "Label" (a kind of NSTextField) and drag them onto the window. Resize the elements and the
window to look as they do in the example. The Inspector window (Tools > Inspector) lets you edit the
attributes of your GUI elements and window.

With the window selected, use the Inspector to edit the window's title and deselect "Resize" so that
the window has fixed dimensions. Press Command-R to simulate your interface. You shouldn't be
able to resize the window.

Use the Inspector to change the title of the button and the label elements. Make sure the text of the
label is centred. Save and quit.

Create a new class file in XCode (Command-N). Choose Objective-C class. Name it something like
"AppController". You should see two files created: AppController.h and AppController.m. The "h" file
is an interface file and the "m" file is an implementation file. The interface file gives information about
what kind of objects and functions (methods) the class has. The implementation file contains all the
code that actually implements those methods using those objects.

Edit the interface file to match the example. An IBOutlet is an object that outputs data from the
program to a GUI element in your window. This one (myTextField) will control the appearance of your
label. An IBAction is a function (method) which is called by a GUI element in your window. This one
(buttonPush) is called whenever the button is pushed. Save the file.

Open up Interface Builder again by double clicking on MainMenu.xib. Find the "Object" object in the
Library and drag it into the window with MainMenu.xib(English) at the top. Select the object and, in
the Inspector, choose the "Identity" tab (i in a circle) and find AppController in the Class Identity
menu. Select it. Now, right-click on the AppController object. You should see a list of Outlets and
Actions. Drag from the circle next to "myTextField" onto your label. It should form a connection. Then
do the same from the action "buttonPush" onto your button. Now these outlets and actions are
connected to the code in XCode.

Edit the implementation file to match the one in the example. Start by making the buttonPush method
write a log to the console. Console logs are called with the Objective C method:
Edit the implementation file to match the one in the example. Start by making the buttonPush method
write a log to the console. Console logs are called with the Objective C method:

NSLog(@"This is a log to the console");

The @ sign just tells you that a string object is coming up. You can mix strings and variable values in
your logs using format strings. These use the % sign to mark positions where you want to insert a
variable. %d represents an integer value and %f marks a float value. So:

int numberOfOranges = 10;
NSLog(@"There were %d oranges in the basket", numberOfOranges);

will print:

There were 10 oranges in the basket

You can make a format string object by calling the stringWithFormat: method on the NSString object:

int numberOfOranges = 10;
NSString *myString = [NSString stringWithFormat:@"There were %d oranges in
the basket", numberOfOranges];

The square bracket notation is the way Objective C calls methods on objects. The general form is:

[objectName methodNameWithParameter:parameterName];

The awakeFromNib method is always called right at the start of launching an application. You don't
need to declare this method in the interface file. It's like an initial set-up method. We're using it to set
the counter to zero and also test writing logs to the console.

Save your project and click Build and Go. Hopefully it should increment the counter when you click
the button.

This application creates a window containing a graphical View object which displays a range of
images generated with Quartz 2D commands.

Open a new project and, first off, open up the MainMenu.xib in Interface Builder again. In Library,
search for Custom View and drag it into the window. Resize the view to 500×500. Change the title of
the window to whatever you want and make it fixed-size. Save and quit.

Create a new class, but choose Objective C NSView Subclass instead of Objective C Class. Call it
something like QuartzView.

The NSView class generates two code blocks in your implementation file automatically:
initWithFrame: and drawRect: . The second of these, drawRect: is the one where all of the drawing
commands have to go.

Add the following code to the drawRect: code block:

[[NSColor whiteColor] set];
NSRectFill([self bounds]);
NSRect myRect = NSMakeRect(50,50,50,50);
[[NSColor redColor] set];

The set method chooses what colour is being used to either fill or stroke (colour the outlines) of your
shapes. NSRect is a class which generates rectangular shapes. [self bounds] is a rectangle object
which covers the whole canvas, so the second line fills the whole canvas with white.

In the third line, we create a rectangle object at position (50,50) (measured from bottom left) with
width 50 and height 50.
In the third line, we create a rectangle object at position (50,50) (measured from bottom left) with
width 50 and height 50.

Save the project, open up the NIB file again and select the Custom View. In the Identity tab of the
Inspector, select "QuartzView" in the Class menu. Now the behaviour of the view is linked to your
NSView subclass object. Quit Interface Builder.

Back in XCode, click Build and Go. You should get a white background with a red rectangle on it. Play
with the coordinates and dimensions of the red rectangle until you're happy with it.

Have a look through the rest of the drawing code and try to work out what's going on. There are
explanations of how to generate different 2D graphics objects at Cocoa Dev Central:


and in the Cocoa Drawing Guide:


Further resources
There is extensive documentation on Apple's developer pages


but the documents are quite long and technical.

Cocoa Dev Central


has some short introductions to Cocoa, Objective C, C and Quartz with simple examples to work

Macresearch has a series of tutorials designed for scientists


which takes you through some basics of Cocoa programming, looks at Quartz and OpenGL (3D
graphics) and also has topics in parsing data and creating animations.

The best book for learning Cocoa is by Aaron Hillegass


If you have problems in Cocoa or other programming languages


has quite newbie-friendly support.

To top