Welcome to iOS Application Development: Say Hello World!!!

Posted by Matthew Casey in Beginner Tutorials, Featured | 3 comments

This tutorial uses iOS 5 and Xcode 4.2

This tutorial is for the absolute beginner, it will go through downloading and installing the development tools and then building your first application. Any concepts that require a more detailed understanding will be explained in linked to articles. To begin your never ending journey of iOS Development click that more link!

Pre-Requisities

There are a few requirements we have to deal with first. The first is hardware and software related:

Xcode 4.2 requires Mac OS X Lion and an Intel Based Mac – Download this from the Mac App Store

We are not relying on you having any previous programming experience on the iOS or Mac platform, although previous programming experience would be preferable.

Download and Install Xcode – Your New Home!

Once you have downloaded Xcode 4.2 from the Mac App Store, open the “Install Xcode” application and follow the instructions to install. This installs not just Xcode, but the SDK’s for both iOS and Mac development as well as some utility applications.

Once installed, launch Xcode (/Developer/Applications).

Introduction to Xcode

Now that you have the development environment all set up, please watch this video that explains the basics of Xcode and how it functions. Once you’ve done that, come back here to carry on.

Creating your First Project

So lets get going with building our first application. Make sure Xcode is front and centre on your screen and you should be greeted with the screen to the right. If this doesn’t open it can be shown by going to Window >Welcome to Xcode.

Click the “Create a New Xcode Project” which will guide you through creating a new project. For this tutorial we are going to build a simple single screen iPhone application. We do this by selecting the “Single View Application” from the Application (iOS) section. Click next to proceed. The next screen is asking you for a few details.

Product Name: This is your application name. When following tutorials on this website we recommend you use the same name as us so that everything should look the same if you come across problems in your coding.

Company Identifier: This is a string that unequally identifies your company. For example com.mycompany

Class Prefix: This is a short string that will be attached to all Classes you create in your project. You are responsible for adding this to any that you add after the project is initially created. This is good coding practice so that you know what class’s you have coded, and which are from frameworks etc. For example, some of Apple’s core classes use prefixes such as NS and UI

Device Family: This is the device you intent the application to be for. iPhone (which includes iPod Touch), iPad or Universal (which is both).

Use Storyboard: A storyboard is a file that allows you to graphically create all your user interfaces for this project. It is like a top-down plan of your entire application.

Use Automatic Reference Counting: This is new to Xcode 4.2. This allows you, the developer, to focus on developing the logic in your application rather than spending countless hours on  memory management code. When you build your application, Xcode will automatically add all required “release”, “retain” and “autorelease” statements if you check this box.

Include Unit Tests: This allows you to add files to your project that help automatically test your application.

So after that explanation, enter the following details for this tutorial:

Product Name: HelloThere

Company Identifier: com.mycompany

Class Prefix: IC

Device Family: iPhone

Use Storyboard: On

Use Automatic Reference Counting: On

Include Unit Tests: Off

Click next to proceed. Find someone to save your project (Xcode will automatically create a new folder to store the project in). Then click Create. Once done your new project will be opened.

 

What Are All These Files?

When you created that project, Xcode creates a lot of files for you by default. It is easy at this stage to say “Right OK what next??”. We are going to quickly run through the files that are generated so that you know what is being done behind the scenes.

ICAppDelegate.h / ICAppDelegate.m – This is where you can put code that executes when the application opens, closes receives a phone call etc.

MainStoryboard.storybaord - This is where we will create the graphical sides of our interfaces

ICViewController.h / ICViewController.m - This is where we will place code to control our “single window”

Supporting Files Folder - In here is a bunch of files that help your application run and at this level you do not need to know what they do

ICAppDelegate is a class, so is ICViewController. If you don’t know what a class or an object is, please read this article now. Once completed come back to this tutorial to carry on.

Configure our View in the Storyboard

Your application knows that when it launches it should read in the MainStoryboard.storyboard file and load the interfaces. Take a look at this file now. In it you should see almost like graph paper with a single white rectangle with an iPhone status bar at the top. This is our first view. The faded arrow coming into it is the file telling the application that this is the initial view and should be loaded at application launch.

Why don’t we add something so that we can see the application working. In the bottom right corner there should be a series of tabs, select the third tab (Object Browser). Find a “Text Field” and drag it onto your view. Place it about two thirds of the way up the white rectangle and in the middle horizontally. It should snap to a blue centre guide. Use the little handles to resize the text view so that it is wider. Expand each side until it snaps to another blue guide. These guides represent Apple’s guides as to distances suitable for human fingers to touch from the edge of the screen. Once you have done this save your Storyboard and click run in the top left corner of Xcode. Voila!

 

Try tapping the text field. This will bring up the keyboard for you to type. The application doesn’t do much else yet so lets head back to Xcode.

This is the simulator by the way, a way to test your iPhone applications without an iPhone. Works just like an iPhone. Feel free to explore the built in applications.

 

Flesh Out The User Interface

We are going to add a few more elements from the Object Library to our user interface. Drag out two labels and a button. You can edit the text on a label or a button by double clicking. Arrange and resize these new elements to make your interface look like this.

Feel free to save and run your application to try out these new elements! But they don’t do anything yet! Lets change that! Select the “View Controller”, the easiest way to select this is to click the status bar. On the right hand side there are a series of inspectors (tabs at the top of the right sidebar). The fourth one allows you to change properties of the selected element. The third one allows you to set custom classes. Select this one. You will notice the class of the view controller is ICViewController. Just what we want! When our application loads this view from our Storyboard it will create an object from our ICViewController class as the controller for our view. Thats great! Save your storyboard!

Ready, Steady, Code!

Head to ICViewController.h. This is the interface file for our ICViewController class. We are going to add a property so that we can interact with our text field. Lets do this! Here is our ICViewController.h after the change with the added line highlighted.

This line tells our class we have a property called txtPersonName and it will be a UITextField object. We also tell it that this will be connected to something in our Interface Builder using the “IBOutlet” keyword. The word nonatomic tells us that this property is not thread safe (don’t worry about this), and strong tells us that the object stored in this property should be retained in memory.

We also need to add a method that can be executed when the user taps the button. To do this add the following line:

This line tells our class that we are going to define a method called buttonTapped: and will accept one argument, sender that is an id (anything). The IBAction keyword tells the compiler the method will not return anything and will be something that is called from our Interface Builder in our storyboard.

Head over to ICViewController.m and we need to implement both our property and our method. The property is easy as we are going to use Objective-C’s @synthesize command to tell it to auto generate getters and setters for this property. It will even auto generate an instance variable to store the object in. Add the following line of code after the @implmentation line:

The method is going to be where we do most our coding, so lets add the empty method stub for now. Add this code just below your @synthesize:

Implement the ButtonTapped Method

This is the main part of our application logic. We need to take the text from our text box (the name), add this into our message and then show the message to the user. We will use the following algorithm to do so:

• Create a string that says Hello There <and then the persons name>, how are you? From your favourite friend <the current users name>
• Show an alert view with this message

So lets first create our message string. We do this with the following code:

Line 14 creates a string using a formatter string. It uses the string “Hello there %@, how are you? From your favourite friend %@” as a template string, and replaces the first “%@” with the text from the text field, and the second %@ with the current users name.

We then need to do something with this message. We are going to use a UIAlertView to show the message. Add the following code:

Line 15 creates a new UIAlertView object that has a title of “HelloThere!” and the contents of ourMessage is used as the message. We don’t need to respond to what button was pressed, so we set delegate to nil. We want the close button to say “Oh hi!” and we don’t want any other buttons. Line 16 shows the alert view.

Thats it? Not quite. We still need to connect our code up to our interface. Lets do that now!

Tie Everything Up!!

Go back to your MainStoryboard.storyboard. We need to connect our txtPersonName property to our text field and our buttonTapped method to the touch event of the button.

Hold down the Control key and drag from the view controller to the text field, and select the txtPersonName property.

Then hold down the Control key again and this time drag from the button to the view controller, and select the buttonTapped method.

Thats it! All Connected! Save your storyboard, run your application and try it!

How do you like it?

Its nice isn’t it?

That wraps up our tutorial for today, if you have any questions or feedback please do not hesitate to leave a comment. If you want to download the finished application, please register and the download will be available to you.

{filelink=2}