DPS923 notes – Mon Feb 3

Modal views. Tab bar app style. Hands-on.

In the last class session, you learned about temporary views, specifically the Alert and the Action Sheet.

Then, we introduced modal views, using two examples: The image picker, and the mail composer.

An important characteristic of all these views is that they require a delegate. Almost always, the controller is the delegate.

.

Shout out – “Programming with Objective-C”

At this point in time, it is appropriate to feature the Programming with Objective-C document.

It is available on the web (obviously), and it’s available as a PDF.

In the first three weeks, you have learned something about the language, and also about the Cocoa frameworks. This kind of document isn’t useful to beginners. However, now that you have some skills and knowledge, put it on your reading list.

Highly recommended.

.

Modal view, from a framework

Modal views are often used in iOS apps.

As a convenience to programmers, the iOS frameworks include several modal views. We will use two, the image picker, and the mail composer.

Both are created using programming code, in a manner similar to an alert or action sheet. Similarly, your controller will be the delegate of the modal view.

Study the “Fav Photo” example app.

.

UIImagePickerController

Here’s how to get started with the image picker.

First, in the controller’s .h interface, adopt this protocol:
<UIImagePickerControllerDelegate>

Next, in an appropriate controller method, create the image picker, configure it, and present it. Some notes of interest:

  • Create the image picker with alloc init
  • Configure the sourceType property to be the photo library or the camera
  • Configure the allowsEditing property to meet your needs
  • Configure the controller as the delegate
  • Present the view modally…
    [self presentViewController:imagePicker animated:YES completion:NULL];

Next, implement the delegate method to handle a “Cancel” event. It will have at least one statement:
[picker dismissViewControllerAnimated:YES completion:NULL];

Then, implement the delegate method to handle the user’s input. Some notes of interest:

  • The runtime delivers a package of data as an NSDictionary object
  • Assuming that the image picker is using the photo library and editing is not allowed, the selected image, as a UIImage object, can be accessed by using this key: UIImagePickerControllerOriginalImage
  • After the method code has handled the user’s input, dismiss the image picker

(Other key names are documented in the class reference document.)

.

MFMailComposeViewController

Here’s how to get started with the mail composer. The procedure is similar to the one above.

First, in the controller’s .h interface, adopt this protocol:
<MFMailComposeViewControllerDelegate>

Next, in an appropriate controller method, create the mail composer, configure it, and present it. Some notes of interest:

  • Create the mail composer with alloc init
  • Configure the recipients, subject, and message body properties
  • If you have an attachment, configure it
  • Configure the controller as the delegate
  • Present the view modally

Then, implement the delegate method to handle the result. The runtime passes a reference to the mail compose controller, the result, and an error object (which will be nil if the result was successful). 

After the method code has handled the user input, dismiss the mail composer.

(Mail compose return results are documented in the protocol reference document.)

If you’re curious, the Camera Programming Topics for iOS document has additional coverage of image-handling.

The System Messaging Programming Topics for iOS document has additional coverage of email and text messaging.

.

Modal view, creating our own

At this point in time, you have seen four (4) examples of modally-presented views:

  1. Alert
  2. Action Sheet
  3. Image picker
  4. Mail composer

All are created and configured by using programming code.

All require a delegate (which is your view controller).

.

Creating our own modal view

Yes, we can create our own modal view.

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

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

We use and handle our own modal view in a way that’s similar to the others.

The only difference is that WE are also designing its user interface and writing its controller code. Here’s how:

  1. Create a controller
  2. Add code that declares a protocol (with at least one method) and a delegate property
  3. Add a new scene to the storyboard, and set the scene’s view controller property
  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, and implement the delegate method(s)

You can follow along by studying the “To Do Add” code example. It implements the “add item” pattern.

.

Create a controller

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

.

Add code that declares a protocol (with at least one method) and a delegate property

Edit the ItemEdit.h interface source code file.

ABOVE the “@interface…” statement, add this statement:

@protocol EditItemDelegate;

This is a forward declaration. It is simply a declaration to the compiler that the protocol is declared elsewhere. We add this statement to prevent a compilation error in the next step.

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

@property (nonatomic, weak) id <EditItemDelegate> delegate;

Notice that you must specify “weak” memory management.

Also notice the data type, “id <EditItemDelegate>”. That simply means that ANY object can become the delegate of this ItemEdit class, but the object MUST adopt the “EditItemDelegate” protocol.

Finally, BELOW the @interface – @end block, write the code that declares the protocol:

@protocol EditItemDelegate <NSObject>
– (void) editItemController:(id)controller didEditItem(id)item;
@end

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.

More information about working with protocols is found in the Programming with Objective-C document.

.

Add a new scene to the storyboard, and set the scene’s view controller property

On the storyboard, add a new View Controller scene from the object library. On the Identity inspector, set its view controller property to be the just-added ItemEdit class.

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

  1. Add a control (e.g. a button) to the presenter scene
  2. Control+click-drag from the control to the new scene
  3. On the segue popup, choose “Modal”

.

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.

.

In the controller, add code to validate and package the user input, and call the delegate method

We are using the “add item” pattern, so the assumption is that the user is entering data on a form. In addition, the assumption is that there is a button or other control that has a connection to an action method in the controller.

In this method, your code will perform data validation (if required).

Then, it will package the user input, and call the delegate method, passing along the user input.

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. If your packaging format will be known for all possible uses of this new “add item” controller, then you can edit the return type of the “item” parameter in the protocol declaration. That will enable the implementers to skip a cast operation.

.

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

In the presenting controller’s .h interface, add an ‘import’ statement for the protocol header. Then, adopt the protocol.

Then, in the .m implementation, implement the delegate method(s).

Pay attention to the packaging format. Unless you change the return type of the “item” parameter in the protocol declaration, you will have to cast “item” into a type that you can work with.

.

Tab bar app style

“A tab bar provides easy access to different views in an app. Use a tab bar to organize information in your app by subtask.” (Tab Bars, UIKit User Interface Catalog)

(more to come)

.

.

.

.

.

.

.

.

.

.

.

.

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: