As always, let's start with a clean, uncluttered desktop. Close all programs using the Command + Tab and Command + Q shortcuts until only the Finder remains open.

You will see that I have created a picture of myself to use as an example in this app. So, whenever you see my photo in the book, you will want to see a photo of yourself there. Use any program you want to create an image that is 320 pixels in width by 480 pixels in height. If it is not exactly in conformity with the size as depicted in Figure 4-1, your iPhone may give you all kinds of zany effects, including not displaying the image at all. For good practice, just accept that you need to keep full images sized to 320 × 480. Later, when we have bars on the top, it will all change. For now, let's get 320 × 480 into your brain.

Figure 4.1. Create an image of yourself in a photo-editor that can save it as a .png file.

As you can see in the screenshot, I have used Photoshop. You can copy all the parameters exactly from Figure 4-1 to help make sure that your photo will fit correctly into your app. Save the picture to your desktop as a .png file named helloworld.png. We do this because iPhones talk to .png files–not to .jpg or anything else. Don't question it. Just accept it. You need to use a program that can create, edit, and save .png files.

If you do not have Photoshop, or a similarly powerful editing application, and you plan to program iPhones/iPads with graphics, I strongly suggest that you invest in a copy. Once your image is created and saved to your desktop, quit Photoshop (or equivalent). At this point, you should have a beautiful, empty desktop, except for the image.

Let's start by opening a View-based Application in Xcode. Open Xcode, and then enter

Figure 4.2. After entering

, create a View-based Application.

Save your View-based Application to the desktop as helloWorld_004. See Figure 4-3.

Figure 4.3. Save your View-based Application to your desktop as helloWorld_004.

As shown in Figure 4-4, once you save your project to your desktop, Xcode instantiates a project named helloWorld_004, as indicated by the name on the top of the window. (If you're not already familiar with the term instantiate, see "Digging the Code" at the end of this chapter.) By clicking on the root file of your helloWorld_004, you can see the plist file, the AppDelegate files, and the ViewController files. These files are going to be your friends, and, as we move through each new example, you we will get to know them better and better.

Figure 4.4. This is the view of your helloWorld_004ViewController file before you've entered your new code.

Looking at the files, we see that some end with .h and others end with .m. The .m represents implementation files, and the .h represents header files. At this point, you should know that header files contain classes, types, functions, and constant declarations. In contrast, implementation files contain the lines that use already coded material we have declared. In this exercise we'll be using the .h files. This is enough for now, so let's move on to the next step.

Just as we did back in the very first exercise, after opening the interface file, let's scroll down past #import <UIKit/UIKit.h>, which is the command that imports the UIKit framework. Keep scrolling, past

@interface helloWorld_004ViewController : UIViewController {

and then hit Return to make space for the code that you will enter in the next step.

As before, add onto the line that is below the open bracket (the { character) the following command:

IBOutlet UILabel *label;

This adds an Outlet to a label, just as we did in previous examples. Do not forget the semicolon (;) at the end of the line, as this tells the compiler you're done talking to it for the moment.

We now need to add an action to a button. Enter the close bracket (}) and write the following:

- (IBAction)hello:(id)sendr;

Make sure to put the semicolon at the end of this line. In the following code, you see what your file should look like.

//
//  helloWorld_004ViewController.h
//  helloWorld_004
//
//  Created by Rory Lewis on 6/13/09.
//  Copyright __MyCompanyName__ 2009. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface helloWorld_004ViewController : UIViewController {
        IBOutlet UILabel *label;
}

- (IBAction)hello:(id)sendr;

@end

After selecting the line

- (IBAction)hello:(id)sendr;

copy it by highlighting and using the shortcut

Save your file by entering

Figure 4.5. Save your work by entering

.

Now that we have set up our header file, we want to move to our implementation file: helloWorld_004ViewController.m. This file manages how your code interacts with the display. Open this file, scroll down past the green comment lines, and insert the line that you just copied, by clicking in the correct location and using the shortcut

#import "helloWorld_004ViewController.h"

@implementation helloWorld_004ViewController
*** THIS IS WHERE YOU PASTE ***

Delete the semicolon at the end of the line you just pasted and replace it with an open bracket as shown in Figure 4-6.

Figure 4.6. This is the implementation file after you insert the copied line of code and enter an open bracket "{" in place of the deleted semicolon.

#import "helloWorld_004ViewController.h"

@implementation helloWorld_004ViewController
- (IBAction)hello:(id)sendr{

After you delete the semicolon and replace it with an open bracket, go to the next line and enter this code

label.text = @"OK I'm repeating myself!";

followed by a close bracket on the line below that. Refer to Figure 4-7.

Figure 4.7. Enter the command that will generate the text "OK I'm repeating myself!" Then, save your file by using the indicated shortcut.

#import "helloWorld_004ViewController.h"

@implementation helloWorld_004ViewController
- (IBAction)hello:(id)sendr{
label.text = @"OK I'm repeating myself!";
}

Now, save your work on this interface file (

Click the Resources folder. I want you to activate it so that you can save your image file there. See Figure 4-8.

Figure 4.8. Click on the Resources folder.

Locate your helloworld.png image on your desktop and drag it into the Resources folder. I'd like you to get into the habit of saving your images here. It's a good habit that will help you to stay organized. Later on, if you begin working with huge, image-driven files, you may want to create your own Images folder. For now, drop your images into the Resources folder.

Check the box that states: "Copy items into your destination group's folder." Doing so ensures that even if you change the location of your folder or delete the image, this image will still appear in your application file because Xcode has made a copy of it in your Resources folder.

For example, right now you have the image stored on your desktop. If you delete it from there, or send this folder to the Internet or an iPhone, without checking this box, then it will not be a part of your program. Checking this box guarantees that the helloworld.png you're putting into the Resources folder will be wherever the program is. To complete this step, click the Add button or hit your Return key.

Once you have opened the Resources folder, double-click on the nib file, as shown in Figure 4-9. As you know already, this is the file that ends with .xib–specifically the helloWorld_004ViewController.xib file–and opening a nib file automatically opens up Interface Builder, which is how and where we visually control our app. We want to do this because it's time to connect pictures, buttons, and labels to the code you've been writing.

Figure 4.9. We want to open Interface Builder, so click on your nib file.

We need to have some wallpaper of your image that lies underneath all the buttons and labels we will be including in our app. This means that we need a place where the image can reside. In Interface Builder, you can place images on the Image Views. Scroll down in your Library until you see the Image View icon. Drag one onto your View frame, as shown in Figure 4-10.

Figure 4.10. Drag the Image View icon onto your empty View frame.

We want to connect your helloworld.png to your image view so that it will appear. The way that you do this is go to the Information tab of the File Attributes window, open the drop-down window, and select your saved image.

We need to make sure that your image, helloworld.png, appears in your View frame. If the image that you prepared earlier doesn't display properly, you need to stop right now and carefully go through all these steps again.

If there is a problem at this point, potential reasons might be that the image file was not properly saved into your Resources folder, or that it was not saved in the proper format, as a .png file.

Go back to your Library, scroll down to the Label icon, and drag it onto your image. You can place it anywhere you like. I chose to place it on my head. See Figure 4-11.

Figure 4.11. Click in the Label option to drag a label onto the image.

Just as we did in previous exercises, we want to remove the default label. So delete the text that's already there. Also, go to the color box and give it a click; we want to change it to a different color. See Figure 4-12.

Figure 4.12. Remove the default text inside the Text field, which is at the top of the Label Attributes frame, and then insert "OK I'm repeating myself!"

You can change the color of the text inside the label to any color you want. I chose to change mine to white because my hair is brown. If your hair is blonde, for instance, you may want to select a darker color for contrast.

We want to expand the label to be of sufficient size to hold our text. Drag one of the dots (size indicators) on the label to get to a size you believe will hold the text, which in my case is "OK I'm repeating myself!"

As shown in Figure 4-13, we now need to drag a button onto the view. When a user presses the button, it will display the label.

Figure 4.13. Drag a button onto the View frame.

As shown in Figure 4-14, we also want to change the button's default text. On the Button Attributes tab, change the text in the Title field to "Press Me."

Figure 4.14. Delete the default text in the Title field, and then enter "Press Me."

On the Attributes frame, you can also adjust the transparency so that we can partially see through the button. Go to the bottom of the window and change the Alpha slider to a level that looks right to you. This effect is illustrated in Figure 4-15.

Figure 4.15. The semi-transparent button has been selected along with the label in order to adjust alignment and placement.

With both the button and label selected, line them up by choosing a Placement option at the bottom of the View Size frame.

Next, hold down the

Figure 4.16. Command(

)-drag the File's Owner icon to the Label.

As shown in Figure 4-17, establish the connection between the File's Owner and the Label by choosing from the drop-down menu.

Figure 4.17. Establish a connection between the File's Owner and the Label by selecting from the Outlets drop-down menu: label.

Now, hold down the

Figure 4.18. Command(

)-drag from the Button to the File's Owner icon. After you are presented with a drop-down menu in which you select your desired message, save (

) the file and quit (

) Interface Builder.

Finally, enter