Developing for iPhone

Go ahead and open the Story Time project from the previous tutorial. In the resources folder, double-click “FlipsideView.xib” to open the interface for the application’s flipside view. This is where we will have a number of inputs to change the content of the story. By using Labels and Text Fields from the library in Interface Builder, create an interface that looks like this:

iPhone Development Tutorials

I changed the color and the size of the labels in the Attributes Inspector. For each text field, I added a default value. This can be added by entering some text in the “Text” field in the Attributes Inspector. Once this is done, save the interface and test the application. You may notice that you can’t get rid of the keyboard once you have finished entering text into a text field. One way of fixing this problem is by adding a big invisible button to the interface which will close the keyboard. When the user taps off the keyboard, the big button will be pressed and the keyboard will disappear.

Drag a Round Rect Button from the library to the view window. Now position and resize the button so it fills the entire interface. The interface should now look like this:

iPhone Development Tutorials

Next, select the big button you just created and click Layout > Send To Back. Now the button will be behind all the other elements in the view. But we can still see it. Fix this by opening the Attributes Inspector with the button selected and change the Alpha value slider to 0.

Select the text box you created for the First Name label and in the Attributes Inspector, open up the capitalize drop down menu and select “Words”. This will cause the iPhone to automatically change the first letter of each word entered in that box to a capital letter. Do the same for the Last Name text box and the Title text box. Lastly, select the Number text box you created and in the Attributes Inspector, open up the Keyboard drop down menu and select “Number Pad”. This will ensure that the user can only enter numbers in this field.

Save your work and continue to the next tutorial where we will start adding some code to get our interface elements working.

| | | | | |