Before opening Xcode, first close all open programs so that you will be able to optimize your processing capabilities and focus your undivided attention on this new material. Press Command + Tab and then Command + Q to close everything until only the Finder remains on your screen. Find and click the Xcode icon in your Dock to open it. You will be presented with the Xcode "Welcome" screen discussed in Chapter 1. See Figure 2-1.

Figure 2.1. Click the Xcode icon in your Dock to open it. You will be presented with the "Welcome to Xcode" frame, as discussed in Chapter 1.

Now, open a new project in Xcode. The two ways to accomplish this are by using keyboard shortcuts or by clicking your mouse. I strongly suggest that you use keyboard shortcuts. These will save you time and make you feel like a pro. Be aware that the best way to not get work as an iPhone and iPad App developer is to use your mouse for functions that can be done via shortcuts. Using your keyboard, press Command + Shift + N at the same time. These three keystrokes appear in Figure 2-2 as

Figure 2.2. Select the View-based Application template for your new project.

As soon as you save this project to your desktop, Xcode instantiates the item helloWorld_001 as indicated by the name on the top of the window (see Figure 2-3). If this looks a bit complicated, stay cool ... don't freak out! This is Apple's way of arranging all the goodies that you will eventually use to write complex apps. For now, just follow along and try to set aside all the questions you may be asking. As shown in Figure 2-3, double-click to open up the Classes folder. (Don't ask yourself what "Classes" means yet. Just open the folder. In due time, you'll know plenty about classes.)

Figure 2.3. Click the indicated icon to open the Classes folder.

As you can see in Figure 2-4, Xcode has created four files, each starting with a prefix identical to the name of our project, helloWorld_001. We are going to select what is called the interface file; it has the name of our project followed by ViewController.h. Joining these together creates the file helloWorld_001ViewController.h. At this point, don't worry about the .h extension. Later, I'll explain all the gory details about what we're doing, and it'll make more sense. Next step!

Figure 2.4. Open the Interface file. This is what your screen looks like before you write your two lines of code.

In Figure 2-4, you probably noticed several lines of code in green; these are internal comments, from one coder or programmer to another. These comments are "invisible" to the computer and because we are presently interested in code that talks to the computer, focus on the line immediately following these comments:

#import <UIKit/UIKit.h>

This line of code imports something we call the UIKit framework. It provides your application with goodies and shortcuts that make it easier to manage your user interface. This command brings in code that is organized into classes, which you can think of as preprogrammed packets of sub-routines. As a result of the presence of the UIKit, you don't have to write or rewrite a lot of fundamental technical code, but can instead take advantage of certain ready-to-go interface packages to help you design your app. These classes facilitate in the presenting of data to the user and in the responding to user input.

After that line, we see:

@interface helloWorld_001ViewController : UIViewController {

There are two things to note here. First, the @ symbol tells the innermost part of Xcode, which transforms your code into action, that it's got something essential and important to announce. In fact, we call any statement beginning with @ a "directive." This @interface directive tells Xcode that we have interface stuff to tell it concerning "helloWorld_001," and that the particulars will be enclosed within brackets {}.

But look at your screen, right after the opening bracket, {. It's empty! We're not saying anything yet –right? We know what we want to do, though, and that is to say "Hello" to the world from inside our iPhone/iPad. Now that we've got the compiler's attention with the @interface directive, we want to tell it that we first want our Interface Builder outlet, IBOutlet, to say something ... and that something will be written on a UILabel.

I want you to do this now by typing the following on the line below the open bracket:

IBOutlet UILabel *label;

Don't forget the semicolon ";" at the end of the line. This symbol tells the compiler that you're finished talking to it for the moment. Don't worry about the * in front of the word "label." We'll get into this later.

Thus, your code should look like this - with the boldfaced line indicating your insertion. Also, you can refer to Figure 2-5.

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

#import <UIKit/UIKit.h>

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

@end

Figure 2.5. This is a view of your file after you've entered the new code.

Now that you have written your first line of code, we need to instruct the compiler about one more thing here. Specifically, we want to have the button on our iPhone or iPad screen use methods that Apple has already coded for us. We want to add an IBAction, to which we will refer as "hello." To accomplish this, insert the following line after the closing bracket.

- (IBAction)hello:(id)sendr;

Again, make sure that you remember to put the semicolon at the end of the line, and don't worry about the hyphen (minus sign). I'll get to that later.

Next, highlight the line exactly as shown in Figure 2-6. Using your keyboard, enter Command + C. This useful shortcut is depicted in Figure 2-6 as

This is what your file should look like now.

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

#import <UIKit/UIKit.h>

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

- (IBAction)hello:(id)sendr;

@end

Figure 2.6. Copy your action code by highlighting the indicated line and using the shortcut.

Now that you are finished with this file, save it by using the shortcut Command + S, highlighted in Figure 2-7 as

Figure 2.7. Save your file by using the indicated shortcut.

As you can see in Figure 2-8, we are finished working on the file named helloWorld_001ViewController.h. Now, we want to work on a different file, helloWorld_001ViewController.m. This file has an identical name - except for the one letter extension!

Figure 2.8. Add to your new View-Based Application file by pasting the saved line of code (from the previous file) into the indicated area.

Let me talk a little bit about the difference between these two files: one with the .h suffix, the other with the .m suffix.

The ViewController manages the interactions your code has with the display, and it manages the user's interactions with your code. It contains a view, but it is not a view itself. The ViewController is a class, of which you only have a minimal understanding so far. What I want you to get, though, is that every class consists of two parts: the header (.h) file and the implementation (.m) file.

I want you to read this next part aloud, and I don't care if you're in the bookstore! OK? "We tell the computer in a header file what types of commands we will execute in the implementation file."

Now, let's say it again in context to our code: "We tell the computer in the helloWorld_001ViewController.h file what types of commands we will execute in the helloWorld_001ViewController.m file."

Well, admit it - that wasn't so bad!

Because you have now handled the first half of this arrangement, let's move to the implementation file and execute the commands that we have announced. To do this, we open helloWorld_001ViewController.m, and then we scroll down past the green lines - i.e., all of the comments.

I want you to use the shortcut Command + V to paste the copied line from the last step in our dealings with the header file:

- (IBAction)hello:(id)sendr;

Refer to Figure 2-6, if necessary. This shortcut is shown in Figure 2-7 as

//
//  helloWorld_001ViewController.m
//  helloWorld_001
//
//  Created by Rory Lewis on 6/13/09.
//  Copyright __MyCompanyName__ 2009. All rights reserved.
//
#import "helloWorld_001ViewController.h"

@implementation helloWorld_001ViewController
- (IBAction)hello:(id)sendr;

As you can see in Figure 2-9, I want you to delete the semicolon at the end of the line that you just pasted, which consisted of us declaring an action.

Figure 2.9. Delete the semicolon as seen in my red dot from the screen flow.

Now that we're in the implementation file, we don't want to declare an action, we want to implement. Here is what the code looks like before you insert the actions that do this:

//
//  helloWorld_001ViewController.m
//  helloWorld_001
//
//  Created by Rory Lewis on 6/13/09.
//  Copyright __MyCompanyName__ 2009. All rights reserved.
//
#import "helloWorld_001ViewController.h"

@implementation helloWorld_001ViewController
- (IBAction)hello:(id)sendr

Having deleted the semicolon after the "sendr" term, you are now ready to insert a command to accomplish our objective. We want to link the label you created (in step 6) to the means by which we may provide text to the screen. Enter this code immediately after "sendr":

{label.text = @"Hello World!";}

Hit Return after the opening bracket, and then hit Return again after the semicolon. Your file should now look like this:

//
//  helloWorld_001ViewController.m
//  helloWorld_001
//
//  Created by Rory Lewis on 6/13/09.
//  Copyright __MyCompanyName__ 2009. All rights reserved.
//
#import "helloWorld_001ViewController.h"

@implementation helloWorld_001ViewController
- (IBAction)hello:(id)sendr{
        label.text = @"Hello World!";
}

Refer to Figure 2-10 to see the results.

Figure 2.10. Replace the semicolon with an "open" bracket, input your code, and then on the following line enter a "close" bracket.

Now, using the shortcut Command + S, save the implementation file. See Figure 2-11.

Figure 2.11. Save your implementation file.

Now, it's time to open Interface Builder. Rather than opening the application and then searching for the file we need, we will just double-click on that file to automatically launch Interface Builder. The file that we need is in the Resources folder. Once you have opened that folder, you will see the ViewController.xib file.

We pronounce this as the View Controller Nib File. I say this because it's important to know a little jargon. When a programmer says, "Open your view controller nib file," that means you open the Resources folder and then open the ViewController.xib file.

The name we gave to the project will precede the text in the ViewController.xib file. We named our project helloWorld_001, so Interface Builder will insert that before ViewController.xib, giving the full name of helloWorld_001ViewController.xib, as depicted in Figure 2-12. Now, click on helloWorld_001ViewController.xib to open IB.

Figure 2.12. Click on "helloWorld_001ViewController.xib" to open Interface Builder.

Once Interface Builder opens, it will look something like Figure 2-13. Before I ask you to arrange your windows to resemble the placement that I have in mine, we need to first make sure that your Library is open. Use the shortcut

Figure 2.13. Once Interface Builder opens, make sure that your Library window is open.

We want to drag a label onto what the general public calls your View window. I will use the same name in this book, although it's not really accurate. If you are interested in the technically correct way of saying this, in geekspeak, you might say: let's drag a label onto our "Hello World 001 View Controller nib" file. In Figure 2-13, this file is represented by a frame (or window) that has the label "View" in its header.

If you like, click on the markers or boundaries of the label and make it larger by stretching it out. Then, in the Label Attributes window (to the right), delete the default text "Label" from the top field. I'm having you do this so that you can then enter "Hello World!"

Also note that you can center the text by selecting the Center button in the Layout row (four rows below the Text row).

Now, scan the other options and parameters that are available in this window. There are many opportunities here to tweak the look of your apps. The more attention you pay to details, the better the UI, the more sophisticated and clever you appear, and the more likely your creations are to be on the list of "Most Downloaded Apps!" Now, drag a button onto your View window. You may want to expand the frame by clicking, holding, and dragging a lower corner, as shown in Figure 2-14. We want to create more space here to accommodate more text. We want the user to press this button, which will produce a label that says "Hello World!" This means that we need to communicate to the user to press the button. So we need enough room to enter the text: "Press Me."

Figure 2.14. Drag a button onto your View window.

As depicted in Figure 2-15, you now want to enter the words "Press Me" into the Title field attribute of your Button Attributes window. We also want to align both the button and the label with each other and center them in context to the screen. We do this by selecting the Ruler tab, which controls size and alignment; it is located at the upper-right side of this window. Once it is selected, go down to the Alignment row and select the Align Vertical Centers icon (second from the right), and then go down one row and click the Align Horizontal Center in Container tab at the very right. This centers both the label and the button with each other, as well as with the interface.

Figure 2.15. Enter the text "Press Me" in the title field of your Button Attributes frame.

Go to the helloWorld_001ViewController.xib window as depicted in Figure 2-16, which contains three icons: File's Owner, First Responder, and View. Go to the File's Owner icon and connect it to the label by holding down the Control key (represented by ^) and clicking the File's Owner icon. Then drag your mouse cursor to the text label in the View window, as depicted in Figure 2-16. Notice that a "fishing line" is being drawn from the File's Owner icon to your Text Label. This indicates that the connection that you desire to create is working. (If there were no line, it would mean that you had not established the connection.) As you near the vicinity of the Text Label, you will notice a black option box extend from the Text Label, containing the word "Label." Recall that, back in step 5, we referred to code that appeared as *label. Well, now you are seeing the mechanism to which it pointed. This is exactly where we want to connect our File's Owner–the Label. So drag that fishing line right onto the word "Label" in the black drop-down box, as depicted in Figure 2-16.

Figure 2.16. Drag a connection from the "File's Owner" icon.

Take a deep breath and think about what you just did. Let's see if we can connect some of the pieces of this puzzle. I want you to pause for a moment, and go look at four figures–carefully, and then come back to this passage.

First, go to Figure 2-5, and then go to Figure 2-10. Be thinking of the word "label." Then, jump forward slightly to Figures 2-17 and 2-18 ... still thinking of "label." Okay? See you soon.

Figure 2.17. Connect the File's Owner to your Text Label.

Okay ... finished? What did you notice?

I'm hoping that you saw signposts on the trail that are leading us to our destination, which you just glimpsed in Figure 2-18.

Do you remember how, in Step 10, you entered {label.text = @"Hello World!";}, and then, in Step 16, you connected the File's Owner icon to the Text Label? Do you recall how you changed that Text Label to say "Hello World!"? You're probably saying, "Okay, I kinda get that, Dr. Lewis, but you forgot about Figure 2-5!"

You began this chain of events way back in Step 5, which gave rise to Figure 2-5. You attached a deep connection between the Outlet and the Label when you entered the line IBOutletUILabel *label; ... and the rest of the pieces fell into place from there. I know this probably didn't completely connect the dots in your head, but I'm quite satisfied if it at least connected some of them.

So, we're standing in the Forest of Objective-C, and you've seen traces of some interesting connectivity as you reviewed your path. Now that you've been debriefed, we have one more juicy detail we need to clarify and then take care of. Here's a hint ... what about the button that says Press Me?

Figure 2.18. (left) The "Press Me" button presented on the iPhone view of the iPad Simulator; (right) the result of pressing the button is displayed on the regular view - iPhone Simulator.

Just as you made a connection in step 16, from the File's Owner icon to your Text Label, you now need to connect your button that has the text "Press Me" to the File's Owner. Go to the Button icon and connect it to the File's Owner by holding down Control on your keypad (represented as ^ in the screenshot) and clicking on the Button icon. Now, drag your mouse cursor to the File's Owner, as depicted in Figure 2-19. Again, you will see your "fishing line" being drawn from the Button icon to your File's Owner. This indicates that the connection is working.

Figure 2.19. In Interface Builder, note the connection between the File's Owner icon and the View window.

As you near the vicinity of the File's Owner icon, you will notice a black option box appear with the word "hello." Do you remember, back in Step 6, when you entered - (IBAction)hello:(id)sendr?

Well ... guess who's comin' to dinner! Mr. Hello is saying, "Don't you think you should pull that fishing line toward me? Remember - it is I who will tell that label guy out there to say Hello World!"

Therefore, you should keep on dragging that line until it connects to the "hello" label in the black drop-down box, as shown in Figure 2-20.

Save your work:

Figure 2.20. In Interface Builder, open the "Events" drop-down list from the File's Owner icon.

The final step is compiling the code. You will do this by entering

Figure 2.21. Return to Xcode, and use the indicated shortcut to compile your code.

After compiling is complete, test your app. Push the "Press Me" button, and you will see your result. Figure 2-22 shows the iPad Simulator in full (2x) view mode, before and after pushing the button.

You have just completed your first iPhone and iPad application. Congratulations!

Figure 2.22. (left) Beautiful button in the iPad full screen mode; (right) Click it ... Hello World!