Building GUIs with UIKit. Kevin Cathey

Transcription

1 Building GUIs with UIKit Kevin Cathey

2 Building GUIs with UIKit acm.uiuc.edu/macwarriors/devphone

3 Building GUIs with UIKit What is UIKit? acm.uiuc.edu/macwarriors/devphone

4 Building GUIs with UIKit What is UIKit? Model-view-controller acm.uiuc.edu/macwarriors/devphone

5 Building GUIs with UIKit What is UIKit? Model-view-controller What really is a Nib file? acm.uiuc.edu/macwarriors/devphone

6 Building GUIs with UIKit What is UIKit? Model-view-controller What really is a Nib file? Connecting code to UI acm.uiuc.edu/macwarriors/devphone

7 Building GUIs with UIKit What is UIKit? Model-view-controller What really is a Nib file? Connecting code to UI Tour of common UIKit classes acm.uiuc.edu/macwarriors/devphone

8 Building GUIs with UIKit What is UIKit? Model-view-controller What really is a Nib file? Connecting code to UI Tour of common UIKit classes acm.uiuc.edu/macwarriors/devphone

9 UIKit

10 UIKit A framework providing many common classes for user interface design.

11 UIKit A framework providing many common classes for user interface design. Any user interface framework needs to: Present data to the user. Respond to user input.

12 UIKit A framework providing many common classes for user interface design. Any user interface framework needs to: Present data to the user. Respond to user input. It s all about events.

13 UIKit

14 UIKit How UIKit accomplishes this: Defines objects. Defines how they behave. Defines how they interact.

15 UIKit How UIKit accomplishes this: Defines objects. Defines how they behave. Defines how they interact. All classes in UIKit start with UI.

16 Building GUIs with UIKit What is UIKit? Model-view-controller What really is a Nib file? Connecting code to UI Tour of common UIKit classes acm.uiuc.edu/macwarriors/devphone

17 Building GUIs with UIKit What is UIKit? Model-view-controller What really is a Nib file? Connecting code to UI Tour of common UIKit classes acm.uiuc.edu/macwarriors/devphone

18 MVC Motivation

19 MVC Motivation Remember, we have to:

20 MVC Motivation Remember, we have to: Present data to the user.

21 MVC Motivation Remember, we have to: Present data to the user. Respond to user input.

22 MVC Motivation Remember, we have to: Present data to the user. Respond to user input. How do we create a system that does the above and:

23 MVC Motivation Remember, we have to: Present data to the user. Respond to user input. How do we create a system that does the above and: Allows data code to be modular (work with any view)?

24 MVC Motivation Remember, we have to: Present data to the user. Respond to user input. How do we create a system that does the above and: Allows data code to be modular (work with any view)? Allows view code to be modular (work with any data model)?

25 Model - View - Controller City Cupertino Glendale Los Angeles Palo Alto San Diego San Francisco Santa Clara Santa Monica Population 53, ,979 3,834,340 58,246 1,266, , ,756 87,212 Model

26 Model - View - Controller City Cupertino Glendale Los Angeles Palo Alto San Diego San Francisco Santa Clara Santa Monica Population 53, ,979 3,834,340 58,246 1,266, , ,756 87,212 Model View

27 Model - View - Controller City Cupertino Glendale Los Angeles Palo Alto San Diego San Francisco Santa Clara Santa Monica Population 53, ,979 3,834,340 58,246 1,266, , ,756 87,212 Model View

28 Model - View - Controller City Cupertino Glendale Los Angeles Palo Alto San Diego San Francisco Santa Clara Santa Monica Population 53, ,979 3,834,340 58,246 1,266, , ,756 87,212 Model Controller View

29 The Controller

30 The Controller Knows how to talk to the model and the view.

31 The Controller Knows how to talk to the model and the view. Passes data from the model to the view as needed.

32 The Controller Knows how to talk to the model and the view. Passes data from the model to the view as needed. Updates the model when the view changes.

33 The Controller Knows how to talk to the model and the view. Passes data from the model to the view as needed. Updates the model when the view changes. Usually specific to the model and the view.

34 Controllers Comparative number of controllers Data Models Views Controllers

35 Controllers Comparative number of controllers Data Models Views Controllers

36 Controllers Comparative number of controllers Data Models Views Controllers

37 Controllers Comparative number of controllers Data Models Views Controllers

38 The Controller

39 The Controller Can handle interactions between views (one controller can manage many views).

40 The Controller Can handle interactions between views (one controller can manage many views). Controller has a to-many relationship with views (but usually one-to-one).

41 The Controller Can handle interactions between views (one controller can manage many views). Controller has a to-many relationship with views (but usually one-to-one). Views have a one-to-one relationship with a view controller.

42 UIKit and MVC

43 UIKit and MVC Data Models Foundation Classes Custom Classes

44 UIKit and MVC Data Models Foundation Classes Custom Classes Views UIView UIButton UITableView UITabBar UISlider

45 UIKit and MVC Data Models Foundation Classes Custom Classes Views UIView UIButton UITableView UITabBar UISlider Controllers UIViewController UINavigationController UITabBarController UITableViewController

46 How do I make them all?

47 How do I make them all? Data Models Write all in code. We already looked at this.

48 How do I make them all? Data Models Write all in code. We already looked at this. Views Create in Interface Builder. Save as a Nib file.

49 How do I make them all? Data Models Write all in code. We already looked at this. Views Create in Interface Builder. Save as a Nib file. Controllers Setup basics in Interface Builder. Write all the behaviors and interaction with data in code.

50 As you create your graphical user interfaces, you must follow the Human Interface Guidelines (the HIG )

51 Building GUIs with UIKit What is UIKit? Model-view-controller What really is a Nib file? Connecting code to UI Tour of common UIKit classes acm.uiuc.edu/macwarriors/devphone

52 Building GUIs with UIKit What is UIKit? Model-view-controller What really is a Nib file? Connecting code to UI Tour of common UIKit classes acm.uiuc.edu/macwarriors/devphone

53 Interface Builder An application that allows you to build GUIs with drag and drop and WYSIWYG. Build object graph by dragging out objects from the library. Customize objects. Setup interactions between code and UI with connections. Save everything to a Nib file.

54 Nib Files After you create your object graph in IB, you freeze it. This process is called archiving (remember NSCoder protocol?) When your application runs, it unfreezes or unarchives the object graph.

55 Nib Files An example archiving UISwitch value = on frame = ((x,y), (w,h))

56 Nib Files An example archiving Hit Save UISwitch value = on frame = ((x,y), (w,h))

57 Nib Files An example archiving Hit Save UISwitch value = on frame = ((x,y), (w,h)) encodewithcoder:

58 Nib Files An example archiving UISwitch value = on frame = ((x,y), (w,h)) Hit Save encodewithcoder:

59 Nib Files An example unarchiving

60 Nib Files An example unarchiving

61 Nib Files An example unarchiving initwithcoder:

62 Nib Files An example unarchiving initwithcoder: UISwitch value = on frame = ((x,y), (w,h))

63 Actually it s more complicated The develop time XIB file

64 Actually it s more complicated The develop time XIB file Hit Save <object /> encodewithcoder: Develop Time

65 Actually it s more complicated The develop time XIB file Hit Save <object /> encodewithcoder: encodewithcoder: Build Time Develop Time

66 Actually it s more complicated The develop time XIB file Hit Save <object /> encodewithcoder: encodewithcoder: initwithcoder: Runtime Build Time Develop Time

67 The XIB File

68 The XIB File Like a Nib file, but plain-text.

69 The XIB File Like a Nib file, but plain-text. SCM diffable.

70 The XIB File Like a Nib file, but plain-text. SCM diffable. Also contains metadata specific to Interface Builder.

71 The XIB File Like a Nib file, but plain-text. SCM diffable. Also contains metadata specific to Interface Builder. Flattened into binary at compile-time.

72 Building GUIs with UIKit What is UIKit? Model-view-controller What really is a Nib file? Connecting code to UI Tour of common UIKit classes acm.uiuc.edu/macwarriors/devphone

73 Building GUIs with UIKit What is UIKit? Model-view-controller What really is a Nib file? Connecting code to UI Tour of common UIKit classes acm.uiuc.edu/macwarriors/devphone

74 Connections

75 Connections How we connect code and UI.

76 Connections How we connect code and UI. Outlets Connecting code to UI. Instance variables in a class. Get filled in at runtime.

77 Connections How we connect code and UI. Outlets Connecting code to UI. Instance variables in a class. Get filled in at runtime. Actions Connection UI to code. Method on a class called by UI.

78 Outlets Use IBOutlet keyword on instance variable or property. Flag for Interface Builder s parser.

79 Outlets Use IBOutlet keyword on instance variable or property. Flag for Interface Builder s parser. Definition of an outlet: #define IBOutlet

80 Outlets Use IBOutlet keyword on instance variable or property. Flag for Interface Builder s parser. Definition of an outlet: #define IBOutlet Declaring outlet on instance Foo : Bar { IBOutlet UIView *myview;

81 Outlets Use IBOutlet keyword on instance variable or property. Flag for Interface Builder s parser. Definition of an outlet: #define IBOutlet Declaring outlet on instance Foo : Bar { IBOutlet UIView *myview; Declaring outlet on retain) IBOutlet UIView *myview;

82 Outlets Use IBOutlet keyword on instance variable or property. Flag for Interface Builder s parser. Definition of an outlet: #define IBOutlet Declaring outlet on instance Foo : Bar { IBOutlet UIView *myview; Declaring outlet on retain) IBOutlet UIView *myview; Very important to set retain attribute

83 Actions Use IBAction as return type for method. One argument of type id (this is who sent the action). Flag for Interface Builder s parser.

84 Actions Use IBAction as return type for method. One argument of type id (this is who sent the action). Flag for Interface Builder s parser. Definition of an action: #define IBAction void

85 Actions Use IBAction as return type for method. One argument of type id (this is who sent the action). Flag for Interface Builder s parser. Definition of an action: #define IBAction void Declaring an Foo : Bar { } -

86 Connecting outlets & actions in IB After you ve defined actions and outlets in header, do either:

87 Connecting outlets & actions in IB After you ve defined actions and outlets in header, do either: Old-school method Hold control, drag from source to destination

88 Connecting outlets & actions in IB After you ve defined actions and outlets in header, do either: Old-school method Hold control, drag from source to destination Using connection display Right-click on object. Then for outlet/action, drag to other object.

89 Demo Hello World

90 Building GUIs with UIKit What is UIKit? Model-view-controller What really is a Nib file? Connecting code to UI Tour of common UIKit classes acm.uiuc.edu/macwarriors/devphone

91 Building GUIs with UIKit What is UIKit? Model-view-controller What really is a Nib file? Connecting code to UI Tour of common UIKit classes acm.uiuc.edu/macwarriors/devphone

92 UIViewController You will be creating many subclasses of this. Has view outlet which is the view it principally manages. Can load view from another Nib file using Nib Name property in Interface Builder (or nibname method in code). Common methods to override in subclasses:

93 UIViewController You will be creating many subclasses of this. Has view outlet which is the view it principally manages. Can load view from another Nib file using Nib Name property in Interface Builder (or nibname method in code). Common methods to override in subclasses: Responding to memory warnings: - (void)didreceivememorywarning;

94 UIViewController You will be creating many subclasses of this. Has view outlet which is the view it principally manages. Can load view from another Nib file using Nib Name property in Interface Builder (or nibname method in code). Common methods to override in subclasses: Responding to memory warnings: - (void)didreceivememorywarning; Allowing autorotation: // To always allow autorotation... - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)orientation { return YES; }

95 UIViewController You will be creating many subclasses of this. Has view outlet which is the view it principally manages. Can load view from another Nib file using Nib Name property in Interface Builder (or nibname method in code). Common methods to override in subclasses: Responding to memory warnings: - (void)didreceivememorywarning; Allowing autorotation: // To always allow autorotation... - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)orientation { return YES; } Doing final setup of view after it loads from Nib: - (void)viewdidload;

96 UITabBarController Has tabs, each tab being a view controller. Don t subclass. For each tab (view controller), load its UI from external Nib file otherwise all views instantiated immediately.

97 UINavigationController

98 UINavigationController Has stack of view controllers.

99 UINavigationController Has stack of view controllers. To move right, push a view controller.

100 UINavigationController Has stack of view controllers. To move right, push a view controller. To move left, pop a view controller.

101 UINavigationController Has stack of view controllers. To move right, push a view controller. To move left, pop a view controller. Don t subclass.

102 UINavigationController Has stack of view controllers. To move right, push a view controller. To move left, pop a view controller. Don t subclass. Usually root controller or contained by a tab bar controller.

103 UINavigationController Has stack of view controllers. To move right, push a view controller. To move left, pop a view controller. Don t subclass. Usually root controller or contained by a tab bar controller. Pushing a view controller: [mynavcontroller pushviewcontroller:nextcontroller animated:yes];

104 UINavigationController Has stack of view controllers. To move right, push a view controller. To move left, pop a view controller. Don t subclass. Usually root controller or contained by a tab bar controller. Pushing a view controller: [mynavcontroller pushviewcontroller:nextcontroller animated:yes]; Popping a view controller (usually don t have to call this): [mynavcontroller popviewcontrolleranimated:yes];

105 UITableViewController Manages as a table view s data source and delegate. Subclass and override at least these methods:

106 UITableViewController Manages as a table view s data source and delegate. Subclass and override at least these methods: Number of rows in a given table view section: - (NSInteger)tableView:(UITableView *)tableview numberofrowsinsection:(nsinteger)section;

107 UITableViewController Manages as a table view s data source and delegate. Subclass and override at least these methods: Number of rows in a given table view section: - (NSInteger)tableView:(UITableView *)tableview numberofrowsinsection:(nsinteger)section; Provide a row of content: - (NSInteger)tableView:(UITableView *)tableview numberofrowsinsection:(nsinteger)section;

108 UIView

109 UIView Represents what you actually see on screen.

110 UIView Represents what you actually see on screen. This is where the drawing occurs.

111 UIView Represents what you actually see on screen. This is where the drawing occurs. The first to receive user events if the view doesn t need the event, it sends it to its view controller.

112 UIView Represents what you actually see on screen. This is where the drawing occurs. The first to receive user events if the view doesn t need the event, it sends it to its view controller. Subclass only for customization of one of those two roles.

113 UIView

114 UIView Views have a superview (except the root view, also called the window) and subviews.

115 UIView Views have a superview (except the root view, also called the window) and subviews. Drawing is clipped to its superview.

116 UIView Views have a superview (except the root view, also called the window) and subviews. Drawing is clipped to its superview. Size and location of a view is called its frame.

117 UIView Views have a superview (except the root view, also called the window) and subviews. Drawing is clipped to its superview. Size and location of a view is called its frame. The bounds of a view are usually the same as its frame, except with the location always at (0,0).

118 Building GUIs with UIKit What is UIKit? Model-view-controller What really is a Nib file? Connecting code to UI Tour of common UIKit classes acm.uiuc.edu/macwarriors/devphone

119 Building GUIs with UIKit What is UIKit? Model-view-controller What really is a Nib file? Connecting code to UI Tour of common UIKit classes acm.uiuc.edu/macwarriors/devphone

120 Q&A About These Slides If you need to reference the content of this presentation, these slides will be posted on our website, listed below: acm.uiuc.edu/macwarriors/devphone

121

122