View-Based Application. In this example you'll learn how to create an iPhone application.

This post will show you how to design a simple Cocoa touch interface and then link objects in the interface to objects and methods in the code to complete the application. Let's get started, Open Xcode and select new project from the file menu. Select iPhone OS from the menu and then View-Based Application. Check that "iPhone" is selected on Product.

Save as: ViewBasedApplication. Click on Save.

Double-click on Resources. There are two .xib files. These files are xml files that are used to define user interfaces for iphone and os x applications.

As you can see, there is one file called MainWindow and another one called ViewBasedApplicationViewController. The MainWindow file contains the "Main Window" for your iPhone application. This window will be called when your application starts running. A window is used to load views on an iPhone application. Most applications will use one main window and will use different views to display all the screens your application may have.

Creating a Cocoa Interface

Now, double-click on the ViewBasedApplicationViewController.xib file to open up the interface builder. Interface Builder is the application you will be using to build the interfaces for your iPhone apps. Click on the view window.

Press Command + Shift + L to bring up the library window. Type "label" on the filter field. A label will appear on the window. Drag and drop it to the view window. Go back to the library window and type "button". Take the button and drop it on the view window too. Click on an element on the view and press Command + 1 to bring up the attributes for that particular element. From here, you can edit each element of the view. Try to make the view window look like this.

Linking Elements
Now, let me explain something here. Everything you do in the interface builder is completely separated from your Objective-C code. So, the elements you add to the view won't be accessible from the code at the beginning. In order to have access to these elements, you must define an equivalent object in your code and then "link it" to the interface using the interface builder. We will see how to do this next. Go to the ViewBasedApplicationViewController.xib window and click on File's owner. Press command + 4 to bring up the identity inspector.

 Click on the arrow on the Class section of the window.

The class ViewBasedApplicationViewController will open on the Library Window

Click on Outlets and then on the + . Type "label" for the outlet and "UILabel" instead of "id" for the type. Add another entry for button.

Now go to Actions and click on the +. Add a new action named "doSomething": .

 Press Command + S to save. Now click on File's Owner again, go to the file menu and click on write class files. Click on save and then select merge.

The View Controller

For ViewBasedApplicationViewController.h select left for both differences from the Actions menu (bottom right corner of the window) .

For ViewBasedApplicationViewController.m select left for the first difference and anything for the second one (since it's the same code, the only difference are the blank lines).

 Click on the red button and then save each file. Now, we have to link the elements from our view to the ones we just created in our class files. Go to the view and press ctrl + click on the label. Click on the circle next to new referencing outlet.

Drag the mouse to File's Owner.

Click on label.

Now, the label of the view is linked to the label in the code, properly. So, when you update the label in the code, the label of the view will be updated too. Let's link the button and the action from the button too. This time I'll show you a different way to do it, but you can do it one way or the other. Click on File's Owner and press Command + 2. This will bring up the Connections Inspector window. Click on the circle next to button and drag it to the button on the view.

If you did it correctly it will look like this.

Now, click on the circle next to doSomething: and drag it to the button too. Select Touch Up Inside.

Now, the actions and elements of the view are linked to the ones on our code, properly. Press Command + S to save. Go to Xcode and open ViewBasedApplicationViewController.h. And change your code so it looks like this:
#import @interface ViewBasedApplicationViewController : UIViewController { IBOutlet UIButton *button; IBOutlet UILabel *label; int counter;} - (IBAction)doSomething:(id)sender; @end

The only line you need to add is "int counter;" Open ViewBasedApplicationController.m and add the following code to the doSomething: method.

- (IBAction)doSomething:(id)sender { counter++; label.text = [[NSNumber numberWithInt:counter] stringValue]; [button setTitle:@"Pressed" forState:0]; [button setTitle:@"Pressed" forState:1];}

The doSomething: method will be executed every time the button is pressed. The counter++; is used to add 1 to the counter variable. After that, the value of counter is added to the label.The lines:
[button setTitle:@"Pressed" forState:0]; [button setTitle:@"Pressed" forState:1];

are used to change the text (Title) from the button. As you can see the text needs to be changed 2 times, one for each state of the button. State: 0 is used when the button is unpressed, and State: 1 is used when the button is pressed. You can add different text to the button for each state.Press Command + R to compile your code and launch the iPhone simulatorYour application will look like these at first:

But after clicking the button, the text from the button will change and the label will change too.