How to create Hello world programe in iPhone?
To start, launch Xcode and create a new project by going to File >
New Project. Under the iPhone OS section of the New Project window
select View-Based Application.
You should be presented with the following window:
Creating the UI
We’re going to start with creating the UI. iPhone applications use files called xib or nib files to help separate the coding from the design. To open the default xib file select the Resources folder on the left menu, and open HelloWorldViewController.xib. This should open Interface Builder.
What we want to do is create the interface for our HelloWorld! application. To start go to Tools > Library, which should open up the Library of all the different UI elements you can
use.
In your HelloWorldViewController.xib window double click the View object to open up the view. This is what your application will look like when you load it. What we want to do here is add a UILabel so that we can see the text we entered, a UITextField so that we can enter text, and a UIButton so that we can reset the text. You can find these UIElements in the Library window under Library/Cocoa Touch Plugin/Inputs & Values. Once you drag these elements into the view you can click on the elements and go to Tools > Attribute Inspector and see the attributes for each element. For example, I clicked on the UITextField and filled in the placeholder attribute with “Type Something!” Here’s what mine looks like:
If you save this by pressing Command+S and then go back to your Xcode window and press Command+Enter you can run the application in the iPhone simulator. This application shows up, but nothing actually happens. Clicking on the UITextField will open the keyboard, but nothing happens when you press return. Now lets get back to coding!
In order to hook these UI elements up to the code we need to have a representation of these items in the code. This representation has to be created manually, and Interface Builder helps you out just a little bit in creating these connections. To do this click on the File’s Owner object in the HelloWorldViewController.xib window. Notice that this object is of type HelloWorldViewController. This is the main class of your application. In Xcode you can see this class file in the Classes folder, and this will be where we write all of our code.
With the File’s Owner object selected, go to Tools > Identity Inspector. In the Identity Inspector you’ll see that the object class is HelloWorldViewController, and you’ll see two more sections indicating Actions and Outlets. Actions are required in order to hook up events, such as a button’s click event which we’ll cover in just a minute. Outlets are the connections used to hook up the UI elements to the code. So we’re going to need one Action for the button click, and then three Outlets, one for each UI element.
In the Action section simply click the plus sign and enter a new Action name – lets call it “TextReset”. In the Outlets section you’re going to add three outlets – let’s call them MyLabel, MyTextField and MyButton. When you’ve finished with that we need to write these new outlets and actions into the code file. To do this we need to go to File > Write Class Files… then click Save. Click Merge. Now a file merging utility, appropriately named “FileMerge” will pop up. The file you seen on the left is the new file that you’ve created with Interface Builder, and the file you currently have in Xcode is on the right. Each arrow seen in the center corresponds to a conflict between the two files. You’re going to want to make the arrows point to the file on the left. Do this by clicking the left arrow on the keyboard. Navigate through the merges by using the up and down arrows on the keyboard. When you’ve made both arrows point to the left press Command+W to close the window. Click Save when it prompts you. Repeat this for the second file.
Taking a look at the code
Now that we’ve modified the code file from Interface Builder, lets go back into Xcode and see what we’ve done. Go in to Xcode and click on the HelloWorldViewController.h in the Classes folder. You should see the following:
We’re only going to have to worry about two functions. One of them is already here for us – it’s the TextReset function that we declared in Interface Builder. Here we have to set MyLabel.text and MyTextField.text, but before we do this we have to declare the properties – we’ve already declared them in the header file, but now we have to add the get and set functions for each property. The shortcut we’re going to use is called @synthesize and it basically looks at the header file and determines how to write the get and set functions based on the values we placed inside the parenthesis when we declared the properties (nonatomic and retain). We don’t have to worry about any of this though for now, just add the following three lines to your HelloWorldViewController.m file, after the @implementation line:
Back in Interface Builder
Back in interface builder we want to connect everything to the code. To do this we need to click on the File’s Owner object and go to Tools > Connections Inspector. In the Connections Inspector you should see MyLabel, MyTextField, and MyButton in the Outlets section. Click on the circle on the right side of the title of each of these items in the Connections Inspector and drag the mouse over to the item that you want to connect this outlet to. In the Connections Inspector you’ll also see an Actions section with an item in it called “TextReset.” Drag from the circle of this item to the UIButton and a dialog will appear – this dialog shows you all the different events on the button that this Action can be tied to. We want to select the Touch Up Inside event.
Connecting the Keyboard
Lets run the application real quick. Save your changes in Interface Builder by clicking Command+S. Go to Xcode and press Command+Enter. Once the application loads up in the iPhone Simulator, select the TextField. A Keyboard pops up! Try typing something in and pressing return. Nothing happens. This is because we haven’t told it what to do yet. In order to communicate with the keyboard we need to mark our HelloWorldViewController as the delegate that the Keyboard will talk to. This delegate must follow and implement the UITextFieldDelegate, which we’ll add now.
Open the HelloWorldViewController header file and add <UITextFieldDelegate> after the declaration of the HelloWorldViewController:
In HelloWorldViewController.m we need to add the following code somewhere inside the @implementation and @end tags:
One last thing before we’re done – in order for the keyboard to know that HelloWorldViewController is implementing the UITextFieldDelegate we need to tell it such. We do this by going into Interface Builder and selecting the UITextField. In the Connections Inspector you’ll see that the UITextField has an Outlet titled “delegate” – drag this to the File’s Owner object in the HelloWoldViewController.xib window.
Save.
Go back to Xcode and press Command+Enter.
If you have any build errors make sure your HelloWorlViewController.h code looks like this:
You should be presented with the following window:
Creating the UI
We’re going to start with creating the UI. iPhone applications use files called xib or nib files to help separate the coding from the design. To open the default xib file select the Resources folder on the left menu, and open HelloWorldViewController.xib. This should open Interface Builder.
What we want to do is create the interface for our HelloWorld! application. To start go to Tools > Library, which should open up the Library of all the different UI elements you can
use.
In your HelloWorldViewController.xib window double click the View object to open up the view. This is what your application will look like when you load it. What we want to do here is add a UILabel so that we can see the text we entered, a UITextField so that we can enter text, and a UIButton so that we can reset the text. You can find these UIElements in the Library window under Library/Cocoa Touch Plugin/Inputs & Values. Once you drag these elements into the view you can click on the elements and go to Tools > Attribute Inspector and see the attributes for each element. For example, I clicked on the UITextField and filled in the placeholder attribute with “Type Something!” Here’s what mine looks like:
If you save this by pressing Command+S and then go back to your Xcode window and press Command+Enter you can run the application in the iPhone simulator. This application shows up, but nothing actually happens. Clicking on the UITextField will open the keyboard, but nothing happens when you press return. Now lets get back to coding!
In order to hook these UI elements up to the code we need to have a representation of these items in the code. This representation has to be created manually, and Interface Builder helps you out just a little bit in creating these connections. To do this click on the File’s Owner object in the HelloWorldViewController.xib window. Notice that this object is of type HelloWorldViewController. This is the main class of your application. In Xcode you can see this class file in the Classes folder, and this will be where we write all of our code.
With the File’s Owner object selected, go to Tools > Identity Inspector. In the Identity Inspector you’ll see that the object class is HelloWorldViewController, and you’ll see two more sections indicating Actions and Outlets. Actions are required in order to hook up events, such as a button’s click event which we’ll cover in just a minute. Outlets are the connections used to hook up the UI elements to the code. So we’re going to need one Action for the button click, and then three Outlets, one for each UI element.
In the Action section simply click the plus sign and enter a new Action name – lets call it “TextReset”. In the Outlets section you’re going to add three outlets – let’s call them MyLabel, MyTextField and MyButton. When you’ve finished with that we need to write these new outlets and actions into the code file. To do this we need to go to File > Write Class Files… then click Save. Click Merge. Now a file merging utility, appropriately named “FileMerge” will pop up. The file you seen on the left is the new file that you’ve created with Interface Builder, and the file you currently have in Xcode is on the right. Each arrow seen in the center corresponds to a conflict between the two files. You’re going to want to make the arrows point to the file on the left. Do this by clicking the left arrow on the keyboard. Navigate through the merges by using the up and down arrows on the keyboard. When you’ve made both arrows point to the left press Command+W to close the window. Click Save when it prompts you. Repeat this for the second file.
Taking a look at the code
Now that we’ve modified the code file from Interface Builder, lets go back into Xcode and see what we’ve done. Go in to Xcode and click on the HelloWorldViewController.h in the Classes folder. You should see the following:
@interface HelloWorldViewController : UIViewController {
IBOutlet id MyButton;
IBOutlet id MyLabel;
IBOutlet id MyTextField;
}
- (IBAction)TextReset;
@end
The .h file is the header file, and the @interface tells us that this
is just the blueprint of the implementation. This basically shows any
outside classes what the HelloWorldViewController contains. You’ll
notice that none of the variables that were created through Interface
Builder have types assigned to them – they only have the generic type
‘id’ assigned to them. You’ll also notice that all of the variables
start with IBOutlet. This is usually not necessary for creating a
variable, but in order for Interface Builder to notice the variables we
have to tag them as such by playing this IBOutlet text before the
variables. Anyway, we’re going to want to change the variables to have a
non-generic type, so lets start fixing things up. Change it to look
like this:@interface HelloWorldViewController : UIViewController {
IBOutlet UIButton *MyButton;
IBOutlet UILabel *MyLabel;
IBOutlet UITextField *MyTextField;
}
- (IBAction)TextReset;
@end
We’re also going to need to use these variables as properties with a
get and set method, so we need to declare theme as properties and not
just empty variables. To do this we add the following lines of code
above the IBAction line and after the close bracket:@property (nonatomic, retain) UIButton *MyButton;
@property (nonatomic, retain) UILabel *MyLabel;
@property (nonatomic, retain) UITextField *MyTextField;
Now we have successfully declared our handles for the UI elements
that we created in Interface Builder. In our actual code file, the
HelloWorldViewController.m file, we have the actual code that will make
the application run. You might see a lot of green commented out
functions here. These are standard methods that are often used and are
only there to make it easier for you to get started. We’re not going to
need to touch them so pay them no mind.We’re only going to have to worry about two functions. One of them is already here for us – it’s the TextReset function that we declared in Interface Builder. Here we have to set MyLabel.text and MyTextField.text, but before we do this we have to declare the properties – we’ve already declared them in the header file, but now we have to add the get and set functions for each property. The shortcut we’re going to use is called @synthesize and it basically looks at the header file and determines how to write the get and set functions based on the values we placed inside the parenthesis when we declared the properties (nonatomic and retain). We don’t have to worry about any of this though for now, just add the following three lines to your HelloWorldViewController.m file, after the @implementation line:
@synthesize MyLabel;
@synthesize MyTextField;
@synthesize MyButton;
Press Command+B to build the application and make sure there are no
errors. Good, now we can start referencing these variables in code. In
the TextReset function we want to set the text in MyLabel and
MyTextField to nothing:- (IBAction)TextReset {
MyLabel.text = @"";
MyTextField.text = @"";
}
Good. There’s one more function we need to write in this file, but
for now lets go back to Interface Builder and hook up the UI elements to
the code.Back in Interface Builder
Back in interface builder we want to connect everything to the code. To do this we need to click on the File’s Owner object and go to Tools > Connections Inspector. In the Connections Inspector you should see MyLabel, MyTextField, and MyButton in the Outlets section. Click on the circle on the right side of the title of each of these items in the Connections Inspector and drag the mouse over to the item that you want to connect this outlet to. In the Connections Inspector you’ll also see an Actions section with an item in it called “TextReset.” Drag from the circle of this item to the UIButton and a dialog will appear – this dialog shows you all the different events on the button that this Action can be tied to. We want to select the Touch Up Inside event.
Connecting the Keyboard
Lets run the application real quick. Save your changes in Interface Builder by clicking Command+S. Go to Xcode and press Command+Enter. Once the application loads up in the iPhone Simulator, select the TextField. A Keyboard pops up! Try typing something in and pressing return. Nothing happens. This is because we haven’t told it what to do yet. In order to communicate with the keyboard we need to mark our HelloWorldViewController as the delegate that the Keyboard will talk to. This delegate must follow and implement the UITextFieldDelegate, which we’ll add now.
Open the HelloWorldViewController header file and add <UITextFieldDelegate> after the declaration of the HelloWorldViewController:
@interface HelloWorldViewController : UIViewController <UITextFieldDelegate> {
Now, if you hold the option button down and double click on the text
“UITextFieldDelegate” in Xcode it will take you to the documentation for
that class. Looking through it we could find out that we want to
implement the “textFieldShouldReturn:” method. So lets go ahead and do
that.In HelloWorldViewController.m we need to add the following code somewhere inside the @implementation and @end tags:
- (BOOL)textFieldShouldReturn:(UITextField *)theTextField {
if (theTextField == MyTextField)
{
[MyTextField resignFirstResponder];
}
MyLabel.text = MyTextField.text;
return YES;
}
Here we first check to see if the input parameter “theTextField” that
the keyboard is attached to is in fact the same text field as
MyTextField (this would be important if there were more than one text
field in the View). If it is the same text field then we tell our text
field to resign its first responder. This means that it’s going to
resign its status as the focused element, resulting in the keyboard
going away. We also want to make sure we update the text – that’s the
point of the app! Returning YES means that we want to implement the
default text field behavior for pressing return on the keyboard.One last thing before we’re done – in order for the keyboard to know that HelloWorldViewController is implementing the UITextFieldDelegate we need to tell it such. We do this by going into Interface Builder and selecting the UITextField. In the Connections Inspector you’ll see that the UITextField has an Outlet titled “delegate” – drag this to the File’s Owner object in the HelloWoldViewController.xib window.
Save.
Go back to Xcode and press Command+Enter.
If you have any build errors make sure your HelloWorlViewController.h code looks like this:
@interface HelloWorldViewController : UIViewController <UITextFieldDelegate> {
IBOutlet UIButton *MyButton;
IBOutlet UILabel *MyLabel;
IBOutlet UITextField *MyTextField;
}
@property (nonatomic, retain) UIButton *MyButton;
@property (nonatomic, retain) UILabel *MyLabel;
@property (nonatomic, retain) UITextField *MyTextField;
- (IBAction)TextReset;
@end
and that your HelloWorldViewController.m looks like this:@implementation HelloWorldViewController
@synthesize MyLabel;
@synthesize MyTextField;
@synthesize MyButton;
- (IBAction)TextReset {
MyLabel.text = @"";
MyTextField.text = @"";
}
- (BOOL)textFieldShouldReturn:(UITextField *)theTextField {
if (theTextField == MyTextField)
{
[MyTextField resignFirstResponder];
}
MyLabel.text = MyTextField.text;
return YES;
}
@end
The final output is show the below
click here for CODE |