About 2 years ago R. Tyler Ballance went to BarCampTexas and, finding himself with no place to stay, holed himself up in a coffee shop for the night and knocked up a demo application Bonsoir in about six hours.
When this app is running, it uses Apple’s Bonjour service to find other running Bonsoir apps on the network and allows swapping of AddressBook cards. The idea is that it would be useful at get togethers such as BarCamp for people to swap contact details.
This code has been placed into the public domain but it doesn’t look like anybody is working on it. So I’ve put the code up on github and I’ll see if I can’t make this a more polished app.
Actually, this is prompted a little by guilt. I was looking through my iChat transcripts the other day and I said I’d do some work on it - and that was back in 2006.
The first part of this demonstration will create an application that draws a predefined curve in a window that is not re-sizeable. The idea is to get a simple working version up and running in the first place which can then be built upon.
Create the Project
In Xcode, create a new project of type “Cocoa Document-based application”. Save it wherever you like and call it SOBezier. The only project setting that needs to be set is to make sure that Garbage collection is turned on.
MVC Classes
Cocoa makes extensive use of the Model-View-Controller (MVC) paradigm. Model objects are responsible for the data or state of the application. View objects are responsible for displaying the data and the Controller objects keep the two in sync. For this basic application, the model class is SOBezierCurve, a subclass of NSObject, which contains the points of the curve and also knows how to draw itself. The view class is SOBezierView, a subclass of NSView, in which the curve is drawn. These are co-ordinated by the MyDocument class, a subclass of NSDocument, which is the controller.
SOBezierCurve - the model
From the Xcode File menu, choose New File and then select a Cocoa Objective-C class. Call this SOBezier curve. This will create the header and the implementation files. Edit them to look like these code listings.
Here, the four points that define the curve are declared and I am using the Objective-C 2.0 @property syntax to make these properties. Two methods are declared. First, an initialiser that creates the curve based on the four points being passed in, and a method that draws the curve.
- (void)drawCurve
{ NSBezierPath *path = [NSBezierPathbezierPath]; // Move to the first control point [path moveToPoint:ControlPt1]; // Add a line from the control point to the first point of the curve [path lineToPoint:pt1]; // Create the curve [path curveToPoint:pt2 controlPoint1:ControlPt1 controlPoint2:ControlPt2]; // Draw a line from the end of the curve to the second control point [path lineToPoint:ControlPt2];
// Now draw the curve [[NSColorblackColor] set];
[path stroke];
}
@end
The initialiser just sets the points of the curve to the points that are passed in. the @sythesize directive lets Objective-C 2.0 create accessors for the properties that are Key Value Coding (KVC) compliant.
The DrawCurve: method is responsible for drawing the curve represented by these points. This is where the terminology becomes confusing with the term ‘bezier’ appearing everywhere. The NSBezierPath class is used extensively in Cocoa graphics, (which is why it is so easy to draw bezier curves), so to draw the curve a series of bezier paths are linked together as a single path and then drawn on the view by stroking this single path.
SOBezierView - the view
This class needs to be creates as we did with the SOBezierCurve class. From the Xcode File menu, choose New File and then select a Cocoa Objective-C NSView subclass. Call this file SOBezierView. This will create the header and the implementation files. Edit them to look like these code listings.
This class doesn’t do much at the moment so it is quite small. The interface file just declares an outlet called doc to the controller, which is the MyDocument object in this case.
The implementation file only has two methods, both of which come from the superclass so they don’t need to be declared in the header file.
The initWithFrame: method is where the initialisation code will go. But the important method is the drawRect: method which is invoked whenever the view needs to draw itself.
The first thing that the drawRect: method does is set the colour to be used and then calls the NSBezierPath fillRect: method to fill the entire view window with this colour. The rect paramater that is passed into the drawRect: method is the rectangle that is ‘dirty’ and needs to be redrawn, but to keep things simple, this implementation just fills in the whole view. If the view was drawing a number of curves, this dirty rectangle could be used to determine which curves are within this rectangle and the drawing code could be optimised to only draw those curves. The method then uses the outlet to the MyDocument object outlet doc to access curve object which is then asked to draw itself.
MyDocument - the controller
The MyDocument class was created by Xcode as part of the project.
Edit the header file so that it looks like this listing.
The curve attribute is declared as a pointer to an SOBezierCurve object.
This attribute is declared as a property.
The MyDocument.m file contains a lot of generated code. For now the only changes need to be made to the beginning of the file. Edit the code so it looks like this listing.
Import the header file for the SOBezierCurve class.
This creates KVC compliant accessors for the curve attribute.
The init method, called when the object is created, sets up the points to be used for the default curve and then creates an SOBezierCurve object with these points.
Create the User Interface
Here’s a short screencast of how the UI is created. (If a picture is worth a thousand words, how many more is a video worth?).
Once that is done, you can click build and go to see a simple bezier curve drawn on a yellow background. Not very interesting so far, but it’s a good starting point.
Next Steps
The next step will be to add handles to the points so they can be moved around the view causing the curve to change.
Finally, thanks for your attention and I’d appreciate any comments you have, particularly about things you don’t like, so that I can improve this demonstration.
Resources
You can get the source code up to this point from the project’s git repository here. A checkout of the Stage1_1 tag will get the code up to this point.
Alternatively, you can download a zip file of the completed version up to this point here: SOBezier_01.zip (60 kb)
I am going to start a series of tutorials that will build a basic Mac application that draws and manipulates bezier curves. Following the example of the Hillegass book I am going to be building the application up bit by bit; adding functionality in stages. Although the sample code available on the Apple site and elsewhere on the net is quite detailed, it is sometimes hard to see how an application can be built up in small steps.
Because I am a fan of version control, and also because it can show the stages that the application is built up in, the git repository is available online, but if you don’t have (or want to use) git, I’ll also have zip files of the project as it goes along.
The screen shot looks a little dull right now, but I am planning to have support for preference panes, changing the curve, undo/redo, printing, archiving, and copying amongst other things.
Also, if there is enough support for it, I might screencast some of the stages.
