Stanford CS193p

Developing Applications for iOS Fall 2013-14

Stanford CS193p Fall 2013

Today
Demo
Polymorphism with Controllers in Matchismo How to change the class of a Controller in a storyboard

Multiple MVCs in an Application

UINavigationController UITabBarController

Demo

Attributor Stats

Stanford CS193p Fall 2013

Demo
Polymorphism with Controllers in Matchismo Get rid of PlayingCardDeck in CardGameViewController. How to change the class of a Controller in a storyboard

Making a Generic Controller in Matchismo

Stanford CS193p Fall 2013

Multiple MVCs
Why?
When your application gets more features than can t in one MVC. Drag View Controller from Object Palette. Create a subclass of UIViewController using New File menu item. Set that subclass as the class of your new Controller in the Attributes Inspector.

How to add a new MVC to your storyboard

How to present this new MVC to the user

UINavigationController UITabBarController

Other mechanisms well talk about later in the course (popover, modal, etc.).

Stanford CS193p Fall 2013

UINavigationController
When to use it?
When the user wants to dive down into more detail.

Stanford CS193p Fall 2013

UINavigationController
When to use it?
When the user wants to dive down into more detail.

How does it work?

Encloses other MVCs (like the Year MVC and the Month MVC). Touches in one MVC segue to the other MVCs.

This is the

UINavigationController s

View.

Stanford CS193p Fall 2013

UINavigationController
When to use it?
When the user wants to dive down into more detail.

How does it work?

Encloses other MVCs (like the Year MVC and the Month MVC). Touches in one MVC segue to the other MVCs.

This is a Month MVCs View. This is the UINavigationControllers View.

Stanford CS193p Fall 2013

UINavigationController
When to use it?
When the user wants to dive down into more detail.

How does it work?

Encloses other MVCs (like the Year MVC and the Month MVC). Touches in one MVC segue to the other MVCs.

This is a Day MVCs View.

Stanford CS193p Fall 2013

UINavigationController
When to use it?
When the user wants to dive down into more detail.

How does it work?

Encloses other MVCs (like the Year MVC and the Month MVC). Touches in one MVC segue to the other MVCs.

This is a Calendar Event MVCs View.

Stanford CS193p Fall 2013

UINavigationController
When to use it?
When the user wants to dive down into more detail.

How does it work?

Encloses other MVCs (like the Year MVC and the Month MVC). Touches in one MVC segue to the other MVCs.

Components of a UINavigationController

Navigation Bar (contents determined by embedded MVCs navigationItem).

Stanford CS193p Fall 2013

UINavigationController
When to use it?
When the user wants to dive down into more detail.

How does it work?

Encloses other MVCs (like the Year MVC and the Month MVC). Touches in one MVC segue to the other MVCs.

Components of a UINavigationController

Navigation Bar (contents determined by embedded MVCs navigationItem). Title (by default is title property of the embedded MVC)

Stanford CS193p Fall 2013

UINavigationController
When to use it?
When the user wants to dive down into more detail.

How does it work?

Encloses other MVCs (like the Year MVC and the Month MVC). Touches in one MVC segue to the other MVCs.

Components of a UINavigationController

Navigation Bar (contents determined by embedded MVCs navigationItem). Title (by default is title property of the embedded MVC) Embedded MVCs [Link] (an NSArray of UIBarButtonItems)

Stanford CS193p Fall 2013

UINavigationController
When to use it?
When the user wants to dive down into more detail.

How does it work?

Encloses other MVCs (like the Year MVC and the Month MVC). Touches in one MVC segue to the other MVCs.

Components of a UINavigationController

Navigation Bar (contents determined by embedded MVCs navigationItem). Title (by default is title property of the embedded MVC) Embedded MVCs [Link] (an NSArray of UIBarButtonItems) Back Button (automatic)

Stanford CS193p Fall 2013

UINavigationController
When to use it?
When the user wants to dive down into more detail.

How does it work?

Encloses other MVCs (like the Year MVC and the Month MVC). Touches in one MVC segue to the other MVCs.

Components of a UINavigationController

Navigation Bar (contents determined by embedded MVCs navigationItem). Title (by default is title property of the embedded MVC) Embedded MVCs [Link] (an NSArray of UIBarButtonItems) Back Button (automatic)

Stanford CS193p Fall 2013

UINavigationController
When to use it?
When the user wants to dive down into more detail.

How does it work?

Encloses other MVCs (like the Year MVC and the Month MVC). Touches in one MVC segue to the other MVCs. Navigation Bar (contents determined by embedded MVCs navigationItem). Title (by default is title property of the embedded MVC) Embedded MVCs [Link] (an NSArray of UIBarButtonItems) Back Button (automatic) Embedded MVCs toolbarItems property (also an NSArray of UIBarButtonItems)

Components of a UINavigationController

Stanford CS193p Fall 2013

MVCs working together

I want more features, but it doesnt make sense to put them all in one MVC!

Stanford CS193p Fall 2013

MVCs working together

So I create a new MVC to encapsulate that functionality.

Stanford CS193p Fall 2013

MVCs working together

If the relationship between these two MVCs is more detail, we use a UINavigationController to let them share the screen.

Stanford CS193p Fall 2013

MVCs working together

UINavigationController

The UINavigationController is a Controller whose View looks like this.

Stanford CS193p Fall 2013

MVCs working together

UINavigationController

ro

ot

Vi

ew

Co

nt

ro

ll

er

But its special because we can set its rootViewController outlet to another MVC ...

Stanford CS193p Fall 2013

MVCs working together

UINavigationController

... and it will embed that MVCs View inside its own View.

Stanford CS193p Fall 2013

MVCs working together

UINavigationController

Then a UI element in this View (e.g. a UIButton) can segue to the other MVC and its View will now appear in the UINavigationController instead.

Stanford CS193p Fall 2013

MVCs working together

UINavigationController

We call this kind of segue a push segue.

Stanford CS193p Fall 2013

MVCs working together

UINavigationController

Notice this Back button automatically appears.

Stanford CS193p Fall 2013

MVCs working together

UINavigationController

When we click it, well go back to the rst MVC.

Stanford CS193p Fall 2013

MVCs working together

UINavigationController

Stanford CS193p Fall 2013

Segues
Then well look at how we create a UINavigationController in our storyboard.

Lets talk about how the segue gets set up rst

Stanford CS193p Fall 2013

So far, youve only had a single MVC in your application. So how do you create a second one?

Its a two-step process. First, drag a View Controller into your Storyboard ...

Stanford CS193p Fall 2013

Note ... second, set its class. This is almost always a class that you create using File > New > File ... Dont forget that it has to be a subclass of UIViewController.

It is a VERY common mistake to forget this step! If you do, youll wonder why you cant hook up any outlets or actions inside this MVC!

Stanford CS193p Fall 2013

We call a particular layout of a View for a Controller in Xcode a scene. This is a scene. This is a scene.

Stanford CS193p Fall 2013

Lets drag out a Button that, when pressed, will show this new View Controller.

Stanford CS193p Fall 2013

Drop it here.

Stanford CS193p Fall 2013

To create a segue, you hold down ctrl and drag from a button (or other UI element) in one View Controller to another View Controller.

Stanford CS193p Fall 2013

When you let go of the mouse, Xcode will ask what sort of segue you want to occur when Button is pressed. Push is the kind of segue you use when the two Controllers are inside a UINavigationController.

Stanford CS193p Fall 2013

This segue will be created.

Stanford CS193p Fall 2013

The segue can be inspected by clicking on it and bringing up the Attributes Inspector. This is the identier for this segue (Do Something in this case). We will use it in our code to identify this segue. Obviously multiple UI elements could be segueing to multiple other VCs (so we need to be able to tell which segue is happening with this identier).

Stanford CS193p Fall 2013

But theres a problem here. These View Controllers are not inside a UINavigationController. Push will do nothing.

Stanford CS193p Fall 2013

You can embed a View Controller in a

UINavigationController by

selecting the View Controller, then choosing Embed In > Navigation Controller from the Editor menu.

You select the root (top level) View Controller before embedding.

Stanford CS193p Fall 2013

This little arrow is the application starting point.

Note that it was preserved when we embedded. This arrow can be moved, but dont point it at an MVC that is inside a UINavigationController.
Stanford CS193p Fall 2013

This is not a segue, its the rootViewController outlet of the UINavigationController.

Stanford CS193p Fall 2013

This is the segue we built by ctrl-dragging earlier.

Stanford CS193p Fall 2013

Notice that navigation bars were added on top of all the scenes when they became embedded. These are part of the UINavigationController s View.

Stanford CS193p Fall 2013

You can double-click to edit this title.

Or it will default to the title property of the View Controller (if set).

Stanford CS193p Fall 2013

If you want to add a button to this bar, you can, but dont use UIButton ...

Stanford CS193p Fall 2013

... scroll down to UIBarButtonItem instead.

Stanford CS193p Fall 2013

Stanford CS193p Fall 2013

This button is now associated with this View Controller in this scene and will be displayed when this View Controller is the currently-showing scene in the UINavigationController.

Stanford CS193p Fall 2013

UINavigationController
Usually because the user presses the back button (shown on the previous slide). But it can happen programmatically as well with this UINavigationController instance method
- (void)popViewControllerAnimated:(BOOL)animated;

When does a pushed MVC pop off?

This does the same thing as clicking the back button. Somewhat rare to call this method. Usually we want the user in control of navigating the stack. But you might do it if some action the user takes in a view makes it irrelevant to be on screen. Lets say we push an MVC which displays a database record and has a delete button w/this action:
- (IBAction)deleteCurrentRecord:(UIButton *)sender {

Example

/ / delete the record we are displaying / / we just deleted the record we are displaying! / / so it does not make sense to be on screen anymore, so pop
}

Notice that all UIViewControllers know the UINavigationController they are in. This is nil if they are not in one.

[[Link] popViewControllerAnimated:YES];
Stanford CS193p Fall 2013

View Controller
Replace - Replaces the right-hand side of a UISplitViewController (iPad only) Popover - Puts the view controller on the screen in a popover (iPad only) Modal - Puts the view controller up in a way that blocks the app until it is dismissed Custom - You can create your own subclasses of UIStoryboardSegue Replace & Popover

Other kinds of segues besides Push

Well talk about iPad-related segues in future lectures Well talk about Modal segues later in the quarter too

People often use Modal UIs as a crutch, so we dont want to go to that too early.

Stanford CS193p Fall 2013

View Controller
Sometimes it makes sense to segue directly when a button is touched, but not always. For example, what if you want to conditionally segue? You can programmatically invoke segues using this method in UIViewController:
- (void)performSegueWithIdentifier:(NSString *)segueId sender:(id)sender;

Firing off a segue from code

The segueId is set in the attributes inspector in Xcode (seen on previous slide). The sender is the initiator of the segue (a UIButton or yourself (UIViewController) usually).
- (IBAction)rentEquipment { if ([Link] == Skiing) { [self performSegueWithIdentifier:@AskAboutSkis sender:self]; } else { [self performSegueWithIdentifier:@AskAboutSnowboard sender:self]; } }
Stanford CS193p Fall 2013

Segues
The segue offers the source VC the opportunity to prepare the new VC to come on screen. This method is sent to the VC that contains the button that initiated the segue:
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { if ([[Link] isEqualToString:@DoSomething]) { if ([[Link] isKindOfClass:[DoSomethingVC class]]) { DoSomethingVC *doVC = (DoSomethingVC *)[Link]; [Link] = ...; } } }

When a segue happens, what goes on in my code?

You should pass data the new VC needs here and let it run. Think of the new VC as part of the View of the Controller that initiates the segue. It must play by the same rules as a View. For example, it should not talk back to you (except through blind communication like delegation).
Stanford CS193p Fall 2013

Segues
Your Controller usually just always segues. But if you respond NO to this method, it would prevent the identied segue from happening.
- (BOOL)shouldPerformSegueWithIdentifier:(NSString *)identifier sender:(id)sender { if ([[Link] isEqualToString:@DoAParticularThing]) { return [self canDoAParticularThing] ? YES : NO; } }

You can prevent a segue from happening

Do not create dead UI with this (e.g. buttons that do nothing). This is a very rare method to ever implement.

Stanford CS193p Fall 2013

Unwinding
Some people think of this as reverse segueing. Used if you want to dismiss the VC you are in and go back to a previous VC that segued to you. For example, what if you wanted to pop back multiple levels in a navigation controller? (if you were only going back one level, you could just use popViewControllerAnimated:). The little green button in the black bar at the bottom of a scene can be used to wire that up. We will probably cover this when we talk about the Modal segue type (i.e. later). You need to master segueing forward before you start thinking about going backward!

There are also ways to unwind from a series of segues

This is the little green button.

Stanford CS193p Fall 2013

View Controller
Sometimes (very rarely) you might want to put a VC on screen yourself (i.e., not use a segue).
NSString *vcid = @something; UIViewController *controller = [storyboard instantiateViewControllerWithIdentifier:vcid];

Instantiating a UIViewController by name from a storyboard

Usually you get the storyboard above from [Link] in an existing UIViewController. The identier vcid must match a string you set in Xcode to identify a UIViewController there.

This UIViewController in the storyboard can be instantiated using the identier hellothere.

Stanford CS193p Fall 2013

View Controller
Sometimes (very rarely) you might want to put a VC on screen yourself (i.e., not use a segue).
NSString *vcid = @something; UIViewController *controller = [storyboard instantiateViewControllerWithIdentifier:vcid];

Instantiating a UIViewController by name from a storyboard

Usually you get the storyboard above from [Link] in an existing UIViewController. The identier vcid must match a string you set in Xcode to identify a UIViewController there. Lay out the View for a DoitViewController in your storyboard and name it doit1.

Example: creating a UIViewController in a target/action method

- (IBAction)doit Note use of [Link] again. { DoitViewController *doit = [[Link] instantiateViewControllerWithIdentifier:@doit1]; [Link] = [Link]; [[Link] pushViewController:doit animated:YES]; }
Stanford CS193p Fall 2013

Demo
Attributor Stats
Use a UINavigationController to show statistics on colors and outlining in Attributor.

Stanford CS193p Fall 2013

UITabBarController

Stanford CS193p Fall 2013

UITabBarController
View Controller

Tab Bar Controller

View Controller View Controller

You control drag to create these connections in Xcode.

@property (nonatomic, strong) NSArray *viewControllers;

Doing so is setting

inside your UITabBarController.

Stanford CS193p Fall 2013

UITabBarController
View Controller

Tab Bar Controller

View Controller View Controller

By default this is the UIViewControllers title property (and no image)

But usually you set both of these in your storyboard in Xcode.

Stanford CS193p Fall 2013

UITabBarController
View Controller

Tab Bar Controller

View Controller View Controller View Controller View Controller View Controller View Controller
Stanford CS193p Fall 2013

What if there are more than 4 View Controllers?

UITabBarController
View Controller

Tab Bar Controller

View Controller View Controller View Controller View Controller View Controller View Controller

More

button appears.

Stanford CS193p Fall 2013

UITabBarController
View Controller

Tab Bar Controller

View Controller View Controller View Controller View Controller

More

button brings up a UI to let the user edit which buttons appear on bottom row button appears.

View Controller View Controller

Stanford CS193p Fall 2013

More

UITabBarController
View Controller

Tab Bar Controller

View Controller View Controller

All

Ha

pp

ens

Au tom

View Controller

ati cal ly

View Controller View Controller View Controller

Stanford CS193p Fall 2013

You create a Tab Bar Controller by dragging it from the object palette.
Stanford CS193p Fall 2013

You can drag it anywhere. After you drop it, you can reposition everything.

Stanford CS193p Fall 2013

If things are a mess, you can double-click on the background of a storyboard to make everything smaller.

Or click here.
Stanford CS193p Fall 2013

You can arrange the scenes in your storyboard any way you want.

Stanford CS193p Fall 2013

When you drag a Tab Bar Controller into your storyboard, it comes with two prefabbed tabs. Often you dont want them.

Just click on an undesired scenes black bar ...

Stanford CS193p Fall 2013

... and hit delete.

Stanford CS193p Fall 2013

In the same way as a UINavigationController, a UITabBarController is itself the Controller of an MVC. Its View consists of other MVCs.

Stanford CS193p Fall 2013

And just like UINavigationController, just ctrl-drag to wire up your UITabBarController s View MVCs.

Stanford CS193p Fall 2013

This segue is called a Relationship Segue. This is the only segue well ever use with a Tab Bar Controller. You will always pick view controllers from the bottom of this list. By doing so, you are adding the MVC to which you are dragging to an NSArray @property called viewControllers in the UITabBarController that you are dragging from.
Stanford CS193p Fall 2013

Here is the Relationship Segue. You dont need to set an identier on it.

Another Relationship Segue.

Stanford CS193p Fall 2013

Note that room has been made at the bottom of each scene for the tab bar. This might cover up some of your UI and require some repositioning.

Stanford CS193p Fall 2013

Here we have
UINavigationController INSIDE a UITabBarController.

Perfectly legal (the opposite is not).

Stanford CS193p Fall 2013

The MVC at launch is still set to the UINavigationController. It needs to be the UITabBarController. Just drag this arrow ...

Stanford CS193p Fall 2013

... over near the UITabBarController MVC ...

Stanford CS193p Fall 2013

... and drop it (it will snap onto the UITabBarController).

Stanford CS193p Fall 2013

The name of each tab can be edited directly in Xcode.

Stanford CS193p Fall 2013

The icon for the tab can also be set in Xcode (using images from the asset library). Tab Bar icons are 30x30, alpha channel only.

Stanford CS193p Fall 2013

Coming Up
Friday
No Section

Next couple of weeks ...

Drawing in your own custom View class Gestures Autolayout Animation

No Lecture next Monday!

Stanford CS193p Fall 2013