sign in sign up
<<
Home , C (programming language), Quartz (graphics layer)

A very simple introduction to , Cocoa and Quartz

XCode is a Mac application provides a programming environment (editor, documentation, project manager, debugger and ) 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 and can also be downloaded for free from the Mac Dev Center after you sign up for a free account.

Cocoa is a which is what 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. is a technology which extends the capabilities of Quartz with extra effects.

ButtonPush

The ButtonPush project makes a simple application that increments a counter each time a button is pushed and displays it in a window. To 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 window contains GUI elements that you can drag onto your window. Search for "Button" and "" (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' title and deselect "Resize" so that the window has fixed dimensions. Press Command- to simulate your interface. You shouldn' 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. the "Object" object in the Library and drag it into the window with MainMenu.xib(English) the . 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 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 strings. These use the % sign to mark positions where you want to insert a variable. % represents an 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 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 -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.

QuartzDraw

This application creates a window containing a graphical View object which displays a range of images generated with 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 :

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

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 , 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: http://cocoadevcentral.com/d/intro_to_quartz/ and in the Cocoa Drawing Guide: http://developer.apple.com/documentation/Cocoa/Conceptual/ CocoaDrawingGuide Further resources

There is extensive documentation on Apple's developer http://developer.apple.com/documentation/Cocoa/ but the documents are quite long and technical.

Cocoa Dev Central http://cocoadevcentral.com/ has some short introductions to Cocoa, Objective C, C and Quartz with simple examples to work through.

Macresearch has a series of tutorials designed for scientists http://www.macresearch.org/cocoa_for_scientists which takes you through some of Cocoa programming, looks at Quartz and OpenGL (3D graphics) and also has topics in data and creating animations.

The best book for learning Cocoa is by Aaron Hillegass http://www.amazon.co.uk/Cocoa-Programming-Mac-OS-X/dp/0321503619/ ref=sr_1_1?ie=UTF8&s=books&qid=1241709583&sr=8-1

If you have problems in Cocoa or other programming languages http://stackoverflow.com/ has quite newbie-friendly support.