Browse All Articles > Simple Binding. Cocoa GUI Application without Outlets.
An Outlet in Cocoa is a persistent reference to a GUI control; it connects a property (a variable) to a control. For example, it is common to create an Outlet for the text field GUI control and change the text that appears in this field via that Outlet.
The normal way to use an Outlet is: In the 64-bit Xcode, you just add a property with the IBOutlet keyword, synthesize it, and set new text via that property, as follows:
In the interface section you declare a new property:
@property (retain) IBOutlet NSTextField * text;
In the implementation section you synthesize it; that is, have the compiler generate the get/set handlers:
@synthesize text;
If you want to set text to the control, just assign the property a value:
text.stringValue = @"Hello, World!";
To get data from the control, just access the property:
NSString* str = text.stringValue;
The same can be done without manual coding. Doing it via the IDE is sometimes necessary, and it is useful and interesting to know how to do this.
Example 1 -- Bind a text input to a label
Let's make a testing application:
1. Create new Mac OS X Cocoa project in Xcode
I named the project as TextNoOutlet (shown on the screenshots above).
2. Add a string property
In the application delegate class I have added a string:
Initially, the application delegate class is declared (in the TextNoOutletAppDelegate.h file) as:
#import <Cocoa/Cocoa.h>
@interface TextNoOutletAppDelegate : NSObject
// Few lines removed from this place
@property (assign) IBOutlet NSWindow *window;
// New property added here
@property (copy) NSString *text;
@end
New lines added to the source code have been marked with the comments. Press Control-S here to save the modification.
3. Add the label control
In Interface Builder, click twice on the MainWindow.xib file to open it, I put the Text Field on the prototype window. Let's put a Label control under this text field. Arrange the size and locations.
4. Set up the binding
Select the text field in the prototype window. Press Command-4 to open the Binding Inspector:
In the Value section check the checkbox Bind To. Press on the button on the right and in the popup menu select the application delegate named Text No Outlet Application Delegate:
Type text into the Key Model Path input field. You should see something like this picture:
In this step, I connected the text field in my GUI with the property named 'text' from the application delegate class in my source code.
Select the label. Press Command-4 to switch to the Binding Inspector. Check the Bind To checkbox, set the application delegate and modify the Modal Key Path in the same way as for the text field.
Save your work in Interface Builder (Control-S or Save in the File menu).
5. Build and Run the program
It will look like this:
Try to type a text in the text field, press Enter. You will see the text reflected immediately in the label.
Example 2 -- Bind a text input to the window caption bar
Let's apply the binding to the application window:
In Interface Builder, select the window object in the Document window, press Command-4 to switch to the Binding Inspector and bind the title of the window in the same way as the label before:
Save the change and Build and Run the program:
Example 3 -- Bind a Slider control to a Label
I'd like to show one more example, this time with the slider control. Same principle: I will add a property, for example 'value', to the application delegate class and bind it with the slider control and a label.
The property added to the application delegate is marked with the comment in the code below:
#import <Cocoa/Cocoa.h>
@interface TextNoOutletAppDelegate : NSObject
@property (assign) IBOutlet NSWindow *window;
@property (copy) NSString *text;
// New property for the Slider control
@property (assign) NSInteger value;
@end
In Interface Builder I add the slider and one more Label. Then I bind the slider with "value" property:
I'd like to set Continuous for the slider control:
Now I select the new label in the prototype window and will bind it in way that is slightly different from the previous examples -- via "Value with Pattern"
Save my work, switch to Xcode and Build and Run my program:
Summary:
In this article, we have seen a sort of "simplification" of the GUI work:
We did not use Outlets of the GUI controls and
we connected more than one control to a property
This is all possible because of the nice feature of Objective-C 2.0 - Key-Value Coding or KVC. It is a simple protocol allowing us to set and get values indirectly.
The first section of this article showed how to do the binding using Outlets. I just used the IBOutlet keyword and then called the methods that get/set a value to/from a control.
Then, in the other examples, I specified a key that is used by Cocoa to figure out which property to match up to this key: The property text was added to the application delegate class and key ('text') was used to bind the GUI controls with the application delegate.
References:
You can find more information about the Key-Value Coding in Objective-C 2.0 in the following articles:
Comments (0)