DPS923 MAP523 Lab 2

Model object. Collections. Delegate pattern, using a picker view. Calculations. Fun.

.

DPS923 MAP523 Lab 2 – due Fri Jan 31

Due date: Friday, January 31, at 6:00pm ET

Grade value: 4% of your final course grade

.

Objective(s)

Work with a model object

Use array collections

Understand and implement the delegate pattern, using a picker view

Simple calculations

.

Introduction to the problem that you will solve

You need an iOS app that enables a user to “buy” air travel tickets.

The “Air Seneca” airline has flights from Toronto to Ottawa, Montreal, New York City, and Washington D.C. The app enables the user to 1) select the destination city, 2) select the number of tickets, and 3) “buy” tickets.

A segmented control enables the user to select the flight destination.

A picker view enables the user to select the number of tickets to purchase for the flight. The data shown on the picker view is generated when the app launches, and also when the user taps a different segment on the segmented control.

When the user swipes the picker view, and the ‘spinning wheel’ stops spinning (and comes to rest on one of the rows in the picker view), the selected row is displayed in a message below the picker view.

The “Buy” button will reduce the number of seats available on the flight by the selected number, and generate a ‘buy message’.

Here are three screen captures. From left to right, 1) at launch, 2) select, and 3) buy:

lab2-launch . lab2-select . lab2-buy

.

Specifications

Get started by creating an iOS app, using the “Single View Application” template. Its name should be “Air Seneca”. 

Alternatively, you can use the ‘template’ that has been posted in the new “Project_Templates” folder in the code example repository.

First, you will work on the Model class.

Then, you can work on the user interface.

Finally, write code in the controller.

Work incrementally, and test your work step-by-step.

Read through this assignment fully before starting work on it. That way you will know what’s coming.

.

Model class

Create a Model class. Its interface will declare the following properties and methods:

Model class interface

The ticketCost array can be initialized in the class ‘init’ method. Use these double values when you initialize the array:

  • 110.50
  • 122.70
  • 147.35
  • 168.25

The seatsAvailable array can be initialized with the same int value for all four elements – 40.

As discussed in recent class sessions, the Model class initializer must look something like this:

Model class init

So… you have noticed that there are four elements in each of these arrays. That matches the number of destination cities. You will maintain a logical association between the segmented control’s selected segment index and the index of each array.

In other words, if the selected segment index is 2, then you are working with the New York City destination, and therefore you will get its ticket cost from the ticketCost array’s index 2, and its seats available from the seatsAvailable array’s index 2.

The buyTickets:onFlight method will do the following:

  • Fetch the current number of seats available for the flight number from the array element
  • Subtract the number of tickets purchased from the current number of seats available
  • Save (replace) this new seats available value in the array (using the array’s “replace…” method)

The generatePickerRowsForFlight: method will re-generate the data source for the picker view. It will:

  • Remove the existing objects in the pickerRows array
  • Fetch the ticket cost and the seats available for the flight number
  • Add new string objects to the array, based on a simple calculation

Important: In the “for” loop that builds the array elements, include the zero (0) seats calculation. That enables you to easily show that a flight has been ‘sold out’ and has no more tickets available. Therefore, your upper condition will be less-than-or-equal-to the seats available on the flight.

.

Build the user interface

lab2-launchAs suggested by the screen capture to the right, create the user interface.

Here are the controls that have connections (to outlets or actions):

  • Segmented control – outlet and action, named flightNumberChanged.
  • Picker view – outlet; and connections for its delegate and dataSource properties.
  • Label – outlet – displays the content of the array element at the selected index.
  • Button – action, named buyTickets.
  • Label – outlet – displays an after-purchase message.

As you learned, the picker view needs a delegate and data source. As a reminder, here’s how you configure that:

Select the picker view in the scene. Then Control+click-drag to the “View Controller” icon on the scene’s dock. On the popup, select “delegate”.

Repeat this, and on the popup, select “dataSource”.

Finally, add code to the controller’s interface to ‘formally adopt’ the picker view’s delegate and data source protocols.

.

Write code in the controller

Here is the code that you must write for the controller methods.

.

Properties

One property – for the model object – is needed. For this lab, you can declare it with its initializer:

var model = Model()

.

viewDidLoad

Call the model object’s generate picker rows method for the flight number as indicated by the currently-selected segmented control segment.

Also, if the labels have placeholder text, clear them now, so that the user interface is clean.

.

flightNumberChanged

This will run when the user taps the segmented control to change their selection.

Call the model object’s generate picker rows method for the flight number as indicated by the currently-selected segmented control segment. 

Call the picker view’s method to reload all components. Look in the UIPickerView class reference for the appropriate method.

Then, it would be nice to make sure that the picker view ‘spins back’ to show the first row. Look for a UIPickerView method that selects a row in a component using animation.

.

buyTickets

This will run when the user taps the Buy button.

First, create the after-purchase message. Format it like this:

.

(more to come)

For the Get the data from the data source. DO NOT attempt to get it from the picker view itself. Here’s how:

  1. Get the selected row in the picker view. There’s a method for that, which returns an int.
  2. Then use this value to get the data from the model object array.
  3. Use [NSString stringWithFormat… to compose a nice-looking message.

Next ‘buy’ the tickets. Call the model object method to do that.

Then, call the model object method to re-generate the picker view data source.

Finally, call the picker view’s method to reload all components. As before, ‘spin back’ to show the first row.

.

Delegate methods

Implement the four methods you learned in class and in the readings:

  • numberOfComponentsInPickerView:
  • pickerView:numberOfRowsInComponent:
  • pickerView:titleForRow:forComponent:
  • pickerView:didSelectRow:inComponent:

numberOfComponentsInPickerView:

There’s only one component. Return 1.

pickerView:numberOfRowsInComponent:

Return the number of rows in the model object’s array that holds the picker view data rows.

pickerView:titleForRow:forComponent:

Return the string that’s in the data source, which is the appropriate model object array at the ‘row’ index.

pickerView:didSelectRow:inComponent:

This method will simply set the UILabel with the string in the data source array (at the ‘row’ index).

.

Submitting your work

Follow these instructions to send me your work:

  1. Make sure your project works correctly
  2. Locate your Air Seneca project folder in Finder
  3. Right-click the folder, and choose Compress “Air Seneca”, which creates a zip file (make sure the zip file is fairly small, around 500KB or less)
  4. Login to My.Seneca, and in this course’s Assignments area, look for the upload link, and submit your work there

.

.

.

.

.

.

.

.

.

.

.

.

.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: