Individual Programming Assignment 2

From CS 160 User Interfaces Sp10

Jump to: navigation, search

Due: Before class on February 8

10 Points - Programming



Imagine you are eating dinner with the Ninja Turtles at Zachary's. The bill has just arrived and you need to split it evenly. The turtles only have three fingers on each hand and are incapable of doing math on their fingers. Luckily you have your trusty tip calculator app that you built in cs160. Hopefully the turtles brought their wallets with them.

In this assignment you will build a tip calculator that uses a navigation-based view hierarchy.

You will submit both your source code and a narrated video of the interface running in the iPhone simulator.


Design and build a tip calculator with the following functionality:

  1. Consist of a navigation hierarchy of at least two levels deep (including the root).
  2. Be able to enter a bill amount, and calculate 10, 15, or 20% tip.
  3. Split the final bill amount among the guests.
  4. Titled views.

One possible way of achieving these goals is to break your application down in the following fashion:

The first view should be the tip calculator.

  • Provide a text field for entering the bill.
  • Provide buttons for calculating 10, 15, or 20% tip.
  • Provide a button to switch to the bill splitter view.

The second view should be the bill splitter.

  • Provide a text field for entering the number of guests.
  • Provide a button to calculate the bill.

This is by no means a brilliant design for a tip calculator. You are free to design your own app provided that it has the functionality as enumerated above.

Grading Criteria

Full credit (10 points) will be given if your application compiles, runs, contains the functionality as detailed in the instructions, and you have submitted a narrated video.

Up to 5 extra points will be given if you implement additions that make the application more usable or more aesthetically pleasing. For example, you can implement the following:

  • Create an icon for the app
  • Use a UISegmentedButton for picking the tip percentage
  • Use a UITableView for choosing tip percentages in one percent increments
  • Use a UITableView for choosing the number of patrons
  • Add a sound when total is computed
  • Enable orientation (app should be viewable in portrait and landscape mode)

Solution Examples

Submission Instructions

Create a Wiki Page for this assignment

Edit your user page created in Assignment 1 to add a link to a new wiki page for this assignment. The wiki syntax should look like this:

[[ProgrammingAssignment2-FirstNameLastName|Programming Assignment 2]]

Again replace FirstName and LastName with your name. Look at my user page for an example. Then click on the link and enter the information about your assignment. You should upload a zip file for the source code and a mov file for the screencast (described below), and in the wiki page, describe any extra credit functionality you implemented and want us to review.

Upload Project

  • Your submitted project should include the full source code.
  • Do a Clean on your project (hit the broomstick icon, leave boxes checked, and hit clean). Or go to the Build menu and then hit Clean.
  • Create a zip file of your project tree (in Finder: right-click the Folder, choose "Compress Foldername"). Rename the zip file to (e.g.,
  • Upload the zip file to the ProgrammingAssignment2-FirstNameLastName page you just created:
    • Create a new file link like this: [[]]
    • Save the page, then click on the File link you just created to upload the zip file.
  • You MUST submit a Screencast to earn any points for this assignment. Read the following section for details.

Create Screencast Video

  • What your screencast should contain:
    • Narrated walkthrough of the interface from the user's perspective
    • No implementation details
    • In the end, point out any extra credit points
    • Be CONCISE. Your video shouldn't be longer than 90 seconds for the basic functionality. You may use additional time to point out possible extra credit features.
    • Be prepared to do multiple takes or maybe write out a script first.
  • Running iShowU HD
    • Download iShowU HD
    • Open ~/Downloads/iShowU_HD_2.1.3.dmg
    • Open iShowU HD
    • Leave HD Pro selected and click "Use Demo".
    • For "Capture area" click Choose to select the window to capture (hitting the spacebar will allow you to switch between manually specifying the capture window and selecting an application window).
    • For "Output video" click the gear icon and choose Change size -> Same as capture size
    • For "Mouse mode" choose Fixed.
    • Click record
    • To finish recording, click on the iShowU HD icon near the top right of the menu bar and hit "Stop capture"
    • Your video will be stored in your ~/Movies/iShowU HD folder
    • Rename the mov file to (e.g.,
  • Upload the mov file to the ProgrammingAssignment2-FirstNameLastName page you just created:
    • Create a new file link like this: [[]]
    • Save the page, then click on the File link you just created to upload the mov file.
  • If your video's volume is too low, do an audio check:
    • The monitors in the lab have both speakers and a mic
    • In Apple -> System Preferences -> Audio, you can check the volume of sound output and input

Add Link to Your Finished Assignment

One you are finished editing the page, add a link to it at the bottom of the page with your full name as the link text. The wiki syntax will look like this: *[[ProgrammingAssignment2-FirstNameLastName|FirstName LastName]]. Hit the edit button for the last section to see how I created the link for my name.

QuickStart Guide

You will reuse many of the techniques you learned in your Hello World assignment. Please refer back to that assignment for hooking up widgets to nib files.

In XCode, start a new project. Choose navigation-based Application

The default project contains a RootViewController that inherits from UITableViewController. We're not going to use a table view, so you can delete RootViewController.h, RootViewController.m, and RootViewController.xib from the project.

Instead you will need to add two new UIViewControllers, one for the tip calculator, and one for the bill splitter. Each view controller will have an associated nib file. Recall that nib refers to the .xib file. In the MainWindow.xib, change the view controller of the window to first view controller you created by doing the following two things:

  • Click on the View (the big dashed rectangle that currently contains the text "View Loaded From "RootViewController") and in the Inspector (attributes tab), change the NIB Name field from "RootViewController" to the your new controller.
  • In the Inspector (Identity tab), change the class to your new controller as well.

Because a user of the calculator will first input the bill in the tip view, and then split the bill in a second view, the two views will need to be able to share data. To achieve this you can store global application data in your <YourProjectName>AppDelegate file. From either view controller, you can get a pointer to the app delegate with the following line of code:

<YourProjectName>AppDelegate *appDelegate = (<YourProjectName>AppDelegate *)[[UIApplication sharedApplication] delegate];

This is a pointer to the instance of <YourProjectName>AppDelegate class that gets created when your application starts. You can store bill and tip data as member variables in the <YourProjectName>AppDelegate class. You can set or get the bill and tip data appropriately.

Lastly you will need a way to switch from your first view to your second view. Say you have a button for this purpose in the first view and you have an onClickButton: method that implements the action. In this method you can add the line of code:

[[self navigationController] pushViewController:billSplitterViewController animated:YES];

Don't forget to initialize the bill splitter's view controller in the tip's view controller. You will probably want to do this in your tip calculator's viewDidLoad method. Note: You only need to initialize it ONCE. Keep a pointer to it in your tip's view controller!


Make sure your views implement the textFieldShouldReturn method and that it uses the UITextFieldDelegate protocol as before in HelloWorld. This will allow you to close the keyboard.

Go to Run -> Console to view NSLog and print statements at runtime.

Go to Help -> Documentation for information on the iPhone API.

When using @property in the .h file, don't forget to @synthesize the variables in the .m file.

You can consider using a UISegmentedControl instead of three UIButtons for specifying the tip percentage.

Memory allocation rule of thumb: For every alloc or retain, there should be a corresponding release (member variables should be released in the dealloc method). Poor memory management shouldn't lead to any ill-effects in such a simple app, but should be kept in mind for future larger projects.

Links to Finished Assignments

Add your submission below this line.

[add comment]
Personal tools