Until now, this project has had no UI. To prove this fact, simply press Command-R (or select Run

Figure 2.7. Figure 2-7

Obviously, a blank screen is not very useful. So, it's time to try adding some controls to the UI of your application. If you examine the list of files in your project, you notice two files with the .xib extension — MainWindow.xib and HelloWorldViewController.xib. Files with .xib extensions are basically XML files containing the UI definitions of an application. You can edit .xib files by either modifying their XML content, or more easily (and more sanely), edit them using Interface Builder.

Interface Builder comes as part of the iPhone SDK and allows you to build the UI of an iPhone (and Mac) applications by using drag-and-drop.

Double-click the HelloWorldViewController.xib file to launch Interface Builder. Figure 2-8 shows Interface Builder displaying the content of HelloWorldViewController.xib (which is really empty at this moment). As you can see, the Library window shows all the various controls that you can add to the UI of your iPhone application. The View window shows the graphical layout of your UI. You will see the use of the other windows shortly.

Figure 2.8. Figure 2-8

Now, scroll down to the Label control in the Library pane and drag and drop a Label view onto the View window. After the Label view is added, select the Label view and choose the Tools

Figure 2.9. Figure 2-9

Next, from the Library window drag and drop a Text Field view to the View window, followed by a Round Rect Button view. Modify the attribute of the Round Rect Button view by entering Click Me! in the Title field (see Figure 2-10).

Figure 2.10. Figure 2-10

Save the HelloWorldViewController.xib file by pressing Command-S. Then, return to Xcode and run the application again by pressing Command-R. The iPhone Simulator now displays the modified UI (see Figure 2-11).

Figure 2.11. Figure 2-11

Tap the Text Field view and watch the keyboard automatically appear (see Figure 2-12).

If you press the Home button on the iPhone Simulator, you will notice that your application has been installed on the simulator (you need to flick to the next page on the right after the Home screen is displayed). To go back to the application, simply tap the HelloWorld icon again (see Figure 2-13).

Figure 2.12. Figure 2-12

Figure 2.13. Figure 2-13

The iPhone Simulator also supports changes in view orientation. To change the view to Landscape mode, press the Command-→ key combination. Figure 2-14 shows how your application looks in Landscape mode. Press Command-← to change back to Portrait mode.

Figure 2.14. Figure 2-14

Notice that your application does not respond to changes in view orientations. To make your application respond appropriately when the view orientation changes, you need to modify your code.

In Xcode, edit the HelloWorldViewController.m file and look for the following code segment (this block of code is commented out by default):

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

Modify the preceding code to return YES, as shown in the following snippet:

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

Run the application again. This time, notice that your application rotates as the view orientation changes (see Figure 2-15).

Figure 2.15. Figure 2-15

In the previous section, you saw that as the orientation changes, the size and positioning of the views remain. In the real world, this scenario is not desirable because it doesn't give the user a good experience while using your application. Ideally, you should reposition your views on the screen so that they change with the view orientation.

To reposition your views, go to the Interface Builder, select the Label view, and choose Tools

Figure 2.16. Figure 2-16

Likewise, modify the Autosizing attribute of the Text Field view as shown in Figure 2-17. Note the different pixel sizes.

Figure 2.17. Figure 2-17

Finally, modify the Autosizing attribute for the Round Rect Button control as shown in Figure 2-18. This time, you are not resizing the view when the view orientation changes. Instead, you are only anchoring it to the top of the screen.

Figure 2.18. Figure 2-18

That's it! Within Interface Builder, you can click the arrow located at the top-right corner (see Figure 2-19) of the screen to rotate the screen so that you can view the effect of the changes you have made immediately.

Figure 2.19. Figure 2-19

Go back to Xcode and run the application again. This time, notice that the controls reposition and resize themselves as you rotate the screen (see Figure 2-20).

Figure 2.20. Figure 2-20

So far, you have not written any code, because you should be comfortable with Xcode and Interface Builder before embarking on coding. Nevertheless, it's now time to write some code to give you a flavor of programming with iPhone.

Recall that in the section about the Interface Builder, earlier in this chapter, I show a window labeled HelloWorldViewController.xib. Within this window are three components: File's Owner, First Responder, and View.

Select File's Owner and then choose Tools

In the Identity Inspector window, click the + (plus) button shown under Class Actions (see Figure 2-21). Enter btnClicked: in the action name field. (Remember to include the colon because it is part of an action name.) Doing so creates an action (also known as an event handler) named btnClicked:.

Figure 2.21. Figure 2-21

Control-click the Round Rect Button view in the View window and drag it to the File's Owner item in the HelloWorldViewController.xib window (see Figure 2-22). A small pop-up containing the btnClicked: action appears. Select the btnClicked: action. Basically, what you are doing here is linking the Round Rect Button view with the action (btnClicked:) so that when the user clicks the button, the action is invoked.

Figure 2.22. Figure 2-22

In the HelloWorldViewController.h file, add a header declaration for the btnClicked: action:

//
//  HelloWorldViewController.h
//  HelloWorld
//
//  Created by Wei-Meng Lee on 3/30/09.
//  Copyright __MyCompanyName__ 2009. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface HelloWorldViewController : UIViewController {

}

//---declaration for the btnClicked: action----(IBAction) btnClicked:(id)sender;

@end

In the HelloWorldViewController.m file, add the code that provides the implementation for the btnClicked: action:

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

//---implementation for the btnClicked: action---
-(IBAction) btnClicked:(id)sender {
   //---display an alert view---
   UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"Hello World!"message: @"iPhone, here I come!"delegate:selfcancelButtonTitle:@"OK"otherButtonTitles:nil, nil];
   [alert show];
   [alert release];
}

@end

The preceding code displays an alert containing the sentence "iPhone, here I come!"

That's it! Go back to Xcode and run the application again. This time, when you tap the button view, an alert view displays (see Figure 2-23).

Figure 2.23. Figure 2-23