04 Model View Controller
-
Upload
mahmoud -
Category
Technology
-
view
114 -
download
1
description
Transcript of 04 Model View Controller
![Page 1: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/1.jpg)
CS193P - Lecture 4iPhone Application Development
Building an ApplicationModel, View, ControllerNib FilesControls and Target-Action
1Friday, January 15, 2010
![Page 2: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/2.jpg)
Announcements• Friday sections
■ Friday, 4-5: 260-113
• Invites to Developer Program will go out this weekend■ Sign up and get your certificate when you get it■ Start making apps that will run on Hardware!!
• Waiting for a couple students to reply about P/NC spots■ If we don’t hear back today, we’re giving them away
2Friday, January 15, 2010
![Page 3: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/3.jpg)
Today’s Topics• Application Lifecycle• Model, View, Controller design• Interface Builder and Nib Files• Controls and Target-Action• HelloPoly demo
3Friday, January 15, 2010
![Page 4: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/4.jpg)
Review
4Friday, January 15, 2010
![Page 5: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/5.jpg)
Memory Management• Alloc/Init
■ -alloc assigns memory; -init sets up the object■ Override -init, not -alloc
• Retain/Release■ Increment and decrement retainCount■ When retainCount is 0, object is deallocated■ Don’t call -dealloc!
• Autorelease■ Object is released when run loop completes
5Friday, January 15, 2010
![Page 6: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/6.jpg)
Setters, Getters, and Properties• Setters and Getters have a standard format:
- (int)age;- (void)setAge:(int)age;
• Properties allow access to setters and getters through dot syntax:
@property age;
int theAge = person.age;person.age = 21;
6Friday, January 15, 2010
![Page 7: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/7.jpg)
Building an Application
7Friday, January 15, 2010
![Page 8: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/8.jpg)
Anatomy of an Application• Compiled code
■ Your code■ Frameworks
• Nib files■ UI elements and other objects■ Details about object relationships
• Resources (images, sounds, strings, etc)
• Info.plist file (application configuration)
8Friday, January 15, 2010
![Page 9: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/9.jpg)
App Lifecycle
Launch app
Load main nib
Wait for event
Handle eventExit a
pp
App initialize
d
9Friday, January 15, 2010
![Page 10: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/10.jpg)
UIKit Framework• Provides standard interface elements• UIKit and you
■ Don’t fight the frameworks■ Understand the designs and how you fit into them
10Friday, January 15, 2010
![Page 11: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/11.jpg)
UIKit Framework• Starts your application• Every application has a single instance of UIApplication
■ Singleton design pattern
@interface UIApplication+ (UIApplication *)sharedApplication@end
■ Orchestrates the lifecycle of an application■ Dispatches events■ Manages status bar, application icon badge■ Rarely subclassed
■ Uses delegation instead
11Friday, January 15, 2010
![Page 12: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/12.jpg)
Delegation• Control passed to delegate objects to perform application-
specific behavior• Avoids need to subclass complex objects• Many UIKit classes use delegates
■ UIApplication■ UITableView■ UITextField
12Friday, January 15, 2010
![Page 13: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/13.jpg)
• Xcode project templates have one set up by default• Object you provide that participates in application lifecycle• Can implement various methods which UIApplication will call • Examples:
UIApplicationDelegate
13Friday, January 15, 2010
![Page 14: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/14.jpg)
• Xcode project templates have one set up by default• Object you provide that participates in application lifecycle• Can implement various methods which UIApplication will call • Examples:
- (void)applicationDidFinishLaunching:(UIApplication *)application;- (void)applicationWillTerminate:(UIApplication *)application;
UIApplicationDelegate
13Friday, January 15, 2010
![Page 15: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/15.jpg)
• Xcode project templates have one set up by default• Object you provide that participates in application lifecycle• Can implement various methods which UIApplication will call • Examples:
- (void)applicationWillResignActive:(UIApplication *)application;- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url;
- (void)applicationDidFinishLaunching:(UIApplication *)application;- (void)applicationWillTerminate:(UIApplication *)application;
UIApplicationDelegate
13Friday, January 15, 2010
![Page 16: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/16.jpg)
• Xcode project templates have one set up by default• Object you provide that participates in application lifecycle• Can implement various methods which UIApplication will call • Examples:
- (void)applicationDidReceiveMemoryWarning:(UIApplication *)application;
- (void)applicationWillResignActive:(UIApplication *)application;- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url;
- (void)applicationDidFinishLaunching:(UIApplication *)application;- (void)applicationWillTerminate:(UIApplication *)application;
UIApplicationDelegate
13Friday, January 15, 2010
![Page 17: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/17.jpg)
Info.plist file• Property List (often XML), describing your application
■ Icon appearance■ Status bar style (default, black, hidden)■ Orientation■ Uses Wifi networking■ System Requirements
• Can edit most properties in Xcode■ Project > Edit Active Target “Foo” menu item■ On the properties tab
14Friday, January 15, 2010
![Page 18: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/18.jpg)
Model, View, Controller
If you take nothing else away from this class...
15Friday, January 15, 2010
![Page 19: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/19.jpg)
Model, View, Controller
Model View
Controller
16Friday, January 15, 2010
![Page 20: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/20.jpg)
Model• Manages the app data and state
• Not concerned with UI or presentation
• Often persists somewhere
• Same model should be reusable, unchanged in different interfaces
17Friday, January 15, 2010
![Page 21: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/21.jpg)
View• Present the Model to the user in an appropriate interface
• Allows user to manipulate data
• Does not store any data■ (except to cache state)
• Easily reusable & configurable to display different data
18Friday, January 15, 2010
![Page 22: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/22.jpg)
Controller• Intermediary between Model & View
• Updates the view when the model changes
• Updates the model when the user manipulates the view
• Typically where the app logic lives.
19Friday, January 15, 2010
![Page 23: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/23.jpg)
Model, View, Controller
Model View
Controller
20Friday, January 15, 2010
![Page 24: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/24.jpg)
Model, View, Controller
Model View
Controller
20Friday, January 15, 2010
![Page 25: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/25.jpg)
Model, View, Controller
Model View
Controller
20Friday, January 15, 2010
![Page 26: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/26.jpg)
outlets
Model, View, Controller
Model Object
Controller
actions
21Friday, January 15, 2010
![Page 27: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/27.jpg)
outlets
Model, View, Controller
Model Object
Controller
actions
21Friday, January 15, 2010
![Page 28: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/28.jpg)
outlets
Model, View, Controller
Model Object
Controller
actions
21Friday, January 15, 2010
![Page 29: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/29.jpg)
Interface Builder and Nibs
22Friday, January 15, 2010
![Page 30: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/30.jpg)
Nib files
23Friday, January 15, 2010
![Page 31: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/31.jpg)
Nib files
23Friday, January 15, 2010
![Page 32: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/32.jpg)
Nib Files - Design time• Helps you design the ‘V’ in MVC:
■ layout user interface elements
■ add controller objects
■ Connect the controller and UI
24Friday, January 15, 2010
![Page 33: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/33.jpg)
Nib Loading• At runtime, objects are unarchived
■ Values/settings in Interface Builder are restored■ Ensures all outlets and actions are connected■ Order of unarchiving is not defined
• If loading the nib automatically creates objects and order is undefined, how do I customize?■ For example, to displaying initial state
25Friday, January 15, 2010
![Page 34: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/34.jpg)
-awakeFromNib• Control point to implement any additional logic after nib
loading• Default empty implementation on NSObject• You often implement it in your controller class
■ e.g. to restore previously saved application state
• Guaranteed everything has been unarchived from nib, and all connections are made before -awakeFromNib is called
- (void)awakeFromNib { // do customization here
}
26Friday, January 15, 2010
![Page 35: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/35.jpg)
Controls and Target-Action
27Friday, January 15, 2010
![Page 36: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/36.jpg)
Controls - Events• View objects that allows users to initiate some type of action• Respond to variety of events
■ Touch events■ touchDown■ touchDragged (entered, exited, drag inside, drag outside)■ touchUp (inside, outside)
■ Value changed■ Editing events
■ editing began■ editing changed■ editing ended
28Friday, January 15, 2010
![Page 37: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/37.jpg)
Controls - Target/Action• When event occurs, action is invoked on target object
Controller
29Friday, January 15, 2010
![Page 38: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/38.jpg)
Controls - Target/Action• When event occurs, action is invoked on target object
target: myObjectaction: @selector(decrease)event: UIControlEventTouchUpInside
Controller
29Friday, January 15, 2010
![Page 39: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/39.jpg)
Controls - Target/Action• When event occurs, action is invoked on target object
target: myObjectaction: @selector(decrease)event: UIControlEventTouchUpInside
Controller
29Friday, January 15, 2010
![Page 40: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/40.jpg)
Controls - Target/Action• When event occurs, action is invoked on target object
target: myObjectaction: @selector(decrease)event: UIControlEventTouchUpInside
Controller
29Friday, January 15, 2010
![Page 41: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/41.jpg)
Controls - Target/Action• When event occurs, action is invoked on target object
UIControlEventTouchUpInside
target: myObjectaction: @selector(decrease)event: UIControlEventTouchUpInside
Controller
29Friday, January 15, 2010
![Page 42: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/42.jpg)
Controls - Target/Action• When event occurs, action is invoked on target object
UIControlEventTouchUpInside
-(void)decrease
target: myObjectaction: @selector(decrease)event: UIControlEventTouchUpInside
Controller
29Friday, January 15, 2010
![Page 43: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/43.jpg)
Action Methods• 3 different flavors of action method selector types
- (void)actionMethod;- (void)actionMethod:(id)sender;- (void)actionMethod:(id)sender withEvent:(UIEvent *)event;
• UIEvent contains details about the event that took place
30Friday, January 15, 2010
![Page 44: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/44.jpg)
Action Method Variations
- (void)increase { // bump the number of sides of the polygon up polygon.numberOfSides += 1;}
// for example, if control is a slider...- (void)adjustNumberOfSides:(id)sender { polygon.numberOfSides = [sender value];}
• Simple no-argument selector
• Single argument selector - control is ‘sender’
31Friday, January 15, 2010
![Page 45: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/45.jpg)
Action Method Variations
- (void)adjustNumberOfSides:(id)sender withEvent:(UIEvent *)event { // could inspect event object if you needed to}
• Two-arguments in selector (sender & event)
32Friday, January 15, 2010
![Page 46: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/46.jpg)
Multiple target-actions• Controls can trigger multiple actions on different targets in
response to the same event
• Different than Cocoa on the desktop where only one target-action is supported
• Different events can be setup in IB
33Friday, January 15, 2010
![Page 47: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/47.jpg)
Manual Target-Action
@interface UIControl- (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;
- (void)removeTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents;@end
• Same information IB would use• API and UIControlEvents found in UIControl.h• UIControlEvents is a bitmask
34Friday, January 15, 2010
![Page 48: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/48.jpg)
HelloPoly Demo
35Friday, January 15, 2010
![Page 49: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/49.jpg)
HelloPoly• This week’s assignment is a full MVC application• Next week’s assignment will flesh it out further• It is not designed to be a complex application
■ rather, provide a series of small studies of the fundamentals of a Cocoa Touch application
36Friday, January 15, 2010
![Page 50: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/50.jpg)
Model, View, Controller
Model View
Controller
HelloPoly
37Friday, January 15, 2010
![Page 51: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/51.jpg)
Model, View, Controller
Model View
Controller
PolygonShape
HelloPoly
37Friday, January 15, 2010
![Page 52: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/52.jpg)
Model, View, Controller
Model View
Controller
PolygonShape UIKit controlsPolygonView (next week)
HelloPoly
37Friday, January 15, 2010
![Page 53: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/53.jpg)
Model, View, Controller
Model View
Controller
PolygonShape
Controller
UIKit controlsPolygonView (next week)
HelloPoly
37Friday, January 15, 2010
![Page 54: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/54.jpg)
increaseButtonnumberOfSidesLabel
Model, View, ControllerHelloPoly
PolygonShape
Controller
decreaseButton
increasedecrease
polygonShape
38Friday, January 15, 2010
![Page 55: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/55.jpg)
increaseButtonnumberOfSidesLabel
Model, View, ControllerHelloPoly
PolygonShape
Controller
decreaseButton
increasedecrease
polygonShape
38Friday, January 15, 2010
![Page 56: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/56.jpg)
increaseButtonnumberOfSidesLabel
Model, View, ControllerHelloPoly
PolygonShape
Controller
decreaseButton
increasedecrease
polygonShape
38Friday, January 15, 2010
![Page 57: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/57.jpg)
increaseButtonnumberOfSidesLabel
Model, View, ControllerHelloPoly
PolygonShape
Controller
decreaseButton
increasedecrease
polygonShape
38Friday, January 15, 2010
![Page 58: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/58.jpg)
Nib Files - HelloPoly example• HelloPoly has all objects (model, view and controller) contained
in the same MainWindow.xib file■ More common to have UI broken up into several nib files
• UIKit provides a variety of “View Controllers”■ We will be introducing them with the Presence projects
39Friday, January 15, 2010
![Page 59: 04 Model View Controller](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c77b044a7959f34f8b4691/html5/thumbnails/59.jpg)
Questions?
40Friday, January 15, 2010