Developing for iPhone

In the previous tutorial, we used a view-based application template. These consist of just one view or screen. Today, let’s try out a new template. Follow the instructions below to get started:

1. In XCode, click File > New Project
2. In the left pane of the new window, click Application under the iPhone OS heading
3. In the right pane, click Utility Application and then click the Choose button
4. Name the project “Story Time” and click Save.

The Utility Application template we chose this time, sets up a nice flipping function for us. This means we can flip between two different views. Have a look at your new project window. You will notice that in the left pane, we have folder for the main view and a folder for the flipside view. Each of these folders contains some basic classes already set up for us. Now click on the Resources folder. You should see an interface file (.xib) for both the main view and the flipside view. Click “Build and Go” to test it out. Once the simulator is running, you can click the “i” icon at the bottom of the screen to flip over to the other view, then click the “Done” button to flip back. Cool huh?

On a side note, you should have updated to the latest version of the iPhone SDK for iPhone 3.0. If you have not done this, make sure you do before continuing.

Back in XCode, open MainView.xib in the Resources folder. This will open the interface builder ready to edit the main view. You will notice that the “i” icon is already there and set up for you. We will leave this where it is for this tutorial. At the end of this set of tutorials, we will have created a story-telling app which displays a story that the user can edit.

In Interface Builder, click the background and change it’s color to white in the Attributes Inspector. You may notice that it is now hard to see the “i” icon. Let’s change that: select the icon then in the Attributes Inspector, change its “Type” from “Info Light” to “Info Dark”. Now grab the Text View item from the library and drag it onto your View. Resize it so it fills up most of the view. This will be our story. Drag a label item from the library and position it above the text we just added. This will be the title of the story. Resize and position it however you want. Here is how mine looks:

Save this interface and click “Build and Go” in XCode to try it out. Notice that it automatically scrolls the text when you flick it – no coding required! Clicking the “i” icon flips to the other view seamlessly. In the other view, we will add some input boxes to change the story. We will be adding these in the next tutorial. Remember to save your work before proceeding.

| | | | | |