iPhone Beginners Tutorial

They say that your first post is one of the hardest you write. After that things start getting a wee bit easier. It took me a fractured leg and a compulsory month of bedrest to get started with my blog, so I plan on doing this right.

I’ve always thought of putting together and compiling a “Hello World!” set of programs in several programming languages, so it only seems fair that with my love of all things Apple, my first “Hello World!” on wordpress be a tribute to “The Most Amazing iPhone Yet” :)

This is a tutorial for a start up application in iOS. Gives you the basics all the way from creating a new Project to using the Interface Builder and running the app.

Assumptions : I’m assuming throughout this tutorial that you’re using XCode 4.2, iOS 5 SDK. I also assume you have an iPhone to test your application on although, incase you’re one of the people who don’t wanna shell out the 99$ per year for the developer account I plan on adding a “How to run your applications on your iPhone for free” as my next Blog. For now we’ll be testing our app on the iOS Simulator.

Step 1 : Creating a new XCode iPhone Project 

Open XCode 4.2.  You should get a window that pops up with any Xcode Projects you’ve created/opened in the past. Click on “Create a New XCode Project”

From the resulting “Choose Template Window” that appears, choose “Single View Application”

In the window that opens make the

1. Product Name : HelloWorld (this will be the name of the folder in Finder containing all your XCode project files and resources needed).

2. Company Identifier : com.YourCompanyName (this should be like a domain but written the other way around).

3. Class Prefix : HelloWorld (I’ll explain this part a little down the line).

4. For your first project don’t tick mark any of the checkboxes below. We’ll take up another tutorial for those in detail.

5. Choose a default directory for your project (preferably one without any spaces in the name eg : /Users/Sasha/Desktop/iOS/  (again this is important later on for future applications when you may have to change the path variables).

Thats it for Step 1. You now have a working XCode Project at your disposal. Hit Run and see what happens!

Step 2 : Coding the Hello World Interface  

When you press Run you should see your iOS Simulator open up and an iPhone simulation as shown in the figure at the side. The simulator should show you an the default iPhone Home Screen. With any previous apps tested or created on the simulator. It simulates a default application icon, launch screen and then jumps into your app.
As of now, you should see a default grey screen with nothing on it. Boring right ? But not bad for an application without any coding done by us in it at all huh ??!!

Class Prefix : 

In your Project Navigator you’ll see some the default files set up. Each view in your application will have a ClassViewController.m, ClassViewController.h and ClassViewController.xib (ie your Interface Builder GUI file).

The reason that we labeled our Class Prefix “HelloWorld” in Step 1 was cause this is the default view that opens once you click/touch the app in the Home Screen. Keeping Class Prefixes is a good idea since later on you can add various different views and your code stays clean since you can differentiate between the views using the class prefix.

Interface Builder :

Lets see how we can make XCode do most of the work. This is how your probably screen looks like right now. I’ve labeled a few of the areas that we’ll be referring to in this tutorial.

1. Select the HelloWorldViewController.xib file from the Project Navigator. You should see the image of what your view looks like show up in the right panel. As of now it looks like a grey boring screen. We’ll soon change that.

2. From the toolbar make sure “Show Utilities panel” and the “Assistant Editor” is selected and on. If the Assistant Editor is on, then when you click on the View in your .xib file, you should see the corresponding HelloWorldViewController.h file show up on the right.

3. From the Object Library in the Utilities Panel drag a Label Field onto your iPhone view and place it wherever you feel like. Also drag a Round Rectangular Button & Text Field onto your screen.

4. Double Click the Label Text and change it to “Hello World !!”. Double Click the Button and change the text to start. Select the Text Field and in the Attributes Inspector change the Placeholder Text to “Enter your name here…”

This is what it should look like when you’re done —–>

4. Right Click on the Label Field. From the transparent black window that pops up, drag a New Referencing Outlet line to your .h file just abvoe the @end LOC. You should see an “Insert Outlet” sign just before you release the mouse. Add in HWLabel as the attribute name.

Check your code. In the HWViewController.h file you should have a @property IBOutlet value set up for you. Also in the HWViewController.m file you’ll have the @synthesize and the dealloc () method set up. Great !!

Now do the same thing for the other two visual elements (ie the button and text field). Keep the name of the button “startPressed” and the name of the textField “HWName”.

At this point you should have all the @synthesize, @property and dealloc () methods set up as well as a new empty IBAction method called startPressed.

5. Now lets add in the code for the startPressed method. Copy paste the following into your program inside the startPressed method.

- (IBAction)startPressed:(id)sender {
     [HWName resignFirstResponder];
     [HWLabel setText:[NSString stringWithFormat:@"Hello %@ !!", HWName.text]];
}
6. Done !! Hit run and watch as your very first program runs in the iPhone simulator. Now, when you type your name in the text field and press the start button, you should get a result something like the figures attached below.

        

## Explanation for the code ##

I’ll add in a future post explaining the entire MVC structure that iOS uses as well as the messaging structure where objects can pass messages between each other indicating the occurence of events. For now I’ll just explain the 2 lines of code :

1. [HWName resignFirstResponder];  

In iOS the keyboard has to be handled by the programmer. Although, the keyboard shows up automatically when the user clicks on an editable object (such as our textfield), the keyboard, which is currently controlled by the firstResponder (ie our textfield) has to be dismissed by the programmer. Here we send a message to the HWTextField to resign its status as firstResponder so that the keyboard can disappear.

2. [HWLabel setText:[NSString stringWithFormat:@"Hello %@ !!", HWName.text]];

iOS is based on Cocoa. Cocoa continues the lineage of several frameworks (primarily the App Kit and Foundation Kit) from the NeXTSTEP and OpenStep programming environments. As a result, Cocoa classes begin with the acronym “NS” (standing for the original proprietary term for the OpenStep framework, NeXTSTEP): NSString, NSArray, etc.

Here we create an NSString object with the text “Hello %@ !!”. Here the %@ stands for a placeholder in place of any variables that we may want to insert, in our case the value entered in the textField. We then assign this NSString value to the label.

*** Possible Error ***

Im not sure how often this happens but incase on the left sidebar if your project says something like “1 target, missing base SDK” and gives you on Run : 

The run destination My Mac 64-bit is 
not valid for Running the scheme 'HelloWorld'.

This means that you default Base SDK is incorrect. To correct that you need to click on your project in the left Project Navigator –> click on the Targets HelloWorld shown in the Project Editor –> Build Settings –> under Base SDK select iOS 5.0 (or whatever your highest SDK is)

Repeat the same steps in the Project Editor –> Project HelloWorld –> Base Settings –> Base SDK

About these ads

4 thoughts on “iPhone Beginners Tutorial

  1. When I get to the end of Step 4, everything is fine, but I am not getting a:
    “new empty IBAction method called startPressed.”

    If I cut/paste the “startPressed” method after “dealloc” myself anyway, I get the error: “Property ‘text’ not found of type ‘UIView'”

    I’m not sure how to proceed. Any suggestions?

    Thanks,
    Jim Goff

    • Yes, If you do not follow the drag-drop method (where the @property and @dealloc code is set up for you automatically) then you need to manually code them in.

      You should have the following in your code if you’re done… If its missing, code it in :

      1. In the .h file :
      – (IBAction)startPressed:(id)sender;

      2. In the .m file :
      – (IBAction)changeGreeting:(id)sender {
      [HWName resignFirstResponder];
      [HWLabel setText:[NSString stringWithFormat:@"Hello %@ !!", HWName.text]];
      }

      3. In the .h :
      @property (weak, nonatomic) IBOutlet UITextField *HWName;

      4. Other things you need to code in if you do it manually :
      a) The @synthesize method for each property,
      b) The @dealloc to the .h file for each of the @properties that you have synthesized

      Lemme know if you have any more queries :D

  2. I wasn’t getting the startPressed method and aft a bit of googling realised that you have missed out a step namely right clicking on the Start button and dragging the Touch Up Inside send event to the header to create the startPressed (or changeGreeting depending upon what you call it) method. After doing this the tutoial will work.

Leave a message :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s