Entry Level Xcode: Hello World for iPad

This tutorial starts at square one and walks you through writing your very own Hello World app, the one prerequisite  is that you have at least Xcode 3.2 installed on your Mac. You can grab the latest version of Xcode from Apple’s Developer website.

Xcode can be fairly daunting to the average user, even though it’s one of the friendlier programming environments out there. My goal is through this sporadic series of Xcode tutorials to try and reduce that intimidation factor.

Ready to get started? First, launch Xcode. You can do this by going to either Macintosh HD -> Developer -> Applications -> Xcode or by clicking the Spotlight icon on your menu bar and searching for Xcode.

Next, select Create new Xcode project

Then click View-based Application and double check that iPad is selected from the Product drop-down, hit Choose…

Name your project HelloWorld, hit Save.


You should now see a window like this:


Expand the Resources folder in the left hand pane, then double click on HelloWorldViewController.xib to open Interface Builder.

You should see a window like this:


In the Library pane, scroll down until you find the Label element, then drag and drop it onto the View window.


Select the Label you just added, then go to Tools -> Attributes Inspector

In the Text field, enter Hello World! Under Layout select Center alignment.


Now hit Command + T to open the fonts window, set the font to 72. Close the fonts window.


You may need to reposition your label so it’s in the top center of the View window.


From the Library pane, drag a Text Field and a Round Rect Button to the View window.


Postion them however you like, then double click on the Round Rect Button to edit its title. Type Go!, then press Enter.


At this point, press Command + S to save your progress. Then Command + Q to quit Interface Builder and return to Xcode.

Back in Xcode expand the Classes folder in the left hand pane, and click on HelloWorldViewController.h


The code should look like this:


Let’s add some code! First we’re going to add a declaration for the btnClicked: action. Add this right before the @end line.

-(IBAction) btnClicked:(id) sender;

Your code should now look like this:


Next select HelloWorldViewController.m under the @implementation HelloWorldViewController line add this code:

-(IBAction) btnClicked:(id) sender {

UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Hello!"

message:@"Ooo, my first app."

delegate:self

cancelButtonTitle:@"OK"

otherButtonTitles:nil];

[alert show];

[alert release];

}

-(IBAction) btnClicked:(id) sender { UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Hello!" message:@"Ooo, my first app."   delegate:self  cancelButtonTitle:@"OK"  otherButtonTitles:nil];  [alert show];  [alert release]; }


This defines what happens when you click the Go! button in your app. Your code should now look like this:


Next scroll down and find the -(BOOL)shouldAutorotateToInterfaceOrientation:
(UIInterfaceOrientation)interfaceOrientation line.


Where it says return YES; we’re going to replace the YES with the following code:

(interfaceOrientation==UIInterfaceOrientationPortrait ||  interfaceOrientation==UIInterfaceOrientationPortraitUpsideDown)

This specifies that your application should only run in both implementations of Portrait view. Your code should now look like this:

Save your code, then double click on HelloWorldViewController.xib to open Interface Builder back up.
Control-click on the Round Rect Button and drag to File’s Owner item in the HelloWorldViewController.xib, then select btnClicked from the Events popup.  Now the Go! button is linked to action you created earlier. 


Save your files, return to Xcode and select Build and Run.


Now when you click the Go! button in the Simulator you should see this popup:

That’s it for this tutorial. But don’t delete this Xcode project when your done, as my next post will deal with adding some additional functionality to your Hello World app (that’s why the random text field is in there).