Views and Inteface Builder:

For the last while I've been brushing up on my iOS interface kit skills; I've spent many years working with simple OpenGL panels but had yet to spend much time using the tools provided with iOS to build any applications. I thought it would be helpful to share some of the things I've learned along the way to help bootsrap others in my situation into using the excellent tools available instead of going on a mission to rewrite our usual OpenGL UIs as many of us have.

Interface Builder can seem like an awkward tool at first but it's actually quite simple once you understand what's happening behind the scenes. There's a few simple things to realize that will get you quickly building interfaces:

By default we get a MainWindow.xib, this file contains your main view, but it isn't prudent to dump all of your code in here. You should think of it more as your shell for working with other views. By keeping your main view fairly clean you can easily build modular sub-views programatically and use transitions, navigation controllers and more to control your UI flow.

First we start out with a standard empty iOS project:

01-NewProject

This gives us a simple iOS application with a MainWindow view, base classes and no extras.

Next we add another view by adding a new .xib (interface builder) file to our project:

We name our file and add it to the project:

05-AddXIBSave

Then we can double click the new .xib to open Interface Builder:

06-XIBAdded

Interface Builder: Your sub-view

Each View consists of a few elements:

07-SubViewXIBView

File's Owner:  This is where you specify the class name for your view, on the Inspector in the last tab you'll need to give it a name that will be used to represent it as a class. This is also the item you should have selected when you choose to 'Write Class Files' and generate your linkages.

First Responder:  This houses a list of some of the standard actions you would be using, these seem to be provided to work with a default set of IBAction bindings for each view class.

View Object:  This is the element that will be linked to the .view property of your class, most UI interaction code will be with this object or an object contained within it.

First off with our new view we'll want to name it; to do that we select the File's Owner and set our class name in the inspector:

Then to start working with our view in Interface builder, we select the File's Owner object and choose 'Write Class Files' from the file menu, being sure to add it to our project:

[ Image of writing class files, name it after our view class ]

Now back in XCode we have two new files added:

[ Show new files ]

By writing the files Interface Builder generated the following for MySubView.h:

#import <UIKit/UIKit.h>#import <Foundation/Foundation.h>
@interface MySubView : /* Specify a superclass (eg: NSObject or NSView) */ {
}
@end

The first thing we want to do is set our subclass:
changing:

1	@interface MySubView : /* Specify a superclass (eg: NSObject or NSView) */ {

1	@interface MySubView : UIView {

to let it know what type of view we're creating, this could be a subclass of another type of view you have already defined.

Next we want to choose what type of buttons and actions we want to have on this view, for our example we'll add a simple button and a text output box for a counter.

There are two simple ways to connect objects and actions to Interface Builder objects:

IBAction - Interface Builder Action. This defines an action such as a click that an interface object will produce. An IBAction represents a function that will be called.
IBOutlet - This defines a connection to the objects in the class, any objects bound through an IBOutlet must be @synthesize'd within the class's .m file.

We'll begin by adding our IBAction and IBOutlet for the button and text:

MySubView.h:

#import <UIKit/UIKit.h>#import <Foundation/Foundation.h>
@interface MySubView : UIView {
UITextField *textElement; int counter;}
@property (nonatomic, retain) IBOutlet UITextField *textElement;
- (IBAction)buttonClicked:(id)sender;@end</code>
And the appropriate initialization and allocation code in MySubView.m:<code>#import "MySubView.h"
@implementation MySubView
@synthesize textElement;
- (void)viewDidLoad {}
- (void)dealloc {· [super dealloc]; [textElement dealloc];}
- (IBAction) buttonClicked: (id)sender {}@end

Now by saving the header, we can go back over to Interface Builder and add our elements by dragging them from the library:

[ Image of assembled interface ]

From here we can now Right-Click on the File's Owner and magically our outlets and actions from our class header have appeared:

[ Image of outlets ]

Then we begin the process of connecting things, drag the connector from the textField outlet onto our Text Field:

[ Image of connecting textField ]

And connect our action to our button, a popup will appear and we'll choose the 'On Touch Up Inside' option so it triggers when we release the button:

[ Image of IBAction connection ]

Finally connect our view to the default view outlet:

[ Image of connecting View ]

And we now have our completed connections:

[ Image of connections ]

We save this and now we have some actual objects to work with. Back over to XCode we can now implement the actions required to make our interface do something:

MySubView.m:

#import "MySubView.h"
@implementation MySubView
@synthesize textElement;
- (void)viewDidLoad { // initialize our counter and set the field. counter = 0; [textElement setText: [NSString stringWithFormat:@"%d", counter]];}
- (void)dealloc {· · [super dealloc];· [textElement dealloc];}
- (IBAction) buttonClicked: (id)sender { // increment counter and display. counter++; [textElement setText: [NSString stringWithFormat:@"%d", counter]];}
@end

Then we jump into MyProjectViewController.h (the default created for us) and add a variable for our SubView:

MyProjectViewController.h:

1
2
3

#import <UIKit/UIKit.h>#import "MySubView.h"
@interface MyProjectViewController : UIViewController { MySubView *myView;}
@end

Then we add the setup code to MyProjectViewController.m to actually instantiate our subview:

Find the code in MyProjectViewController.m:

/*// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.- (void)viewDidLoad {    [super viewDidLoad];}*/

Uncomment and update it to add our view:

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.- (void)viewDidLoad {    [super viewDidLoad];        myView = [[[MySubView alloc] init] retain];    [self.view addSubview: myView.view];}

And that's it, with all this in place, we can now hit 'Run' and see our app alive in the simulator:

[ Final image of running app ]

There are more complex ways to connect and build views and subviews as well as transitioning them and placing them in navigation containers which I hope to cover in future posts. Please feel free to download the example code to try this out yourself.

[ Example code download, 20kb ]

More Articles...

Welcome to the Dragonfly Blog

Association PORTALS

Whether you are a local organization that needs a simple content management system, or a huge international organization with thousands of global members, Dragonfly has the right Association Management System for you.

Higher Education

Dragonfly can help you and your staff to create innovative technology solutions for the challenges you face. We have created custom software solutions for faculty, staff, students and researchers alike for major Universities and their alumni.

Not For Profit

Dragonfly works almost exclusively with not for profit groups including municipal and provincial governments, educational institutions and international associations.