Creating Hello World App Using Xcode 5 and Interface Builder | Introduction to Storyboard in iOS 7

If you are a beginner in iOS application development, you probably not familiar with the xibs and other stuffs. Almost all the Hello World  Application  are written in older versions of xcode (which is less than XCode 5). From the XCode 5 onwards apple is just only promoting the Storyboard concept to the newbies in the application development. (Storyboard has lot of great features and its own drawbacks :D). But for the old developers who are not familiar with the Xcode 5 (may be due to big projects that they are working), they are sending lot of queries like this, [box]

  • i tried to follow the old tutorial by you, but unfortunately it is not working with the XCode 5.
  • I can’t find out the interface builder in the xcode 5, did apple removed the Interface builder?
  • How i can create a XIB file using xcode 5 ?
  • I can’t find the XIB option in the project creation template in Xcode 5.

[/box] The compliant list is goes on and on. By default in Xcode 5, promotes storyboard instead interface builder.So from Xcode 4.5 to Xcode 5 there is a big change in the entire procedure. So lets take a look at the Xcode 5.

welcome to Xcode 5

XCode 5 Welcome Dialog

So next we need to take a look at the out put of our HelloWorld iPhone application.

Hello World Your First iPhone App

Hallo world iPhone App Final out put.

Hallo world iPhone App Final out put.

So now we need to move to the next stage.

Let’s Start Coding in Xcode 5

First you need to start the XCode using the application luncher. If you are not installed the latest version of xcode in your mac, then go to the mac appstore and install it. Its FREE! I hope that you did already.

Starting up XCode 5

Starting up XCode 5

Onces the Xcode is up and running, we need to select the first option “create a new xcode project ” this will help you to start a new project  in xcode 5.

welcome to Xcode 5

XCode 5 Welcome

After that it will navigate you to the next screen named template selection screen. Here you can select any kind of project templates according to your application requirement. For the educational purpose and our first step, i am going to select “Empty Application” Template and clicking next button.

Empty Xcode App Template

Empty Xcode App Template

It will navigate you to the next screen, where you need to say the app name and other stuffs. To get a clear cut idea, please take a look at the below image.

Project Configuration

Project Configuration

[box] Product Name :- HelloWorld (name of your application) Organization Name :- safilsunny (you can add your own organisation name here) Company Identifier :- com.safilsunny (it is basically the domain name written in reverse order.) Bundle Identifier :- com.safilsunny.HelloWorld (unique identifier for the app, it will help you to implement the inapp purchase, push notification service etc) Class Prefix :- You can specify the class prefix. it will automatically add the prefix for all your newly generated class in the project. Device Family :- right now i am only targeting to iPhone (you can change to ipad and Universal) [/box] [box type=”info”] If you’ve used Xcode 4.6 or lower, you may find the option of “Use Automatic Reference Counting” and “Include Unit Tests” options are left out in Xcode 5. They are not options in Xcode 5 but defaults.[/box] Now Click on the next button, It will ask for the project location where you need to save the project in your storage.

project Location for your iPhone Project

Project Location

When you click on the Create button, it will create the “HalloWolrd” project in the target location.

Project Explorer of First iPhone Project.

Understanding the XCode Workspace

Understanding the XCode WorkSpace

Understanding the XCode WorkSpace

XCode 5 Toolbar

XCode 5 Toolbar

Run Your App for the First Time

Now you need to sun your application for the first time, for that you need to click on the play button. XCode 5 will automatically build your first iPhone application and run it in the simulator. Xcode-5-iPhone-Simulator

Back to the Implementation and Code

Now you need to create a new View controller for managing the View. For that you need to  Right-click on the HelloWorld folder and select “New File”.

 

Adding a new file in Project Navigator

Adding new file in Project Navigator

Under the Cocoa Touch, you need to select the Objectie-c Template and click on next.
Xcode-5-Create-New-Class

It will create a new ViewController in the project. Now you need to go to the story board and add a new viewcontroller to the storyboard

Adding ViewController In Stroyboard

Adding ViewController In Stroyboard

Now you need to select the CustomClass of the viewController and need to select the class name.

Adding Custom Class for the ViewContoller

Adding Custom Class for the ViewContoller

Now you need to Drag and Drop a UIButton to the View and Rename it as “Hello World”
adding Button
adding button to the viwe

Now you need to create a corresponding action listener to the added Button. For that you need to go to the ViewController.m and add the below code

-(IBAction)showHelloWorld:(id)sender{
    
    UIAlertView *alert =[[UIAlertView alloc] initWithTitle:@"hello World" message:@"Hi! from my First iPhone App" delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil, nil];
    [alert show];
}

the above code will show a alert when the user touch the “Hello World” button in the View.
now we need to wire up the outlet with the button, to do that you need to open the storyboard again and hook up the outlet.
hook up the outlet

Don’t forget to say that its touchup inside. Thats it just run the app ..
hello world

Leave a Reply

Your email address will not be published. Required fields are marked *