Introduction to MVC in iPhone Development

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

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

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 speciﬁc needs.
Friday, April 5, 13

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

•Model Object
• Model objects encapsulate the data speciﬁc to an application and
deﬁne 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

•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

•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

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

•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

•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

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

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

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

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

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

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

• Create BirdSighting class
• Declare properties for for BirdSighting class
• Implement custom initializer method for BirdSighting class
Friday, April 5, 13

Determine Unit of Data and Create Data Object 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

#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

@interface BirdSighting : NSObject
@property (nonatomic, copy) NSString *name;
@property (nonatomic, copy) NSString *location;
@property (nonatomic, strong) NSDate *date;
(NSDate *)date;
@end
Friday, April 5, 13

(NSDate *)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

• 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

Create Data Controller 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

• Implement property for Data Controller class
In BirdSightingDataController.h, type:
@interface BirdSightingDataController : NSObject
@property (nonatomic, copy) NSMutableArray *masterBirdSightingList;
@end
Friday, April 5, 13

• Implement data-access methods for Data Controller class
@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

In BirdSightingDataController.m, implement list-creation method:
#import "BirdSightingDataController.h"
#import "BirdSighting.h"
@interface BirdSightingDataController()
- (void)initializeDefaultDataList;
@end
@implementation BirdSightingDataController
...
Friday, April 5, 13

In BirdSightingDataController.m, implement list-creation method:
...
- (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

In BirdSightingDataController.m, implement setter for master list:
...
...
- (void)setMasterBirdSightingList:(NSMutableArray *)newList {
if (_masterBirdSightingList != newList) {
_masterBirdSightingList = [newList mutableCopy];
}
}
@end
Friday, April 5, 13

In BirdSightingDataController.m, initialize data controller object:
...
...
- (id)init {
if (self = [super init]) {
[self initializeDefaultDataList];
return self;
}
return nil;
}
Friday, April 5, 13

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

• Design prototype cell for master BirdSighting list
• Specify identity of master scene
Friday, April 5, 13

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

• 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

Implement Master View Controller
• 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 speciﬁed item to be editable.
return NO;
}
Friday, April 5, 13

#import <UIKit/UIKit.h>
@class BirdSightingDataController;
@interface BirdsMasterViewController : UITableViewController
@property (strong, nonatomic) BirdSightingDataController *dataController;
@end
In BirdSightingDataController.h, type:
Friday, April 5, 13

In BirdsMasterViewController.m, add #import:
Friday, April 5, 13

In BirdsMasterViewController.m, add #import:
In BirdsMasterViewController.m, update awakeFromNib method:
- (void)awakeFromNib
{
[super awakeFromNib];
self.dataController = [[BirdSightingDataController alloc] init];
}
Friday, April 5, 13

In BirdsMasterViewController.m, implement numberOfRowsInSection
method:
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:
(NSInteger)section {
return [self.dataController countOfList];
}
Friday, April 5, 13

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

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

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

• Customize detail view controller header ﬁle
• Give detail scene access to BirdSighting objects
• Create custom setter method for sighting property
• Implement conﬁgureView method
Friday, April 5, 13

Editing Detail View Controller Code
#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

In BirdsDetailViewController.m, edit:
Friday, April 5, 13

- (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

• Implement conﬁgureView 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

• 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

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

• 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

• 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

• 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

• 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

Send Data to Detail Scene
#import "BirdsDetailViewController.h"
In BirdsDetailViewController.m, add #import:
Friday, April 5, 13

Send Data to 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

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

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

Introduction to MVC in iPhone Development

Recommended

More Related Content

Similar to Introduction to MVC in iPhone Development (20)

More from Vu Tran Lam (20)

Recently uploaded (20)

Introduction to MVC in iPhone Development