Search code examples
cocoauser-interfaceviewcontrollerscocoa-design-patterns

Is there a standard, documented, development pattern to create UI layouts similar to iTunes, iCal, iPhoto, etc?

I am new to Cocoa development and I am trying to create UI layouts using what I consider to be the "standard" layout that is shared by apps like iTunes, iCal, iPhoto, Billings, 1Password, Numbers, Delicious Library, etcetera. This typical layout can be described as follows:

  • A "Library" panel on the left side of the screen, usually meant for discovering hierarchies. This panel usually covers about a fourth of the horizontal space.
  • A "Main" panel to the right of the Library panel on which most of the UI interactions take place. This takes the remaining horizontal space and is where we find things like the monthly calendar view in iCal, or the tile of album art and playlists in iTunes.
  • Some "Utility" panel on the bottom-left corner of the screen, usually for things like additional options.

Is there a documented pattern that will show best practices on how to "wire" the View and Controller classes for these types of layouts? For instances, how many ViewControllers to use, whether or not using an NSDocument-based approach makes sense, some common pitfalls, etcetera? This layout is so prevalent, that I am surprised that there doesn't seem to be any good reference on it.

Update: I forgot to mention that I have access to the Apple Developer site, and while I can find the library reference for the different classes in Cocoa, I cannot seem to find a good reference for how to bring it all together in the layout I describe.

Books like Aaron Hillegass' and others out there are great to learn the basics on Cocoa and creating simple interfaces (a few controls laid out on an view connected to an NSDocument), but not so great at guiding you to the UI layout I describe.

Thanks.

Solution

  • The hierarchical view on the left is called a Source View and you would normally create this with the NSOutlineView class.

    Have a look at Apple's SourceView sample code. It implements a source view very similar to the one in the Finder and elsewhere and should give you a big head start.