The document discusses implementing a master-detail interface using the Model-View-Controller (MVC) design pattern in iOS. It describes creating BirdSighting model and BirdSightingDataController classes to represent and manage data. It also involves designing a master view controller to display the data list, and a detail view controller to show individual item details. The view controllers are set up using a storyboard with segues to pass data between the scenes on tap.

1. Presented by Vu Tran Lam
Introduction to MVC
in iPhone Development
Friday, April 5, 13

2. L
2
Friday, April 5, 13

3. Your First iOS App - Hello World
Friday, April 5, 13

4. Friday, April 5, 13

5. Design Patterns
Design pattern solves common software engineering problem. Patterns
are abstract designs, not code. When you adopt a design, you adapt
general pattern to your specific needs.
Friday, April 5, 13

6. Design Pattern: Model-View-Controller
Friday, April 5, 13

7. Design Pattern: Model-View-Controller
•Model Object
• Model objects encapsulate the data specific to an application and
define the logic and computation that manipulate and process
that data
• For example, a model object might represent a character in a
game or a contact in an address book
Friday, April 5, 13

8. Design Pattern: Model-View-Controller
•Model Object
•View Object
• A view object is an object in an app that users can see
• A view object knows how to draw itself and might respond to
user actions
• A major purpose of view objects is to display data from the app’s
model objects and to enable editing of that data
Friday, April 5, 13

9. Design Pattern: Model-View-Controller
•Model Object
•View Object
•Controller Object
• A controller object acts as an intermediary between one or more
of an app’s view objects and its model objects
• A controller object interprets user actions made in view objects
and communicates new or changed data to the model layer
• When model objects change, controller object communicates
that new model data to view objects so that they can display it
Friday, April 5, 13

10. Design Pattern: Model-View-Controller
Friday, April 5, 13

11. Introduction to Storyboard
•Storyboard
• Visual representation of user interface of iOS application, showing
screens of content and connections between those screens
• Composed of a sequence of scenes, each of which represents a
view controller and its views; scenes are connected by segue
objects, which represent transition between two view controllers
Friday, April 5, 13

12. Introduction to Storyboard
•Storyboard
•Scene corresponds to single view controller and its views
• On iPhone, each scene corresponds to a full screen’s worth of
content; on iPad, multiple scenes can appear on screen at once-
e.g, using popover view controllers
• Each scene has a dock, which displays icons representing the top-
level objects of the scene
Friday, April 5, 13

13. Introduction to Storyboard
•Storyboard
•Scene corresponds to single view controller and its views
•Segue manages transition between two scenes
• You can set type of transition (e.g, modal or push) on a segue
• You can pass data between scenes with prepareForSegue:sender:
method, which is invoked on view controller when a segue is
triggered
Friday, April 5, 13

14. Storyboard for Single View App
Interface Builder
Outline View
Initial Scene
Indicator
Scene Dock
Canvas
Scene
Friday, April 5, 13

15. Storyboard for Master-Detail App
Scene
Dock
Segue
Friday, April 5, 13

16. Understand View Controller Basics
View controllers are a vital link between an app’s data and its visual
appearance. Whenever an iOS app displays a user interface, displayed
content is managed by view controller.
Friday, April 5, 13

17. Introduction
After completing this tutorial, you’ll know how to:
• Design model layer in MVC design pattern
• Create new scenes and segues in a storyboard
• Pass data to and retrieve it from a scene
Friday, April 5, 13

18. Part 1: Getting Started
• Create and test a new project
• Build and run the default project
• Examine storyboard and scene
Friday, April 5, 13

19. Part 2: Designing Model Layer
• Determine unit of data and create Data Object class
• Create Data Controller class
Friday, April 5, 13

20. Part 2: Designing Model Layer
• Determine unit of data and create Data Object class
• Create BirdSighting class
• Declare properties for for BirdSighting class
• Implement custom initializer method for BirdSighting class
Friday, April 5, 13

21. Determine Unit of Data and Create Data Object Class
• Create BirdSighting class
• In Xcode, choose File > New > File
• Select Cocoa Touch in the iOS section
• Select Objective-C class
• Type class name: BirdSighting
Friday, April 5, 13

22. Determine Unit of Data and Create Data Object Class
• Create BirdSighting class
• Declare properties for for BirdSighting class
#import <Foundation/Foundation.h>
@interface BirdSighting : NSObject
@property (nonatomic, copy) NSString *name;
@property (nonatomic, copy) NSString *location;
@property (nonatomic, strong) NSDate *date;
-(id)initWithName:(NSString *)name location:(NSString *)location date:
(NSDate *)date;
@end
In BirdSighting.h, type:
Friday, April 5, 13

23. Determine Unit of Data and Create Data Object Class
• Create BirdSighting class
• Declare properties for for BirdSighting class
• Implement custom initializer method for BirdSighting class
In BirdSighting.h, type:
#import <Foundation/Foundation.h>
@interface BirdSighting : NSObject
@property (nonatomic, copy) NSString *name;
@property (nonatomic, copy) NSString *location;
@property (nonatomic, strong) NSDate *date;
-(id)initWithName:(NSString *)name location:(NSString *)location date:
(NSDate *)date;
@end
Friday, April 5, 13

24. Determine Unit of Data and Create Data Object Class
• Create BirdSighting class
• Declare properties for for BirdSighting class
• Implement custom initializer method for BirdSighting class
-(id)initWithName:(NSString *)name location:(NSString *)location date:
(NSDate *)date;
In BirdSighting.h, type:
-(id)initWithName:(NSString *)name location:(NSString *)location date:
(NSDate *)date {
self = [super init];
if (self) {
_name = name;
_location = location;
_date = date;
return self;
}
return nil;
}
In BirdSighting.m, type:
Friday, April 5, 13

25. Part 2: Designing Model Layer
• Determine unit of data and create Data Object class
• Create Data Controller class
• Create BirdSightingDataController class
• Declare and implement property for Data Controller class
• Declare and implement data-access methods for Data Controller class
Friday, April 5, 13

26. Create Data Controller Class
• Create BirdSightingDataController class
• In Xcode, choose File > New > File
• Select Cocoa Touch in the iOS section
• Select Objective-C class
• Type class name: BirdSightingDataController
Friday, April 5, 13

27. Create Data Controller Class
• Create BirdSightingDataController class
• Implement property for Data Controller class
In BirdSightingDataController.h, type:
#import <Foundation/Foundation.h>
@interface BirdSightingDataController : NSObject
@property (nonatomic, copy) NSMutableArray *masterBirdSightingList;
@end
Friday, April 5, 13

28. Create Data Controller Class
• Create BirdSightingDataController class
• Implement property for Data Controller class
• Implement data-access methods for Data Controller class
#import <Foundation/Foundation.h>
@class BirdSighting;
@interface BirdSightingDataController : NSObject
@property (nonatomic, copy) NSMutableArray *masterBirdSightingList;
- (NSUInteger)countOfList;
- (BirdSighting *)objectInListAtIndex:(NSUInteger)theIndex;
- (void)addBirdSightingWithSighting:(BirdSighting *)sighting;
@end
In BirdSightingDataController.h, declare three data-access methods:
Friday, April 5, 13

29. Create Data Controller Class
• Create BirdSightingDataController class
• Implement property for Data Controller class
• Implement data-access methods for Data Controller class
In BirdSightingDataController.m, implement list-creation method:
#import "BirdSightingDataController.h"
#import "BirdSighting.h"
@interface BirdSightingDataController()
- (void)initializeDefaultDataList;
@end
@implementation BirdSightingDataController
...
Friday, April 5, 13

30. Create Data Controller Class
• Create BirdSightingDataController class
• Implement property for Data Controller class
• Implement data-access methods for Data Controller class
In BirdSightingDataController.m, implement list-creation method:
...
@implementation BirdSightingDataController
- (void)initializeDefaultDataList {
NSMutableArray *sightingList = [[NSMutableArray alloc] init];
self.masterBirdSightingList = sightingList;
BirdSighting *sighting;
NSDate *today = [NSDate date];
sighting = [[BirdSighting alloc] initWithName:@"Pigeon"
location:@"Everywhere" date:today];
[self addBirdSightingWithSighting:sighting];
}
@end
Friday, April 5, 13

31. Create Data Controller Class
• Create BirdSightingDataController class
• Implement property for Data Controller class
• Implement data-access methods for Data Controller class
In BirdSightingDataController.m, implement setter for master list:
...
@implementation BirdSightingDataController
...
- (void)setMasterBirdSightingList:(NSMutableArray *)newList {
if (_masterBirdSightingList != newList) {
_masterBirdSightingList = [newList mutableCopy];
}
}
@end
Friday, April 5, 13

32. Create Data Controller Class
• Create BirdSightingDataController class
• Implement property for Data Controller class
• Implement data-access methods for Data Controller class
In BirdSightingDataController.m, initialize data controller object:
...
@implementation BirdSightingDataController
...
- (id)init {
if (self = [super init]) {
[self initializeDefaultDataList];
return self;
}
return nil;
}
Friday, April 5, 13

33. Part 3: Designing Master Scene
• Design master view controller scene
• Implement master view controller
Friday, April 5, 13

34. Part 3: Designing Master Scene
• Design master view controller scene
• Design prototype cell for master BirdSighting list
• Specify identity of master scene
Friday, April 5, 13

35. Design Master View Controller Scene
• Design prototype cell for master BirdSighting list
• Specify identity of master scene
Friday, April 5, 13

36. Part 3: Designing Master Scene
• Design master view controller scene
• Implement master view controller
• Comment unnecessary default code
• Give master view controller access to data in Model layer
• Implement table view data source methods
Friday, April 5, 13

37. Implement Master View Controller
• Comment unnecessary default code
• Select BirdsMasterViewController.m
• Comment declaration of *_objects array
• Comment most of contents of viewDidLoad method (keep only
[super viewDidLoad]; statement)
• Comment insertNewObject method
• Comment tableView:commitEditingStyle:forRowAtIndexPath:
method
• Change content of canEditRowAtIndexPath method:
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath
*)indexPath {
// Return NO if you do not want the specified item to be editable.
return NO;
}
Friday, April 5, 13

38. Implement Master View Controller
• Comment unnecessary default code
• Give master view controller access to data in Model layer
#import <UIKit/UIKit.h>
@class BirdSightingDataController;
@interface BirdsMasterViewController : UITableViewController
@property (strong, nonatomic) BirdSightingDataController *dataController;
@end
In BirdSightingDataController.h, type:
Friday, April 5, 13

39. Implement Master View Controller
• Comment unnecessary default code
• Give master view controller access to data in Model layer
In BirdsMasterViewController.m, add #import:
#import "BirdSightingDataController.h"
#import "BirdSighting.h"
Friday, April 5, 13

40. Implement Master View Controller
• Comment unnecessary default code
• Give master view controller access to data in Model layer
In BirdsMasterViewController.m, add #import:
#import "BirdSightingDataController.h"
#import "BirdSighting.h"
In BirdsMasterViewController.m, update awakeFromNib method:
- (void)awakeFromNib
{
[super awakeFromNib];
self.dataController = [[BirdSightingDataController alloc] init];
}
Friday, April 5, 13

41. Implement Master View Controller
• Comment unnecessary default code
• Give master view controller access to data in Model layer
• Implement table view data source methods
In BirdsMasterViewController.m, implement numberOfRowsInSection
method:
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:
(NSInteger)section {
return [self.dataController countOfList];
}
Friday, April 5, 13

42. Implement Master View Controller
• Comment unnecessary default code
• Give master view controller access to data in Model layer
• Implement table view data source methods
In BirdsMasterViewController.m, implement cellForRowAtIndexPath
method:
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = @"BirdSightingCell";
static NSDateFormatter *formatter = nil;
if (formatter == nil) {
formatter = [[NSDateFormatter alloc] init];
[formatter setDateStyle:NSDateFormatterMediumStyle];
}
...
}
Friday, April 5, 13

43. Implement Master View Controller
• Comment unnecessary default code
• Give master view controller access to data in Model layer
• Implement table view data source methods
In BirdsMasterViewController.m, implement cellForRowAtIndexPath
method:
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath {
...
UITableViewCell *cell = [tableView
dequeueReusableCellWithIdentifier:CellIdentifier];
BirdSighting *sightingAtIndex = [self.dataController
objectInListAtIndex:indexPath.row];
[[cell textLabel] setText:sightingAtIndex.name];
[[cell detailTextLabel] setText:[formatter stringFromDate:(NSDate
*)sightingAtIndex.date]];
return cell;
}
Friday, April 5, 13

44. Part 4: Displaying Information in Detail Scene
• Edit detail view controller code
• Design the detail scene
• Send data to detail scene
Friday, April 5, 13

45. Part 4: Displaying Information in Detail Scene
• Edit detail view controller code
• Customize detail view controller header file
• Give detail scene access to BirdSighting objects
• Create custom setter method for sighting property
• Implement configureView method
Friday, April 5, 13

46. Editing Detail View Controller Code
• Customize detail view controller header file
#import <UIKit/UIKit.h>
@class BirdSighting;
@interface BirdsDetailViewController : UITableViewController
@property (strong, nonatomic) BirdSighting *sighting;
@property (weak, nonatomic) IBOutlet UILabel *birdNameLabel;
@property (weak, nonatomic) IBOutlet UILabel *locationLabel;
@property (weak, nonatomic) IBOutlet UILabel *dateLabel;
@end
In BirdsDetailViewController.h, edit:
Friday, April 5, 13

47. Editing Detail View Controller Code
• Customize detail view controller header file
• Give detail scene access to BirdSighting objects
#import "BirdSighting.h"
In BirdsDetailViewController.m, edit:
Friday, April 5, 13

48. Editing Detail View Controller Code
• Customize detail view controller header file
• Give detail scene access to BirdSighting objects
• Create custom setter method for sighting property
- (void)setSighting:(BirdSighting *) newSighting {
if (_sighting != newSighting) {
_sighting = newSighting;
// Update the view.
[self configureView];
}
}
In BirdsDetailViewController.m, replace setDetailItem method
with following method:
Friday, April 5, 13

49. Editing Detail View Controller Code
• Customize detail view controller header file
• Give detail scene access to BirdSighting objects
• Create custom setter method for sighting property
• Implement configureView method
- (void)configureView {
BirdSighting *theSighting = self.sighting;
static NSDateFormatter *formatter = nil;
if (formatter == nil) {
formatter = [[NSDateFormatter alloc] init];
[formatter setDateStyle:NSDateFormatterMediumStyle];
}
if (theSighting) {
self.birdNameLabel.text = theSighting.name;
self.locationLabel.text = theSighting.location;
self.dateLabel.text = [formatter stringFromDate:(NSDate
*)theSighting.date];
}
}
In BirdsDetailViewController.m, replace configureView method as:
Friday, April 5, 13

50. Part 4: Displaying Information in Detail Scene
• Edit detail view controller code
• Design the detail scene
• Replace default UIViewController scene with UITableViewController scene
• Create segue from master scene to detail scene
• Design static table cells for detail scene
• Connect detail text labels to BirdsDetailViewController’s properties
Friday, April 5, 13

51. Designing the Detail Scene
• Replace default UIViewController with UITableViewController
• Open MainStoryboard.storyboard
• Delete detail scene
• Drag a table view controller to canvas
• In Identity inspector, choose Class: BirdsDetailViewController
Friday, April 5, 13

52. Designing the Detail Scene
• Replace default UIViewController with UITableViewController
• Create segue from master scene to detail scene
• Control-drag from table cell in master scene to detail scene
• Select the push segue you just created
• In attributes inspector, enter custom ID: ShowSightingDetails
Friday, April 5, 13

53. Designing the Detail Scene
• Replace default UIViewController with UITableViewController
• Create segue from master scene to detail scene
• Design static table cells for detail scene
• On the canvas, select the table view in the detail scene.
• In Attributes inspector, choose Content pop-up: Static Cells
• In Attributes inspector, choose Style pop-up: Left Detail
• In Table View Section of Attributes inspector, use the Rows: 3
• In top cell, enter Bird Name; in middle cell, enter Location and in
bottom cell, enter Date
Friday, April 5, 13

54. Designing the Detail Scene
• Replace default UIViewController with UITableViewController
• Create segue from master scene to detail scene
• Design static table cells for detail scene
• Connect detail text labels to BirdsDetailViewController’s properties
• In Table View section, control-click the Label - Detail object listed
below Label - Bird Name
• In translucent panel, control-drag from empty circle in New
Referencing Outlet to BirdsDetailViewController in scene dock
• In Connections panel, choose birdNameLabel
• Repeat above steps with Label - Location, Label - Date
Friday, April 5, 13

55. Friday, April 5, 13

56. Part 4: Displaying Information in Detail Scene
• Edit Detail View Controller code
• Design the Detail Scene
• Send data to detail scene
• Send setup information to the detail scene
Friday, April 5, 13

57. Send Data to Detail Scene
• Send setup information to the detail scene
#import "BirdsDetailViewController.h"
In BirdsDetailViewController.m, add #import:
Friday, April 5, 13

58. Send Data to Detail Scene
• Send setup information to the detail scene
#import "BirdsDetailViewController.h"
In BirdsDetailViewController.m, add #import:
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
if ([[segue identifier] isEqualToString:@"ShowSightingDetails"]) {
BirdsDetailViewController *detailViewController =
[segue destinationViewController];
detailViewController.sighting = [self.dataController
objectInListAtIndex:[self.tableView indexPathForSelectedRow].row];
}
}
In BirdsDetailViewController.m, replace prepareForSegue method:
Friday, April 5, 13

59. Part 5: Running BirdWatching App
Friday, April 5, 13

60. Friday, April 5, 13

61. Friday, April 5, 13

62. Friday, April 5, 13

63. many thanks
to
Thank you
lamvt@fpt.com.vn
please
say
Stanford University
https://developer.apple.com
Developer Center
http://www.stanford.edu/class/cs193p
xin
chào
References
http://az4you.wordpress.com
http://www.slideshare.net/vutlam9083/building-a-completed-
iphone-app
Friday, April 5, 13