This is part of an ELC Tech Network
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:
- The user will tap inside a text box which brings up the iPhone’s keyboard
- The user will type their name using the keyboard
- The user will press a button
- The label will update with a greeting containing that user’s name (ex. “Hello Brandon!”)
- 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
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.
Advertisement
This entry was posted in Tutorials and tagged apple, beginner, hello world, iphone example program, iphone programming, iphone sdk, tutorial. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
177 Comments
Nice tutorial. Helpful. Thank u.
Hi,
Great tutorial, Bradon
In this Application, I’m trying to find how to write a code or use events to quit an application.
Example: I make a button with name:”Quit”, when you click, it quit your current application and return to applications view. Can you show me how to do it?
Thanks.
KTs
Thanks man, great tutorials!
ViewBasedViewController.m
Please only RELEASE if you have ALLOC.
If your if-statement is true… you don’t ALLOC…. but you *STILL* free the memory.
Ugh.
The tutorial seems to work and it builds fine. The iPhone simulator comes up and I click in side the Name box and click out my name.
But there’s no way to hit the Display button now. The keyboard stays up and on top of the view with my Display button and cannot be dismissed, even with the Done button on the keyboard itself! Clicking on the Done button doesn’t do anything. Should there be more code that needs to be addd to the Done button? Since the Done button was created automatically, it’s function should also work automatically, right?
Well, … I was understanding the tutorial up to that point. I read some of the comments above, but it was clear that their level of programming was way ahead of the level of this tutorial, so I can’t make any sense of it.
Thanks!
I have the same problem, Chuck. I also noticed that in the screen shots, the keyboard doesn’t disappear.
I would have expected that when the user tapped Done the keyboard would disappear, but apparently not. This must be one of those secret handshake situations where no one tells you the key detail because everyone thinks you already know it.
In my case, I want to bring up a number pad, but no matter what I select, no button for “Done” or “Go” or anything else even gets displayed.
Great tutorials so far. I just have a couple of things so I’ll start easiest first
KTs – It is possible to quit but apple hate having a quit button. It looks like the application has just crashed. I was told that it is possible to be done. I think, don’t quote me on this, call quit(0) is what will make the app quit.
Next problem. I’ve written the code for this tutorial myself by hand and downloaded the source code from here. Neither compile properly. There are 3 identical issues – ‘didRecieveMemoryWarning’ undeclared (first use in this function) Expected ‘;’ before ‘{‘ token Expected declaration or statement at end of input.
Can anyone help on these?
Thanks
Hi Brandon,
Thanks for the great tutorial on iPhone platform. This is really a great help for people who get familiar to this platform for the first time.
I follow your instructions very carefully and it works like a charm, but now I’m dealing with the “hide the keyboard automatically”
problem. I tried your instruction, which is add one line
[txtName resignFirstResponder]; and it works fine.
But the problem is, I want to experiment another way to do this, which is to make a delegate like many people had said before I came here
.So I add something like this:
-(BOOL)hideKeyboard:(UITextField *)textField{
[textField resignFirstResponder];
return YES
}
and in the Interface Builder view, I chose the Textfield, click and drag the circle of the delegate to the File’s owner. But the keyboard still doesn’t hide after I click Display. So can you help me with this? or did I miss something in the .h file. From my experience, I think I need to declare something in the .h which it can be recognized in the .m file ( I used to work code with C++ so I think these are the same ). Can you help me
Again, this doesn’t work on 3.1.2 simulator
, i don’t even have the ViewBasedViewController.h, i think i have to found a new tutorial under this simulator, if you have a link to this kind of tutorials i will thank you a lot, i have to develop for 3gs cell phone, sorry
@Hong Duc:
Xcode : Create an IBAction method in our Controller class that will cause the UITextField to release his grab of the keyboard. Put the following line in your .h file:
-(IBAction)textFieldDoneEditing:(id)sender;
IB : Connect the UITextField’s DidEndOnExit event to our new IBAction method
IB : Set the Keyboard>Type property of the UITextField to Done
Xcode: put this in your .m file:
-(IBAction)textFieldDoneEditing:(id)sender{
[sender resignFirstResponder];
}
In interface Builder, you need to connect your Did End On Exit event to this method.
gl
@Joyomat — Actually, you don’t need another method. Just connect the UITextField’s done event to the existing updateText method and put the [sender resignFirstResponder] in there. This has the added benefit of making the Done key update the UILabel.
- (IBAction)updateText:(id)sender { if([txtName.text length] == 0) { lblHello.text = @"Please enter your name"; } else { lblHello.text = [[NSString alloc] initWithFormat:@"Hello %@!", txtName.text]; } [sender resignFirstResponder]; }Great! Thank you. This was very helpful.
You use @synthesize lblHello.
But then you use : “lblHello.text = text” and not “self.lblHello.text = text”.
“self” is not mandatory if we want to call the property ? else we call the ivar ?
Thank you for your help.
I really wish you could print this. Only the first printed page has any actual content on it. Is there some script that “lazy loads” the rest of the content as you scroll, that may be interfering with the printable content?
Hi,
thank you for the tutorial. it’s great and easy to follow.
unfortunately i have a little problem and after reading the comments i cannot find the solution or i just cannot identify my problem as having been solved nor asked so far.
well here we go:
after finishing the coding and implemntig the view i saved the code and the view and i click “Build and run”. The iphone simulator starts but nothing happens. it just displays the iphone home screen…and when i click the app it starts and quits again…
can anyone haelp me? i bet it’s a simple problem.
thx so much
greets
dan
Check all your capitalization on the code, just to make sure there aren’t any uncaught typos. Also check your connections with IB. Is your File’s owner connected to the view? This has happened to me before, causing the same problem.
Concise, simple and straight forward. Thanks a ton.
This tutorial works like charm
Everything is extra clear and working out of the box without any compiler error 
Keep up with the good work
You you could edit the webpage name title iPhone Programming Tutorial – Connecting Code to An Interface | iCodeBlog to something more specific for your content you create. I loved the blog post nevertheless.
Nice posting… Excellent.. Good job…
its very nice tutorial
Your work has always been a great source of inspiration for me. I refer you blog to many of my friends as well.
Thanks for sharing knowledge..
Hey, sorry to bother you but Im just starting to learn all this, and I do exactly as it posted on your tutorial but my App is not opening in the simulator. My Sim version is 4.2. Did they change something in there?
Hey guys, I just wanted to say what a great site this is. I am trying this exercise with the latest Xcode 3.2.4 with 4.2 and like the above poster, the application starts but then returns to the springboard. Can anyone shed some light on this?
Thanks!
Seems “Is your File’s owner connected to the view?” was the problem.
Thanks!
Another great tutorial! Thanks!
6 Trackbacks