Presented by Vu Tran Lam

Introduction to MVCin iPhone Development

Friday, April 5, 13

L

2

Friday, April 5, 13

Your First iOS App - Hello World

Friday, April 5, 13

Friday, April 5, 13

Design PatternsDesign 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

Design Pattern: Model-View-Controller

Friday, April 5, 13

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

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

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

Design Pattern: Model-View-Controller

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

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

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

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

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

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

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

Determine Unit of Data and Create Data Object Class

• Create BirdSighting class• Declare properties for for BirdSighting class• Implement custom initializer method for BirdSighting classIn 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

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

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

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

Create Data Controller Class

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

Friday, April 5, 13

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

Create Data Controller Class

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

...

Friday, April 5, 13

Create Data Controller Class

• Create BirdSightingDataController class• Implement property for Data Controller class• Implement data-access methods for Data Controller classIn 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

Create Data Controller Class

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

Friday, April 5, 13

Create Data Controller Class

• Create BirdSightingDataController class• Implement property for Data Controller class• Implement data-access methods for Data Controller classIn BirdSightingDataController.m, initialize data controller object:...@implementation BirdSightingDataController...- (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

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

Design Master View Controller Scene

• Design prototype cell for master BirdSighting list• Specify identity of master scene

Friday, April 5, 13

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

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

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

Implement Master View Controller

• Comment unnecessary default code• Give master view controller access to data in Model layerIn BirdsMasterViewController.m, add #import:#import "BirdSightingDataController.h"#import "BirdSighting.h"

Friday, April 5, 13

Implement Master View Controller

• Comment unnecessary default code• Give master view controller access to data in Model layerIn 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

Implement Master View Controller

• Comment unnecessary default code• Give master view controller access to data in Model layer• Implement table view data source methodsIn BirdsMasterViewController.m, implement numberOfRowsInSection method:- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:

(NSInteger)section { return [self.dataController countOfList];}

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

Implement Master View Controller

• Comment unnecessary default code• Give master view controller access to data in Model layer• Implement table view data source methodsIn 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

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

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

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

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

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

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

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

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

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

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

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

• Send setup information to the detail scene

Friday, April 5, 13

Send Data to Detail Scene

• Send setup information to the detail scene

#import "BirdsDetailViewController.h"

In BirdsDetailViewController.m, add #import:

Friday, April 5, 13

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

Part 5: Running BirdWatching App

Friday, April 5, 13

Friday, April 5, 13

Friday, April 5, 13

Friday, April 5, 13

many thanks to

Thank you

lamvt@fpt.com.vnpleasesay

Stanford Universityhttps://developer.apple.com

Developer Center

http://www.stanford.edu/class/cs193p

xin chào

Referenceshttp://az4you.wordpress.comhttp://www.slideshare.net/vutlam9083/building-a-completed-iphone-app

Friday, April 5, 13