IPhone SDK HelloWorld

The IPhone SDK UI follows the Model View Controller (MVC) design pattern and hence each view  has a corrsponding View Controller Object. XCode has automatically created a view for us, (its defined in the HelloWorldViewController.xib file you can see it by double clicking it in the side menu) and linked it to HelloWorldViewController. We now need to add controls to the view handle the generated events. Note we can add controls via a GUI interface called the Interface Builder but I am using the programmatic way for this tutorial.

Step 3: Adding Controls and Handler to header file

Open the HelloWorldViewController.h file and within the curly braces delinting the HelloWorldViewController interface declaration add the following lines;

IBOutlet UIButton *button;
IBOutlet UILabel *label;
IBOutlet UIView *myView;


We are defining a view to display and a button and label to go in the view. After the curly braces add a method declaration to accept the click event of the button and also properties to access the  UI elements; myButton, myLabel and myView. Your entire code should look something like this:

1    #import <UIKit/UIKit.h>
2
3    @interface MyHelloWorldViewController : UIViewController
4    {
5
6        IBOutlet UIButton *button;
7        IBOutlet UILabel *label;
8        IBOutlet UIView *myView;
9    }
10
11    -(IBAction)handleEvent:(id)sender;
12    @property (nonatomic, retain) UIButton *button;
13    @property (nonatomic, retain) UILabel *label;
15    @property (nonatomic, retain) UIView *myView;
16
17    @end

Step 4: Adding Controls

First add a synthesize the three UI elements to create the getter and setters. Add the following two lines of code after the @implementation HelloWorldViewController command in line 11 of HelloWorldViewController.m file.

@synthesize button;
@synthesize label;
@synthesize myView;

Now find the comment saying "Implement loadView if you want to create a view hierarchy programmatically." and un-comment the loadView method that follows this line. Add the following lines to the method to create a button and label;
1    - (void)loadView
2    {
3    // create and configure the view
4    CGRect cgRct = CGRectMake(0.0, 0.0, 480, 320); //define size and position of view
5    myView = [[UIView alloc] initWithFrame:cgRct]; //initialize the view   
6    myView.autoresizesSubviews = YES;              //allow it to tweak size of elements in view
7    self.view = myView;       

8    // create a UIButton (UIButtonTypeRoundedRect) and play arround with settings
9    button = [UIButton buttonWithType:UIButtonTypeRoundedRect];   
10   button.frame = CGRectMake(100, 100, 100, 50); // size and position of button
11   [button setTitle:@"Add" forState:UIControlStateNormal];
12  button.backgroundColor = [UIColor clearColor];
13  button.adjustsImageWhenHighlighted = YES;    

14  //Add action handler and set current class as target
15  [button addTarget:self action:@selector(action:) forControlEvents:UIControlEventTouchUpInside];

16  //Display Button
17  [self.view addSubview:button];
       
18  //create a label
19  cgRct = CGRectMake(100, 170, 100, 50); //define size and position of label
20  label = [[UILabel alloc] initWithFrame:cgRct];
21  label.text = @"Hello World";

22  //Display Label
23  [self.view addSubview:label];
24  }


Click the Build and Go button to check your interface is drawn correctly It should look something like to screen shot below.
 

Step 5: Handling Actions

We have already told the button to send an event (action) to the current class (self) in case of an UIControlEventTouchUpInside event but there is no handler defined to accept the event. We define a handler method in the class by adding the method shown below. It is doing two things, changing the text property of the label and adding a message to the log file. 
 
1    -(void)action:(id)sender
2    {
3        NSLog(@"UIButton was clicked");
4        label.text = @"Bye World";
5    }


Now click the Build and Go button again and click the button. The text of the label should change.

Concluding Note

This document is a bit raw please leave feedback in case anything is not clear or if you spot any mistakes.

You can find the source code of the example at my website;
Source Code