Collection By traibingo

15
Bài 4: 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

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.)

Collection By traibingo

18
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

Collection By traibingo

19

Add a Label
Drag a Label from the Library onto your view. Similarly, stretch it the

src=" />50,336x280;ord=' + ord + '?"><\/script>'); //]]> </script>
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.

Collection By traibingo

23

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.

26
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.

Collection By traibingo

27
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.

Collection By traibingo

28
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

Collection By traibingo

30

User Clicks Display without typing in their name

Collection By traibingo

31

User types in their name and clicks Display

Collection By traibingo

32

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!