Creating a "view based" iPhone application

In this example you'll learn how to:

• Create an iPhone application.
• Design a simple cocoa touch interface.
• Link objects in the interface to objects and methods in the code.

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.

From the window that appears, double-click on Resources.
There are 2 .xib files. Xib 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 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 use different views to display all the screens your application might have.

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. Write 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 write button. Take the button and drop it on the view window too.
Click on an element from your view and press Command + 1 to bring up the attributes from the element. From here you can edit how elements from the view look. Try to make your view look like this.

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 your view or window won't be accessible from the code at first. For them to be accessible from the code you have to declare 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 window that says ViewBasedApplicationViewController.xib 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 + . Write 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.

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 (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 ctrl + click on the label. Click on the circle from new referencing outlet.

Drag the mouse to File's Owner.

Click on label.

Now the label from the view is correctly linked to the label in the code. So, when you update  the label in the code the label from 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 however you like.

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 from our view are correctly linked to the ones on our code. Press Command + S to save.

Go to Xcode and open ViewBasedApplicationViewController.h. And change your code so it looks like this:

#import <UIKit/UIKit.h>

@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 simulator.

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

And that's all you need to do to create a simple view based application.