DPS923 notes – Tue Feb 10

Quiz. Checkpoint. The ‘add/edit item’ pattern. Fun.

.

Quiz today

We will begin today’s class/session with a quiz.

The quiz will be ten (10) minutes in length.

You will answer three questions, on a single sheet of paper. The questions will cover topics, concepts, definitions, descriptions, and so on. Think about a question-and-answer session in a job interview. Those are the kinds of questions you can expect.

.

Checkpoint, and the next week or two

Its worthwhile to pause for a moment, and list the topic sequence we have covered to date:

  1. Working with user interface objects on a single view
  2. Learning the delegate pattern, first with a text field, and then with a picker view
  3. Using a collection, and a picker view that relies on a collection and the delegate pattern
  4. Designing a model object, to host the app’s data
  5. Learning the navigation-based app style, using a table view (which is similar to the picker view, because it also relies on a collection and the delegate pattern)
  6. Getting started with the Core Data object design, management, and persistence framework

Make sure that you’re comfortable with these topics. If not, ask your professor.

In the next week or two, we will introduce these topics:

  • The add/edit item pattern, which requires you to write a protocol, and learn modal segues
  • Using the network, which most often means a web service
  • Working with multiple related entities

What about the future? We want to hear from you. Talk to your professor, and/or contact by email.

  • What graphics and touch topics do you want to learn?
  • What device hardware topics (e.g. location, camera, etc.) do you want to learn?
  • Do you have an idea for a project that you want to do as a programming assignment?
  • How much do you want to learn about iPad apps?

.

The ‘add/edit item’ pattern

At this point in time, you have some knowledge of and experience with:

  • navigation-based app style
  • table view
  • model object
  • persistent store, using Core Data

.

What if you want to add new items to your app?

New items can be added from a number of different sources:

  • a data entry view that you create as part of the app
  • a select list with items fetched from the network
  • on-devices sources, including the camera

.

How is this done? Using the add/edit item pattern. A central feature of this pattern is the modal view concept.

What is a modal view? It is a view “that provides self-contained functionality in the context of the current task or workflow.” Continuing from the Apple iOS Human Interface Guidelines document:

A modal view:

  • Can occupy the entire screen, the entire area of a parent view (such as a popover), or a portion of the screen
  • Contains the text and controls that are necessary to complete the task
  • Usually displays a button that completes the task and dismisses the view and a Cancel button that abandons the task and dismisses the view

Use a modal view when you need to offer the ability to accomplish a self-contained task related to your app’s primary function. A modal view is especially appropriate for a multistep subtask that requires UI elements that don’t belong in the main app UI all the time.

.

Modal views are often used in iOS apps for these situations:

  • The user is completing a fill-in form that has user interface controls (an “add item” pattern)
  • The user must select one or more items from a lengthy list (a “select item(s)” pattern)

.

Here is the design and coding approach:

  1. Create a controller
  2. Add code that declares a protocol (with at least one method), and add a delegate property to the controller
  3. Add a new scene to the storyboard (and embed it in a nav controller)
  4. Alternate between the scene and controller code to build the user interface and handle events
  5. In the controller, add code (to validate and) package the user input, and call the delegate method
  6. In the presenting controller, adopt the protocol, code the segue, and implement the delegate method(s)

.

A protocol is a source code module that declares properties and methods for a task. Then, a class in your app can ‘adopt’ the protocol, and provide an implementation for the protocol’s members.

Discussion in The Swift Programming Language guide

Discussion in the Cocoa Core Competencies document

.

You can follow along by studying the “CanadaAdd” code example (which is based on Lab 4), which is posted on the GitHub code repository. It implements the “add item” pattern.

You can also watch these videos, which cover the same content.

Part 1:

.

Part 2:

.

Create a controller

Add a new controller. It will be a subclass of UIViewController. In the code example, the controller name is “ProvinceEdit”.

.

Add code that declares a protocol, and add a delegate property to the controller

Edit the ProvinceEdit controller’s source code file.

At the bottom of the source code file (and BELOW the controller’ class closing brace), declare a delegate, and its (required) method:


protocol EditItemDelegate {

    func editItemController(controller: AnyObject, didEditItem item: AnyObject?)
}

.

Notice that this protocol has only one method. You can declare as many methods as you need.

The implementation code – the tasks that the method actually performs – is written in the class that adopts the protocol.

Next, define a “delegate” property for the controller class.


var delegate: EditItemDelegate?

.

Add a new scene to the storyboard (and embed it in a nav controller)

On the storyboard, add a new View Controller scene from the object library. On the Editor menu, embed it in a navigation controller.

storyboard-id-on-add-edit-sceneOn the Identity inspector, set its Custom Class property to be the just-added ProvinceEdit class.

Also, in the “Identity” section (just below the Custom Class section), enter a string for the “Storyboard ID”. A suggested name is “AddEditProvince”.

Set the scene’s nav bar title.

Add the user interface objects. (For this app, we need three text fields, and a date picker.)

Add two ‘bar button item’ controls – one for ‘Cancel’ (left side), and the other for ‘Save’ (right side).

On the storyboard, create a segue from the presenter scene (ProvinceList) to the new scene. Here’s how:

  1. Add a ‘bar button item’ control to the presenter scene’s nav bar, right side
  2. Control+click-drag from the control to the new scene
  3. On the segue popup, choose ‘modal’, then add an identifier (e.g. ‘toProvinceEdit’)

.

storyboard-with-add-scene

.

Alternate between the scene and controller code to build the user interface and handle events

As you have done before, alternate your work between the scene and controller code to build the user interface, and handle events. Add outlets, and actions for ‘cancel’ and ‘save’.

.

In the ‘add item’ controller, add code that packages the user input, and call the delegate method

Add properties for the model object, and an entity object:


var model: Model! // will be configured by the presenting controller

var detailItem: Province? // not used in this example, but will be used in the future

.

In the ‘cancel’ method, we simply call back into the delegate method, and pass nil as an object.

In the ‘save’ method, your code will package the user input, and call the delegate method, passing along the user input package.

You can decide on the packaging format. If you have a single string or number item, just send that along. If you have multiple items to send, package them into an NSDictionary and/or an NSArray object. In this situation, package it into a new ‘Province’ object.

.

In the presenting controller, adopt the protocol, code the segue, and implement the delegate method(s)

In the presenting controller’s declaration, adopt the new ‘add item’ protocol.

Code the segue.

Add a method (defined by NSFetchedResultsControllerDelegate) that will respond to changes in the ‘fetchedObjects’ result set. The method is controllerDidChangeContent().

Then, implement the delegate method(s).

Finally, dismiss the ‘add item’ controller.

.

.

.

.

.

.

.

.

.

.

.

.

.

  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: