Journal, Mac Journaling by TWC

Journal Tutorial

This tutorial teaches how to program version 1.1 of Journal on your own! At the moment, the tutorial is a work-in-progress, with new segments being posted all the time. Stay tuned for updates!

Intended Audience:

Mac OS X Programmers, and those that wish to become such.

Required Knowledge:

Object-Oriented Programming, Objective-C, Familiarity with Xcode tools (Project Builder, and Interface Builder)

A. Getting Started

Create a new project in Xcode. Make sure that you select "Cocoa Document-based Application" from the menu.
Name the project something appropriate and click Finish.
Right click on "MyDocument.h" and rename it to "JournalDocument.h".
Right click on "MyDocument.m" and rename it to "JournalDocument.m".
We now need to rename the MyDocument.nib file, however, Xcode won't let us do that from the main window. So, navigate to the project directory in Finder and rename the "MyDocument.nib" file to "JournalDocument.nib".
Delete the MyDocument.nib file from the Xcode main window.
Add the JournalDocument.nib file into the project and move it into the Resources group.
Open the "JournalDocument.h" and "JournalDocument.m" class files and replace all occurrences of "MyDocument" with "JournalDocument".
Open the Info.plist file and change,
to
Click the "Build and Go" button in Xcode to compile and confirm that you have correctly renamed all the strings. Press Apple-N a few times to make a few new windows, and explore the glory of the "comes-for-free" that is Cocoa programming.

B. Interface Building

Open Interface Builder by double-clicking on the JournalDocument.nib file in the Xcode Project window.
Click on the NSTextLabel that says "Your document contents here" and delete it.
Make the window larger by dragging the bottom right corner down and to the right, until it's a nice size.
From the Library window Drag a NSSplitView object into the window, and resize it to fit the entire window exactly.
Make sure the Inspector Window is on screen. You can access it by choosing Tools->Inspector from main menu.
Select the NSSplitView you just added, and then select the ruler icon from the Inspector window. Under the "Autosizing" header make all of the red dashed lines solid, by clicking on them. This will set the NSSplitView to automatically resize when the user drags the corner of the window.
Drag a NSTextView object from the Library into the right side of the NSSplitView and resize it to fully fit within the view. Then set the autosizing for the NSTextView as you did for the NSSplitView in the previous step.
Drag a NSOutlineView object from the Library into the left side of the NSSplitView and resize it to fit, and set the autosizing. You should now have an interface that looks like:
Select the NSSplitView object (the easiest way I find is to click on the divider). Rescale the NSSplitView so that there is some space for buttons at the bottom.
Pick your favorite button style (I like Rounded Textured Button) and place it under the NSOutlineView object in the space that was just created. From the ruler pane of the Inspector window change the size to Small.
From the Media pane of the Library window drag the little "+" image and drop it one the newly created button. Resize the button so it looks nice. You will now have a window that should look similar to this:

All the objects that we need are now in our window, and we have a great start to our user interface. Now to get that iTunes-like look and feel we need to do a little tweaking to our subviews.

C. Tweaking the User Interface

The following steps are not necessary to make the Journal program work, but they do add some nice consistency for the user. This tutorial was actually prompted because I couldn't find any other tutorials out there that went through how to replicate the iTunes interface. While Journal is by no means as sophisticated as iTunes, I think the interface matches the UI paradigm nicely.

Caveat: Some of the following may not be the best way to do this. If you know of a better way, please please email me!