Presented by Vu Tran Lam
Introduction to MVC
in 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 Patterns
Design pattern solves common software engineering problem. Patterns
are abstract designs, not code. When y...
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
defi...
Design Pattern: Model-View-Controller
•Model Object
•View Object
• A view object is an object in an app that users can see...
Design Pattern: Model-View-Controller
•Model Object
•View Object
•Controller Object
• A controller object acts as an inter...
Design Pattern: Model-View-Controller
Friday, April 5, 13
Introduction to Storyboard
•Storyboard
• Visual representation of user interface of iOS application, showing
screens of co...
Introduction to Storyboard
•Storyboard
•Scene corresponds to single view controller and its views
• On iPhone, each scene ...
Introduction to Storyboard
•Storyboard
•Scene corresponds to single view controller and its views
•Segue manages transitio...
Storyboard for Single View App
Interface Builder
Outline View
Initial Scene
Indicator
Scene Dock
Canvas
Scene
Friday, Apri...
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. Whene...
Introduction
After completing this tutorial, you’ll know how to:
• Design model layer in MVC design pattern
• Create new s...
Part 1: Getting Started
• Create and test a new project
• Build and run the default project
• Examine storyboard and scene...
Part 2: Designing Model Layer
• Determine unit of data and create Data Object class
• Create Data Controller class
Friday,...
Part 2: Designing Model Layer
• Determine unit of data and create Data Object class
• Create BirdSighting class
• Declare ...
Determine Unit of Data and Create Data Object Class
• Create BirdSighting class
• In Xcode, choose File > New > File
• Sel...
Determine Unit of Data and Create Data Object Class
• Create BirdSighting class
• Declare properties for for BirdSighting ...
Determine Unit of Data and Create Data Object Class
• Create BirdSighting class
• Declare properties for for BirdSighting ...
Determine Unit of Data and Create Data Object Class
• Create BirdSighting class
• Declare properties for for BirdSighting ...
Part 2: Designing Model Layer
• Determine unit of data and create Data Object class
• Create Data Controller class
• Creat...
Create Data Controller Class
• Create BirdSightingDataController class
• In Xcode, choose File > New > File
• Select Cocoa...
Create Data Controller Class
• Create BirdSightingDataController class
• Implement property for Data Controller class
In B...
Create Data Controller Class
• Create BirdSightingDataController class
• Implement property for Data Controller class
• Im...
Create Data Controller Class
• Create BirdSightingDataController class
• Implement property for Data Controller class
• Im...
Create Data Controller Class
• Create BirdSightingDataController class
• Implement property for Data Controller class
• Im...
Create Data Controller Class
• Create BirdSightingDataController class
• Implement property for Data Controller class
• Im...
Create Data Controller Class
• Create BirdSightingDataController class
• Implement property for Data Controller class
• Im...
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
...
Design Master View Controller Scene
• Design prototype cell for master BirdSighting list
• Specify identity of master scen...
Part 3: Designing Master Scene
• Design master view controller scene
• Implement master view controller
• Comment unnecess...
Implement Master View Controller
• Comment unnecessary default code
• Select BirdsMasterViewController.m
• Comment declara...
Implement Master View Controller
• Comment unnecessary default code
• Give master view controller access to data in Model ...
Implement Master View Controller
• Comment unnecessary default code
• Give master view controller access to data in Model ...
Implement Master View Controller
• Comment unnecessary default code
• Give master view controller access to data in Model ...
Implement Master View Controller
• Comment unnecessary default code
• Give master view controller access to data in Model ...
Implement Master View Controller
• Comment unnecessary default code
• Give master view controller access to data in Model ...
Implement Master View Controller
• Comment unnecessary default code
• Give master view controller access to data in Model ...
Part 4: Displaying Information in Detail Scene
• Edit detail view controller code
• Design the detail scene
• Send data to...
Part 4: Displaying Information in Detail Scene
• Edit detail view controller code
• Customize detail view controller heade...
Editing Detail View Controller Code
• Customize detail view controller header file
#import <UIKit/UIKit.h>
@class BirdSight...
Editing Detail View Controller Code
• Customize detail view controller header file
• Give detail scene access to BirdSighti...
Editing Detail View Controller Code
• Customize detail view controller header file
• Give detail scene access to BirdSighti...
Editing Detail View Controller Code
• Customize detail view controller header file
• Give detail scene access to BirdSighti...
Part 4: Displaying Information in Detail Scene
• Edit detail view controller code
• Design the detail scene
• Replace defa...
Designing the Detail Scene
• Replace default UIViewController with UITableViewController
• Open MainStoryboard.storyboard
...
Designing the Detail Scene
• Replace default UIViewController with UITableViewController
• Create segue from master scene ...
Designing the Detail Scene
• Replace default UIViewController with UITableViewController
• Create segue from master scene ...
Designing the Detail Scene
• Replace default UIViewController with UITableViewController
• Create segue from master scene ...
Friday, April 5, 13
Part 4: Displaying Information in Detail Scene
• Edit Detail View Controller code
• Design the Detail Scene
• Send data to...
Send Data to Detail Scene
• Send setup information to the detail scene
#import "BirdsDetailViewController.h"
In BirdsDetai...
Send Data to Detail Scene
• Send setup information to the detail scene
#import "BirdsDetailViewController.h"
In BirdsDetai...
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.vn
please
say
Stanford University
https://developer.apple.com
Developer Center
http...
Upcoming SlideShare
Loading in …5
×

Introduction to MVC in iPhone Development

1,515 views

Published on

Introduction to MVC in iPhone Development

Published in: Technology
  • Thank u :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Introduction to MVC in iPhone Development

  1. 1. Presented by Vu Tran Lam Introduction to MVC in iPhone Development Friday, April 5, 13
  2. 2. L 2 Friday, April 5, 13
  3. 3. Your First iOS App - Hello World Friday, April 5, 13
  4. 4. Friday, April 5, 13
  5. 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. 6. Design Pattern: Model-View-Controller Friday, April 5, 13
  7. 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. 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. 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. 10. Design Pattern: Model-View-Controller Friday, April 5, 13
  11. 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. 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. 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. 14. Storyboard for Single View App Interface Builder Outline View Initial Scene Indicator Scene Dock Canvas Scene Friday, April 5, 13
  15. 15. Storyboard for Master-Detail App Scene Dock Segue Friday, April 5, 13
  16. 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. 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. 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. 19. Part 2: Designing Model Layer • Determine unit of data and create Data Object class • Create Data Controller class Friday, April 5, 13
  20. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 33. Part 3: Designing Master Scene • Design master view controller scene • Implement master view controller Friday, April 5, 13
  34. 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. 35. Design Master View Controller Scene • Design prototype cell for master BirdSighting list • Specify identity of master scene Friday, April 5, 13
  36. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 55. Friday, April 5, 13
  56. 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. 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. 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. 59. Part 5: Running BirdWatching App Friday, April 5, 13
  60. 60. Friday, April 5, 13
  61. 61. Friday, April 5, 13
  62. 62. Friday, April 5, 13
  63. 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

×