In this episode I will show you how to bind a Table View to an Array Controller in Cocoa, using Xcode 5.1 and OS X Mavericks.
We’re using Core Data to save our entries and – check it out – we’re not writing a single line of code!
Cocoa Bindings is one of the most exciting features in OS X development for me, and I hope that one day it’ll find its way into iOS too.
The project is also available on GitHub:
I’ve written more about how to do this here:
Podcast: Download (Duration: 17:07 — 15.7MB)
Watch the full course in one convenient playlist:
Catch this episode on my iOS Dev Diary Podcast:
I was excited to find out that it is possible to write a Mac App with Core Data completely without code! This magic is possible with something that’s not available in iOS (yet) called Cocoa Bindings.
You provide the user controls you need in Xcode, then control-drag your way to extensive functionality and happiness. Before I forget, I thought I’d better make some notes.
Here’s a step-by-step list:
- Using Xcode, create a new Mac Cocoa Application with Core Data
- Setup your entities and properties in your Core Data Model (.xcdatamodeld)
- Create relationships between Entities if desired
- Select all Entities and create custom classes from them (using Editor – create NSManagedObject Subclasses)
Drag our friend the Array Controller onto the Object’s Bar. If you have multiple Entities, you need a separate Array Controller for each one. Change the labels to tell them apart (select a different file and go back to the xib in order for those labels to be visible – it’s a bug in Xcode).
Now bind the Array Controller and Core Data Managed Object Context together:
- Select your Array Controller, then go to the Bindings Inspector (second from the right)
- Under Parameters, head over to the Managed Object Context and bind to the App Delegate (as that’s where Xcode has kindly prepared our Core Data stack)
- In Model Key Path, type self.managedObjectContext (this should self complete)
- In the Attributes Inspector, tell the controller that we’re using an Entity instead of a Class, then enter the Entity (it’s the one you’ve created in the data model)
- While you’re here, tick the “Prepares Content” check box if you want the table view to be populated automatically
Add a Table View to your window and bind it to the Array Controller:
- Select the Table View (inside the Scroll View) and head over to the Bindings Inspector
- Under Table Content, select Bind To your Array Controller
- Now select the actual Table Column you want to fill with data, and still inside the Bindings Inspector under Value, bind the column to your Array Controller
- In the field for Model Key Path, type the attribute/property you’d like to see in this column (you’ve defined this in the data model)
- Repeat the process for each column you want to fill with data
To add data to your table:
- Add a couple of Gradient Buttons to your window
- Make one the “Add” and one the “Delete” button
- Hook up each button to the Array Controller via control drag, selecting add and remove respectively
Congratulations: You’ve just created an editable Table View, hooked up to Core Data without a single line of code!
Let’s create a functional SAVE menu item
If you quit the app (rather than running it again from Xcode), all your data will save. However we can implement a manual save action with ease. The menu item itself is there by default, all we need to do is hook it up to the App Delegate and bind it to the save function.
In the Object Sidebar, select Main Menu, then select File – Save (which will expand the item in the sidebar too). From the save menu option, control drag to the App Delegate and select saveAction.