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:


picture-1

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.
     
ib_library HelloWorldViewController.xib window
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:


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

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



Dragging from Connections Inspector to View
Dragging from Connections Inspector to View

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
 

Popular posts from this blog

How to use nsxmlparser in Iphone SDk?

How to draw a pie chart using iPhone sdk?

How to create Singleton in iPhone?