COMP327 Mobile Computing. Lecture Set 9 - Model, View, Controller

Transcription

1 COMP327 Mobile Computing Lecture Set 9 - Model, View, Controller 1

2 In this Lecture Set Anatomy of an Application Model View Controller Interface Builder and Nibs View Classes Views Drawing Text and Images 2

3 Anatomy of an Application An application is a bundle of files: 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) Launch App App Initialised Load main nib Wait for an event Handle Event Exit App 3

4 UIKit Framework Provides standard interface elements UIKit and you Don t fight the frameworks Understand the designs and how you fit into them Starts your application Every application has a single instance of UIApplication Singleton design UIApplication + (UIApplication Orchestrates the lifecycle of an application Dispatches events Manages status bar, application icon badge Rarely subclassed Uses delegation instead Your instance of UIApplication. Good for querying the state of your app, etc 4

5 Delegation Control passed to delegate objects to perform application- specific behaviour Avoids need to subclass complex objects Many UIKit classes use delegates UIApplication UITableView UITextField UIApplicationDelegate 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; - (void)applicationwillresignactive:(uiapplication *)application; - (void)applicationdidreceivememorywarning:(uiapplication *)application; 5

6 Info.plist file Property List (often XML), describing your application i.e. your application configuration file Icon appearance Status bar style (default, black, hidden) Orientation (landscape vs portrait) Whether or not the app uses Wifi System Requirements Can edit most properties in Xcode Project > Edit Active Target Foo menu item On the properties tab 6

7 Model, View, Controller Glue-code (ish) connecting the model with the interface elements The underlying data and object model, and model algorithms, all being interface independent The interface components, and their dependency on each other 7

8 Model, View, Controller Model Your underlying data Manages the app data and state Not concerned with UI or presentation Often persists somewhere database or network store Same model should be reusable, unchanged in different interfaces iphone, cmd line, OSX app, etc 8

9 Model, View, Controller View What you see on the screen!!! Present the Model to the user in an appropriate interface Buttons, Sliders, Table-Views etc. Allows user to manipulate data Does not store any data (except to cache state) Easily reusable & configurable to display different data 9

10 Model, View, Controller Controller Glue that makes your app unique!!! 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. 10

11 Why use an MVC model? Ever used the word spaghetti to describe code? Clear responsibilities make things easier to maintain Avoid having one monster class that does everything Separating responsibilities also leads to reusability By minimising dependencies, you can take a model or view class you ve already written and use it elsewhere Think of ways to write less code 11

12 Model, View, Controller Controller outlets actions Model Object View (Interface) 12

13 Communication and MVC How should objects communicate? Which objects know about one another? Model Example: Person class Not aware of views or controllers Typically the most reusable Communicate generically using... Key-value observing Notifications 13

14 Communication and MVC How should objects communicate? Which objects know about one another? View Example: PersonView class Not aware of controllers, may be aware of relevant model objects Also tends to be reusable Communicate with controller using... Target-action Delegation 14

15 Communication and MVC How should objects communicate? Which objects know about one another? Controller Knows about model and view objects The brains of the operation Manages relationships and data flow Typically app-specific, so rarely reusable 15

16 Nib Files Helps you design the V in MVC: layout user interface elements add controller objects Connect the controller and UI 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 16

17 Once the nib is loaded -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 customisation here 17

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

19 Controls - Target / Action When an event occurs, an action is invoked on the target object UIControlEventTouchUpInside target: action: event: UIControlEventTouchUpInside Method Call on the action selector: - (void) decrease) Controller (myobject) 19

20 Action Methods 3 different flavours 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 Controls can trigger multiple actions on different targets in response to the same event Different than Cocoa on the desktop where only one targetaction is supported Different events can be setup in IB 20

21 Action Method Variations Simple no-argument selector - (void)increase { // bump the number of sides of the polygon up polygon.numberofsides += 1; } Single argument selector - control is sender // for example, if control is a slider... - (void)adjustnumberofsides:(id)sender { polygon.numberofsides = [sender value]; } 21

22 Action Method Variations Two-arguments in selector (sender & event) - (void)adjustnumberofsides:(id)sender withevent:(uievent *)event { // could inspect event object // if you needed to } 22

23 Manual Target-Action Same information the Interface Builder would use API and UIControlEvents found in UIControl.h UIControlEvents is a UIControl - (void)addtarget:(id)target action:(sel)action forcontrolevents:(uicontrolevents)controlevents; - (void)removetarget:(id)target action:(sel)action 23

24 View Fundamentals What is a View??? Rectangular area on screen Content can be drawn inside it Handles events A view is a subclass of UIResponder event handling class Views arranged hierarchically every view has one superview every view has zero or more subviews 24

25 View Hierarchy - UIWindow Views live inside of a window UIWindow is actually just a view adds some additional functionality specific to top level view One UIWindow for an iphone app Contains the entire view hierarchy Set up by default in Xcode template project 25

26 View Hierarchy - Manipulation Add/remove views: in Interface Builder, or using the following UIView methods: - (void)addsubview:(uiview *)view; - (void)removefromsuperview; Manipulate the view hierarchy manually: - (void)insertsubview:(uiview *)view atindex:(int)index; - (void)insertsubview:(uiview *)view belowsubview:(uiview *)view; - (void)insertsubview:(uiview *)view abovesubview:(uiview *)view; - (void)exchangesubviewatindex:(int)index withsubviewatindex:(int)otherindex; 26

27 View Hierarchy - Ownership Superviews retain their subviews Not uncommon for views to only be retained by superview Be careful when removing a view! It might have subviews you might want to keep! Retain subview before removing if you want to reuse it Views can be temporarily hidden theview.hidden = YES; 27

28 View Related Structures CGPoint location in space: { x, y } CGSize dimensions: { width, height } CGRect location and dimension: { origin, size } 28

29 Rects, Points, Sizes 29

30 View-related Structure Creation Function Example CGPointMake (x, y) CGPoint point = CGPointMake (100.0, 200.0); point.x = 300.0; point.y = 30.0; CGSizeMake (width, height) CGSize size = CGSizeMake (42.0, 11.0); size.width = 100.0; size.height = 72.0; CGRectMake (x, y, width, height) CGRect rect = CGRectMake (100.0, 200.0, 42.0, 11.0); rect.origin.x = 0.0; rect.size.width = 50.0; 30

31 UIView Coordinate Origin in upper left corner y axis grows downwards System 31

32 Location and Size View s location and size expressed in two ways Frame is in superview s coordinate system Bounds is in local coordinate system View A frame: origin: 0, 0 size: 550 x 400 View A bounds origin: 0, 0 size: 550 x 400 View B frame: origin: 200, 100 size: 200 x 250 View B bounds origin: 0, 0 size: 200 x

33 Frame and Bounds Which to use? Usually depends on the context If you are using a view, typically you use frame If you are implementing a view, typically you use bounds Matter of perspective From outside it s usually the frame From inside it s usually the bounds frame origin (200,100) (0,0) bounds origin Examples: Creating a view, positioning a view in superview - use frame Handling events, drawing a view - use bounds 33

34 Where do views come Two Options: from??? Programatically Views are initialised using -initwithframe: CGRect frame = CGRectMake(0, 0, 200, 150); UIView *myview = [[UIView alloc] initwithframe:frame]; Example: CGRect frame = CGRectMake(20, 45, 140, 21); UILabel *label = [[UILabel alloc] initwithframe:frame]; [window addsubview:label]; [label settext:@ Number of sides: ]; [label release]; // label now retained by window Interface Builder Drag out any of the existing view objects (buttons, labels, etc) Or drag generic UIView and set custom class 34

35 Defining Custom Views Subclass UIView For custom drawing, you override: - (void)drawrect:(cgrect)rect; For event handling, you override: - (void)touchesbegan:(nsset *)touches withevent:(uievent *)event; - (void)touchesmoved:(nsset *)touches withevent:(uievent *)event; - (void)touchesended:(nsset *)touches withevent:(uievent *)event; 35

36 Drawing Views - (void)drawrect:(cgrect)rect -[UIView drawrect:] does nothing by default If not overridden, then backgroundcolor is used to fill Override - drawrect: to draw a custom view rect argument is area to draw drawrect: is invoked automatically Don t call it directly! Let the framework decide When a view needs to be redrawn, use: - (void)setneedsdisplay; For example, in your controller: - (void)setnumberofsides:(int)sides { } numberofsides = sides; [polygonview setneedsdisplay]; Being lazy is good for performance. When the framework needs to render the views, it determines which are visible, and only draws those. For each view that should be redrawn, its drawrect method will be called. This can significantly improve performance!!! 36

37 CoreGraphics and Quartz 2D UIKit offers very basic drawing functionality UIRectFill(CGRect rect); UIRectFrame(CGRect rect); CoreGraphics - Drawing APIs CG is a C-based API, not Objective-C CG and Quartz 2D drawing engine define simple but powerful graphics primitives, including: Graphics context Transformations Paths Colours Fonts Painting operations 37

38 Graphics Context All drawing is done into an opaque graphics context Normally set up automatically, so no need to set this up explicitly Draws to screen, bitmap buffer, printer, PDF, etc. Graphics context setup automatically before invoking drawrect: Defines current path, line width, transform, etc. Access the graphics context within drawrect: by calling (CGContextRef)UIGraphicsGetCurrentContext(void); Use CG calls to change settings E.g. setting fill colour, line width, etc Context only valid for current call to drawrect: Do not cache a CGContext! 38

39 CG Wrappers Some CG functionality wrapped by UIKit UIColor Convenience for setting common colours Various predefined colours, but can also be created using RGB values etc... Easily set the fill and/or stroke colours when drawing UIColor *redcolor = [UIColor redcolor]; [redcolor set]; // drawing will be done in red UIFont Access system font Get font by name UIFont *font = [UIFont systemfontofsize:14.0]; [mylabel setfont:font]; 39

40 Simple drawrect: example Draw a solid colour and shape - (void)drawrect:(cgrect)rect { CGRect bounds = [self bounds]; [[UIColor graycolor] set]; UIRectFill (bounds); CGRect square = CGRectMake (10, 10, 50, 100); [[UIColor redcolor] set]; UIRectFill (square); } [[UIColor blackcolor] set]; UIRectFrame (square); 40

41 Drawing More Complex Shapes Common steps for drawrect: are 1. Get current graphics context 2. Define a path 3. Set a colour 4. Stroke or fill path Repeat, if necessary CoreGraphics paths define shapes Made up of lines, arcs, curves and rectangles Creation and drawing of paths are two distinct operations Define path first, then draw it 41

42 CGPath Two parallel sets of functions for using paths CGContext convenience throwaway functions Path actions occur immediately - one time only use CGPath functions for creating reusable paths A path is constructed, and then can be used/reused later CGContext CGContextMoveToPoint CGContextLineToPoint CGContextAddArcToPoint CGContextClosePath And so on and so on... CGPath CGPathMoveToPoint CGPathAddLineToPoint CGPathAddArcToPoint CGPathCloseSubPath 42

43 Simple Path Example - (void)drawrect:(cgrect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); [[UIColor graycolor] set]; UIRectFill ([self bounds]); CGContextBeginPath (context); CGContextMoveToPoint (context, 75, 10); CGContextAddLineToPoint (context, 10, 150); CGContextAddLineToPoint (context, 160, 150); CGContextClosePath (context); } [[UIColor redcolor] setfill]; [[UIColor blackcolor] setstroke]; CGContextDrawPath (context, kcgpathfillstroke); 43

44 UIImage UIKit class representing an image A variety of different image formats are supported Creating UIImages: Fetching image in application bundle (i.e. a resource) Use +[UIImage imagenamed:(nsstring *)name] Include file extension in file name, myimage.jpg Read from file on disk Use -[UIImage initwithcontentsoffile:(nsstring *)path] From data in memory Use -[UIImage initwithdata:(nsdata *)data] 44

45 Creating Images from a Context Need to dynamically generate a bitmap image Bitmap Image Example - (UIImage *)polygonimageofsize:(cgsize)size { Same as drawing a view General steps 1. Create a special CGGraphicsContext with a size 2. Draw 3. Capture the context as a bitmap 4. Clean up } UIImage *result = nil; UIGraphicsBeginImageContext (size); // call your drawing code... result = UIGraphicsGetImageFromCurrentContext(); UIGraphicsEndImageContext(); return result; 45

46 Getting Image Data Given UIImage, want PNG or JPG representation NSData *UIImagePNGRepresentation (UIImage * image); NSData *UIImageJPGRepresentation (UIImage * image); UIImage also has a CGImage property This will give you a CGImageRef to use with CG calls 46

47 Drawing Text and Images There are two ways: Drawing directly into the -drawrect Use other UIKit views You can draw UIImages in -drawrect: - [UIImage drawatpoint:(cgpoint)point] - [UIImage drawinrect:(cgrect)rect] - [UIImage drawaspatterninrect:(cgrect)rect] You can draw NSString in -drawrect: - [NSString drawatpoint:(cgpoint)point withfont:(uifont *)font] 47

48 Constructing Views How do I implement this? Goal PolygonView that displays shape as well as name Initial thought Have PolygonView draw the text Inefficient when animating Instead use UILabel! Add a UILabel as a subview of the PolygonView Gets all the benefits of the additional label classes Shadows, alignments etc 48

49 Other UIView Subclasses UILabel A UIView subclass that knows how to draw text Properties include: font textcolor shadow (offset & colour) textalignment (centre, adjustleft etc) UIImageView A UIView that draws UIImages Properties include: image animatedimages (can set up an array of images that create an animated image) animatedduration animatedrepeatcount contentmode (inherited from the UIView) A property to align and scale image with respect to bounds (e.g. centre, scale, fit, etc) 49

50 Other UIView Subclasses UIControl A UIView with Target-Action event handling Properties include: enabled selected highlighted UIButton: font, title, titlecolor, image, backgroundimage UITextField: font, text, placeholder, textcolor See UIKit headers for plenty more 50

51 To Recap... In this lecture set, we covered: The makeup of an application The Model / View / Controller design pattern Nib files Action Methods Views Coordinate Systems Frames and Bounds Drawing in Views Graphic Contexts Text, and Images 51