Familiarizing Yourself With Xcode

This post is a quick rundown of the Key Elements of Xcode and a quick start guide to a Hello World App. I won’t get into all of the nitty gritty details of what Xcode can do, but I will provide some information on the most useful bits of Xcode.

Assumptions

  • You Have Already Installed Xcode 4.5 . If not Please do so.

Creating A Project

After opening Xcode and creating a new project you will be presented with a number of template options for the new iOS project. As a beginner, the Single View Application will be most useful to you. As a Starting point, a lot of Developers tend to use A single View Controller or a Empty Application instead of the other options.

Select Single View Application and press Next.

The next Screen will be for Project Options. The Product Name is the most important Field here as it will be the project name. Fill in the Organization and Company Identifier. These fields are arbitrary while learning but Xcode still requires them. Make sure the “Use Storyboards” and “Use Automatic Reference Counting” check boxes are checked. Since we’re doing an iPhone App choose iPhone from the devices drop down.

The Class Prefix is an optional string you can have appended to the file names in the Application. Go ahead and fill in “DemoApp” for the class prefix and We’ll see in a moment where it is. Press Next to Continue.

 

Xcode Tour

Now you will see the Xcode Environment. In the Environment there are 4 main areas which I have mapped out in the image below.

 

Toolbar: Displays Statuses and gives tools for editor views and app simulation. The Simulation controls or the left and the the editor and view controls are on the right.

Navigator: This section is for managing files,  folders, and other Project related information. In the Navigator, the most important tool is the Project Navigtor(The Folder Icon furthest to the left). Here you will see All of the files and folders related to your project. If any of the files are selected, the editor will display that item. The mainStoryboard.storyboard item will show our interface builder in the editor and any selected .h or .m files will display code in the editor.

When we created this project we entered the class prefix as “DemoApp” you can see that all of the .h and .m files start with prefix “DemoApp”. If we would have left that field blank the files would be AppDelegate or AppViewController without the prefix.

By Selecting the “Single View Controller” option when creating a new project, Xcode created a template for a  “Single View Controller” App. Xcode creates a class (in our case DemoAppViewController)  and inserts a View Controller object in the main storyboard. For Each class an interface file(.h) and implementation file(.m) is need. Here we have two classes: The DemoAppAppDelegate class and the DemoAppViewController class. The AppDelegate class is needed on all iOS applications and handles the application setup. As a beginner, you won’t need to mess with this class much. The DemoAppViewController class handles our ViewController. All of our Hello World code will be in this class.

 

Editor: This Section is where you will edit both code and visual interfaces. If a Storyboard is selected, the main editor will show a graphical interface where you can drag and drop elements such as buttons and labels. The Storyboard is for designing the App’s graphical components. If an .h or .m file is selected the main editor will show the code in that file. On right hand side of the toolbar there are editor view controls. The furthest left editor view control button shows the Standard editor and the middle button shows the Assistant Editor. You’ll find that you will switch between these two views frequently. We’ll use these buttons shortly.

Editor View buttons:

Editor View Controls

 

Utility: Provides tools for inspecting, adding, and editing objects.The Utility Pane contains two important sections. The top half is useful for editing attributes and properties of objects. The bottom half is for adding objects. We’ll use a variety of tools in the top half but mostly the attributes inspector and the Identity Inspector. As for the Bottom half we’ll mainly use the object library (the Little Cube shown selected in image below).

Utility Top Pane

Utility Pane Bottom

Building The First App

Ok! Now that you’ve familiarized yourself with Xcode a bit, let’s put it to good use.

Step 1: Design the Interface

Well there really isn’t much to do here but it is important.

In the Project Navigator, select the MainStoryboard.storyboard file and you will see the blank view object in the editor window.

in the Objects Explorer (bottom right), scroll down until you see the Label object. Click and drag the label object onto the empty view in the Editor.

Adding Image Object

Select the Label(you will see a blue box and handles around it when selected) and then navigate to the Attributes Inspector in the Top of the Utility Pane. There you can change the size of the font. I changed mine to size 30 and centered it. You may need to expand the size of the text box by selecting the label and moving the handles.

Changing Label Properties

Ok! That’s It for the Interface Design. Of course you can change the color and font type if you would like to, but I’ll let you figure that out.

Step 2: Making the Connections

In the Toolbar Select the Assistant editor  ( the Little tuxedo looking one at top right) . Now you will see the interface builder on the left and your DemoAppViewController.h code on the right . Hold Control and simultaneously click and drag the label from the interface to the .h file underneath the line that starts with “@interface”. See Image below.

Creating an Outlet

When Prompted input “helloWorldLabel” in the Name box and leave everything else the same.

Now we are almost done here. Now let’s edit the implementation file.

Step 3: Adding The Code

Select the standard Editor window from the toolbar in the top right and then select the DemoAppViewController.m file from the Project Navigator on the left.

Edit the following lines of code as follows:

@implementation DemoAppViewController
@synthesize helloWorldLabel; // Add this line
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.helloWorldLabel.text = @"Hello World"; // and add this line
}

That Should be it! Now Press run on the Toolbar on the top left and wait for the Simulator to show up. You should see the following:

 

Hello World App

Note: If Hello World text looks like the following : “Hell..”  You didn’t make your Label box big enough.  Stop the Simulation, Resize the Label and try again.

 

That’s All! While this Tutorial was basic we learned a few important things. Obviously we learned a bit about Xcode and using the tools it has to offer, but we also learned the basic development cycle for iOS. For most apps you will first design the interface, then you will make your connections, then you will add the code to make those connections work. I think it’s always best to learn by experimenting.  I encourage you to play with the Attributes inspector and try to change the background color of your view or maybe even change the text to something else.

That is the end of this tutorial. Any Feedback as to how I can improve this would be helpful. I hope this helps.

 

About Joe Hoffman

I am An Electrical Engineer that spends a lot of my off time doing web development and other programming. Currently I am trying to expand my knowledge with iOS and I find that writing tutorials helps me learn more thoroughly as well as provide some useful info to others.

Comments

  1. I get error when modifying viewcontroller.m. it says property ‘text’ not found on oject of type ‘UIView*’ – any thoughts on how to fix? Thanks.

    • Hi There Hawk!

      If I had to guess, I bet you control clicked the view instead of the label.
      Take a look at your viewController.h file and see if it doesn’t look something like this

      #import <UIKit/UIKit.h>

      @interface ViewController : UIViewController
      @property (strong, nonatomic) IBOutlet UIView *helloWorldLabel; //Notice how it says UIView? You don't want this. you want UILabel.

      To fix this, delete this line that starts with @property. then from the storyboard select your entire view and from the connections inspector on the top right. you should see an area titled “outlets”. push the “x” on the outlet that says helloWorldLabel. Then start over and control click from the label this time.

      Hope this Helps,
      -Joe

      @end

Speak Your Mind

*

css.php
Privacy Policy