Replacing the root controller - Part 3

In our previous couple of posts, we've done a fair amount of scoping and checking out the lay of the land in trying to figure out how to replace the root controller - the first view shown by the nav controller. We found a chink in the armor in the last post, where renaming the root controller from the code reminded us that all you have to do is create an IBOutlet to a view to have it accessible to the code. From there, it looks like it's just a matter of pushing to the new view from the code.

The question remains as to how to create the new view. While this seems fairly basic, it's been several months since we tackled the interface builder. So, without further ado, let's jump into creating the view.

Here's some info on interface builder in Xcode 4:

http://developer.apple.com/library/ios/#documentation/IDEs/Conceptual/Xcode4TransitionGuide/InterfaceBuilder/InterfaceBuilder.html

When you create a new Cocoa application or iOS view-based project, Xcode includes a nib file for your main view and a view controller class. The view controller is represented in the nib file as the “file’s owner” object. When you need a new nib file for a project, you should create the interface and implementation files for the controller first. In many cases, Xcode creates a nib file as well. As nib files usually have controllers already assigned to them, it is rarely necessary to add a separate view controller to a nib file.

So, it's best to create the controller and header source files first. Our nib file may be created automatically. For the heck of it, let's just walk through some hello world tutorial, hopefully with xcode 4.

This one looks good:


http://paulpeelen.com/2011/03/17/xcode-4-ios-4-3-hello-world/

Programming Objective-C in XCode 4 – iPhone iOS 4.3 Hello, World! tutorial

Pretty much of a good fit, eh?

Hi,

Somewhat days ago Apple released a new version of XCode, and a lot of stuff is new in this version. Thereby also the layout of the application, interface builder and the way an application can be constructed.

But, for those of you completely new to development for iOS devices (and for those of you new to XCode 4 or for you who just want to shape up a bit? =S), I wrote a Hello World for XCode 4, iOS4.3.

So, lets get started.

Let's do.

What you will learn
In this tutorial you will learn how to create a new iOS application with design layout set for iPhone. The application you are creating will include an label (text) and a button (to change the text of the label). Also the application will have a background color.

You will learn the basics of working with XCode (The very basics) and be able to play around with, what you proudly can call, your first iOS Application

My second, but who's counting?

Creating the project
To start with the development, we will need to create a project. Start off with launcing XCode. When loaded, you will see the Welcome screen. (Pic.1). In this view, click “Create a new XCode project”.


On the next page you can choose which template you want to use to start you project with (Pic.2). At this page, choose “View-based Application”, and click next.

Remember that - start out with a view-based application by default.

The next page will let you define your projects name and the identifier. The identifier is the name of your application. Its the same name used when you register your application at Apples website and release it to the AppStore. You can see it like a backwards domain name. If your domainname of your website is mycompany.com, your identifier would be com.mycompany.APPLICATIONNAME. Because we are creating an test application and note going to release anything we can choose my.company here. The “Product Name” should be “HelloWorld” (Pic.3).

On your far left you see the “Project Navigator”, on the top of the navigator you can quickly access other navigators (E.g. Issue Navigator, Debug Navigator ect). In the middle you find your, ehh… page view? Don’t really know what to call it, but its there all the action happens. In changes depending on what you are doing, but don’t panic… I’ll walk you through it.

At the top left you see something that looks like a play button,… well it is a play button. Pressing it will launch the iOS Simulator and launch your application. The stop button to the right of it will, off course, stop your application.

Lets starts with some code! Hell yeah!

I guess that if you are new to objective-c and XCode everything seems difficult and hard… well, it might seem that way but it isn’t. Hell, if I can do it… you can! I started of as an PHP developer and my interests took me iOS development. Anyhow…

Start with selecting “HelloWorldViewController.h” in your “Project Navigator”. Just click it once. Your XCode should now look like this (Pic.6):

(pic shown)

#import

@interface HelloWorldViewController : UIViewController {
UILabel *textLabel;
}

@property (nonatomic, retain) IBOutlet UILabel *textLabel;

- (IBAction)changeTheTextOfTheLabel;

@end

Now, first off I have added “UILabel *textlabel”. The is the actual text we are going to show and change.

The second thing I did was adding an @property with nonatomic and retain set to it. The reason for this is that I let objective-c make the automated getters and settings (with help of the @synthesize which you will notice shortly) and let it retain the object.

Directly after I defined an action to my class, the action “changeTheTextOfTheLabel”, and I guess that you can guess what this action will do Thats right, it will change the text of the label (when the button is pressed).

Yes, the IBAction. That's the callback. The button will be connecting with that.

Now, lets change to the .m file. Click on HelloWorldViewController.m in your Project Navigator.

Here you see that XCode has been so kind and added some stuff for us already. This is quite alright, we will leave it. In face, we will add some more to it.

First of, lets add our @synthesize. Write “@synthesize textLabel;” (without “) just below “@implementation HelloWorldViewController”. Now, below you will find the “dealloc” function. In here, add “[textLabel release];”, (Again, without “).

The dealloc function is used when the current class gets de-allocated for some reason. When that is done we want to free our memory of all the stuff this class contains (which will be lost otherwise anyways).

Now, we need to add our new function. Add the following just below the } of the dealloc function.

- (IBAction)changeTheTextOfTheLabel
{
[textLabel setText:@"Hello, World!"];
}

It's all coming back to me. Keep going...

Now what did we do? Well, we added the functionality of our “changeTheTextOfTheLabel” function. Whenever this function is called, the text of the label will be set to “Hello, World!”.

Your HelloWorldViewController.m should now look like:

//
// HelloWorldViewController.m
// HelloWorld
//
// Created by Paul Peelen on 2011-03-14.
// Copyright 2011 9697271014. All rights reserved.
//

#import "HelloWorldViewController.h"

@implementation HelloWorldViewController

@synthesize textLabel;

- (void)dealloc
{
[textLabel release];
[super dealloc];
}

- (IBAction)changeTheTextOfTheLabel
{
[textLabel setText:@"Hello, World!"];
}

- (void)didReceiveMemoryWarning
{
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];

// Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

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

- (void)viewDidUnload
{
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

@end
Now the code is done, yes already! Keep in mind, this is only a hello world project!

Our design
Now that our code is done, we need to design our app. So left click on “HelloWorldViewController.xib”. This is the actual design file of our hello world project. Your XCode window should now look like this (Pic.7):

(pic shown)


Here comes the part that I fear and dread - dealing with the interface controller. Let's go for it. The only way to tackle our fears is to confront them head on! Note that the nib file has been automatically created - was that with the project? Probably.

All this looks kind of boring, and also a bit confusing… what we want to do is add a button and a label, but how can we do that? Well, the first time I started XCode I got worried as well… what you need to do is add the right menu first. Do this by clicking the right most button of the “view” panel (Pic.8):

Yes, this is what I was looking for without realizing it.

Afterwards you will see a list at the bottom in that menu, there you should select the “Show the Objects Library” (Pic.9):

Wow, I'm glad I walked through this tutorial. That would've been tough to figure out.

Yeey… looks more exciting!.

Lets add our label and button. From the Object Library (the menu we just got on the right bottom), find the “Label” (should be at the top!) and drag it into the large grey area in the middle of XCode (your window). Using the small dots on the side of the label you just dragged in you can change the size of the label. When coming closer to the borders of your window, blue lines will appear to guide you placing your label. Drag it to your preferred location. Your window should now look like (Pic.11):

(pic with wide, narrow label near the top of the window shown)


Sweet. This is going well.

Now find the “Round Rect Button” in the same Object Library. Should be just below the Label. Same here, drag it into your window to the location you like. When you have placed it, click the “Show the Attributes inspector” (top of the right menu, 4th icon) (Pic.12):

Cool. The attributes inspector looks like a cow's head, with ears instead of horns.

Just some rows below, you’ll find “Title”. Click here and write “Press me, Baby!”. When you have done that, left-click your button again and press the following key combination: (Command key) + (Shift key) + =
When you have done that your view should look something like this:

Pretty much the same as the pic. Not sure what the key combination did.

Now… lets save it. Just press (Command key) + S.


Now we need to bind everything together, so right click on your “File’s Owner”. The File’s Owner is the yellow box between your project navigator and your design window (Pic.14):

Ok, we need to remember that - the file's owner is where you bind everything together.

On the last row of this cute little box you’ll see “changeTheTextOfTheLabel”. Yep, this is our own function. XCode nicely read it our of our class. Click in the little circle to the right of the “changeTheTextOfTheLabel” and drag it to your button (Pic.15) and release it there. A new little box will pop up, here you should choose “Touch up inside” (Pic.16).

Right - this is under "receiving actions". I remember the touchUpInside. Ah, yes, dragging the line to connect. I remember all that, for sure.

What you have done now is that when a “Touch up inside” action is preformed on the button, the code will call our “changeTheTextOfTheLabel” action. Now, the question is that doing that, did it automatically connect the view? Or was it already connected? I think I'll need to do that when I create the nib. Clearing and reconnecting by drawing a line to the containing view seemed to work. We'll see.

Now, right click again on your File’s owner. On the second you will find our “textLabel”. Drag the circle on the right of “textLabel” to our label and release there.

Well… now we have told our code that our label should react on “textLabel” actions. Whenever our code tells the object “textLabel” to do something, our label in the design will reflect on that action.

Sweet - it ran, although slowly. I just added an extra 4 gig ram, too. Anyway, here's an image.



Ok, I feel better prepared. Let's resume this in the next post...