DPS923 MAP523 Lab 2

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

.

DPS923 MAP523 Lab 2 – due Thu Jan 29

Due date: Thursday, January 29, 2015, at 9:45am 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:

air-seneca-launch . air-seneca-select . air-seneca-buy

.

Specifications

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

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.

It will have these three properties:

“ticketCost”, array, type Double, initialized with these four values:

  • 110.50 (Ottawa ticket cost)
  • 122.70 (Montreal)
  • 147.35 (New York City)
  • 168.25 (Washington D.C.)

“seatsAvailable”, array, type Int, initialize it four elements with 40

“pickerRows”, array, type String, initialized as empty

.

The model class will also have two methods:

“buyTickets”, void return, takes two arguments, numberOfTickets, and flightNumber

“generatePickerRowsForFlight”, void return, takes one argument, flightNumber

.

So… you have noticed that there are four elements in the “ticketCost” and “seatsAvailable” 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 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

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, be careful to specify your lower and upper range limits correctly.

.

Build the user interface

As suggested by the screen capture below, create the user interface.

air-seneca-scene

.

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.

.

Property

One property – for the model object – is needed. For this lab, you can declare it along 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 you used placeholder text in your user interface labels, you could clear them (set them to an empty string).

.

flightNumberChanged

This will run when the user taps the segmented control to change their flight selection (destination).

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 the message to look like this:

Sold MTL: 4 x $122.70 = $490.80

The red value comes from the segmented control. It is the ‘title’ for the selected segment.

The blue value comes from the data source for the picker (in the model object).

To compose the string, you can use one string interpolation statement, and get the data directly from the sources, or you can create temporary throw-away variables to hold the data, then plug them into a shorter statement.

Next, ‘buy’ the tickets. Call the model object’s function to do that.

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

Finally, do some tidy-up:

  • call the picker view’s method to reload all components
  • as before, ‘spin back’ to show the first row
  • clear the row-select label above the “Buy” button

.

Delegate methods

Implement the four methods you recently learned:

  • 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: