if (programmer == ramble) [self blog]

Single binding for calcuated values

Scott Andrew — Sun, 01 Aug 2010 06:37:43 +0000

One of the tricks I have recently learned was how to bind a single object to multiple properties to create a calculated binding. This comes in handy if you have a field that or an image that relies on the value of more than one property and you would rather use bindings than manage the calculated field by watching for values being changed by delegates or notification.

The key to doing this is to define a getter for the calculated value and a keysForValuesAffecting function to define what keys affect the value.

In this sample app we will create a first name, middle name, and last name field. The static full name field will display the full name as it is typed. There is also a light that will be green when we have both a first name and a last name and red if we don’t. The sample app looks like:

The KeyPathsForValuesAffecting sample project can be downloaded here.

What is going on..

When you define a binding for a key path that doesn’t exist in an object, cocoa will call keysForValueAffecting on the class. This allows the user to define what keys are going to affect the getter we are going to supply. The function name requires the name of the getter at the end of the function name. So in our example we have a getter defined as “fullName,” we also supply a keysForValueAffectingFullName class function that will tell cocoa we want the first, middle and last name fields.

Create new project

Select New Project from the file menu or press Shift+Command+N
Select “Cocoa Application” press “Choose..”
Name the project KeyPathsForValuesAffectingDemo and press ok.
Once the project is created add the readimage.png and greenimage.png that are in this zip file.

Edit the MainWindow.xib

The next steps is to add our controls and bind their values to our application controller. To open interface builder double click on the MainWindow.xib item, usually found in the resources folder.

Once interface builder is open you will want to double click the main window to edit it. Once the window is open add your text fields, edit fields and an image field. It should look similiar to this:

Binding the controls

Now we need to bind each control. We haven’t written the code yet, but lets get it done while we are in here.

We want to bind our our “First Name” text field to the firstName property in our application delegate. We also want to make it update as as the value changes not when the tab key is hit. So to do that follow the following steps:

Select the “First Name” edit field
Select the “Bindings” tab in the inspector or press command+4.
Expand the “Value” category.
Select the “Key Paths For Values Affecting Demo App Delegate” from the “Bind to:” popup.
Select the checkbox next to the “Bind to:” popup.
Set the “Model Key Path” to self.firstName
Check the Continuously Update Value box

Next we need to setup our “Middle Name” field in the same way:

Select the “Middle Name” edit field
Select the “Bindings” tab in the inspector or press command+4.
Expand the “Value” category.
Select the “Key Paths For Values Affecting Demo App Delegate” from the “Bind to:” popup.
Select the checkbox next to the “Bind to:” popup.
Set the “Model Key Path” to self.middleName
Check the Continuously Update Value box

We then need to bind the “Last Name” field as we did the last two:

Select the “Last Name” edit field
Select the “Bindings” tab in the inspector or press command+4.
Expand the “Value” category.
Select the “Key Paths For Values Affecting Demo App Delegate” from the “Bind to:” popup.
Select the checkbox next to the “Bind to:” popup.
Set the “Model Key Path” to self.lastName
Check the Continuously Update Value box

We added a field to show our full name. We need to bind that to our fullName key path.

Select the text field to dislay the full name.
Select the “Bindings” tab in the inspector or press command+4.
Expand the “Value” category.
Select the “Key Paths For Values Affecting Demo App Delegate” from the “Bind to:” popup.
Select the checkbox next to the “Bind to:” popup.
Set the “Model Key Path” to self.fullName

Lastly we need to setup our light image.

Select the image
Select the “Attributes” tab in the inspector or press command+1
Set the image to “redlight”.
Set the border to “None”.
Set the scaling to “None”.
Press command+= to make the view as big as the image.
Align the image until it looks good.
Select the “Bindings” tab in the inspector or press command+4.
Expand the “Value” category.
Select the “Key Paths For Values Affecting Demo App Delegate” from the “Bind to:” popup.
Select the checkbox next to the “Bind to:” popup.
Set the “Model Key Path” to self.statusLight

Save the xib file and go back to XCode.

KeyPathsForValuesAffectingDemoAppDelegate.h

We need to add first, middle and name NSString instance variables to our class. These are each properties that we will set with our bindings. We also will add two NSImage instance variables to our header to hold our green and red light images.

@interface KeyPathsForValuesAffectingDemoAppDelegate : NSObject {
NSWindow *window;

NSString* firstName;
NSString* middleName;
NSString* lastName;

NSImage* redLight;
NSImage* greenLight;
}

@property (readwrite, copy) NSString* firstName;
@property (readwrite, copy) NSString* middleName;
@property (readwrite, copy) NSString* lastName;

@property (assign) IBOutlet NSWindow *window;

@end

KeyPathsForValuesAffectingDemoAppDelegate.m

The first thing we need to add to our implementation are the synthesizers for firstName, middleName and lastName.

@synthesize firstName;
@synthesize middleName;
@synthesize lastName;

We don’t want to forget to release things in our dealloc.

-(void) dealloc {
[firstName release];
[middleName release];
[lastName release];
[redLight release];
[greenLight release];

[super dealloc];
}

Here is where the magic starts to happen. We need to tell cocoa what key affects our value for fullName. So we need to implement the keyPathsForValuesAffectingFullName. What we need to return is a set with the key paths to our first name, middle name, and last name so our getter get’s called anytime these values are changed.

+(NSSet*) keyPathsForValuesAffectingFullName {
return [NSSet setWithObjects:@"self.firstName", @"self.middleName",
@"self.lastName", nil];
}

Now we can implement our fullName getter. This basically will just create our full name string from the first, middle and last names. This will get called anytime the first, middle or last name changes.

-(NSString*) fullName {
NSMutableString* string = [NSMutableString string];

if (firstName != nil)
[string appendString:firstName];

if (middleName != nil) {
if (firstName != nil)
[string appendString:@" "];

[string appendString:middleName];
}

if (lastName != nil) {
if (firstName != nil || middleName != nil)
[string appendString:@" "];

[string appendString:lastName];
}

return string;
}

We have also added one for the status light. The light will be green if both the first and last name are not nil, red if anyone of them are nil. So first thing we do is setup the key paths that affect the light.

+(NSSet*) keyPathsForValuesAffectingStatusLight {
return [NSSet setWithObjects:@"self.firstName", @"self.lastName", nil];
}

Now we return the appropriate image depending on the state of the first and last name.

-(NSImage*) statusLight {
NSImage* image = nil;

if (firstName == nil || lastName == nil) {
if (redLight == nil)
redLight = [[NSImage imageNamed:@"redlight.png"] retain];

image = redLight;
}
else {
if (greenLight == nil)
greenLight = [[NSImage imageNamed:@"greenlight.png"] retain];

image = greenLight;
}

return image;
}

Conclusion

keyPathsForValuesAffecting unlocks a lot of possible ways to use bindings beyond the usual one key path per-binding. This is a simple example of how to bind to a calculated value that is completely controlled by code. The other nice thing about this is that it is category friendly, so you can easily extend an object to support a calculated binding.

Download sample project is here.

NSXMLElement & NSXMLNode categories to share.

Scott Andrew — Fri, 01 Jan 2010 19:37:01 +0000

I have been working on an application that uses NSXML classes to parse HTML sites and massage them for use as an eBook. I created a couple of handy categories for NSXMLElement and NSXMLNode to make my life easier.

NSXMLNode

I found that when doing XPATH searches through the source. I usually was only looking for one node (or the first node in the search). So i created a simple helper function:

-(NSXMLNode*):singleNodeForXPath:(NSString*)xPath error:(NSError**)error

This is simple wrapper around the nodesForXPath call that returns the first node found in the search path. If no items are found then it returns nil. If multiple items are found it returns only the first one.

The other call is:

-(NSString*) stringValueForNodePathAtXPath:(NSString*)path error:(NSError**)error

This simply returns the string value for the first node found in an xPath search.

These just provide a simple way to do a quick search and return the first items found.

NSXMLElement

Since i am reconstructing elements and possibly manipulating the tree, I needed a way to do a shallow copy of a node so that it has no children. So i have added:

-(NSXMLElement*) shallowCopy

This will copy the element and all its attributes as a standalone node, no children and no parents.

You can download the source here.

NWPickerField, a combo box for the iPhone.

Scott Andrew — Thu, 08 Oct 2009 06:04:19 +0000

I was working on a project and needed a way to pick an expiration date for credit card processing and wanted to use the same control for choosing a state. The solution I came up with is a read-only picker field that uses the UIPickerView for input instead of the keyboard.

The idea was to have something that looked like an edit control, since users know to click on it, but used a picker view instead of a keyboard for entry. So this control is a marriage of a UITextView subclass and a UIPickerView subclass.

I am releasing the class for all to use. The code is hosted on github ready to be branched and used. If you use the control let me know.

To use the code its very simple:

Add the
NWPickerField

,

NWPickerView

,

String+NSArrayExtension,

and

downArrow.png

sources into your project.
Drag a UITextField onto a view in InterfaceBuilder.
Change its class to the
CWPickerField

class.
Implement the
NWPickerFieldDelegate

protocol, which mirrors the

UIPickerViewDelegate

.
Set the format string for the field when the view is loaded.

The code can be

iPhoto2PBase source now available

Scott Andrew — Mon, 13 Jul 2009 18:25:01 +0000

The iPhoto2PBase source is now available via github. The url is http://github.com/scottandrew/iPhoto2PBase/tree/master.

To download the source install git and enter the following into the console.

git . . . → Read More: iPhoto2PBase source now available

iPhoto2PBase now free!!!

Scott Andrew — Sat, 11 Jul 2009 16:15:31 +0000

iPhoto2PBase is now free. (Product page coming soon)

iPhoto2PBase Screenshot

iPhoto2BPase is an iPhoto plug-in that allows you to upload your photos to your PBase account.

The plug-in allows you to:

Create new galleries (nested or at the root)
Upload unlimited number of photos
Edit the title and description of you photos.
See the status of your PBase account
Resize your images before upload
Convert your photographs to JPEG
Use a photographs comments in iPhoto as the photo’s description in PBase.
Save login information in the system’s keychain.
Foreign language support for photo title and description.
Set most of the gallery attributes that are available in the web interface. (country, style, number of rows per page, and many more…)

Click here to download.

Time for reinvention.

Scott Andrew — Fri, 10 Jul 2009 03:46:35 +0000

As we get ready to release some new software later this year, its time for a re-invention. Watch for some cocoa tutorials and some open source code to come down the pipe.

If you are wondering where iPhoto2PBase is. It will be back as free and open source . . . → Read More: Time for reinvention.