Brian’s Brain

I Need a Tagline

The Big Picture: Understanding the Pholio Source Code

Download the source, build Pholio, and run it in the simulator or on your iPad. (Or better yet: Buy the program at the App Store!). Spend some time playing with the program to get a feel for how it works.

As you see, Pholio lets you group your photos into galleries. You can drag-and-drop to rearrange galleries. You can also rearrange photos in a gallery. A long press brings up the context menu, which allows for common operations like cut/copy/paste. If you tap in the title bar, you can edit the title of a photo or a gallery. The action menu gives the user the ability to customize Pholio’s appearance.

Now that you know the major functionality of Pholio, where do you find the relevant code?

  • Pholio has a straightforward data model. At the root is the IPPortfolio object. A portfolio contains an array of galleries (called IPSet in the code). Each gallery has an array of pages (IPPage), and each page has an array of photos (IPPhoto). (I originally envisioned having page layouts with more than one photo, which is why IPPage is in the object hierarchy. However, right now, pages never have more than one photo.) All of these objects conform to the NSCoding protocol. The object hierarchy is saved to a file named portfolio in the application documents directory.
  • In terms of screen real estate, the most significant component is BDGridView (.h, .m). This is a subclass of UIScrollView that knows how to present an array of child views in a grid. This class implements the core drag and drop functionality.
  • BDGridView knows how to display and manipulate an “array of things in a grid.” But what are the things? I use the delegate pattern to let me keep BDGridView generic (and hopefully reusable). The delegate of BDGridView provides the views to arrange in a grid. It is also the responsibility of the delegate to implement behavior like cut/copy/paste.

    There are two delegates in Pholio: IPPortfolioGridViewController (.h, .m) and IPSetGridViewController (.h, .m). With the first (IPPortfolioGridViewController), you see all of the galleries for a portfolio. With the second (IPSetGridViewController), the grid shows all of the photos in a gallery/set.

  • When you are looking at a single photo in a gallery, you’re looking at a BDPagingView object (.h, .m). A BDPagingView is a UIScrollView subclass that knows how to display an array of child views that scroll side-to-side one page at a time. Like BDGridView, BDPagingView is a generic class that depends upon a delegate to provide key functionality. In this case, the delegate is IPSetPagingViewController (.h, .m). This class lets you page through the photos in a gallery.

  • All of the delegates I’ve mentioned so far are subclasses of IPEditableTitleViewController (.h, .m). This class implements behavior that is common to my UI no matter what level of the object hierarchy you’re looking at. The first common behavior that I implemented in that class was having the title in the title bar be editable with a single tap, which is how the class got its name. Later, I implemented methods that let all of the UI respond to changes to user settings, like changing the background.

  • Speaking of user settings: If you want to understand how the settings menu works, start with IPSettingsController (.h, .m).

  • Finally, you get images into your portfolio with BDImagePickerController (.h, .m).

There’s a lot more to cover, but this gives you the lay of the land.