1. Skip to Menu
  2. Skip to Content
  3. Skip to Footer>

Lesson 3 - Connecting Code to An Interface Builder View

PDFPrintE-mail

  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”
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 withInterface Builder. It contains information regarding the layout and controls of our view. Once you do this,Interface Builder should open up

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 onViewBasedViewController.xib again to open up Interface Builder.


Connect to View

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:Connect the View








 

 

 

 

 

 

 

 

 

 

 

 

 

 

Connect To The TextField

  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 txtNameand the connection is made. You should now see:


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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:


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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:







































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 updateTextfunction. Add the following code…

















Methods for you under the hood. Pretty handy…Theses functions get the value of a variable and set the value of a variable. What synthesizedoes is creates these Most of the time when creating (private) variables, you need to specify what are called “getter” and “setter” methods. @synthesize txtName,lblHello;
the Text Field we again use the txtName.text property.I used the string “Hello %@!”. The “%@” in the string means we will be substituting it for a string. To get the value of If the user has entered in some text, a new string is allocated. The initWithFormat method is similar toprintf in C. So, is the case, we set the temporary string to “Please enter your name”: instructing the user to enter in their name.simply calling the length method on a string. If the length is 0, then obviously the user has not entered any text. If this The next line checks to see if the user has entered any text int the Text Field. txtName.text returns anNSString.
a few screens of what your app should look likeshould bring up the iPhone’s keyboard (you can also type with your keyboard). Enter in your name and click “Display”. Here are That’s it! Click Build and Go. The application should launch in the iPhone Simulator. When you click inside the Text Field it 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.The last line [text release]; releases the temporary text field from memory. This is necessary to write an efficient iPhone our temporary string variable.Finally, the value of the Label is set by calling lblHello.text.