[Go] Use Xcode 5 and Interface Builder to create the Hello world App

Reprint Address: http://www.ithome.me/archives/581.html

Create a Hello World app with Xcode 5 and Interface Builder to post a reply

When Xcode 5 is released, there are a number of questions you might have about the changes compared to the previous version:

• I followed the tutorial but found that the program is no longer supported in Xcode 5.
• Where is Interface builder?
• How do I get to create a xib file?

There are so numerous examples. Xcode 5 recommends using storyboard instead of Interface Builder. When you create a new Xcode project using single View template, it uses Storyboard by default. is not generated by the Xib file.

Enter the Hello World Tutorial for Xcode 5.

As a beginner, by convention. Of course we start with "Hello world". Objectives of this tutorial:

• gives you a clearer understanding of the syntax and structure of iOS development language objective-c.
• A basic introduction to the Xcode development environment. You will learn if you create a Xcode project and create a user interface with the built-in user interface Builder.
• You will learn how to compile, build an app and test it in the simulator.
• Finally, it will make you feel that programming is not difficult.

Start your first app

Before starting the coding section, let's start by looking at what the "Hello World" app we're going to implement is like. The end result is as follows:

It is very simple and has only one "Hello World" button. When we click, this app will prompt a message. That's it. Nothing complicated, but it can help you start your iOS programming journey.

Start programming!

First, start Xcode. If you have installed Xode from the Mac App store, you should be able to find Xcode inside the launchpad. Just click on the Xcode icon to launch it.

After you start, Xcode displays a welcome dialog box. From here, select "Create a new Xcode project" To start a project:

Xcode 5–welcome Dialog

Xcode has a variety of engineering templates for you to choose from. In your first app, let's Select "Empty Application" and click "Next".

Select Empty Application

Come to the next step and need to fill in some necessary options.

Hello World Project Options

You can simply fill in the following:

• Product Name: HelloWorld – The name of your app.
• Company Identifier: com.appcoda – it's actually an inverted domain name. If you have a domain name, you can use your own domain name. For example, I can write Com.blogchen. If not, you can use my or directly fill in the "edu.self".
• Class Prefix: HelloWorld –xcode automatically generated classes will use this prefix name. In the future, you can choose your own prefix or simply leave it blank. But in this tutorial, for the sake of simplicity, we use "HelloWorld".
• Device Family: iphone – in this project we chose "iphone".
• Use Core Data: [Unchecked] – Do not select this option. You don't need the core data in this simple project.

If you have already used Xcode 4.6 or lower, you may find that there are no "use Automatic Reference Counting" and "Include Unit Tests" options in Xcode 5. They are not the default values in Xcode 5. Click "Next" to continue. Xcode will ask you if you want to save the "Hello World" project. Select any folder on your Mac, and the place to save is determined by your own habits (e.g. Desktop). You may notice that there is a version control option. Do not select it, we will discuss it in a later tutorial: Click "Create" to continue.

Pick a folder to save your project

When you are sure, Xcode will automatically create a "Hello World" project based on all the options you provide. Looks like the following:

Empty HelloWorld Project

Familiarize yourself with the Xcode workspace

Before we continue to write apps, let's take a quick look at Xcode's workspace environment in a few minutes. On the left is the engineering navigation panel. Here you can find all of your documents. The middle section is the editing area. In this area depending on the type of file you choose you can edit everything (such as Edit item properties, class file, user interface, etc). Below the editing area is the debug area. When your app is running, this area will have content displayed. On the far right is the tool area panel. This area displays the file attributes and allows you to access the Quick help guide. If Xcode doesn't show this area, you can turn it on by selecting the rightmost View button in the toolbar.

Finally, here is the toolbar. It gives you a variety of features to run your app, toggle the editor, and view your workspace.

Run your app for the first time

Even if you haven't written any code yet, you can run your app in the emulator. This can give you a concept – how to build and test an app in Xcode. Simply click "Run" and press on the toolbar.

Run button in Xcode 5

Xcode automatically compiles the app and runs it in the emulator. The following are the effects that run in the simulator:

IPhone Simulator in Xcode 5

White screen and there's nothing in there?! This is normal. Your app is not finished yet, the simulator just displays a blank interface. To terminate the app, click the "Stop" button on the toolbar.

The Xcode default setting uses iphone Retina (3.5-inch) as the simulator. You are free to choose other simulators to test your app. Try to choose another simulator to run the app to see.

Return code

OK, let's continue to add the Hello World button to the app. Before putting the button, we first need to create a view and its corresponding controller. Can you imagine that a container contains other UI items, such as buttons.

Return to the project navigation panel. Right-click on the HelloWorld file and select "New file".

Adding a new file in Project Navigator

In the Cocoa Touch category, select Objective-c class template and click "Next".

Name the new class Helloworldviewcontroller and inherit from Uiviewcontroller. Make sure that you have selected the "with XIB for user interface" option. By selecting this option, Xcode automatically generates the user interface for this view controller.

There will be a dialog box prompting you, click Finish, Xcode automatically generate three files, including HelloWorldViewController.h, HELLOWORLDVIEWCONTROLLER.M and Helloworldviewcontroller.xib. If you select the Helloworldviewcontroller.xib file, you will see an empty view similar to the following:

HelloWorld Interface Builder (. xib)

Now we need to add the Hello button to the view. In the lower section of the tool area, switch to the Object library. From here you can select all of the UI Controls and you can drag it to the view area. In this Hello World app, let's Select the button and drag it into the view. Try placing this button in the middle of the view.

Drag button into the View

Next, let's Rename the button. To edit the button's name, simply double-click it and enter "Hello World".

If you try to run the app now, you'll find it's still a blank screen. The reason is that we haven't yet told the app to load the new view. We need to add a few lines of code to load the Helloworldviewcontroller.xib. Select APPDELEGATE.M in the engineering navigation area. Add the following code to the open part of the file:

[OBJC]
#import "HelloWorldViewController.h"
[/OBJC]

In the Didfinishlaunchingwithoptions: method, add the following code after the line "Self.window.backgroundColor = [Uicolor Whitecolor]".

[OBJC]
Helloworldviewcontroller *viewcontroller = [[Helloworldviewcontroller alloc] initwithnibname:@ " Helloworldviewcontroller "Bundle:nil";
Self.window.rootViewController = Viewcontroller;
[/OBJC]

Your code should end up looking like this:

What you just did was load the helloworldviewcontroller.xib and set it as the root view controller. Now try to run the app again, and you should see the following:

Now, if you click on the button, it will not happen to anything. We need to add code to display the "Hello, World" message.

Writing the HelloWorld button

In the project Navigation area, select "HelloWorldViewController.h". The editing area displays the source code for the selected file. Add the following code before the "@end" line:

[OBJC]
-(ibaction) showmessage;
[/OBJC]

The code you completed should look like the following:

[OBJC]
#import uikit/uikit.h
@interface Helloworldviewcontroller:uiviewcontroller
-(ibaction) showmessage;
@end
[/OBJC]

Then, select "HELLOWORLDVIEWCONTROLLER.M" and insert the following code before "@end":

[OBJC]
– (Ibaction) ShowMessage
{
Uialertview *helloworldalert = [[Uialertview alloc]
initwithtitle:@ "My first App" message:@ "Hello, world!" Delegate:nil cancelbuttontitle:@ "OK" otherbuttontitles:nil];// Display the Hello World Message
[Helloworldalert show];
}
[/OBJC]

When the edits are complete, your code looks like this:

Source Code of Helloworldviewcontroller after Editing

You don't have to understand the meaning of the above objective-c code first. I'll explain it to you in a future article. Now, imagine "showmessage" as a behavior and this behavior commands IOS to display a "Hello World" message on the screen.

Connect Hello World buttons and behaviors

But here's one more question:

When someone clicks on the "Hello World" button, how does it know the behavior and call it?

Next, you need to establish a connection between the "Hello World" button and the "ShowMessage" action. Select the "helloworldviewcontroller.xib" file to return to the user interface. Press and hold the Control key on the keyboard and click "Hello World" button to drag to "File's Owner". As shown:

Releasing two buttons will pop up a hover box to display the "showmessage" behavior. Select to establish a connection between the button and the "ShowMessage".

Send Events Selection

Test your APP

That's it! You are now ready to test your first app. Click the "Run" button. If everything is right, your app is in the emulator as follows.

Perfect! You have compiled your first iphone app. It's a simple app, but I think you've got a good idea about xcode and how to develop an app.

Translated from: http://www.appcoda.com/hello-world-app-using-xcode-5-xib/

• Back to Top
• Start your first app
• Start programming!
• Run your app for the first time

The article in addition to special marked are original, reproduced please specify:it station | Create the Hello World App using Xcode 5 and Interface Builder
This address: http://www.ithome.me/archives/581.html

[Go] Use Xcode 5 and Interface Builder to create the Hello world App