Modal View Controller Example – Part 2
n the first part of this tutorial, we set up a pair of simple views in Interface Builder that we switched between modally. In this tutorial, we’ll make them somewhat useful and pass data between them using delegates.
The concept of protocols and delegates is an important and somewhat complex one, but I like to think of it in these simplified terms:
Basically, the object that implements our protocol agrees to implement the methods of that protocol. In the case of this tutorial, we’ll be connecting the modal view with our main view using a delegate.
Firstly, we’ll create the interface elements for our project. Open the ModalViewExampleViewController XIB file and create a button and a label as shown.
Next, add those interface elements to ModalViewExampleViewController.h. We’re also adding the necessary IBAction also:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// ModalViewExampleViewController.h
@interface ModalViewExampleViewController : UIViewController { UIButton *showDefaultButton, *showFlipButton, *showDissolveButton, *showCurlButton; UIButton *showWithDelegateButton; UILabel *myMessage; }
@property (nonatomic, retain) IBOutlet UIButton *showDefaultButton, *showFlipButton, *showDissolveButton, *showCurlButton; @property (nonatomic, retain) IBOutlet UIButton *showWithDelegateButton; @property (nonatomic, retain) IBOutlet UILabel *myMessage;
- (IBAction)showDefault:(id)sender; - (IBAction)showFlip:(id)sender; - (IBAction)showDissolve:(id)sender; - (IBAction)showCurl:(id)sender; - (IBAction)showWithDelegate:(id)sender;
@end |
Be sure to include the necessary additions to ModalViewExampleViewController.m:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// ModalViewExampleViewController.m #import "ModalViewExampleViewController.h" #import "SampleViewController.h"
@implementation ModalViewExampleViewController
@synthesize showDefaultButton, showFlipButton, showDissolveButton, showCurlButton; @synthesize showWithDelegateButton, myMessage; ... - (IBAction)showWithDelegate:(id)sender {
} ... - (void)dealloc { [showDefaultButton release]; [showFlipButton release]; [showDissolveButton release]; [showCurlButton release]; [showWithDelegateButton release]; [myMessage release]; [super dealloc]; }
@end |
Jump to Interface Builder and be sure to link the new elements with the properties we defined. Refer to Part 1 of this tutorial for a guide on how to do that.
The next step is key. We will create a basic protocol and then assign a delegate. Open up ModalViewExampleViewController.h and add this:
| 1 2 3 4 5 6 |
// ModalViewExampleViewController.h @protocol ModalViewDelegate
- (void)didReceiveMessage:(NSString *)message;
@end |
We then tell ModalViewExampleViewController to implement this protocol:
// ModalViewExampleViewController.h
@interface ModalViewExampleViewController : UIViewController <ModalViewDelegate>
We also need to add the protocol’s method to the main implementation:
| 1 2 3 4 |
// ModalViewExampleViewController.m - (void)didReceiveMessage:(NSString *)message {
} |
Once we have these in place, the next step is to set up a reference between the two views. What we will do is define a delegate inside of SampleView so that we can send messages to it.
Include the protocol in ModalViewExampleViewController.h and add the reference:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// SampleViewController.h @protocol ModalViewDelegate;
@interface SampleViewController : UIViewController { id<ModalViewDelegate> delegate;
UIButton *dismissViewButton; }
@property (nonatomic, assign) id<ModalViewDelegate> delegate; @property (nonatomic, retain) IBOutlet UIButton *dismissViewButton;
- (IBAction)dismissView:(id)sender;
@end |
Be sure to synthesize the delegate in SampleViewController.m, and include the necessary header files.
| 1 2 3 4 5 6 7 8 |
#import "SampleViewController.h" #import "ModalViewExampleViewController.h"
@implementation SampleViewController
@synthesize dismissViewButton; @synthesize delegate; ... |
So far we have defined a protocol inside of our parent view, and defined a delegate in our modal view. The next step is to link them together and make them useful.
Firstly, we’ll write the functions that will handle the messages. Replace the original definition of didReceiveMessage with this:
| 1 2 3 |
- (void)didReceiveMessage:(NSString *)message { [myMessage setText:message]; } |
And also add the following code to showWithDelegate:
| 1 2 3 |
SampleViewController *sampleView = [[[SampleViewController alloc] init] autorelease]; sampleView.delegate = self; [self presentModalViewController:sampleView animated:YES]; |
What we’ve done is create a SampleView object and assigned its delegate to be the parent view. That is, the parent view will be handling messages sent by SampleView.
Open up SampleViewController.m and add the code to send the message.
| 1 2 3 4 5 6 |
// SampleViewController.m - (IBAction)dismissView:(id)sender { [delegate didReceiveMessage:@"Hello World"];
[self dismissModalViewControllerAnimated:YES]; } |
Compile the app and run it. You should be able to see the text “Hello World” passed from one view to another once you dismiss your modal view with delegate. You can extend this any way you like with additional controls on the modal view, such as sliders or text input.
Download the source code for this project here.