Building GUIs with UIKit. Kevin Cathey

Building GUIs with UIKit Kevin Cathey

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

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

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

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

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

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

UIKit

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

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.

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.

UIKit

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

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

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

MVC Motivation

MVC Motivation Remember, we have to:

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

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

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:

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)?

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)?

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

The Controller

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

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

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.

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.

Controllers Comparative number of controllers Data Models Views Controllers

The Controller

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

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).

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.

UIKit and MVC

UIKit and MVC Data Models Foundation Classes Custom Classes

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

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

How do I make them all?

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

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.

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.

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

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

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.

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.

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

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

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

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

Nib Files An example unarchiving

Nib Files An example unarchiving 010111001 010010101

Nib Files An example unarchiving 010111001 010010101 initwithcoder:

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

Actually it s more complicated The develop time XIB file

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

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

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

The XIB File

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

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

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

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.

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

Connections

Connections How we connect code and UI.

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

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.

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

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

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 variable: @interface Foo : Bar { IBOutlet UIView *myview; } @end Declaring outlet on property: @property(nonatomic, retain) IBOutlet UIView *myview;

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.

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

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 action: @interface Foo : Bar { } - (IBAction)nameOfAction:(id)sender; @end

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

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

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.

Demo Hello World

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

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; }

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.

UINavigationController

UINavigationController Has stack of view controllers.

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

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

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

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];

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

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;

UIView

UIView Represents what you actually see on screen.

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

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.

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.

UIView

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

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

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.

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).

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

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