Making an iPhone app - Part 3 - Minimap App

Hi Readers,

In this episode we will create a very minimalistic application so we can test a lot of iOS features with it. The application will have 1 UIView and a UIButton on it. On clicking the button an alert will pop up.
Let's cut to the chase. Look at your dock bar and run Xcode.

You should have Xcode version <= 3.2.5. [Soon Xcode 4 becomes available.] On the Xcode welcome screen click on: 'Create a new Xcode project'

Now you are offered a bunch of project templates. It's a good thing to try all of them out. Now, for out purpose, we need 'View-based Application'. This kind of template will create as a base project with a UIView prepared to use. Be sure that and the 'Product' part 'iPhone' is selected.

Give it a project name, I call it 'iTest1'.

Now we can start to do our magic. In Xcode you will find all your files that are added to your project. (It doesn't reflect your physical file structure.) In 'Groups & Files' look for Classes/iTest1ViewController.m. This is the main UIView's controller class. In a nutshell, on running the compiler will start in the main.m file. It will create one UIApplication instance that is accessible from anywhere in the code. The application then will create a iTest1ViewController with the bundled UIView and add them to the main window view. Logically it's the iTestViewController.h file the right choice to begin with. Let's open it add the event handler function definition:

- (IBAction)pressedButton:(id)sender;

IBAction means void if you check the definition. The difference is that Xcode's UI builder will know about this function and can be connected to events.
Now let's add the function body to iTest1ViewController.m:

- (IBAction)pressedButton:(id)sender {
 UIAlertView *alert = [[UIAlertView alloc]
        initWithTitle:@"Hello"
        message:@"World"
        delegate:nil
        cancelButtonTitle:@"Cancel"
        otherButtonTitles:nil];
 [alert show];
 [alert release];
}

This little code snippet will fire up an alert window.
The code part is ready. Let's make the UI. In the 'Groups & Files' panel find Resources/iTest1ViewController.xib. This a nib file that wraps up the UIView of the controller. Double click on it will open Interface Builder. It has several window. Library is for assets, you can select classes and UI elements, drag them and drop to your UI. The Inspector window is to set an object's parameters, look and several other options. You should see a window named iTest1ViewController.xib. There you can check your objects that are in the xib file. And finally you have a View window, the UIView itself. Let's add the button. Go to the Library window, select the Objects tab and look for 'Round Rect Button'. Drag and drop it to your View window. Double click on it then and give it a title. Save the project.

Now we have to tell Xcode that on clicking the button it should call our pressedButton function. In the iTest1ViewController.xib window select 'File's Owner'. Hit CMD + 2 or open the Connection Inspector window. You should see the pressedButton: function and a small grey circle next to it. Now drag that circle, don't release your mouse, and move it to your button object. Now you can drop it, and it offers you a selection of events. Select: 'Touch Up Inside'.

In the Connection Inspector you should see that it's paired now.

Now go back to Xcode. At the left side of the toolbar you will see a selection list. Be sure that 'Simulator' and 'Debug' is selected. No hit on the 'Build and Run' button. [fingercrossing]

If everything went well it shows the iPhone simulator with the created application.

Click on the button. There should be the alert window.

That is that. If you want to know why we did it this way, read the Beginning iPhone 4 Development book's first couple of chapters. There is quite some things behind this and it's not this series' task to cover it.
Now, that you have this minimal application, you can play with the tons of ui elements, iOS capabilities, etc.


---

In the next part I'll talk about some code practices I've learnt during my first app development.

Have fun,
Peter