QuartzTutorial01

QuartzTutorial01

NOTE: Click on the images to enlarge them so you can see what is happening.

The first thing you need to do is create a new project. I will assume you have the latest XCode installed, and even the latest OSX. As it’s a free upgrade, there is really no need to be struggling along with increasingly outdated software. That includes especially the operating system.

So, to create a new OSX project, open XCode and begin a new project. If you are just developing for your own desktop at this stage – learning in other words – don’t bother worrying about having to have a Developer Account with Apple. It is free to set up so you can access documentation, but not necessary at this stage. If you want to set one up, go to the Apple Developer site, and follow the prompts.

So, in XCode, select File -> New -> Project. You will get a screen like this. You did select OSX, and not iOS in this first screen didn’t you?

Opening screen to create a new OSX Project
Opening screen to create a new OSX Project

Click Next, and move to the next screen. It will ask where you want to save the new project.

You should end up with your newly created Project, stored in it’s own directory, looking a lot like the one in Image 2.

I like to keep all my work in a sub folder of Documents called .. XCode Projects. Easy to keep track of, and back up.

Remember the name you gave your Project. It does become important in just a little while for reasons not obvious just now.

QuartzTutorial01-02
You can leave everything pretty much as it is in the default settings

Notice the three yellow folders, marked Linked Frameworks. You will need these later, so for now, add them in by clicking on the + sign, and locate the correct framework, and add it in. you can begin typing the name in the text bar after you click the + sign.

QuartzTutorial01-03

 

You now have a blank “template” if you like. You can even run it, but all you will have is a blank screen. Not very impressive, but a good start. You need it, because there is no other way.

Now we need to add a blank canvas if you like, on which to Draw. Remember, this is a drawing tutorial. In fact, if you want this app to do anything, you will need to start adding things from now on.

Now I would suggest looking carefully at what you have so far. Look carefully at the file list in the left side and note the file names.

QuartzTutorial01-05

What do you see? Ah Ha… There are two files there that you don’t have. Can you see them? Called QuartzDrawingView.h and QuartzDrawingView.m. These are our blank drawing canvas control files. Lets have a look at the Introduction from the Apple documentation here:

The Page

Quartz 2D uses the painter’s model for its imaging. In the painter’s model, each successive drawing operation applies a layer of “paint” to an output “canvas,” often called a page. The paint on the page can be modified by overlaying more paint through additional drawing operations. An object drawn on the page cannot be modified except by overlaying more paint. This model allows you to construct extremely sophisticated images from a small number of powerful primitives.

The link to the documentation is here. It will open in a new page, so you won’t lose your place.

Now this gets a little complex here. So take your time. If you make a mistake, delete it and start again. There’s plenty of time.

Firstly, you need to drag a custom view onto your “blank” screen. Let’s have a look at this. From that list of files, highlight the one called MainMenu.xib. This is the file that controls what you see on the computer screen. Have a close look at the image below, and you will see that I have created a “blank” project, called B as it’s only temporary. In that screen you can see that I have highlighted MainMenu.xib, and also the word
Window – B in the next column. You can now see the blank canvas, and to the right of that, the objects column, where you can see the list of useable objects beginning with Push Button. The one we want is called Custom View. In the little text bar right at the bottom, type in Custom View, and presto, it will find it for you.

QuartzTutorial01-06

QuartzTutorial01-07

 

Drag an instance of the Custom View onto the blank canvas, and you will have an image that looks a lot like this,

QuartzTutorial01-08

 

Make sure you centre it by dragging it so the cross hair blue dashed lines are both vertical and horizontal.

This little canvas could in fact be placed anywhere on the screen. That bigger screen represents your computer monitor, and as you now know, it’s quite big. So in fact you can put that little custom view almost anywhere on that screen, and that’s where you will see it appear when you test run your app. you can resize it to fill the entire screen as well if you like. But for the moment, lets leave it as it is. We need to add the two control files that will allow us to draw something inside that Custom View. You can run the app again if you like, but sill – you will see nothing. Why? Well, you have not only not drawn anything in that page, you haven’t told the MainMenu.xib to even display it. So let’s do that.

Firstly, highlight the top level name in your list of files. Like this.

QuartzTutorial01-09

Now, in the top tab menu, select File -> New -> File, and select Cocoa-C Class. Like this
QuartzTutorial01-10

Click Next, and you will be presented with this screen. This is where you give your two files their names. Remember, the two files you don’t yet have. This is what creates them. So go ahead and name them. In our case, if you are following along, QuartzDrawingView, Now don’t get confused. As they say, “Here’s one I did earlier”, which is my QuartzTutorial01 version. I’m also as I write this tutorial, building one just for you called B, until I get t0 the stage where my original – QuartzTutorial01 – is at the same level as “B” – Not too confusing I hope. Just call yours QuartzDrawingView. Don’t call it B. You should note that the Name of the files is NOT the same as the app name. The app is named QuartsTutorial01, and the two Class files you are creating now are called QuartzDrawingView – to remind you that you will “view” your drawing in the CustomView controlled by them.

I called my Class files QuartzDrawingView, as you can see in the screen shot. You should do the same. The SubClass ( very important this ) should be set to NSView. It may be something else when you first open it, but change it to NSView.

Be careful not to type View twice. XCode has already placed the word View in the text field. Just add QuartzDrawing to it.

QuartzTutorial01-12

Ok, are you with me? Good. Do NOT select the tick box, “Also Create XIB File”, we don’t want an xib file at this point in time for this tutorial.

Click Next. You will be presented with a set of Save options. Just press Create.

You will see your new files appear in the File list, in the File Inspector column.

QuartzTutorial01-09

 

Now, even if you Run the app – you still…. won’t see anything appear. Go ahead, you know you want to.

QuartzTutorial01-13

What…. how long does this take? Phew! Ok, now for a little bit of code. Oh yea. Here we go. …. almost.

Do you remember when you dragged  the Custom View into the MainMenu.xib? Look on the right hand side, and you will see that it’s Class is the default. NSView. That’s no good to us, we are very class conscious in this town! See here QuartzTutorial01-14

So the solution is simple. We need to tell the MainMenu.xib that we want it to open the Class that we are preparing for Drawing, and that Class is QuartzDrawingView. So where it says Class [ NSView   ], change that to Class [ QuartzDrawingView ] Too easy.

Your whole thing should NOW look like this. (Remember, make sure the Custom View box is highlighted, not just the MainMenu.xib. We do not want that to be called a different class! Oh No…. You can see the little dots, and the dotted line surrounding the Custom View, telling you that it is selected. Now change the class name to QuartzDrawingView.

QuartzTutorial01-15
See how the Class is now set to QuartzDrawingView. The same as the two files you created (Class files)

Ok, run the app. Still nothing …. well colour me crazy… what do I have to do here to get something on the screen!!! I have to tell it to draw something is what. So lets do it. We need to make some simple changes to both QuartzDrawingView.h and .m files.

Highlight the QuartzDrawingView.h file, and change it to this. (Add the single line in the middle)

QuartzDrawingView.h

#import <Cocoa/Cocoa.h>
@interface QuartzDrawingView : NSView

- (void) drawRect:(NSRect)frame;

@end

 

Now, in yourQuartzDrawingView.m file, change the contents to this


#import "QuartzDrawingView.h"

@implementation QuartzDrawingView

- (id)initWithFrame:(NSRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code here.
}
return self;
}

- (void)drawRect:(NSRect)frame
{

[[NSColor redColor] set];
[NSBezierPath fillRect:frame];
// Drawing code here.
}

@end

Now, run the app – and PRESTO. You have a red rectangle. WooHoo.

QuartzTutorial01-16
The Big Red Rectangle

Study that code carefully. It’s really simple, but really important because it is the most basic drawing statement, but the foundation of it all.

So, the end of Tutorial 1. We have success.

Don’t forget to close all those other browser windows you still have open ….

Where to go from here? You know what I suggest. I suggest you repeat this tutorial at least once a day for a week, so you become totally familiar with the sequences. These are some of the BASIC building blocks of nearly any app you may build.

Next, we are going to enhance that red rectangle, and make it look like the one in the Apple documentation. Should be easy yes?
Well, wait for Tutorial 2, coming to a theatre near you soon, where we will enhance this little exercise and make it look like the Apple sample. From there, it is my intention to try and work through the documentation to see what we can all achieve together over tne next few months.

QuartzTutorial01-17
Isn’t that just the prettiest thing you have ever seen …

Best of programming.

Robert Chalmers.
Author, Writer, Programmer, TESOL.

@ShanghaiTimes

 

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA * Time limit is exhausted. Please reload CAPTCHA.