This chapter is from the book
This chapter is from the book
This chapter is from the book
Say Hello
Now that the excitement of creating your first application for the iPad has worn off, let’s extend the application by adding some functionality to it. Instead having it always display “Hello World,” let’s change the app to first ask for a name, then display a “Hello” message in response to the name entered. This exercise is more involved and requires you to write some Objective-C code. Do not worry if you have never seen Objective-C code before. You will be told exactly what to type, and you will explore Objective-C in more detail in Chapter 4, “Getting Started with Objective-C.”
In life there is often more than one way to accomplish a task. The beauty of iPad programming is that there are many different ways to do something. It is this flexibility in the development tools that makes many programmers prefer Xcode to other development tools. But it does take time to learn all the ins and outs, which can be frustrating for programmers new to Xcode.
One of the goals of this book is to show you the different ways a task can be accomplished. Armed with this knowledge, you can decide which approaches work best for you. For example, it is possible to use IB to generate Objective-C code that declares objects and actions defined in a .xib file. However, this discussion is saved for a later chapter. Instead, you’re going to write the Objective-C code yourself to extend functionality in the Hello World app.
Two screen elements are needed: one that accepts user input for the name and the other to display “Hello.” A third element, a button, is also needed to tell the app when to display the “Hello” message. The NIB file defines the objects that make up the user interface, but there is no automatic connection between the objects and the source code. Instead, you must make the connection.
Start by opening the file ViewController.h. You can find this file in the Project navigator. When you click it, the Editor area will display the contents of the file. Modify the file’s contents so that the source code looks exactly as it does in Listing 1.1.
Listing 1.1. Modified Version of ViewController.h
#import <UIKit/UIKit.h> @interface ViewController : UIViewController @property (nonatomic, weak) IBOutlet UILabel *helloLabel; @property (nonatomic, weak) IBOutlet UITextField *nameField; - (IBAction)displayHelloName:(id)sender; @end
Next, open the file ViewController.m. Replace the generated source code found in the file with the source code in Listing 1.2.
Listing 1.2. Modified Version of ViewController.m
#import "ViewController.h"
@implementation ViewController
@synthesize helloLabel;
@synthesize nameField;
- (IBAction)displayHelloName:(id)sender
{
NSString *hello = [NSString stringWithFormat:@"Hello %@", [nameField text]];
[helloLabel setText:hello];
}
@end
The code in Listing 1.1 does a number of things. First, two properties are added to the class ViewController. These properties are marked with IBOutlet, which is a hint to IB that the class contains a reference to an object. Next, the method -displayHelloName: is declared. It is marked with IBAction, another hint to IB, this time telling IB that an action exists in the class definition. At this point, the interface for the class ViewController has been defined.
The code in Listing 1.2 represents the implementation for the class ViewController. This implementation begins by synthesizing the two properties declared in the class interface, helloLabel and nameField. Property synthesis is an Objective-C compiler feature that generates the accessor methods for these properties at compile time. You’ll learn more about this feature in Chapter 4, “Getting Started with Objective-C.”
The property synthesis is followed by the implementation for the method -displayHelloName:. This method is the action that is called when the user interacts with the app—specifically, when the user taps a button—which you will provide momentarily. The implementation of this method creates a local string variable containing the name entered by the user with the prefix “Hello.” This string is then displayed on the screen as the text value for the helloLabel.
If you were to run the app at this point, you would see no difference from the earlier version. While the code has been updated to do what you want it to do, the user interface has not been updated and the connections for the outlets and actions have not been made.
To complete the app, you need to update the user interface and connect the UI objects to the properties defined in the controller class. Once again, open the file ViewController.xib. Double-click the “Hello World” label and change its text value to “What is your name?” Resize the label as needed to display the entire text.
Search through the Object library in the Utilities area for the Text Field object. Alternatively, you can filter the object list by typing “text field” in the filter bar. Drag and drop a text field to the right of the “What is your name?” label.
Now search through the Object library for the Round Rect Button. Drag and drop an instance of this button to the right of the text field. In the Attributes inspector, change the Title property to “Say Hello.”
Finally, search the Object library for Label, and drag and drop a new label onto the canvas, placing it under the other objects. Be sure to increase the width of the label to accommodate the string value created in the method -displayHelloName:. The view should look similar to Figure 1.9.
)
Figure 1.9. The modified user interface file ViewController.xib
Now it’s time to connect the objects and events defined in the NIB with the outlets and actions defined in the view controller source code. One way to connect objects to outlets and actions is to Control-click an object, and then drag the mouse cursor to another object. When the mouse button is released, IB will display a Heads-Up Display (HUD) of the connection options. For example, when you Control-click the File’s Owner object (the translucent cube displayed in the left sidebar in the Editor area) and drag it to the text field (shown in Figure 1.10), a HUD is displayed, allowing you to connect the text field to the properties nameField and view. Select nameField to connect the text field to the property defined in ViewController.h.
)
Figure 1.10. Connect the nameField property to the text field defined in the NIB file.
Do the same thing to connect the label to the property helloLabel. Control-click the File’s Owner cube and drag to the label where the output of the –displayHelloName: will be displayed.
To connect the action to the Say Hello button, you Control-click the button and drag to the File’s Owner cube. This will assign the action -displayHelloName: to the button event Touch Up Inside.
With the connections in place, the Hello World app is now functional. Build and run the app in the simulator. Tap the name field in the simulator to enter a value, and then tap the Say Hello button to display the “Hello” message. The final app should look similar to Figure 1.11.
)
Figure 1.11. The new and improved Hello World app
You might be wondering how IB is able to identify the correct Objective-C header file. It’s simple: The file’s owner is defined as being of type ViewController. This tells IB which source file to look at for outlets and actions. You can see this by clicking the File’s Owner cube, and then typing Option-Command-3. The class name is set to ViewController. This is how an object defined in IB knows its type.