Learn Objective-C on the Mac - Mark Dalrymple [73]
Now let’s start working on the table view. We want to lose the Details column (it will typically contain a lot more text than the table view will show anyway), reorder the columns so that the numeric values are displayed side-by-side, and make the Depiction column show an image. Figure 7-7 shows what we’re aiming for.
Figure 7-7. This is what your table view should look like after it’s fully configured.
First, click on the Details column (not the column header, but the space below it) until it’s selected, and then press delete or backspace. That takes care of the unwanted column.
Next, let’s reorder the remaining table columns. Click on the table header until the entire table header area is highlighted with a lightly colored, round-cornered “focus area,” leaving the rest of the window dark. At that point, you can click and drag the table columns to reorder them. Put Name on the left, followed by Power, Divinity, Goodness, and finally Depiction. While you’re at it you’ll want to shrink most of the columns by dragging the small vertical lines that separate the column headers from each other, making each column small enough to just hold the title and no more. Do that for every column except the Name column, for which you should do the opposite: widen it so that it fills up all available space.
Now we’re going to use an NSImageCell to display an image in the Depiction column, similar to what we did with the VillainTracker table view in Chapter 5. Go to the Library window, and type “imagecell” into the search field. Drag the resulting Image Cell over to your window, dropping it on the Depiction table column.
We now need to configure one more thing in order to make the Depiction column actually display images. Remember our earlier discussion about transformers, and the Transformable type used by Core Data? Because depiction is a transformable attribute, its value needs to be converted between what we see in the GUI (an NSImage), and something that Core Data is capable of storing (NSData). We’ll do this by adding NSKeyedUnarchiveFromData to the Cocoa Bindings configuration for this table column. Bring up the Bindings Inspector (⌘4), and make sure that the table column, not the image cell, is selected by clicking in the white space of the column. You’ll see a binding, pre-configured by the assistant that created all these controls, for the column’s Value. Click on the Value Transformer popup list, and choose NSKeyedUnarchiveFromData. That’s it! The Depiction column is now ready to show images.
Now let’s do something about the text fields at the bottom, where the details of the selected MythicalPerson are shown. Currently they’re not in any particular order, so we’ll want to change that. We’ll also want to have something bigger than a text field for the details attribute, and of course we need to have an image view for the depiction attribute. To accommodate a larger text view and an image view, make the MythicalPerson view taller, by first dragging the whole view to the top of the window, then dragging the bottom-center resize handle down to the bottom of the window.
To start off fixing up the lower part of the window, select the text fields for details and depiction, and delete them. We can reuse the labels though, so drag each of them to the bottom of the view to get them out of the way. Now you’re going to rearrange the remaining text fields so that they’re in the order we want. The idea is to select text fields and their labels in pairs, and move them around together, so that they’re in the same order as in the table view: Name, Power, Divinity, Goodness, as shown in Figure 7-8.
Figure 7-8. The text fields, after putting