iPhone Programming Tutorial - Connecting Code to An Interface Builder View

Finally, we get to write some real code! In this tutorial, I will show you how to create an interface using Interface Builder and connect it to your code. We will be creating a UITextField, UILabel, and a Button. Now, don’t be intimidated that this tutorial is so long. I have really went into detail explaining everything as I go. You could easily scan over it and get the gist of it. Here’s how the application will work:

1. The user will tap inside a text box which brings up the iPhone’s keyboard
2. The user will type their name using the keyboard
3. The user will press a button
4. The label will update with a greeting containing that user’s name (ex. “Hello Brandon!”)
5. If the user fails to enter in text, the label will say something like “Please Enter Your Name”

Prerequisites: This tutorial assumes that you have completed the following tutorials

• Hello World Tutorial Using UITableView
• Beginner Interface Builder

In this tutorial you will learn:

• Create a new View-Based application
• Create a simple user interface
• Write code to connect to an interface
• Connect the interface to the code
• Update the interface based on user interaction

Like the last tutorial I wrote, we are going to need only one view. So we will just use Apple’s View-Based Application template. So click File -> New Project. Select View-Based Application and name it ViewBased (You can name it whatever you want).

So like last time, Apple has provided us with most of the code needed to get this app up and running. You can click Build and Go to launch the simulator, but all you will see is blankness.

Let’s get started by double clicking on ViewBasedViewController.xib. This is a nib file that opens with Interface Builder. It contains information regarding the layout and controls of our view. Once you do this, Interface Builder should open up.

It will look something like the screenshot below.

A few notes about interface builder…

Library - The right-most window contains all of your controls that you can add to your view. For this tutorial we will be using a TextField, Label, and Button.

The next window to the left of that contains objects that we will connect our interface to. View represents the view of this nib file (basically the interface). File’s Owner is the object that links the interface to the code.

View - This is your user interface for your iPhone application. This window is where you will drop controls from the right-most window.

Attributes - This is where we will set the styling properties of our controls

Add a Text Field

The first thing you want to do is drag a Text Field from the library box on to your view window. You will see some blue lines to guide you. These are in place to help line up controls as well as center them.

Once you have added the Text Field to the View, move it around until it’s in a position that you are happy with. Next, stretch each side of the text box so that it spans accross almost the entire view area. (The blue lines on the right and left will let you know when to stop.)

Now we are going to set some of the attributes of the Text Field. If the Attributes Inspector doesn’t appear, click on the Text Field and then click Tools -> Attributes Inspector.

• In the Placeholder field type in Name. This is the default text that appears in the Text Field before a user types anything.
• For Capitalize select Words - This tells XCode that we want to capitalize each word
• For Return Key - Select Done. This makes the return key on the keyboard say Done rather than return.
• Also, make sure Clear When Edit Begins is checked

Add a Label

Drag a Label from the Library onto your view. Similarly, stretch it the length of your view and place it where you would like. Let’s change the default text of the label. If the Attributes Inspector doesn’t appear, click on the Label and then click Tools -> Attributes Inspector. In the Text field type in “Enter your name above” (or below depending on where you chose to put the label in relation to the Text Field.

Add a Button

Now drag a Button from the library onto your view. Stretch it and position it however you would like. Now we need to add some text to the Button. Click on the button and then click Tools -> Attributes Inspector. In the Title field, type “Display“.

We are now done creating our interface. It should look something like this:

Let’s return to our code… Close Interface Builder and go back to Xcode.

The files that link an interface to some code are called View Controllers. Let’s open up ViewBasedViewController.h. This is the file where we will declare all of our interface variables. Add the following code to you ViewBasedViewController.h.

Interface Builder uses IBOutlets and IBActions to connect to the code. Here is a brief explanation of each line of code.

• IBOutlet UITextField *textName - creates an outlet to connect to the text field we created in interface builder. We use this variable to get information from the text field.
• IBOutlet UILabel *lblHello - An outlet that connects our label on our interface to the code. This variable is used to set the value of the label.

Now that we have declared these variables, we need to make them properties. This allows us to set certain attributes that are associated with the variables. Retain tells the compiler that we will handle the memory management of this object (don’t forget to release it when you are done). Otherwise it will get “cleaned” after being instantiated.

There is one other thing here.

- (IBAction) updateText:(id) sender;

This is the function that will get called when the user presses the button that was created in Interface Builder. We are simply declaring it here in the header file. We will implement this function a little later in the tutorial. Now, we need to connect the interface to the code. Double click on ViewBasedViewController.xib again to open up Interface Builder.

1. Connect the View
   1. Click anywhere on the background of your view (anywhere that is not the Text Field, Label, or Button). Now click Tools -> Connections Inspector. Next to New Referencing Outlet, you will see a circle. Click in that circle and drag the blue line to the File’s Owner object and release it. The word view should pop up. Click on it. You have now connected the view to your proxy object. You should now see:
   2. 
2. Connect the Text Field
   1. Click on the Text Field in your View window to select it. Then click Tools -> Connections Inspector. You will now see a circle next to New Referencing Outlet. Click in that circle and drag it over to the File’s Owner object. A message will pop up with txtName. Click on txtName and the connection is made. You should now see:

   2. 

3. Connect the Label
   1. Click on the Label in your View window to select it. Then click Tools -> Connections Inspector. You will now see a circle next to New Referencing Outlet. Click in that circle and drag it over to the File’s Owner object. A message will pop up with lblHello. Click on lblHello and the connection is made. You should now see:
   2. 
4. Connect the Button
   1. Click on the Button in your View window to select it. Then click Tools -> Connections Inspector. You will now see a circle next to Touch Up Inside. This is the trigger that gets called when a user presses the button. Click in that circle and drag it over to the File’s Owner object. A message will pop up with updateText. Click on updateText and the connection is made. You should now see:
   2. 

Now all of the connections should be set up. Go ahead and close Interface Builder. We are done using it.

Open up the file ViewBasedViewController.m . This is the file where we will implement the updateText function. Add the following code…

This code is pretty straight forward and easy to follow. I will explain it line-by-line:

@synthesize txtName,lblHello;

Most of the time when creating (private) variables, you need to specify what are called “getter” and “setter” methods. Theses functions get the value of a variable and set the value of a variable. What synthesize does is creates these methods for you under the hood. Pretty handy…

Next we will implement our updateText method. I started by creating a temporary string. This is the string that we will insert into the text of the label.

The next line checks to see if the user has entered any text int the Text Field. txtName.text returns an NSString. We are simply calling the length method on a string. If the length is 0, then obviously the user has not entered any text. If this is the case, we set the temporary string to “Please enter your name”: instructing the user to enter in their name.

If the user has entered in some text, a new string is allocated. The initWithFormat method is similar to printf in C. So, I used the string “Hello %@!”. The “%@” in the string means we will be substituting it for a string. To get the value of the Text Field we again use the txtName.text property.

Finally, the value of the Label is set by calling lblHello.text. This calls the text property of label and sets the text to our temporary string variable.

The last line [text release]; releases the temporary text field from memory. This is necessary to write an efficient iPhone application. If you want to know why a lot of iPhone apps crash, it’s because the developers don’t follow through with this step.

That’s it! Click Build and Go. The application should launch in the iPhone Simulator. When you click inside the Text Field it should bring up the iPhone’s keyboard (you can also type with your keyboard). Enter in your name and click “Display”. Here are a few screens of what your app should look like.

User Clicks Display without typing in their name

User types in their name and clicks Display

Well, that concludes this tutorial. I hope that I was able to help you out on your road to iPhone glory. If you get lost at any point you can download the code to this tutorial here ViewBasedSampleCode. As always, if you have any questions or comments, be sure to leave them in the comments section of this page. Happy iCoding!

iPhone Programming Tutorial - Beginner Interface Builder Hello World

In my last tutorial UITableView Hello World I said that there are many ways to write a “Hello World” tutorial for the iPhone.  Here is one using Interface Builder. Last time, I demonstrated a simple way to populate one cell in a UITableView with some text.  Today’s tutorial is even simpler.  I will show you how to work with Interface Builder to create a simple layout for you application.  In fact, you won’t write any code at all! In my next tutorial, I will detail how to interface with your UI components in code.

In this tutorial you will learn:

• Create a New View Based Project
• Opening the iPhone Simulator
• Adding UI Elements to your home screen
• Executing the code

Create a New View Based Project

Let’s start by opening up XCode and Creating a new View-Based Application.  Do this by clicking on
File > New Project. Make sure that Application is highlighted under iPhone OS and select View-Based Application. Name this project HelloWorldViews.

So at this point, Apple has added some default files to get us started.  They have added the main window for us to edit along with the code to launch the window.  Now in iPhone terms, each window is called a View.  Since you can only see one view at a time, you will need to create a new view for each screen in your application.  In this tutorial, we will be sticking to editing the view Apple has provided us.  In later tutorials, I will go into how to add new views and transition between them.  Go ahead and click Build and Go.

Opening the iPhone Simulator

The program should compile and launch the iPhone Simululator. Your screen should look something like this.

Not very interesting right? Excuse my crappy screenshot.  So let’s add some UI components to our view to make it more interesting.  To do this we will be editing HelloWorldViewsViewController.xib . A file with the .xib extension is known as a nib file.  These files open with Interface Builder and are where you define the look and feel of your application.  Apple is nice enough to have provided us with one.

Adding UI Elements to You Home Screen

Once you open Interface Builder, you should see a few different windows… You should see a blank window that has the same dimentions as the iPhone that says View up in the top.  If not click the View icon in the smaller box.  This is the main window we will be editing.

To the right, you should see a tool box that contains many different UI components.  Most of them should look familiar if you have ever used an iPhone application.  So let’s add a few of them to our view.  Just click on the one’s you want and drag them on to your view. Make sure you at least use a Label.  For this tutorial, I have used a Label, Search Bar, and a Tab Bar.  Notice when you drag the search bar and tab bar onto the view, they size correctly to the screen.  Also, if you move the items around, you will see blue lines that guide you.  These are in place to help you line up components and center them.

After you have added the label, click on it.  Now let’s open the Attributes Inspector to change the text of the label.  To do this click Tools > Attributes Inspector. At the top of the Attributes Inspector you should see a box labeled Text. If you don’t click on the label again to select it.  Put whatever you would like the label to say in that box.  I put “Hello World”.  You can update other properties of the label including color and font using the Attributes Inspector.  You may need to resize the Label to accommodate your new text.  To do this click on the label and you will see little boxes around it that you can drag to resize the text area.

After you are done, your interface should look something like this:

Now press Apple-S to save this file.  We are done with Interface Builder so you can close it.  Your application should now be ready to execute.

Executing the Code

Go ahead and click Build and Go again to launch the iPhone Simulator. Your screens should look something like this:

There you have it! A simple iPhone application without writing a line of code. If you click in the search box, the iPhone will automatically pull up the keyboard.  Thank you for reading this tutorial and I hope that you have learned something.  In my next tutorial, I will show you how to use code to interface with our UI components.  If you have any questions, feel free to leave them in the comments. Happy iCoding!

App Store Loophole Allows Apps to be Pirated

Apparently Apple doesn’t link iPhone hardware and the username of a user downloading an app from the App Store.  What this means is, one person can pay for an app, download it, and it can be downloaded to any other phone attached to that computer.

Also, you can log into any computer that is authorized to use your iTunes account and all of the purchased apps will download to that machine for free.  Just another slip up on Apple’s part while trying to push out the 2.0 software before it was ready. Hmmm… I think I have seen this sort of thing somewhere…Vista anyone?

Source: Engaget.com

iPhone Programming Tutorial - UITableView Hello World

In this tutorial I will walk to you through creating a simple “Hello World” application using a UITableView for the iPhone.  There are many ways that a Hello World program could be made on the iPhone, I am going to show you the simplest.  This tutorial assumes you have a basic understanding of Objective-C.  Apple has provided a very simple and straight forward tutorial on Objective-C.  You can find it here.

You will learn how to:

• Create a New Navigation-Based Application
• Learn About the Default Files
• Update the UITableView Cells to Display “Hello World” Text

This tutorial assumes that you have already installed the iPhone SDK.  If you are unsure how to do this, click and follow the steps.

Creating a New Navigation-Based Application

Open Up Xcode

You will be doing all of your development in Xcode. Then close the Welcome window (if it shows up)

Start a new iPhone OS Project
Click Xcode > New Project and a window should pop up like this:

Make sure Application is selected under iPhone OS and then select Navigation-Based Application. Click Choose… It will ask you to name your project.  Type in “Hello World” and let’s get started.

Learn About the Default Files

What is all this stuff?
There are quite a few files that get added to your project.  At first glance, this looks kind of intimidating.  Don’t worry, we only need to edit one of them. Here is a quick explanation of the different files. You don’t have to read this part but having this many files is what confused me the most when I started developing for the iPhone.

1. CoreGraphics.framework, Foundation.framwork, UIKit.framework - You guessed it, this is a set of library functions provided by Apple that we use in our application. We use these as includes similar to any other language that includes library functions.
2. HelloWorld.app - This is your app that gets installed on the iPhone.  We don’t really need to worry about this right now
3. Hello_World_Prefix.pch - This is another include file that gets compiled separately from your other files so you don’t need to include it on each file. It contains some code to include the data inside the frameworks.
4. Hello_WorldAppDelegate.h - This is a header file that contains all of our definitions for variables that we will be using.  It’s very similar to a header file in C or C++;
5. Hello_WorldAppDelegate.m - All of the magic starts here.  Consider this file our starting point for execution.  The main.m file invokes this object.
6. Info.plist - This contains various meta information about your program.  You won’t really need to edit this until you are ready to start testing on the iPhone
7. main.m - Like most programming language, this file contains our main function.  This is where execution begins.  The main function basically instantiates our object and starts the program.  You shouldn’t need to edit this file.
8. MainWindow.xib - This contains the visual information of our main window.  If you double click on it, it will open in a program called “Interface Builder”.  We will get to this a little later.  Just on thing to note is this file does not contain any code.
9. RootViewController.h, RootViewController.m - These are files for a view controller that gets added to our main window.  Basically, Apple has already created a simple interface when you clicked on Navigation-Based Application. Since most navigation-based applications use a Table View, Apple has provided it for us to use.
10. RootViewController.xib - This is a view that Apple has provided that emulates a table.  It has rows and columns.  We will be displaying our “Hello World” text inside one of these rows

Update the UITableView Cells to Display “Hello World” Text

Torque Game Engine for iPhone

An independent game developer known as GarageGames has recently released their tried and true game development engine for the iPhone.  They already have an engine for large platforms such as Mac, Windows, Linux, Wii, Xbox, and now they are expanding to the most up-in-coming mobile platfor ever; the iPhone.

“Ready to make games for the iPhone?” is the tagline on their game engine site.  They claim that “Making games for the iPhone is now a straightforward process using Torque’s proven 2D and 3D tools for game development”.

GarageGames also boasts that they have added iPhone specific funtionality to Torque such as

• Multi-touch Input Support
• Touchscreen Gesture Recognition
• iPhone Optimized Compressed Texture
• Advanced Character and Shape Animations

With this release, I hope to see some great (possibly free) games for the iPhone in the near future.  They didn’t release specific pricing, but they boast that it will be affordable.  So check it out, and make WOW for the iPhone!