First of all, all of them work, it's just a matter of finding which one works best for you. Which can you app are you making? Are you working alone? Are you an addicted to IDE or you'd rather use plain old text editor? Are you more a mouse person or a a do-it-all-with-the-keyboard guy?
I try the different ways with one simple example: I want to build an App that displays a list of item. We want to create a ViewController named MyViewController which inherits from UITableViewController. All source code could be found here.
Hand-crafted
Step1: Create Xcode project with empty template
Open Xcode and go to File -> New Project, select the Empty Application template
Step2: Add new file MyViewController
and make it extends UITableViewControllerStep2: Link MyViewController to AppDelegate
By adding property at line 4:@interface MyAppDelegate : UIResponder@property (strong, nonatomic) UIWindow *window; @property(strong, nonatomic) MyViewController *viewController; @end
Step3: Take care of initialisation of AppDelegate
Once the application is loaded, it's the developer's duty to instantiate MyViewController. As per commonly used Delegate pattern, once app is loaded the delegate method application:didFinishLaunchingWithOptions: is called. Within this method, you should add line 6-7- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customisation after application launch.
self.window.backgroundColor = [UIColor whiteColor];
self.viewController = [[MyViewController alloc] initWithStyle:UITableViewStylePlain];
self.window.rootViewController = self.viewController;
[self.window makeKeyAndVisible];
return YES;
}
Step4: Implement your model in MyViewController
For the example we feed an array of fake data in it setter method.@implementation MyViewController
NSArray *_items;
- (NSArray *)items{
_items = [[NSArray alloc] initWithObjects:@"Item No. 1", @"Item No. 2", @"Item No. 3", @"Item No. 4", @"Item No. 5", @"Item No. 6", nil];
return _items;
}
Step5: Display your model in MyViewController
To display the content od a cell you need to conform to protocol UITableViewDataSource, tableView:numberOfRowsInSection: and tableView:cellForRowAtIndexPath: are the two methods responsible for the display of a cell.- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return [self.items count];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell;
cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
// Configure the cell... setting the text of our cell's label
cell.textLabel.text = [self.items objectAtIndex:indexPath.row];
return cell;
}
That's it you're all done, run the app!
Interface Builder
Xib, nib depending if it's the next generation or not. Actually xib file is the xml source file which describes your view. Nib being the compiled version.Step1: Create Xcode project with Single App template
Open Xcode and go to File -> New Project, select the Single View Application template
No need to add code in AppDelegate's application:didFinishLaunchingWithOptions:, the code has been added for you. See line 5-6.
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
self.viewController = [[AGViewController alloc] initWithNibName:@"MyViewController" bundle:nil];
self.window.rootViewController = self.viewController;
[self.window makeKeyAndVisible];
return YES;
}
Step2: Implement your view with xib view
1. drag and drop Table view from object library in utilities bar.
2. create an outlet, drag and drop (with control key down) up to MyViewController interface.
3. link data source to file owner: right click on TableView all the way to file's owner in document view.
Step3: Implement your model in MyViewController
Same code than Hand-crafted approach step4.Step4: Display your model in MyViewController
Same code than Hand-crafted approach step5.Run the app an you will have the same result. As you can see there is less code to write, but the approach involved more mouse actions. One piece of code that was generated for you but which is important to understand is in step1, the call to initWithNibName:bundle:; One interesting stuff with Interface Builder is that you can mix handcrafted and interface builder. The strength of a WYSIWIG widget based tool like Interface Builder is to build complex customized view. If you have to build a Custom Cell for you TableView, you could use Interface Builder and then load the archive and associate it with the relevant object.
Storyboard
Introduced in iOS5, Storyboard carries on the WYSIWYG approach launched by Xib. Sometime seeing as a replacement of nib, it brings UI definition in one simple file rather than several xib files, also deal with transition between screen.Step1: Create Xcode project with Single App template
Same as for Interface builder, but this time make sure Use Story board option is checked.Step2: Make connection from storyboard to your code
1. Go to .storyboard file, select the UIViewController graphic2. On the utilities tab, in the identity inspector, change the class field to match MyViewController
3. create an outlet: holding the ctrl key with a drag from your view in storyboard to MyViewController.h file. Once you drop you will be prompted to enter a name, and click connect. this is the magic part of Apple WYSIWYG editor and how the link to source code. All newbies get surprised here.
Step3: Connect the datasource with outlet
Remember for hand-crafted we had to implement 2 protocols data source and delegate one. Same thin here, right click on TableViewController in the storyboard. From the outlet section, drag and drop to My Table view controller. Do it for data source and delegate.
Step4: Implement your model in MyViewController
Same code than Hand-crafted approach step4.Step5: Display your model in MyViewController
Same code than Hand-crafted approach step5.Run the app an you will have the same result. Here again, there is less code to write, but the approach involved more mouse actions. Besides, I thing the strength of storyboard comes when you have an application with several views and transitions using segues.
As a conclusion, we've seen the different approaches, I think to start with it's easier with the hand-crafted approach as you get to understand frequently used patterns in iOS like the Delegate pattern. But then I might be biased as I have a developer background. I like the idea Xcode storyboard/xib approach , I think it's nice to prototype or to experiment (like a preview you see it right away) but at the end of the day I find source code easier to maintain. It's all written in plain code. But you know what, storyboard/xib file are be all written in plain XML too ;) Right click and open then as source code.
Do you prefer to write XML or Objective-C?
Tweet
