Your First iOS App - Hello World

In this tutorial we will be building your first ever iOS application. This step by step tutorial will introduce you to the Xcode IDE and some basic Objective-C.

Learning outcomes:

1. How to create a single viewed application in Xcode.

2. How to use storyboards to lay out a basic interface for an application.

3. How to connect UI elements to Objective-C classes.

Steps:

1. To create a Single View Application, select File -> New -> Project. Alternatively if you're opening Xcode for the first time, select "Create a new Xcode Project" to bring up the project template screen. 

2. With the project template screen open, select the "Single View Application" icon in the iOS category and click Next. This will bring up the project options screen where it will allow us to input details about our new project.

In the projects options screen we have several input fields that allow us to customise our project a little before we dive into the code. 

Product Name: The product name field allows us to provide a name for our project. For the sake of our first tutorial we'll give it the name of "HelloWorld".

Organisation Name: The name that identifies the creators of the application. You can input your name, or if you'd like to be creative enter your company name.

Company Identifier: This field allows us to create identifiers so we can separate our classes into orderly packages. 

For the rest of the fields, we'll keep it as simple as possible. Select iPhone under "Devices" and uncheck "Include Unit Tests". The "Use Storyboards" and "Use Automatic Reference Counting" will remain select. For now we'll stick with these settings, don't worry about what they do as it'll be covered later. 

After all the details are entered, select Next and select an appropriate file location to store the project. Where you choose to do that is up to you, however ensure the location is easily accessible and for the final step select "Create"

If you like, you can press "Run" to start the application. It will only display a blank screen since we haven't added anything to our views, but this is the foundation of our app. 

3. Now that we've created our project, the next step is to design our view by placing various UI elements onto our layout. To do so, we now open the "MainStoryboard.storyboard" to bring up our storyboard. 

Storyboards have been introduced as part of the Xcode 4 to allow developers to design their entire application on a single canvas. It allows us to design all the screens for our application and to connect them together so that we can visualise how a user might navigate through the application. Think of it like a storyboard for a movie, where a single scene is our current view (screen) and the scene transitions are the flows through our application. As we build more complex applications, this will become more apparent.

For those that have used previous iterations of Xcode, you might wonder where Interface Builder and XIB's are gone. Long answer short, Interface Builder has now been integrated into Xcode itself and XIB's still exist if we decide to design individual views that we would like to reuse. More on that later.

4. Now that we've brought up the storyboard, we are now staring at the first screen of our application. The arrow that points to our view controller indicates that it is the initial controller, or the view that is displayed when a user enters our application. When we begin to add more views and view controllers to our applications, we will be able to change this setting to any view controller that we wish.

It is now time to do the fun stuff which is to layout different UI elements onto our view. For our "HelloWorld" app, we'll use the following:

• 2 Round Rectangle Buttons
• 2 Labels

In the bottom right hand corner you'll see the File Template Library, if we select the icon, we'll bring up the Object Library which is comprised of a whole bunch of basic UI elements that Apple have created for us. Of course we can create and add our custom UI elements, but for this first tutorial we'll stick with the basics.

Drag the Round Rectangle Buttons and Labels  onto the view controller and lay it out on the screen. You can follow what is shown in the screenshot below or anywhere you desire should you want to be a bit fancy and add a bit of your own touch.

5. Once we've laid out our various UI elements, its time to give them some appropriate names. The buttons we will rename to "Hello" and "Bye", the idea is that by pressing the "Hello" button we'll display a message, whilst pressing "Bye" will make the message disappear. 

To change the names of the buttons, simply double click on them and type. Alternatively, in the top right hand corner you can click on the icon, which will display the attributes inspector and you can rename the button that way.

For the labels, we'll make one label always display a message, and the other only display a message when we press the "Hello" button. To do so we follow the same process as we did for the buttons with the double click, however for one of the fields we'll remove the text altogether to leave it blank. Change the width of the labels so that they stretch across the screen as shown below.

6. By this stage, we will have completed the layout for our HelloWorld app. If you'd like to see how it looks, you can press run to load it up in the iPhone simulator. If you've loaded the application up, you'll notice that whilst the buttons are clickable, they are non responsive. This is because we haven't given any instructions to our application to do anything when the buttons are clicked.

This will all change very shortly.

Ideally in the real world, our application will have more than one screen. This would mean that we would have to connect different view controller classes to our view controllers in our storyboard, but since our first app only has the one screen, this has been automatically done by Xcode for us. In later tutorials we will discuss how to connect everything up so for now we shall continue.

Whilst still on the storyboard screen, press and hold the alt/option key and select ViewController.h. This will display the assistant editor, which is a side by side screen of our storyboard and ViewController.h class. In the top right corner you'll see a row of these icons which will display/hide certain sections of our views. Feel free to play around with them to free up space on your display like the diagram below.

Xcode provides a simple way to connect elements from our interface to our view controllers. 

To connect the buttons to our view controller, select the button and press and hold the control key and drag the cursor towards the space between the @interface and @end tags of the ViewController.h class. Once we've arrived there and released the buttons, a new popup menu will appear asking for us to define various properties for our button.

Since we want our button to do something when the user presses it, we'll give it an Action connection from the connections drop down menu. This basically tells Xcode that we would like to perform some customised method when the user presses the button.  The method that will be called will be associated to the name that we provide so give it an appropriate name. 

Repeat the same actions for both buttons.

For our currently invisible label, we will do the same click and drag action towards the ViewController.h class to bring up the properties menu, however the difference this time is that we'll give it a Outlet connection because we would like it to use it to display text.

Once we've got the buttons and label hooked up, it should look something like this:

7. We're now almost at the end, all that is left to do now is to write a little bit of code.

Select the ViewController.m file, this is where our implementation code will be written. If you have connected the buttons up correctly, the first thing you'll notice is that there are two methods that are of the same name that we provided our button actions in the ViewController.h file. These are the methods that will be called when the "Hello" and "Bye" buttons are pressed.

We now need to provide the ViewController.h class a reference to our label outlet that we also added to the ViewController.m file. To do so, we can synthesise the label outlet property using the @synthesize tag. Synthesising properties in Objective-C is equivalent of writing getters and setters in other languages, in fact we could write our own getter and setter methods here, but Objective-C does it automatically through Synthesising so why bother. 

Once we've synthesised our label outlet, we can access it anywhere within the class. We are now onto the final step, which is to populate our label with text.

Since we want our label to display text when the "Hello" button is pressed, we will add code within the responding method to do so. 

For the "Bye" button, you can choose to display a different message or clear it altogether. Just remember to use the @ before your string when setting constant strings in Objective-C. Once you've set the messages you wish to display, you should have something similar to the diagram below:

8. Congratulations! You've create your first iPhone application. If you've received no compilation errors, press Run to fire up your app to see it in all its glory!

Have a play around with the buttons to see the messages appear. If you like, you can add more buttons to display all sorts of different messages, just retrace your steps from this tutorial, the process is the same.

Conclusion:

So there it is, your first iOS application. Through this tutorial you will have achieved the three learning outcomes that were outlined at the top. By this point you will have successfully:

1. Learnt how to create an iOS project in Xcode

2. Learnt how to lay out a basic UI with storyboards

3. Learnt how to connect the UI to the ViewController classes

4. Learnt how to write basic Objective-C