Developing for iPhone

Ah yes, the moment you have been waiting for. Time to write an iPhone application. If you have not completed the previous tutorials, I suggest you do that now.
Follow these steps 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 View Based Application and then click the Choose button
4. Name the project “HelloiPhone” and click Save

You will notice that there are a few folders set up for you in the left pane of the project window. For now you don’t need to know what all the files in each folder do.
Click Build and Go. A new application will open called iPhone Simulator, and in it comes a nice shiny iPhone for you to play with. This is where you can test your applications. As soon as it loads, it will boot up the application that you just created. You haven’t done anything to it yet so it is just a gray screen. Press the home button (the square symbol at the bottom) to exit the application. Go ahead and play around with it – use it just like a real iphone but use your mouse to control it instead. Try clicking Hardware > Rotate Left or Right to flip the iPhone on it’s side.

There are some things that the iPhone simulator can’t do. It doesn’t include things like GPS to find it’s location or an accelerometer to detect movement or tilting. You also cant use multi-touch as you only have one mouse. For these things you will need to test on a real iPhone. However, you are only allowed to use a real iPhone if you have paid for and been accepted to Apple’s Standard Developer Program or higher. But for learning the basics, the simulator is fine.

Quit the simulator when you are done and return to XCode.

In the left pane of the project window, click the Resources folder and in the right pane, double-click “HelloiPhoneViewController.xib”. Another new application will open. This application is called Interface Builder and it is what we will use to design and lay out our interfaces. When developing iPhone applications, the three applications: XCode, Interface Builder and iPhone Simulator work together to help you easily and efficiently create iPhone applications.

When Interface Builder is open, you should be presented with three windows. One named after the file we just opened, one called View and one called Library. For now, let’s just worry about the View and Library windows. The view window represents your application interface. At the moment it is gray, just as you saw it on the iPhone Simulator. The library contains all the interface elements that Apple have designed for you.

Let’s go ahead and make our interface less boring. In the Library window, scroll down to Label, then drag and drop it into the View window. It is all pretty intuitive. Double click the text once it is in the View and change it to say: “Hello iPhone!”. Press the Enter or Return key to confirm. Now let’s say we want the text to be a little bit bigger and white. No problem. In the menu bar, click Tools > Attribute Inspector. This will open a fourth window. Using the Attribute Inspector window, you can edit the appearance of elements.

With the text label still selected, change the Font Size value in the Attribute inspector to 25. You may notice that some of the text was cut off when it got bigger. So just grab one of the blue corner dots surrounding the text and drag it to make the Label big enough to display all the text.

In the Attribute Inspector, click the Text color box (black at the moment) and in the Colors window that appears, click the top (white) area of the vertical slider. Close the Color window and the Attribute Inspector. Now click and drag the Label in the View window to position it nicely in the middle. There! All done! Let’s go ahead and test our first iPhone application!

Click File > Save to save the interface file, then switch back to XCode and click Build and Go to test it in the iPhone simulator.

Great stuff! We did all that without having to enter a single line of code! Why don’t you switch back to the Interface Inspector and play around with the Attributes Inspector to change the appearance of the Label we created. In the next tutorial we will be trying out some of the other iPhone interface elements from the Library. Click here to head there now.

| | | | | |