Web Design & Development Blog
RSS Feed
Subscribe to my
RSS feed

The Web Design & Development Blog is written, coded and maintained by Duncan Midwinter. It regularly features articles on HTML, CSS, Javascript, PHP, Web Design and more…

Posts for tag: cocoa 1

xCode5 Cocoa bindings tutorial

Cocoa Bindings makes keeping your view objects and data objects in sync with minimum fuss and minimum code. This tutorial introduces the concept by demonstrating how to sync a slider with a text field that displays its value. Changing the slider will result in the text field being updated and vice versa.

1 Open xCode and create a new project. Select OSX and Application from the left column, then choose Cocoa Application and type ‘Cocoa Bindings Demo’ for the Product Name. Once you choose a location on your Mac to create the project you will be presented with a standard blank application containing an AppDelegate class and a MainMenu.xib file.

creating a new project in xCode

2 You’re going to be adding a slider and text field to the main application window, and then connecting their values using cocoa bindings but first you will need a variable to store this value, so you must create a controller class to store this value.

Select File -> New -> File… (or press cmd N), then select OSX and Cocoa from the left column and then choose Objective-C class and click Next.

adding a new class in xCode

Call the new class ‘AppController’ with a Subclass of NSObject, click Next and create the object.

3 Now you need to add the AppController class to the workbench in InterfaceBuilder, so click on the MainMenu.xib to open it and from the Object Library in the Utilities sidebar select Object and drag an instance to the workbench.

adding a new object to the workbench in xCode

Select the object in the workbench and click on the Identity Inspector in the Utilities sidebar. In the top section (Custom Class), click in the Class text field and type ‘AppController’ (you should find that it auto completes).

linking the object to the AppController in xCode

4 Now you can create the variable to hold the slider / text field value. Open the AppController.h and add an int. Call it sliderAmount. Your code should look like this:

#import <Foundation/Foundation.h>

@interface AppController : NSObject {

	int sliderAmount;

@property int sliderAmount;


You will also need to add a property, so that the int can be used with KVC and KVO, which is necessary for Cocoa Bindings to work.

Once that is done open the AppController.m and synthesize the sliderAmount. Your AppController.m file should look like this:

#import "AppController.h"

@implementation AppController

@synthesize sliderAmount;


5 So now that you’ve got the Controller Class with an int to hold the value, it’s time to create the interface. Go back to the MainMenu.xib file and click on the Window object in the workbench to open the main application window. Once it is open, go to the Object Library and drag in a span class=”turquoise”>Horizontal Slider and a span class=”turquoise”>Text Field.

Note: In the example I’ve spent a bit of time sizing and positioning the objects, I’ve also given the slider tick marks, but I’ve left its default values of Minimum 0, Maximum 100 and Current 50.

designing the Application Window in Interface Builder

6 So now it’s time for you to bind the interface elements to the int value in the Controller Class.

Click on the slider to select it, then in the Utilities sidebar, click on the Bindings Inspector. You will see a list of all the various values that you can bind. In our case we want to bind the value of the slider, so click the disclosure triangle next to ‘Value’ and click on the checkbox Bind, then from the drop-down menu, select App Controller. Finally, under the field for Model Key Path you should see that it has the value self. Remove this and add the name of the int in the AppController class: sliderAmount (it should auto complete). The slider is now bound to the int value in the AppController class – you should see the correct key path next to Value in the Bindings inspector – (App Controller.sliderAmount).

the Bindings Inspector in xCode

7 So now our slider is correctly bound to the int value but on its own not much is going to happen! Now it’s time to bind the text field to the same int value. To do that we just repeat the exact same procedure that we used to bind the slider.

8 Now that both interface elements are bound to the same int value it’s time to build an run the app. You should see that when the slider is moved, the text field updates to the new value. It’s fine, but there’s something not quite right – two things actually…

Firstly, the value in the text field only updates when the slider is released and secondly, wasn’t the default value of our slider set to 50?

To get the slider / text filed to update in realtime as the slider is moved, select the slider then in the Utilities sidebar click on the Attributes inspector. Under the ‘control’ section check the checkbox ‘Continuous’. A quick build and run should show the value updating as the slider is moved.

making the slider continuous in xCode

As for the initial value of the slider: normally it would be initialised with the value in the current field of the Attributes inspector, but as the slider is now bound to the int value of sliderAmount it is initialised with that value. To get it to start at 50 (or any other amount for that matter), you need to add an -init method to your AppController class. So open your AppController.m file and edit the code as follows:

#import "AppController.h"

@implementation AppController

@synthesize sliderAmount;

- (id)init
	self = [super init];
	if(self) {
		sliderAmount = 50;
	return self;


A final build and run should see your slider and text field starting with an initial value of 50.

You can find a sample xCode project of this tutorial on my Resources page.