The iPhone SDK (software development kit) is free to download atwww.apple.com/developer, but only for Mac OS X. It’s based on the same Xcode development suite used to develop many Mac OS X apps, which provides a versatile environment for writing the Objective-C code that underpins iPhone software. It’s complemented by companion tools, such as Instruments, that enable performance analysis and drag-and-drop interface building.

Here, we’ll use the iPhone SDK to code and build an interface for a restaurant gratuity calculator called TippedOff. The software enables you to enter the amount of a party’s bill with an on-screen keyboard, then adjust touch-operated sliders to set the number of people in the dining party and the proportion of the bill that decides the tip. The tip total updates automatically as you adjust these controls.

Getting started

In Xcode, select ‘File | New Project’. In the dialog that appears, click the ‘iPhone OS’ pane in the left-hand list and choose ‘Window-Based Application’ from the selection of application templates. Name this new project ‘TippedOff’.

In the main window that opens, select ‘TippedOff’ in the left-hand list and then highlight ‘TippedOffAppDelegate.h’ in the file list. This document lists the variables, interface functions and other components. At present, it contains a single controller, which is automatically named after the project name you entered – in this case, ‘TippedOffAppDelegate’. Remove the text between the curly brackets and enter the following in its place:
float bill;
float people;
float tip;
float split;
IBOutlet UIWindow *window;
IBOutlet UITextField *bill_enter;
IBOutlet UILabel *bill_label,*people_label, *tip_label, *split_ label, *split_result;
IBOutlet UISlider *people_slider, *tip_slider;

Note the semicolon ending each line. The first block defines our four variables – bill, people, tip and split – as floating-point numbers. The second sets up a series of interface elements, which are defined through the UI descriptions. The ‘IBOutlet’ tag defines the elements as usable within Xcode’s companion program, Interface Builder.

Next, you’ll set property declarations to store the current status of each interface element. Delete the existing line that starts ‘@property’ and replace it with a copy of the four current ‘IBOutlet’ lines, pasting them below the AppDelegate curly brackets. On each line, exchange ‘IBOutlet’ with ‘@property (nonatomic, retain)’, keeping the element names that follow.

The first line, for example, should read ‘@ property (nonatomic, retain) UIWindow *window;’. This declaration has two components – ‘nonatomic’ aids multithreading efficiency, while ‘retain’ prevents the property value from being erased without your approval.

Finally, we name the three functions that the application uses as ‘peopleSlider’, ‘tipSlider’ and ’splitResult’. Below the four ‘@property lines’, enter:
- (IBAction)peopleSlider:(id)sender;
- (IBAction)tipSlider:(id)sender;
- (IBAction)splitResult:(id)sender;

Again, ‘IBAction’ is a cue for Interface Builder, while the sender parameter identifies the source of a piece of data. Finally, as a separate line, enter the following:
- (void)calculate;

This declaration of the ‘calculate’ function is needed here, even though it’s undefined, because later functions invoke ‘calculate’ as part of their operation.

Building the application

Now we’ll start to build the app’s mechanics. Begin by copying the four ‘@property’ lines, and then switch to the document ‘TippedOffAppDelegate.m’.

Delete the line that opens with ‘@synthesize’ and paste the four ‘@property’ lines into the space, replacing ‘@property (nonatomic, retain)’ with ‘@synthesize’. Next, remove the UI describers and the asterisks preceding each function. The ‘@synthesize’ function here is an instruction for your software compiling program.

Several functions that handle application start-up and shut-down tasks are already set up. Any further functions are entered between them and ‘@end’ line. The first section of code initialises the values of a few of the variables:
- init

With the various functions defined as code, you can now assemble the application itself with the SDK’s graphical Interface Builder.

Adding some control

Double-click ‘MainWindow.xib’ in the TippedOff file list to open a blank Interface window and a separate window holding objects to link to your interface parts.

Select ‘Tools | Library’ to open up a list of objects that you can drag onto the Interface window. Start with a Label object in the top-left corner and a Text Field object in the top-right. Placement guidelines appear as you move objects around, enabling you to line up components easily.

Below these two objects, add two pairs of Label and Slider objects. Next, add two more Label objects in the bottom-left and bottom-right corners. Stretch the Slider objects so that they go across the screen’s width. Finally, adjust the bottom-right Label’s Layout Alignment to ‘right’ to make it look a bit neater.

To change the text of the Labels, select ‘Tools | Attributes Inspector’. Then click on each Label in turn and change its ‘Text’ value. From the top, rename the Labels as ‘Bill’, ‘2 people’ and ‘15.0% tip’. Rename the bottom two Labels as ‘Split’ and ‘0.00′. Some Labels will change values as the controls are adjusted, so what you’ve entered here represents the defaults that a user will see when the application is launched.

Next, you’ll link the interface parts to controllers so that the user’s adjustments to controls can affect the variables that you’ve established. Hold down [CTRL] then click-and-drag from the TippedOffAppDelegate object onto the Bill Label. From the pop-up menu that appears, select the ‘bill_label’ Outlet.

Similarly, link the ‘people_label’ Outlet to the ‘2 people’ Label, ‘tip_label’ to the ‘15.0% tip’ Label, ’split_label’ to the ‘Split’ Label and ’split_ result’ to the ‘0.00′ Label.

Now hold down [CTRL] and once again click-and-drag from TippedOffAppDelegate to the Text Field object and link ‘bill_ enter’. Then link ‘people_slider’ to the higher Slider object and ‘tip_slider’ to the lower Slider.

You also need to link some Outlets in the opposite direction. Hold [CTRL], then click-and-drag from the Text Field object to TippedOffAppDelegate and select ‘delegate’. Similarly, link up peopleSlider and tipSlider to the higher and lower Sliders.

The final operations to complete in Interface Builder define the controls’ behaviour more tightly. First, select the Text Field object. In the Attributes Inspector’s Text field, enter ‘0.00′ as the default value, then change its Alignment to centred. Make sure that ‘Clear When Editing Begins’ is ticked. Under Text Input Traits, set Keyboard Type to ‘Numbers & Punctuation’ so the user doesn’t have to switch over from the default keyboard. Change Return Key to ‘Done’ and tick ‘Auto-enable Return Key’.

Now select the higher Slider object, which sets the number of people in the dining group. In Attributes, set Minimum to ‘2′ (you don’t need to use the app if you’re eating alone…) and Maximum to ‘20′. Set Initial to ‘2′ as well: this matches the default Label for this Slider that you created earlier. For the lower Slider, which is used to set the tip percentage, set Minimum to ‘0′ and Maximum to ‘25′, then set Initial to ‘15′ – again matching the default Label object you’ve defined for that Slider.

Your tip calculator is now ready to use. To try it out, return to Xcode and press ‘Build and Go’ in the toolbar. Xcode compiles the code and bundles it into an application, triggering iPhone Simulator to present the result. You can use the app as you would on an iPhone, dragging sliders and entering the bill total in the top-right text field.

There’s a glut of such tools on the App Store, which provides a great opportunity to study how different programmers tackled the challenge of making a gratuity calculator. Why not see if you can come up with your own take on the app?

All the very best.