DPS923 MAP523 Lab 3

Navigation-based app style, with two levels of navigation (list > detail). Table view. Model object.

.

DPS923 MAP523 Lab 3 – due Thu Feb 5

Due date: Thursday, February 5, 2015, at 9:45am ET

Grade value: 4% of your final course grade

.

Objective(s)

Create an app with more than one view, as a navigation-based app, with two levels (list and detail)

Work with a model object, use array collection

Understand and implement the delegate pattern, using a table view

.

Introduction to the problem that you will solve

We need an app that will display performance information for quarterbacks in the just-completed 2014 season in the National Football League.

The app’s first view will be a table view, showing a list of quarterback names. Tapping one of the rows will display a ‘details’ page, with the player’s statistical performance information.

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

These images are an example of what you will create:

qb-stats-list qb-stats-detail

.

This brief video shows how the app works:

.

Specifications

Get started by creating an iOS app, using the “Single View Application” template. Its name must be “QB Stats”.

We need to remove the existing view and controller, and replace them with our own items.

.

Remove the existing view and controller

Make sure that the project builds/compiles before continuing.

This video previews the relevant tasks:

.

Select the “ViewController.swift” source code file in the Project Navigator. Delete it (use the keyboard’s “Delete” key). On the dialog that appears, select “Move to Trash”.

Show the storyboard. Select the scene by clicking in its dock area at the top of the scene. Delete it (the keyboard’s “Delete” key).

Now, we want to add the pieces that we need.

.

Add the controllers, and the player data

Select the “QB Stats” group (folder icon) in the Project Navigator. Here, we want to add some items to the project.

.

Controller that will manage a list of players

Add a Cocoa Touch Class (Command+N or File > New > File), from the dialog’s iOS > Source panel.

new-cocoa-touch-class

Its name will be PlayerList. It will be a subclass of UITableViewController. Its language will be Swift.

new-cocoa-class-type-settings

.

Controller that will manage a player’s detailed information

Add another Cocoa Touch Class.

Its name will be PlayerDetail. It will be a subclass of UIViewController.

.

Player data

Your professors have extracted the data you need from NFL.com. Its data format is “property list”, which is a plain-text XML data format that’s widely used in iOS and OS X apps. Download it from the “Assignments” area on My.Seneca/Blackboard. It is in a zip file with some player photos (in a folder named “Photos”) and team logos (in a folder named “Logos”).

Then, add it to the project: Right-click the “QB Stats” group (folder icon), and choose “Add Files to QB Stats…”.

Navigate to the downloads folder. Select the file named “stats2014qb.plist”, and the two folders. Make sure that the “Destination” check box is checked (selected), so that it will “Copy items if needed”.

If you wish, you can look at the data file. Xcode will show it as an ‘array’ of ‘dictionaries’. if you open one of the dictionaries (e.g. “Item 0”), you will see some key-value pairs with player data.

qb-stats-plist

.

Add the scenes

This video previews the relevant tasks:

.

This will be a navigation-based app.

We will need a table view (as the initial scene), and a standard/normal view as the drill-down ‘detail’ scene.

Select the storyboard.

From the Object Library at the bottom of the right-side utility area, select the “Navigation Controller” item. Drag that to the storyboard. It will add two rectangles:

  1. The “Navigation Controller” rectangle is managed by a UINavigationController instance. It provides a number of useful services to the app, including navigation, and a title bar that can hold text and action buttons.
  2. The “Table View” rectangle will be managed by the “PlayerList” controller we added above.

.

Configure the Navigation Controller on the storyboard

Select the “Navigation Controller” icon on the scene’s dock.

On the Attributes Inspector (on the right-side utility area), check (select) the “Is Initial View Controller” check box. An arrow should appear to the left of the scene’s rectangle.

.

Configure the Table View on the storyboard

Select the “View Controller” icon on the scene’s dock.

On the Identity Inspector, select the “PlayerList” item in the Class dropdown (in the “Custom Class” section at the top).

Select the white-and-empty rectangle just below the “Prototype Cells” prompt. We need to configure its behaviour:

  1. On the Identity Inspector, set its Style to “Basic”
  2. Set its Identifier to the string “cell”
  3. Set its Accessory to “Disclosure Indicator”

Now, change the scene’s visible title (on its ‘navigation bar’ area). Double-click the “Root View Controller” string, and replace it with something better (like “Player List”).

.

Test your work

Edit the PlayerList controller. Uncomment the tableView(cellForRowAtIndexPath: ) function. Then. set the cell’s textlabel.text property to something, as suggested below (click for full size):

test-adding-scenes

.

Then, build-and-run the app, and it should display something useful:

test-adding-scenes-running

.

Add the ‘player detail’ scene

Back on the storyboard, we will add another scene. For best results, double-click an open (white) area of the storyboard, just to the right of the existing scenes.

Double-click is a zoom toggle. Each time you double-click, it will zoom in, or zoom out.

From the Object Library, drag a View Controller to the storyboard, and position it to the right of the “Table View”.

Select the “View Controller” icon on the new scene’s dock. We will configure its controller: On the Identity Inspector, set the Class to “PlayerDetail”.

Optional – If you wish, you can set a title for the scene. (Most often however, this is done programmatically.) On the Attributes Inspector, set the Title to “Player Detail” or something similar.

Next, select the ‘prototype cell’ rectangle on the Table View. Control+click-drag to the new scene. On the popup, select Selection Segue > show:

segue-setting

Adding a segue will ‘join’ the two scenes together, as a navigation action. Select the arrow that joins the scenes. On its Attributes Inspector, set the Identifier value (it’s a string) to “toPlayerDetail”.

At this point, you can add four labels and an ‘image view’ to the scene. Here’s an example of what it could look like:

detail-scene

 

While you’re here, you could also add outlets for each of these five user interface objects.

Also, at some point in time, you will have to add constraints. Here’s a suggested sequence:

  1. Show the storyboard’s document hierarchy sidebar
  2. Select the image view object, and from the Editor menu, Pin its Height and its Width.
  3. Then, select the View object, and add the missing constraints

.

Test your work

When you build-and-run the app, you will be able to tap on the row, and navigate to the ‘detail’ scene.

.

Add a Model class

This video previews the relevant tasks:

.

In the Project Navigator, select the “QB Stats” group (folder icon), and add a new item (Command+N).

It will be a Swift File, named “Model”.

Add code to create a class named “Model”. It will have one property, named ‘players’. For this lab, follow the guidance below to add the class’ code.

The ‘players’ property is an array. In Swift, the array’s data type is AnyObject.

Each ‘player’ object is a dictionary-like data structure, with key-value pairs. Later, we will use that object as a Swift Dictionary<String, AnyObject>.

.

Initialize the model object in the app delegate,
and pass it to the ‘root’ controller (PlayerList)

Edit the app delegate source code. In the body of the application(didFinishLaunchingWithOptions: ) function, add code that will pass the model object to the PlayerList controller.

Follow the guidance below. Don’t worry about the build/compile error, you will fix that soon.

app-delegate-initialization

.

Edit the PlayerList controller code

This video previews the relevant tasks:

.

The ‘new item’ template creates a controller with a number of function stubs. We will use the following functions; you can delete the others if you wish:

  • viewDidLoad()
  • numberOfSectionsInTableView()
  • tableView(numberOfRowsInSection: )
  • tableView(cellForRowAtIndexPath: )
  • prepareForSegue(sender: )

.

Add a model object property

Add a model object property. After you add it, the project will build/compile without errors.

.

Configure the table view dimensions

The model object has a ‘players’ property. It is an ‘array’ of ‘dictionary’ objects.

Hard-code the numberOfSectionsInTableView() function return value to 1.

In the tableView(numberOfRowsInSection: ) function, return the count (size) of the players array.

.

Configure the row contents

The controller’s ‘model’ object has a ‘players’ collection. We will extract the player names, and display them on the table view rows. Here’s the algorithm:

  1. From the data source, extract the player object for the tapped/selected row
  2. Extract the player name from the player object
  3. Set the cell’s text label property to the player name

Here’s some guidance:

list-configure-cell

.

Optional – team logos

The “Basic” table view cell style includes space for a small image, on the left side. If we configure that image in code, it will appear.

Each player’s object has a “Team” key-value pair. The value is a two- or three-character team name (e.g. SEA = Seattle, NE = New England, etc.). We use that value to look for an image with a matching name.

Here’s some guidance:

list-configure-cell-image

.

Write code for the segue

Your app will segue from the list to the detail scenes. Now, we will write code to pass data to the detail scene.

The prepareForSegue(sender: ) method is commented out. Make it active.

It is possible that a scene could have a number of segues to other scenes. Therefore, we always wrap our code in an ‘if’ statement to ensure that we’re working on the desired segue.

Then, the design and coding algorithm is as follows:

  1. Get a reference to the destination view controller
  2. Get a reference to the data source object for the tapped/selected row
  3. Pass the object on to the destination view controller
  4. Perform other tasks as needed (e.g. set the destination title)

Here’s some guidance:

list-configure-segue

Please note that the ‘player’ property does not yet exist in the destination scene’s controller, so the editor will show an issue.

.

Edit the PlayerDetail controller code

This video previews the relevant tasks:

.

Add a property for the passed-in player object

Add a property for the passed-in player object. After you add it, the project will build/compile without errors.

.

In viewDidLoad, configure the user interface

You will extract string and number data from the player object, and make strings for the labels on the scene.

For the photo, the player’s name will be used to match up to a photo (that’s in the “Photos” group/folder).

Here’s some guidance, showing how to configure the image view and the first label:

detail-scene-config

.

Submitting your work

Follow these instructions to send me your work:

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

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

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