The BasicUIAppDelegate.m file contains code that is typically executed after the application has finished loading, or just before it is being terminated. For this example, the content of it is as follows:

#import "BasicUIAppDelegate.h"
#import "BasicUIViewController.h"

@implementation BasicUIAppDelegate

@synthesize window;
@synthesize viewController;

- (void)applicationDidFinishLaunching:(UIApplication *)application {
    // Override point for customization after app launch
    [window addSubview:viewController.view];
    [window makeKeyAndVisible];
}

When the application has finished launching, it sends its delegate the applicationDidFinishLaunching: message. In the preceding case, it uses a View Controller to obtain its view and then adds it to the current window so that it can be displayed.

The BasicUIAppDelegate.h file contains the declaration of the members of the BasicUIAppDelegate class:

#import <UIKit/UIKit.h>

@class BasicUIViewController;

@interface BasicUIAppDelegate : NSObject <UIApplicationDelegate> {
    UIWindow *window;
    BasicUIViewController *viewController;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet BasicUIViewController *viewController;

@end

Of particular interest is this line:

@interface BasicUIAppDelegate : NSObject <UIApplicationDelegate> {

The <UIApplicationDelegate> statement specifies that the class implement the UIApplicationDelegate protocol. Put simply, it means that you can now handle events (or messages) defined in the UIApplicationDelegate protocol. Examples of events in the UIApplicationDelegate protocol are the following:

In iPhone programming, you typically use a View Controller to manage a view as well as perform navigation and memory management. In the project template for a View-based Application, Xcode automatically uses a View Controller to help you manage your view. Think of a view as a screen (or window) you see on your iPhone.

Earlier in this chapter, you saw that the MainWindow.xib window contains the BasicUI View Controller item. When you double-click it, it shows a window of the same name (see Figure 3-5).

Figure 3.5. Figure 3-5

As you can see from the window, the view says that it is loaded from BasicUIViewController. The BasicUIViewController refers to the name of the BasicUIViewController.xib file, which is also within your project.

Now, double-click the BasicUIViewController.xib file to edit it in Interface Builder (see Figure 3-6).

Figure 3.6. Figure 3-6

As with the MainWindow.xib file, a few objects are contained inside the BasicUIViewController.xib window. In this case, the window contains three items: File's Owner, First Responder, and View.

You can right-click (or Control-Click) the File's Owner item to view its outlets (see Figure 3-7). For now, note that the view outlet is connected to the View item.

Figure 3.7. Figure 3-7

The View item represents the screen that appears on your application. Double-click View to display it (see Figure 3-8).

Figure 3.8. Figure 3-8

To design your View window, you can drag and drop views from the Library window (choose Tools

Figure 3.9. Figure 3-9

If you are new to iPhone development, you may not know that it is better to display the various views in the Library window as icons and labels. To do so, click the asterisk/star-like icon located at the bottom on the Library window and select View Icons and Labels (see Figure 3-10).

Doing so displays the view names together with the icons (see Figure 3-11).

Figure 3.10. Figure 3-10

Figure 3.11. Figure 3-11

Populate the View window as shown in Figure 3-12. The following views are used:

Figure 3.12. Figure 3-12

What your application will do is simple: When the user enters his or her name in the Text field and clicks the Round Rect button, the application displays an alert view showing the user's name.

In order for your application to interact with views on the View window, you need a mechanism to reference your views on the window and at the same time provide methods to be invoked when some events happen on the window. In iPhone programming, these two mechanisms are known as outlets and actions, respectively.

In the BasicUIViewController.xib window (see Figure 3-13), select the File's Owner item and view its Identity Inspector window (choose Tool

Figure 3.13. Figure 3-13

An action is a method that can handle events raised by views (for example, when a button is clicked) in the View window. An outlet, on the other hand, allows your code to programmatically reference a view on the View window.

With the File's Owner item selected, choose the File

Figure 3.14. Figure 3-14

At this juncture, you have two options:

Click the Merge button. You should now see the window as shown in Figure 3-15, displaying the content of BasicViewController.h.

Figure 3.15. Figure 3-15

The left of the window shows the code that Interface Builder has generated for you, whereas the right side shows the content of the original file. The gray sections show the code to be inserted. Because you want the two statements to be inserted into the original file, select each section, and at the bottom-right corner of the screen, click the Actions list and select Choose Left. Repeat the same step for the second block of code.

The window should now look like Figure 3-16. Note the direction of the two arrows.

Figure 3.16. Figure 3-16

Save the file by pressing Command-S. To close the window, press Command-W.

You now see the window for the next file — BasicViewController.m. Repeat the same steps outlined previously (though the second block of code does not seem to include anything; see Figure 3-17). Save and close the window.

Figure 3.17. Figure 3-17

Back in Xcode, you see the following in the BasicViewController.h file:

#import <UIKit/UIKit.h>

@interface BasicUIViewController : UIViewController {
    IBOutlet UITextField *nameTextField;

}

- (IBAction)btnClicked:(id)sender;

@end

The IBOutlet identifier is used to prefix variables so that Interface Builder can synchronize the display and connection of outlets with Xcode. The IBAction identifier is used to synchronize action methods.

In the BasicViewController.m file, you see the following statements inserted:

#import "BasicUIViewController.h"

@implementation BasicUIViewController

- (IBAction)btnClicked:(id)sender {
}

//...

Now that you know what an outlet is and does, it's time to practice adding outlets in the following Try It Out.

TRY IT OUT: Adding Outlets Using Code

To add outlets or actions to a View Controller, you can either use Interface Builder to add them and then generate the class file, or write the code yourself. To see how this is done, execute the following steps.

1. Manually add another IBOutlet object to the class (BasicUIViewController.h), as follows:

   #import <UIKit/UIKit.h>
   
   @interface BasicUIViewController : UIViewController {
       IBOutlet UITextField *nameTextField;
       IBOutlet UITextField *ageTextField;
   }
   
   - (IBAction)btnClicked:(id)sender;
   
   @end

2. In this case, you are manually adding an outlet (named ageTextField) to the View Controller.

Save the file and select the File's Owner item in the BasicUIViewController.xib file. Note its Identity Inspector window — it's the one on the right in Figure 3-18.

Note

Note that the outlets are now listed under BasicUIViewController.h. If you refer to Figure 3-13, you will notice that when you create your outlets using the Identity Inspector window, the outlets are listed under BasicUIViewController.xib. This is because at that time the outlets have not been declared to the .h file yet.

Figure 3.18. Figure 3-18

The ageTextField outlet appears in the Class Outlets section, proving that coding directly in the .h file works as well.

Note

If you want to remove any of the outlets listed under BasicUIViewcontroller.h, you have to remove them manually in the .h file. This is evident when you see that the minus (−) button is grayed out.

If, at this point, you add another outlet using the Identity Inspector window, the outlet you added will be listed under BasicUIViewController.xib (see Figure 3-19). After the outlet is declared in the .h file, the outlet then appears under BasicUIViewController.xib.

Figure 3.19. Figure 3-19

After actions and outlets are defined in the View Controller, you must have a way to connect them to the views in the View window. To link the events of the views in the View window to the actions defined in the View Controller, you need to Control-click and drag the view to the File's Owner item.

For this example, Control-click and drag the Click Me button and drop it on the File's Owner item. As you drag, notice that an elastic band appears. As your mouse hovers over the File's Owner item, it is highlighted (see Figure 3-20). When you release the mouse button, a pop-up appears. The btnClicked: action is now shown under the Events section.

Figure 3.20. Figure 3-20

To link the outlets defined in the View Controller onto the views on the View window, Control-click and drag the File's Owner item onto the view you want to connect to (see Figure 3-21). You now see the list of outlets that you have defined in your View Controller under the Outlets group. Select the nameTextField outlet.

Figure 3.21. Figure 3-21

With the actions and outlets connected, you can right-click (or Control-click) the File's Owner item to view its connections (see Figure 3-22). As you can observe, the nameTextField outlet is connected to a Round Style Text Field view, and the btnClicked: action is connected to a Round Rect Button's Touch Up Inside event.

Figure 3.22. Figure 3-22

Because pressing the button is such a common activity in iPhone applications, when you connect a button with an action, the Touched Up Inside event of the button is automatically linked with the action. If you want to link some other events with an action defined in the View Controller, right-click the button view and click and drag the event (represented as a circle). Then connect it with the File's Owner item (see Figure 3-23).

Figure 3.23. Figure 3-23

If the action is connected properly, you should see the action listed next to the event name (see Figure 3-24).

Figure 3.24. Figure 3-24

Recall that earlier, in the BasicUIViewController.h file, an outlet and an action were generated for you:

#import <UIKit/UIKit.h>

@interface BasicUIViewController : UIViewController {
   IBOutlet UITextField *nameTextField;
}

- (IBAction)btnClicked:(id)sender;
@end

The nameTextField is an IBOutlet instance member of type UITextField. A good practice in iPhone programming is to expose the member variable as a property using the @property identifier:

#import <UIKit/UIKit.h>

@interface BasicUIViewController : UIViewController {
    IBOutlet UITextField *nameTextField;
}

@property (nonatomic, retain) UITextField *nameTextField;

- (IBAction)btnClicked:(id)sender;
@end

@property (nonatomic, retain) IBOutlet UITextField *nameTextField;

When the outlet is now exposed as a property, you need to define the getters and setters for the property. A quick and easy way is to use the @synthesize keyword in the BasicUIViewController.m file, like this:

#import "BasicUIViewController.h"

@implementation BasicUIViewController

@synthesize nameTextField;

As shown earlier, you connected the Touch Up Inside event of the Round Rect Button view with the btnClick: action defined in the View Controller. To implement the btnClick: method, code the following in the BasicUIViewController.m file:

#import "BasicUIViewController.h"

@implementation BasicUIViewController

@synthesize nameTextField;

- (IBAction)btnClicked:(id)sender {

   NSString *str = [[NSString alloc]
        initWithFormat:@"Hello, %@", nameTextField.text ];
    UIAlertView *alert=[[UIAlertView alloc]
                        initWithTitle:@"Hello"
                        message: str
                        delegate:self
                        cancelButtonTitle:@"OK"
                        otherButtonTitles:nil, nil];
    [alert show];
    [alert release];
    [str release];
}

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

@end

You use the @synthesize identifier to get the compiler to generate the accessor and mutator (also commonly known as getters and setters) for the nameTextField property. The UIAlertView class displays an alert window with the content specified.

That's it! To test the application, press Command-R in Xcode. If the current active SDK selected is the iPhone Simulator (3.0) (see Figure 3-25), the iPhone Simulator is launched.

Figure 3.25. Figure 3-25

Enter your name and click the Click Me button. Figure 3-26 shows the alert view displaying the name you have entered.

Figure 3.26. Figure 3-26

In the BasicUIViewController.h file, add the following object and actions:

#import <UIKit/UIKit.h>

@interface BasicUIViewController : UIViewController {
    IBOutlet UITextField *nameTextField;
    NSMutableString *secretPin;
}

@property (nonatomic, retain) UITextField *nameTextField;

- (IBAction)btnClicked:(id)sender;
- (IBAction)clearPinBtnClicked:(id)sender;
- (IBAction)pinBtnClicked:(id)sender;

@end

Figure 3.27. Figure 3-27

The NSMutableString class represents a mutable string (that is, its content can be changed after it has been initialized). In contrast, the NSString class represents an immutable string (that is, its content cannot be changed after it has been initialized).

In Interface Builder, connect the five Round Rect buttons to the pinBtnClicked: action. This means that one single action will handle the five buttons' TouchUp Inside event. In addition, connect the Clear PIN button to the clearPinBtnClicked: action. The connections for the File's Owner item should now look like those shown in Figure 3-28.

Figure 3.28. Figure 3-28

In the BasicUIViewController.m file, provide the following implementations:

#import "BasicUIViewController.h"

@implementation BasicUIViewController

@synthesize nameTextField;

- (IBAction)clearPinBtnClicked:(id)sender {
    //---clears the secret pin---
    [secretPin setString:@""];
}

- (IBAction)pinBtnClicked:(id)sender {
    //---append the pin entered to the string---
    [secretPin appendString:[sender titleForState:UIControlStateNormal]];
}

- (IBAction)btnClicked:(id)sender {
    //---if the user has entered the pin correctly---

    if ([secretPin isEqualToString: @"2345"]) {
        NSString *str = [[NSString alloc]
            initWithFormat:@"Hello, %@", nameTextField.text ];
        UIAlertView *alert = [[UIAlertView alloc]
                             initWithTitle:@"Hello"
                             message: str
                             delegate:self
                             cancelButtonTitle:@"OK"
                             otherButtonTitles:nil, nil];
        [alert show];
        [alert release];
        [str release];
    }
}

- (void)viewDidLoad {
    //---init the string with an initial capacity of 1---
    secretPin = [[NSMutableString alloc] initWithCapacity:1];
    [super viewDidLoad];
}

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

In the preceding code, when the View is loaded, you initialize the mutable string secretPin with an initial capacity of one. A mutable string is a string whose content can be edited. In this case, you initialize it by setting its initial length to one. Whenever the user presses the buttons labeled 1 to 5, the pinBtnClicked: method is called. You use the titleForState: method together with the UIControlStateNormal constant to extract the text displayed on the button and then append it to the secretPin string:

[secretPin appendString:[sender titleForState:UIControlStateNormal]];

That's it! Press Command-R to debug the application on the iPhone Simulator. The alert view is displayed only after the user has entered the correct pin number (see Figure 3-29).

Figure 3.29. Figure 3-29