How To Build Your First iPhone App

Drag out a Text Field and position it to the right of the Meal Price label. Set initial Text value to 50, adjust to Font size to 18, and change the Keyboard to Number Pad.

Copy and paste the existing text field and then position it to the right of the Tip Percent label. Change the initial value of this new text field to 20. Now drag out a Round Rect Button, position it below the Tip Percent text box, and resize it to the same width as the text fields. Change the button Title to Calculate.

Now you need to connect your 2 text fields and the button into the view controller code. Bring up the secondary editor and make sure the )TipCalculatorViewController.h file is displayed next to the Interface Builder editor.

Once you release the mouse button. you will see a popup dialog where you can name the new outlet. Type in price as the outlet name and click Connect. This will create a new property named price, which will allow you to check the value of this control from within your code.

Repeat that operation for the tip percentage text field and name the new outlet tip. Again, this will allow you to get the current value of this control from within your code.

Control-drag from the calculate button over to just below the interface definition. Make sure you insert the new oulet after the curly bracket and before @end.

This time in the connection popup, change the Connection to Action and name it calculate. This will create a method called “calculate” that the program will call when you tap the button.

The interface and connections are now complete. You’re finished using Interface Builder and the interface file should look like this, below.

Open the TipCalculatorViewController.m file and find the calculate method that was inserted for us by Interface Builder. Do it like this.

The code you just entered will grab the values from the price and tip text fields and store them as float variables. The tip amount is then calculated and an alert view is displays the result.

One last final addition is to uncomment the viewDidLoad function and set the price text field to become the first responder. This will set the input focus to this control which will automatically present the keyboard on the lower half of the screen.

Run the application in the simulator and test out different meal and tip amounts to verify everything works. If you have an iOS device that is registered for development then you’ll be able to install your new tip calculator to your device and use it on the go. Congratulations!

Based in DC, Todd Moore is a senior contributor for BYTE. Follow him Follow him @toddmoore or email him at [email protected].