y now, you should already know that Apple has lifted the non-disclosure agreement (NDA) that bound developers to confidentiality regarding their work with the iPhone SDK. Developers are now free to discuss the SDK and share their experiences with fellow developers. As a mobile developer focusing on Windows Mobile and more lately the Android platform, the iPhone is definitely one of the most important platforms on which I am focusing.

Unlike the Windows Mobile and the Android platforms, which use object-oriented languages (VB.NET and C# for Windows Mobile and Java for Android) very similar in syntax, the iPhone SDK requires the Objective-C language, which is an extension to the C language with Smalltalk-style messaging added. While Objective-C is object-oriented, its syntax is far from being similar to languages like Java and C#. This poses a huge learning barrier, especially for developers new to the Mac OS X platform.

If you are coming from another platform (which I am), a lot of concepts used in iPhone development may be new and can be totally frustrating (trust me, I have been through this) for a beginner. The best way to learn iPhone programming is to get your hands dirty and start coding. Hence, this new series on iPhone programming is meant to guide you as you enter this brand new world of iPhone application programming! For this inaugural article, you’ll learn how to use the SDK, create a simple iPhone application, and deploy it to the simulator included?all without needing to understand much of the underlying framework that makes all the magic happen. Subsequent articles will then delve into the framework in more detail.

Alright, fasten your seatbelts and let the fun begin!

What You Need for iPhone Development
To get started with iPhone programming, you’ll need the following:

• An Intel Mac running Mac OS X Leopard v10.5.4
• The iPhone SDK for iPhone OS 2.1, which you can download here. The iPhone SDK contains all the tools and utilities you need to develop iPhone applications. In particular, it comes with Xcode 3.1(the development IDE) and the iPhone Simulator that allows you to test your application without needing a real device.
• Lots of patience and perseverance!

Creating Your Hello World Application
Power up Xcode (type “Xcode” in Spotlight to quickly launch Xcode) and you should see the welcome screen.

To create a new iPhone project, select File?New Project. Figure 1 shows the different types of projects you can create using Xcode. There are two primary categories: iPhone OS applications and Mac OS X applications. For this article, you are obviously only interested in iPhone applications. Click the Application item listed under iPhone OS to view the different templates available for developing your iPhone application.

Suffice it to say at this point, that there are quite a few types of iPhone applications you can create; select the View-Based Application template and click Choose.

Figure 1. Create a New Project: These are the different types of iPhone application templates.

Figure 2. Files and Folders: Here are the files and resources in your iPhone application project.

Name the project HelloDevX and click Save. Xcode will proceed to create the project for the template you have selected. Figure 2 shows the various files and folders in your project.

Figure 3. Customize the Toolbar: This shows the Active Target item added to the toolbar.

Xcode’s left panel shows the groupings in your project. You can expand each group to reveal the files contained in each group (and in the folders). The right panel shows the files contained within the group (or folder) you have selected in the left panel. To edit a particular file, select the file and the editor at the bottom of the right panel will open up the file for editing. If you want a separate window for editing, simply double-click on a file to edit it in a new window.

The top part is the toolbar area. This area contains all the commonly used toolbar menu items you’ll use in the development process. You can customize the toolbar area to add your commonly used items. Give this a try by selecting View?Customize Toolbar. A drop-down window will appear.

To add an item to the toolbar, simply drag and drop the item onto the toolbar. Figure 3 shows the Active SDK item added to the toolbar.

The Active SDK item allows you to select whether to deploy your application to a real device or the Simulator.

Building the UI of Your iPhone Application Using Interface Builder
At this point, the project you’ve created has no UI. To see this, simply press Command-R (or select Run?Run) and your application will be deployed to the included iPhone Simulator. Figure 4 shows the blank screen displayed on the simulator.

Obviously, this is not very useful. So, add some controls to the UI of your application. Examining the list of files in your project, you’ll notice two files with the .xib extension: main.xib and HelloDevXViewController.xib. Files with .xib extensions are basically XML files containing the UI definitions of an application. You can edit .xib files by modifying their XML content manually or more easily (and more sanely) by using Interface Builder. Interface Builder comes as part of the iPhone SDK and it allows you to build the UI of an iPhone (and Mac) applications by using drag-and-drop.

Figure 4. Blank Screen: Testing the application on the iPhone Simulator.

Figure 5. Build Your UI: Using Interface Builder to build the UI of your iPhone application.

Double-click on the HelloDevXViewController.xib file to launch Interface Builder. Figure 5 shows Interface Builder displaying the content of HelloDevXViewController.xib (which is 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.

Now, drag and drop a Label control onto the UI. Once the Label is added, select it and click Tools?Inspector (see Figure 6). Click on the Attributes tab and enter the text “Hello, DevX!” Also, modify the label’s layout to center alignment.

Figure 6. The Inspector Tool: Editing the attributes of the Label control.

Figure 7. Editing Your Form: Editing the attributes of the Round Rect Button control.

Next, add a Text Field control to the form, followed by a Round Rect Button control. Modify the attribute of the Round Rect Button control (Figure 7) by setting its Title to Click Me!

Save the HelloDevXViewController.xib file by pressing Command-S. Back in Xcode, run the application again by pressing Command-R. The iPhone Simulator will now display the modified UI (see Figure 8).

Tap on the Text Field control and watch the keyboard automatically appear (see Figure 9).

Figure 8. Your UI, So Far: The UI now has some controls.

Figure 9. Invoke the Keyboard: Tapping on the Text Field control invokes the keyboard automatically.

Press the Home button on the iPhone Simulator and you’ll notice that your application has been installed on the simulator (see Figure 10). To go back to the application, simply tap on the HelloDevX icon again.

The iPhone Simulator also supports changes in view orientation. To change the view to landscape mode, press the Command-Right Arrow key combination. Press Command-Left arrow key to change back to portrait mode.

Figure 10. Finis! The application is installed in the simulator.

Notice that your application did not respond to changes in view orientation. You need to modify your code so that when the view orientation changes, it can react to it.

In Xcode, edit the HelloDevXViewController.m file and look for the following code segment:

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

Modify the code above to return YES, as shown below:

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

Run the application again. This time you will notice that your application rotates as the view orientation changes.

Controls Repositioning
Figure 10 showed you that as the orientation changes, the size and positioning of the controls remain. Ideally, your controls should reposition on the screen according to the view orientation.

Back in Interface Builder, select the Label control and select Tools?Size Inspector. Modify the Autosizing attribute of the control as shown in Figure 11. This will cause the Label control to expand/contract as the view orientation changes. At the same time, the control will anchor to the left, top, and right of the screen.

Likewise, modify the Autosizing attribute of the Text Field control.

Finally, modify the Autosizing attribute for the Round Rect Button control. Observe that, this time, you are not resizing the control when the view orientation changes. Instead, you are only going to anchor it to the top of the screen.

Figure 11. Autosizing: Modifying the attributes of the Label control for autosizing.

Figure 12. View Your Changes: Rotating the view within Interface Builder.

That’s it! Within the Interface Builder, click on the arrow located at the top-right corner of the screen to rotate the screen to view your changes immediately (see Figure 12).

Go back to Xcode and run the application again. This time, notice that the controls will reposition and resize themselves as you rotate the screen.

Writing Some Code
So far, you haven’t written any code. This was deliberate, because I wanted you to get comfortable with Xcode and the Interface Builder before embarking on coding. Nevertheless, let’s write some code now to give you a taste of iPhone programming.

Recall that the Interface Builder contains a window labeled HelloDevXViewController.xib. Within this window, there are three components: File’s Owner, First Responder, and View (see Figure 13). Select File’s Owner, and then select Tools?Identity Inspector.

In the HelloDevXViewController Identity window, click the “+” button listed under Class Actions. Name the action btnClicked: (remember to include the colon). This creates an event handler named btnClicked:.

Figure 13. HelloDevXViewController.xib: Creating an event handler.

Figure 14. btnClicked:: Linking an event with an event handler.

Control-click the Round Rect Button control in the View window and drag it to the File’s Owner item in the HelloDevXViewController.xib window (see Figure 14). A small pop-up containing the btnClicked: event will appear. Select the btnClicked: event. Basically, what you’re doing here is linking the click event of the Round Rect Button control with the event handler.

In the HelloDevXViewController.h file, add in a header declaration for the btnClicked: event:

////  HelloDevXViewController.h//  HelloDevX////  Created by Wei-Meng Lee on 11/12/08.//  Copyright Developer Learning Solutions 2008. All rights reserved.//#import @interface HelloDevXViewController : UIViewController {}//---declaration for the btnClicked: event----(IBAction) btnClicked:(id)sender;@end

In the HelloDevXViewController.m file, add in the code that provides the implementation for the btnClicked: event:

Figure 15. Your Alert Window: Tapping on a button displays an alert window.

- (void)dealloc {    [super dealloc];}//---implementation for the btnClicked: event----(IBAction) btnClicked:(id)sender {	UIAlertView *alert = [[UIAlertView alloc]                  initWithTitle:@"Hello DevX" message:                   @"iPhone, here I come!"  	delegate:self cancelButtonTitle:@"OK"                 otherButtonTitles:nil, nil];	[alert show];    [alert release];}@end

The code above will display an alert window containing the sentence iPhone, here I come! Now, go back to Xcode and run the application again. This time, when you tap the Button control, an alert window will be displayed (see Figure 15).

Groundwork Laid
Though you haven’t done much coding in this article, you’re now familiar with Xcode and the Interface Builder, and can build a very simple iPhone application. Look for the subsequent articles in this series to get your hands dirty with the Objective-C language.