Creating Interface Builder Palettes with Bindings Support

Introduction

The introduction of Cocoa Bindings back in 10.3 (Panther) was a very well-received addition to
the arsenal of the Cocoa developer, and many of us have begun to use them in our applications
despite the loss of some backward compatibility. Bindings enable us to build applications much
faster than we can without them, and result in much more easily maintained software.

Although Cocoa has an incredible assortment of controls and views for us developers to use when
crafting an application, pretty much every serious Cocoa developer has, at one time or another, had
to create custom views. Sometimes we write custom views of very limited applicability, but sometimes
we create ones that are useful outside of the application they were written for. For the latter
kind, we have the option of creating Interface Builder Palettes out of them, allowing the view to be
easily added to any application's nib file.

Unfortunately, the process of creating a palette, as documented, does not create a palette with
support for bindings. If you open Interface Builder and select an existing palettized view that
you've created, then press ?4 you'll see that the only bindings available to you are the default
NSView bindings of hidden and tooltip. The same is true if you drag a "Custom" view item from the
Containers palette and change its class to your NSView subclass. At first glance, there does not
seem to be an easy way to take advantage of bindings in your custom views.

This month, we're going to walk through the process of creating an Interface Builder palette that
has usable bindings. We're going to create a fairly simple view which draws a gradient. This view
will have two attributes--a start color and a finish color--and we'll create bindings for both of
them. The completed project for this month can be downloaded from the MacTech FTP site.

Setup

Fire up Xcode and select ??N to create a new project, or select New Project... from the File menu.
When the new project assistant window comes up scroll down until you see the category for Standard
Apple Plug-ins, and select IBPalette (figure 1). Name your project MTGradientView. Although it is
generally okay to have spaces in Xcode project names, when using this particular template to create
a new view (as opposed to palettizing an existing view), you should give the project the same name
as the view you plan to create, since the project template is set up to expect that.

Figure 1. Selecting the
IBPalette project template in Xcode.

When the project is open, take a look at it. There's something you should take note of here:
there are two targets to this project, and neither one creates an executable. Since an Interface
Builder palette is designed to be used in multiple applications, the code that makes up the view or
views contained in the palettes get put into a framework and installed in your local Frameworks
directory (~/Library/Frameworks). The additional code and resources that Interface Builder needs,
such as the code and nibs that create the inspector and palette, go into an Interface Builder
palette that gets installed automatically in your local Palettes directory (~/Library/Palettes).
Once you successfully compile a palette project, the palette will become available for your use the
next time you launch Interface Builder.

It's important to understand the way the project is laid out for a couple of reasons. First of
all, if you use the palettized view in an application, any user of your application must have the
framework installed on their machine, or the view will not work. You can handle this in two ways.
Either you can use an installer to install the framework on the user's machine at the same time that
you install the application. The other much more user-friendly and Mac-like way is to embed the
framework right into your application. We'll take a look at how to do that at the end of the
article.

The second reason why it's important to understand the architecture of an IBPalette project
occurs when you want to palettize an existing NSView subclass you've previously written. In that
case, it becomes important to add the class to the correct project target; if you add the NSView
subclass to the palette project instead of the framework project, your plug-in will not work.

Creating a Gradient

Before we code the view, let's create a category on NSColor that will make it easier to draw a
gradient. The code for this category must be included in the framework project. There is no file
template for creating categories, so you can either import the category from the article's project
available on MacTech's FTP site, or use another file template, such as the Objective-C Class or the
Empty File in Project template.

As you see, we're adding a class method to NSColor. This method will create an autoreleased color
based on two existing colors. It will weight the interpolation of the colors based on the last two
parameters. If it's a 10-pixel wide gradient view, and we want the color for the third pixel, we
would pass 3 for the first parameter and 10 for the second, creating a color that is a 30% blend of
one color and 70% of the other. The implementation of the method involves a simple mathematical
interpolation of each of the component of the color and the creation of a new NSColor instance based
on that interpolation.

It's not really important that you understand what's going on in this category in order to
understand how to palettize a view, but this is a handy category to have around.

Creating the Custom View

The project template created an empty subclass of NSView for us already based on the project
name. We know that we need two NSColor instance views, so let's add those to MTGradientView.h, along
with declarations for the mutators and accessors. Creating mutators and accessors whose names
conform to the Key-Value Coding (KVC) naming standard is the vitally important first step in adding
binding support to your view. Fortunately, the KVC naming standard is exactly the same as the
Objective-C instance variable naming convention.

Let's also add the implementations of our accessors to MTGradientView.m. You'll notice that in
both mutators, we've placed a call to [self setNeedsDisplay:YES] because we know that changing
either color of the gradient necessarily changes the appearance of the view:

Nope. In order to create a palette, the view must also implement initWithCoder: and
encodeWithCoder: so that it can be serialized into the nib file. Let's replace the stub
implementations of initWithCoder: and encodeWithCoder: with real ones. Interface Builder is capable
of creating nibs using either an NSArchiver or an NSKeyedArchiver, so we'll add support for both
methods of archiving, even though the use of NSArchiver has been deprecated:

Adding Bindings

We've already done most of the work needed to support bindings in our view, which was to create
KVC-compliant mutators and accessors. There's one other step we need to take in order to let
Interface Builder know what bindings our view supports: We have to "expose" the bindings. This is
done by overriding NSObject's initialize method, which gets called before any objects are
initialized. In that method, we have to call another of our class' class methods named
exposeBinding: for each binding that we want to expose.

Create the Palette

Now that we have a serializable view, we need to create a palette for it. The palette is a panel
that will get added to the Interface Builder palettes (figure 2). Expand the Palette folder, then
inside that expand the Classes folder and single-click on MTGradientViewPalette.h. We need to add an
IBOutlet instance variable so that we can access our view from the palette.

Once Interface Builder is open and ready to go, drag MTGradientView.h over from XCode to
MTGradientViewPalette.nib's main window and then drag MTGradientViewPalette.h over as well. This
will let Interface Builder know about the changes we've made to these two header files. Double-click
the icon called Palette Window to open up the window (if it's not already open). This "window" will
not actually appear as a window, but rather its content pane will become part of the Interface
Builder palette.

Now switch to the Containers palette (figure 3) and drag a custom view (the lower left item) over
to the palette's window. You can make it any size you want, but since it's the only view we're going
to have in our palette, you might as well have it take up most of the space.

Figure 3. The Containers
palette.

Now single-click the custom view you just added and press ?5 to bring up the view's custom class
inspector. Change the selected class from NSView to MTGradientView.

Figure 4. The completed
palette window.

Single-click on the File's Owner icon and change the selected class for the file's owner to
MTGradientViewPalette. Control-drag from the File's Owner icon to the MTGradientView in the palette
window and connect it to the view outlet we created earlier. Save and go back to Xcode. You can
leave Interface Builder open if you want; we'll be back in a few minutes.

In Xcode, single-click on MTGradientViewPalette.m. We have an opportunity, by overriding the
method finishInstantiate, to initialize the parameters of our NSView. This will allow us to dictate
how the view will appear when drawn in Interface Builder. Let's set our view to draw a gradient from
red to blue when displayed in Interface Builder. The project template created a stub implementation
of the finishInstantiate method; go ahead and add the code in bold to the existing stub.

An Inspector

At this point, we could use our palette, provided that we wanted to only use bindings. But we
really should add an inspector to allow the user to change the two color attributes. The attribute
inspector is the floating window that appears when you type ?1 in Interface Builder where you can
set initial values for the currently selected control or item. We'll create an inspector using the
other class and nib file created for us. Single-click on MTGradientViewInspector.h and let's add
IBOutlet methods for the two color wells our inspector will need.

Double-click on MTGradientViewInspector.nib, which should open up in Interface Builder. Before we
proceed, drag MTGradientViewInspector.h from Xcode over to the newly-opened nib window to tell
Interface Builder about our new outlets. Single-click on the File's Owner icon, and press ?5 to
bring up the custom class inspector. Change the File's Owner's class to MTGradientViewInspector.

Next, add two color wells from the Controls palette to the inspector window. You should also add
labels to tell the user which is the left and which is the right.

Figure 5. The completed
inspector window.

Now, we need to connect the two color wells we just added to our inspector's class' NSColorWell
outlets. We can do this by control-dragging from the File's Owner icon to each of the color wells,
connecting them to the appropriate outlet. Also control-drag from the File's Owner icon to the
Inspector Window icon, and connect it to the window outlet. Save and this time, quit right out of
Interface builder before going back to Xcode.

Back in Xcode, single-click on MTGradient ViewInspector.m. In this class, there are two methods
that we need to implement; the project template has already given us stub implementations of both of
them. In the ok: method, we need to take the values from our inspector and put them into the view.
In our case, that means we need to take the colors from the two color wells and provide those values
to our gradient view. In the revert: method, we have to take the attributes from the view and put
them back into the controls. In our case, that means taking the colors from the view and setting the
color wells based on them. Doing this is relatively straightforward code, once you know that you can
get a reference to the view being edited by calling [self object]. You can leave the init method
alone; it is fine just the way the template created it.

Guess what? Our palette is now functional. Go ahead and compile using the MTGradientView or All
target, then open up Interface Builder. In the list of palettes, there should be a new one called
MTGradientView. Select it, and voila! There it is. Isnt' it purty?

Figure 6. The completed
palette in action inside Interface Builder.

You can drag MTGradientViews from the palette onto application windows exactly like you do with
the built-in palettes. You can set the view's initial color values in the attributes inspector and
you can bind both leftColor and rightColor just as you would the bindings of any of the delivered
controls. Pretty cool, huh?

Figure 7. The gradient
view's bindings.

The only real problem with using this view is that the code for producing the view is external to
your application contained in a framework in your home directory. That means that your application
will not work on other machines unless you install that framework on their machine.

Making the Framework Embeddable

The solution to this problem is relatively simple: Make the framework embeddable. Go back to
Xcode and expand the Targets group in the Groups & Files pane. You should see three targets: one for
the MTGradientView, one for the MTGradient ViewFramework, and one called All. Single-click on the
MTGradientViewFramework target, then right-click (or control-click if you're old-school and using a
one-button mouse) and select Duplicate from the contextual menu. This will create a new target
called MTGradientViewFramework Copy; rename it to MTGradientViewFramework Embed.

Because Interface Builder needs access to the framework, we have to keep the original target so
that the framework gets built and installed to the local frameworks directory where Interface
Builder has access to it. But we also want to build an embeddable version that doesn't get
installed. Single-click the new target if it's not already selected, and press ?I to bring up the
target inspector. Click on the Build tab and select deployment on the Collections popup menu.

One of the options under the deployment collection is Skip Install. Click the checkbox next to it
so that it becomes checked. This will stop this target from installing the framework created by this
target. Next, we need to change the value of the Installation Directory to a special value that will
allow it to be embedded. Change it to read @executable_path/../Frameworks (see Figure 8).

Figure 8. The deployment
setting for the embedded framework target.

Drag the new target over onto the All target, which will cause your new target to get built when
someone builds all targets. Now, if you compile with either the new target or the All target and
look in the project's build folder, you will see a new folder called UninstalledProducts. Inside
that folder is the embeddable version of your framework.

Embedding the Framework

You can now create applications that include the MTGradientView functionality right inside the
executable, which means no annoying framework installation for your users. Let's take a look at how
you go about doing this, as it involves a bit more than simply including the framework in your
application project. Create a new project in Xcode using the Cocoa Application project template, and
call it MTGradientViewTester. Once the project is open, right-click on the Frameworks group and
select Add?Existing Frameworks...

When the standard open sheet comes up, navigate to the UninstalledProducts folder of the palette
project's build folder and select the MTGradientViewFramework.framework file. Now, expand the
Targets group and expand the MTGradientViewTester target. You'll see three build phases in there. We
need to add a fourth. Select the MTGradientViewTester Target and select New Build Phase?New Copy
Files Build Phase from the Project menu. Single-click the new build phase that you just added and
press ?I to bring up its inspector.

On the inspector for the build phase, you'll see a pop-up menu called Destination. Change the
value of that pop-up to read Frameworks, which tells this phase to copy its contents to the
Frameworks directory of the application bundle. Now drag the MTGradientViewFramework.framework from
the Frameworks group to this new copy phase. If the drag worked, the name of the copy phase should
change from Copy Files to Copy Files (1).

The End

That's it. The framework is now embedded and you can build deployable applications using the
gradient view we just palettized! And best of all, every time you build your application, it will
embed the most current version of the MTGradient ViewFramework. Go ahead and try adding an
MTGradientView to this application's nib file. Try binding it to variables, and binding NSColorWells
to the same variables. I'm not going to walk you through building the tester application, as it's
pretty straightforward, but in the article's source code available from the MacTech FTP site, I've
included a complete tester app that shows how to use bindings with the custom view we created. The
tester application allows you to change the gradient by changing the left and right color with color
wells.

Jeff LaMarche wrote his first line of code in Applesoft Basic on a Bell & Howell Apple
//e in 1980 and he's owned at least one Apple computer at all times since. Though he currently makes
his living consulting in the Mac-unfriendly world of "Enterprise" software, his Macs remain his
first and greatest computer love. You can reach him at jeff_lamarche@mac.com.

Community Search:

MacTech Search:

Software Updates via MacUpdate

MacFamilyTree 7.3.4 - Create and explore...

MacFamilyTree gives genealogy a facelift: it's modern, interactive, incredibly fast, and easy to use. We're convinced that generations of chroniclers would have loved to trade in their genealogy... Read more

Yummy FTP 1.10.2 - FTP/SFTP/FTPS client...

Yummy FTP is an FTP + SFTP + FTPS file transfer client which focuses on speed, reliability and productivity.
Whether you need to transfer a few files or a few thousand, schedule automatic backups, or... Read more

VueScan 9.5.08 - Scanner software with a...

VueScan is a scanning program that works with most high-quality flatbed and film scanners to produce scans that have excellent color fidelity and color balance. VueScan is easy to use, and has... Read more

Iridient Developer 3.0.1 - Powerful imag...

Iridient Developer (was RAW Developer) is a powerful image conversion application designed specifically for OS X. Iridient Developer gives advanced photographers total control over every aspect of... Read more

Air Video Server HD 2.1.0 - Stream video...

Air Video Server HD streams videos instantly from your computer on your iPhone, iPad, iPod touch or Apple TV. No need to worry about converting or transferring files.
We took everything that was... Read more

Duplicate Annihilator 5.7.5 - Find and d...

Duplicate Annihilator takes on the time-consuming task of comparing the images in your iPhoto library using effective algorithms to make sure that no duplicate escapes.
Duplicate Annihilator... Read more

BusyContacts 1.0.2 - Fast, efficient con...

BusyContacts is a contact manager for OS X that makes creating, finding, and managing contacts faster and more efficient. It brings to contact management the same power, flexibility, and sharing... Read more

Capture One Pro 8.2.0.82 - RAW workflow...

Capture One Pro 8 is a professional RAW converter offering you ultimate image quality with accurate colors and incredible detail from more than 300 high-end cameras -- straight out of the box. It... Read more

Backblaze 4.0.0.872 - Online backup serv...

Backblaze is an online backup service designed from the ground-up for the Mac.With unlimited storage available for $5 per month, as well as a free 15-day trial, peace of mind is within reach with... Read more

Little Snitch 3.5.2 - Alerts you about o...

Little Snitch gives you control over your private outgoing data.
Track background activity As soon as your computer connects to the Internet, applications often have permission to send any... Read more

It seems like this month has been pretty big for wrestling. First Wrestlemania, then 2K has announces that they're releasing WWE 2K for iOS. It's a simulation-based WWE game where you'll get to play with several WWE superstars such as John Cena, ... | Read more »

How the Apple Watch Could Change the Fac...

The Apple Watch is still a ways out, but my previous musings on the wearable’s various features got me thinking: what might it be like a year after launch? Two years? Five years? What if it becomes a symbiotic part of the iOS framework to the point... | Read more »

Pie In The Sky: A Pizza Odyssey (Games)

Pie In The Sky: A Pizza Odyssey 1.0
Device: iOS Universal
Category: Games
Price: $2.99, Version: 1.0 (iTunes)
Description:
A game about delivering pizza. In space.
| Read more »

Chosen Gives Hopeful Singers, Songwriter...

If YouTube videos and reality TV shows like The Voice have taught us one thing, it’s that there are a lot of people out there who are anxious to show the world their talents. And if they’ve taught us a second thing, it’s that there’s an almost... | Read more »

Android's Popular OfficeSuite Now A...

Once only available for Android devices, OfficeSuite has finally landed on the app store. The Mobile Systems app lets you view, edit, create, and share Word, Excel, and PowerPoint documents as well as convert them to/from PDFs. It's touted as being... | Read more »

Warhammer: Arcane Magic is Coming Soon,...

Turbo Tape Games has announced that they're joining forces with Games Workshop to bring the turn-based strategy board game, Warhammer: Arcane Magic, to life on the iOS.
| Read more »

Fast & Furious: Legacy's Creati...

| Read more »

N-Fusion and 505's Ember is Totally...

| Read more »

These are All the Apple Watch Apps and G...

The Apple Watch is less than a month from hitting store shelves, and once you get your hands on it you're probably going to want some apps and games to install. Fear not! We've compiled a list of all the Apple Watch apps and games we've been able to... | Read more »

Appy to Have Known You - Lee Hamlet Look...

Being at 148Apps these past 2 years has been an awesome experience that has taught me a great deal, and working with such a great team has been a privilege. Thank you to Rob Rich, and to both Rob LeFebvre and Jeff Scott before him, for helping me... | Read more »

Price Scanner via MacPrices.net

Adobe Brings Powerful Layout-Design Capabilit...

Adobe today announced the availability of Adobe Comp CC, a free iPad app that enables rapid creation of layout concepts for mobile, Web and print projects. With Comp CC, designers can rough out and... Read more

Apple offering refurbished 27-inch 5K iMacs f...

The Apple Store is offering Apple Certified Refurbished 27″ 3.5GHz 5K iMacs for $2119 including free shipping. Their price is $380 off the price of new models, and it’s the lowest price available for... Read more

16GB iPad mini on sale for $199, save $50

Walmart has 16GB iPad minis (1st generation) available for $199.99 on their online store, including free shipping. Their price is $50 off MSRP. Online orders only.
Read more

The Apple Store has Apple Certified Refurbished 13″ 2.6GHz/128GB Retina MacBook Pros available for $979 including free shipping. Original MSRP for this model was $1299.
Read more

Save up to $600 with Apple refurbished Mac Pr...

The Apple Store is offering Apple Certified Refurbished Mac Pros for up to $600 off the cost of new models. An Apple one-year warranty is included with each Mac Pro, and shipping is free. The... Read more

Samsung Galaxy S 6 and Galaxy S 6 edge U.S. P...

Samsung Electronics America, Inc. has announced the Galaxy S 6 and Galaxy S 6 edge will be available in the U.S. beginning April 10, with pre-orders being accepted now.
“We have completely reimagined... Read more

13-inch 2.5GHz MacBook Pro (refurbished) avai...

The Apple Store has Apple Certified Refurbished 13″ 2.5GHz MacBook Pros available for $829, or $270 off the cost of new models. Apple’s one-year warranty is standard, and shipping is free:
- 13″ 2.... Read more

MacTech is a registered trademark of Xplain Corporation. Xplain, "The journal of Apple technology", Apple Expo, Explain It, MacDev, MacDev-1, THINK Reference, NetProfessional, Apple Expo, MacTech Central, MacTech Domains, MacNews, MacForge, and the MacTutorMan are trademarks or service marks of Xplain Corporation. Sprocket is a registered trademark of eSprocket Corporation. Other trademarks and copyrights appearing in this printing or software remain the property of their respective holders. Not responsible for typographical errors.

All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.