Skip to content

July 23, 2010

1

Entry Level Xcode: Hello World for iPad

xcode

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
Xcode - Create new project
Then click View-based Application and double check that iPad is selected from the Product drop-down, hit Choose…
Xcode - View-based application

Name your project HelloWorld, hit Save.
Xcode - Save project as

You should now see a window like this:
Xcode - Main Window

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

You should see a window like this:
Interface Builder

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

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

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

Now hit Command + T to open the fonts window, set the font to 72. Close the fonts window.
Font 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.
Text Field Round Rect Button

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
Expand Classes Folder

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).

Read more from iPad, Tutorial
1 Comment Post a comment
  1. jaybharatjay
    Oct 6 2010

    Hi sir, awsome very good tutorial, reallly really thanks, please be continue.

Share your thoughts, post a comment.

You must be logged in to post a comment.