[MUSIC]                         
>> Stanford University.         
>> Hey, well,                   
welcome to Lecture number 7,    
Stanford CS193P, Fall 2017. So  
our primary topic today is      
combining MVCs to make bigger,  
more powerful applications,     
obviously. And                  
then I'm gonna do a big demo    
that shows you how to do that.  
We're gonna do it with          
Concentration, we're gonna add  
an MVC into that app. Then      
I'll come back to the slides,   
and talk I'll about timer and   
choose classes, some of you     
used in the extra credit of     
the homework assignments. And   
then I'm gonna dive into        
the next topic and try and      
get as far as I can             
which is animation.             
Which will be our               
topic on Wednesday and          
I'll get to much more detail,   
do a big demo.                  
But I wanna kinda get in as     
far as I can today just so      
we have more time for           
a demo on Wednesday.            
Alright so combining MVCs,      
remember this slide from when   
I talked about MVC. This is     
the MVCs working together, and  
we saw that when we have        
MVCs working together,          
these other MVCs. Let me get    
my thing under control here,    
well, can't do it. Okay, these  
other MVCs down in the corner,  
they serve as part of the view  
of another MVC. That's          
the way MVC's relate. An MVC    
is a view, part of a view       
of another class. And that has  
some ramifications for MVC,     
most notably it has to have     
blind structured communication  
back to the other MVC.          
But that's the way we           
structure it, and that keeps    
everything well contained and   
understandable. So we're gonna  
talk about how we do that,      
how we make MVCs that are       
the view of other MVCs. So,     
combining MVCs we do            
this using some special         
controllers that iOS provides   
whose view is other MVCs.       
Now you could write your own    
special MVC whose view is       
other MVCs. But 99% of the      
time you're gonna use one of    
the three that iOS provides.    
And the three that iOS          
provides are TabBarController,  
SplitViewController, and        
navigation controller.          
Now there are other ways to     
combine MVCs we'll talk about   
later in the quarter but        
this is the primary way that    
we're gonna do it with these    
three MVC's. Those three here,  
TabBar, SplitView, and          
NavigationController, they are  
the controllers of MVCs. So     
let's look at them one by one.  
TabBar is by far                
the simplest one,               
you've seen this                
a million times, it's got       
some tabs along the bottom      
there. You see those tabs,      
like a little orange thing and  
the gray one's next to it. And  
each of those tabs, when you    
press it, shows another MVC.    
So you can already see that     
the TabBarController's view     
includes the buttons at         
the bottom and another MVC. So  
this is what we mean by         
the view of this tab bar        
controller MVC gives another    
MVC. And the icon and           
the title that appears          
down in the TabBar,             
that's determined by            
which MVC is showing.           
In specific UI view controller  
has this bar TabBar item.       
And the TabBar controller,      
when it shows the MVC as part   
of its view, it looks at that   
so it knows what the title and  
icon to display down at the     
bottom there. This is all very  
object oriented in that sense.  
So, for example here we've got  
some sort of health             
oriented API here and           
we've got the four tabs at the  
bottom. By the way, if there's  
more than four tabs, more than  
four MVCs, it can show that,    
actually, it'll show five.      
And if they're six, then        
the fifth one becomes a little  
more button and you click it.   
And iOS provides an API or UI,  
rather, for the user to pick    
which tabs they want to be      
there at the bottom, or         
to pick some other tab that's   
not showing. Generally though,  
we recommend no more than five  
MVCs in a TabBarController.     
That's kinda just               
pretty good UI,                 
It just starts to get           
a little complicated for        
the user if there's more        
than that. So, in this case,    
this whole thing is five MVCs,  
the TabBarController itself,    
and the four MVCs that          
serve as its view and           
you just switch between         
them by clicking.               
So this is by far the easiest   
Of the MVCs of MVCs,            
all right? Next, let's talk     
about SplitViewController,      
probably the second simplest    
one. It's only two MVCs in its  
view, and it puts them side by  
side with a very thin line in   
between them. So, here's        
a little calculator app,        
It's got the calculator on the  
left and then it's got maybe    
a graph of what's in the        
calculator on the right. And    
we call this MVC that's on the  
left, and it's usually smaller  
like this, the Master in        
the SplitViewController, and    
we call the one on              
the right the Detail. And       
we call them master detail cuz  
usually what you do on the one  
on the left affects what        
happens on the right. It's      
the master, the detail is kind  
of little bit of a slave. And,  
of course, this is on iPad. It  
also works on iPhone Pluses,    
but non-plus iPhones. This      
little side-by-side mechanism.  
You can, of course,             
rotate your iPad.               
And when you rotate your        
iPad into portrait, now         
it'll only show the detail,     
except for you can slide out    
with your finger from           
the left and see the Master,    
then slide it back. Now on      
an iPhone Plus in portrait,     
it acts like a normal iPhone,   
it doesn't have the slide out.  
Even if an iPhone Plus is       
not quite wide enough to        
slide that thing out. So,       
SplitViewController, super,     
super easy. And then there's    
NavigationController.           
This is probably the most       
flexible, most powerful of      
the MVC of MVCs, you've seen    
this a million times in IOS     
apps. You can think of          
a NavigationController MVC,     
as a deck of cards. And         
each card is an MVC. And what   
the navigation controller does  
is let you put an MVC on top,   
obscuring all the ones below.   
And then if you hit the back    
button, it throws that one      
away, and shows you the one     
that was there before. And      
you can keep going back, and    
it keeps showing the cards      
off the top, and                
you put new cards back on. So   
it's like a card stack, where   
the stack are MVCs. And you     
can see that the navigation     
controller as part of its view  
it does actually draw a little  
bit. At the top it draws        
a little title there, right?    
The settings, okay, that's      
not part of the MVC that's      
showing right there. But the    
content that are in that title  
are driven by whatever MVCs     
on top of the card stack,       
the one that's showing.         
So that's called settings       
because the MVC that's there    
is the settings MVC, so         
it's being driven by what's     
there. And each MVC,            
similar with the tab bar item   
and the tab bar controller,     
there's a var in UI Controller  
called navigationItem. And      
that contains things like the   
title and other buttons that    
you can put in the title bar,   
all kinds of stuff.             
You're gonna wanna go look      
at the documentation for        
navigationItem and              
see what kind of things         
the navigation controller can   
do for you when your MVC        
is on top of the stack. So      
if I then click on something,   
this is a table view here,      
we'll talk about table views    
next week or the week after.    
If I click on something here    
then a new MVC slides in,       
animates in on top. Now there   
are two cards on this stack.    
All settings one                
which is now behind,            
we can't see it, and now this   
new one on top of course.       
By the way you can              
also have tool bar              
items on the bottom using       
the tool bar items bar of view  
controller, so those two        
of our items would come and     
go as new ones come             
on the stack. But               
also notice that when we        
have two things on there,       
a little back button            
appears in the upper left,      
automatically. It even has      
the name of the one that's      
lower down on the stack of      
cards. And if you press that,   
of course it's gonna            
throw this card away, and       
we'll be back at the other      
card. But lets imagine I click  
on something in                 
this one like this              
accessibility thing.            
It puts a new card on there,    
that's the accessibility card.  
Maybe I click on something      
inside the accessibility card   
like larger text, and it puts   
another one on. Now we have     
four MVCs on the the stack.     
So there's a total              
of five MVCs here.              
The navigation controller       
itself which is an MVC, and     
these four MVCs which are part  
of its view. And of course we   
know we can backup if we        
pres the back button and        
it throws that button away,     
and it actually does throws     
the card away.                  
Throws it out of the heap.      
So it's complete throw away,    
this card now gets thrown       
away, we are just now seeing    
the card on the underneath      
until we go all the way         
the back, To the beginning and  
now we're seeing                
the root card, the root         
view controller, this is        
called a navigationController.  
All right, so everybody knows   
about navigationController,     
you've seen it everywhere.      
Here's how navigational         
controller's working behind     
the scenes in terms of looking  
at it from an MVC standpoint.   
So let's say I have a MVC       
that's shown there,             
and I have more API or          
more UI than I can fit on       
my screen, so I need to got to  
another screen to do more UI.   
That's the little thing in the  
corner right there. Well, to    
do that I have to make another  
MVC that will control that UI.  
And then when I make my         
navigationController            
to have them share the screen,  
the navigationController comes  
up and this is what its UI      
looks like. But as soon         
as you set a very important     
var in navigationController,    
call it rootViewController      
to be some MVC,                 
then its view now includes      
the view of that MVC. And       
then, if you interact           
with some button or             
something that's in             
that MVC's view,                
it can move to this other MVC,  
push it on the stack.           
Now the other MVC is still      
there, it's just kind of        
behind the scenes because it's  
lower on the stack, and a back  
button will automatically       
appear as we saw.               
When we click this back we      
move back to the other one,     
and notice that the MVC that    
we had originally added         
on there is gone. So it's       
very important to understand    
as we use                       
the navigationController,       
usually when we put things on   
we're creating a new one and    
when we take things off         
we're throwing it away.         
That is the normal operation    
of a navigationController. It   
can be used in other ways but   
that is it's normal operation.  
Okay, so those are the three    
kinds of MVCs of MVCs.          
How do you get at them? Okay,   
it's really easy actually.      
Each of those three different   
kinds of MVCs has a var called  
viewControllers, it's just an   
array of view controller. So    
for a tab bar it's just         
the view controllers one, two,  
three, four in order I          
think from left to right,       
the tabs. If it's               
a split-view controller,        
then view controller            
sub 0 is the master and         
view controller sub             
1 is the detail.                
Or sometimes we say the first   
thing in the array is           
the master and the last thing   
in the array is the detail.     
And if it's                     
a navigationController, then    
viewController sub 0 is the     
rootViewController, and all of  
these cards lined on top        
are the other viewControllers   
in the array in order. So       
that's how you can get at all   
the viewControllers that are    
in one of the MVCs of MVCs.     
Now, how do you get at          
the MVC of MVCs itself?         
How do you get to               
the navigationController,       
the splitViewController,        
whatever?                       
Well there's three awesome      
vars in UI view controller      
called tabBarController,        
splitViewController, and        
navigationController. And       
they will tell you the tabBar   
controller you're in, or        
the splitViewController you're  
in or the navigationController  
you're in. It might be in more  
than one, because you might be  
inside a navigationController   
as the master in                
a splitViewController.          
Which might even be in a tab    
of a tab bar controller, so     
you could be in all three of    
these things, and this will     
return what you're in. And so   
this way you can kinda get      
at the other MVCs that          
are involved in whatever        
combination of MVCs you have.   
So it's really good             
kind of access to things.       
Now navigationController,       
I wanna just briefly tell       
you about the API for           
it, it has a method             
pushViewController and          
popViewController, both         
can be animated. And            
that takes an MVC and puts it   
on the stack of your cars or    
popViewController pops          
the top one off. Okay,          
so you can do that pushing and  
popping, but we don't usually   
do it that way. We usually use  
what are called segues which    
I'm going to talk about         
in a moment here.               
All right, so                   
how do we wire all of this      
stuff in our storyboard up?     
Okay, how do we get these       
navigationControllers, and      
splitViewControllers and        
tabBarControllers all hooked    
up to our MVCs? Okay, well      
of course we do it with Ctrl    
drag in the interface field,    
we do everything with Ctrl      
drag, right? Constraints,       
outlets, actions, all of these  
stuff with Ctrl drag, and       
we use Ctrl drag to             
do this as well. So             
let's look at an example        
of a splitViewController.       
If I wanted to have             
a couple of MVCs and            
set them as the master and      
the detail in                   
splitViewController,            
I would just drag out           
a splitViewController from      
the same place I                
get a button or                 
something. It will come with a  
bunch of extra VCs by the way,  
view controller is kind of,     
that it comes with for fun or   
for free. I'm not sure why it   
does it. We usually almost      
always just delete them.        
And then we Ctrl drag from      
the splitViewController to our  
master and we control drag      
to our detail. Same thing with  
a tabBarController, we drag it  
out and then we just Ctrl drag  
to each of the MVCs in there.   
NavigationController is         
a little bit different and      
I'll show you                   
that in a moment.               
So this is what it looks like   
approximately in interface      
builder ,here's the calculator  
again. I dragged out            
a splitViewController there     
on the left, I just Ctrl drag   
to the master. I choose Master  
View Controller from the thing  
that pops up. I Ctrl dragged    
it to the other one,            
I choose detail, bam, I've got  
a wired up splitViewController  
right there. Couldn't be        
simpler. Now the split view     
can really only do it's         
thing fully on an iPad.         
Cuz there's just not            
enough screen real              
estate on other devices         
to really do this side by       
side thing, especially the      
portrait mode slide out thing,  
there's just not enough room    
there. So what we often do      
is wrap the master in           
a navigationController.         
And when we do that then        
the system can show it          
in a navigationController       
on an iPhone, and               
in a splitViewController        
on an iPad.                     
It'll automatically adapt,      
that's the word we use to       
describe that to                
the environment it's in.        
So that makes it really easy    
for us to build UIs that work   
on both. They work on iPads,    
they work on iPhones.           
Okay, same exact storyboard.    
So here's what that looks       
like, here's my split           
view with my master and         
my detail there, we're          
looking at the master. And      
I 'm selecting it and           
I'm going to the menu and       
I'm saying editor embed         
in navigationController.        
So instead of dragging          
the navigationController out,   
which I could do                
by the way and                  
just Ctrl drag them up, but     
instead of dragging it out you  
can actually do this embed      
in navigationController.        
And it will insert              
a navigationController MVC      
in as the master and make       
my previous thing that was      
the master be it's              
rootViewController.             
So, now I have                  
a navigationController          
wrapping around the master of   
my split view. Okay, this also  
has a nice benefit, it puts     
a title on your master,         
which is often nice to have     
a title of your master of       
your split view. Now you can-   
One thing to notice about this  
of course, is that now the      
master of your split view is    
no longer the calculator,       
it's a navigationController.    
So if you actually wanted       
to get out the calculator,      
you would have to               
get the master and              
then look at the master's       
rootViewController to find      
the calculator there.           
By the way, you can also        
put the detail, wrap it in      
a navigationController.         
The only reason you would ever  
want to do that is to give it   
a title bar, cuz you don't,     
you always navigate from the    
master, that's why it's called  
the master. So you can do it,   
but again if you do that,       
make sure when you look at      
the detail, if you find that    
it's a navigationController,    
you need to look inside and     
see the thing that's inside of  
it, the rootViewController.     
Or you can also use             
visibleViewController           
on a navigationController,      
that will tell you the card     
that's on the top,              
that's visible. All right, so   
that's how we wire up split     
views navigationControllers     
together. How do we make it so  
that when we click something    
in a view it causes             
some card to slide on, or it    
causes the detail of our split  
view to change, right?          
We're doing the calculator,     
we enter some equation,         
we press the graph button.      
Well in the iPhone we wanna     
slide a graph in front,         
on the stack. And on the iPad   
we want to replace the detail   
view with a graph of what's     
in my current calculator.       
So how do we do that?           
We do that with what's called   
segues. A segue just            
makes a brand new MVC,          
always a new MVC,               
I'm gonna say that three or     
four times, so that sinks in.   
Always a new MVC,               
it makes it and puts it on      
the top of the stack or         
puts it in the right side       
of a splitViewController.       
So here are the kinds           
of segues that exist.           
There is a Show Segue, that's   
the kind of segue that works    
in a navigationController.      
Okay, that causes               
the new MVC to be               
put on top of a stack if        
you're not Inside a Navigation  
Controller you probably         
shouldn't be doing Show Segue.  
Then there's Show Detail,       
that works in a split view. So  
Show Detail will replace the    
right side of the split view.   
Then there's Modal and          
Popover,                        
which I'm going to talk         
about later in the quarter.     
Modal takes over the entire     
screen. So forget about any     
navigation controllers or       
split view controllers, or      
tab view controllers. It takes  
over the entire screen and      
just fills the screen           
with the MVC.                   
We generally try to avoid       
Modal because it puts           
the app in this kind of stuck   
state where it's only the MVC   
that you've taken over          
the screen with is active,      
can be kind of disconcerting    
for the user but                
sometimes we do want            
things to be Modal. And         
then Popover Segue is kind      
of like a Modal segue but       
instead of taking over          
the whole screen,               
it just puts it up              
in a little popover.            
You've seen that on             
an iPad especially. But         
it's still modal because the    
background is grayed out and    
you can't interact with it,     
you can only do the thing       
in the popover. So              
we'll talk about those          
segues later in the quarter.    
Today I'm just gonna talk       
about show and show detail. So  
this is in red.                 
I'm just re-emphasizing that    
segues always create a new      
instance of the MVC. Segues     
always create a new instance    
of the MVC. This is important   
to understand. You're not       
gonna be reusing some MVC that  
you had on screen before. And   
we'll show in our demo today,   
what we can do about this if    
we really do want re-use of     
MVCs. By the way, the back      
button in a navigation          
controller is not a segue.      
That's just part of             
the navigation controller,      
so when you go back you're not  
creating a new MVC. You're      
going back to the one that      
was on the stack underneath.    
All right, so how do we         
make these segues happen?       
Ctrl-drag. We do Ctrl-drag for  
everything.                     
It can also be done             
in code as well, and            
I'll show you how to do         
that in the demo, too.          
So, if I have this calculator   
example. Here's my split view   
with the navigation controller  
around the master, and          
I've got a button               
in my calculator                
which is show me a graph        
of what's currently in          
the calculator. I just          
Ctrl-drag from that button.     
Down to the lower left          
here to my detail. And          
when I let go of the control    
drag a little black window is   
going to come up and            
there is it more detail and     
it will choose the show detail  
segway there. Okay, and         
that will create this little    
line. See the line that it      
created right there, which we   
can click on and inspect. And   
that little line is             
called a segue, so that's       
a thing in your storyboard      
that you can inspect.           
And why do you wanna            
inspect that little line?       
Mostly because you wanna give   
a unique identifier which is    
just a string.                  
So I'm gonna call this one for  
example show graph cuz that's   
what this segue does. And       
then in my code, I can refer    
to that segue by the name,      
show graph. Everything in       
interface builder files,        
all these storyboards, is       
always referenced by name. And  
the great thing about that is   
that you can copy and paste     
things to one storyboard to     
another as long as the names    
in your code are their right    
names, it'll just work.         
So that's why it goes by name.  
Okay, it does everything by     
name. Some people think it      
kind of can be a little         
annoying that you have to have  
these names that are exactly    
the same in the code and        
in the storyboard.              
But it turns out to be quite    
a flexible thing to do it that  
way. A little more work for     
the programmer to ensure that   
those things are the same but   
kinda worth it in flexibility,  
I think.                        
All right, so that's the main   
thing you wanna inspect.        
You can also inspect            
whether it's show detail or     
show, but you're gonna see      
that, in my demo, you actually  
don't wanna change that show    
detail to show right there.     
Your better off creating        
a new segue. Okay, so           
that's segues. So that          
identifier. Why do we want it?  
Where would we use it in our    
code? What's an example? Well,  
one way is you can perform      
a segue from code.              
So manually cause a segue to    
happen. Okay well to do that    
you need to know which segue    
it is in the storyboard you     
want to perform manually and    
so you can do perform segway.   
We don't usually perform        
manually. I'll show it in       
the demo we don't usually do    
it that often. Okay because     
the real way we do it is just   
the control dragging and        
that's gonna automatically      
segue from that button so       
we don't need to do             
it from the code. But           
the most important use of       
identifier is to prepare        
the MVC that you're segue to.   
Okay think about                
the calculator example. I       
press graph and it's going to   
show me a graph, presumably     
it's going to show me a graph   
of what's in my calculator.     
Well I have                     
to somehow let that new         
graphing MVC know what          
equation to graph.              
We call that preparing that     
MVC to do it's job and segues   
always create a new MVC so      
they always have to be          
prepared to do what they do.    
Makes sense? So we do that      
with a function called prepare  
for segues. This function       
is implemented in the MVC,      
that is causing the segues      
to happen. It's obviously       
the only one who could prepare  
the new MVC To be ready to go.  
This is what that               
method looks like.              
Prepare for segue. It has       
two arguments: the segue,       
which is a UI                   
storyboard segue.               
That segue mostly just          
has the identifier and          
also the MVC that               
we need to prepare.             
The MVC that it just created,   
that we're going to segue to    
the second argument there, the  
sender that's the button or     
the line in a table view. Or    
if you're doing it from code    
it can be almost anything,      
that's why it's of type any.    
That cause this                 
segue to happen,                
that could also be nil. It's    
happening, you don't know or    
care, who did it. So that's     
what those two arguments are.   
All right, now let's            
dive into this thing.           
The first thing we              
usually do is take a look       
at our identifier, our segue    
identifier which could be nil.  
Shouldn't be, you always wanna  
set an identifier in your       
story board.                    
But we look at it and           
here I'm gonna switch on it,    
although,                       
we can use if then on it, and   
find out which segue it is.     
And that's because an MVC       
can have multiple different     
buttons, each that segue to     
a different kind of MVC. So     
we obviously, have to           
prepare them differently.       
So, we need to know             
which one is which.             
So, that's why we check         
the identifier to see           
which segue we're talking       
about. Then, we need to get     
the MVC that we are segueing    
to and prepare it.              
Okay, well, segue.destination,  
that var segue.                 
That var destination in the     
segue object is passed to you.  
That is the view controller     
that you're segueing to,        
the brand new just created      
MVC, all right. But             
the type of that argument       
is not gonna be a graph         
controller or something like    
that, it's going to be just     
UI View controller.             
That's because Segue,           
UI Storyboard Segue Class,      
each var has to have a type,    
and it can't know               
anything about a graph.         
It was written by               
Apple years ago. It's           
a type UI View controller. So   
that means we have to use as,   
right, the typecasting          
to downcast it,                 
to the kind of MVC              
controller we think this is,    
based on which segue it is.     
So in this case,                
it's the calculator case, I     
think it's a graph controller,  
that controls one of            
these graphing things. So       
I'm going to downcast.          
If that fails,                  
then obviously I                
can't prepare it.               
That's why I do if let there.   
Okay, but if it doesn't fail    
then now I can set properties   
in the graph controller,        
call methods, whatever is       
necessary to get it to know     
what function to graph so that  
it can do its job. Okay, we     
prepare it. Cool, everybody?    
Everybody make sense?           
It's very important to          
understand prepare for segues.  
You can't do any multiple MVC   
stuff without understanding     
this method. It's the most      
important method in all of      
multiple MVCs, all right?       
Now, red again.                 
Look, some red on the slide.    
It is absolutely crucial to     
understand that when you're     
executing these yellow lines,   
you're preparing that MVC       
when that's happening.          
That MVC's outlets have         
not been set yet. So            
all those outlets,              
like in our Concentration       
the card buttons,               
the flip count, all those       
labels they're all nil. Now,    
they're implicitly unwrapped    
optionals, but they're still    
gonna get unwrapped when        
you try to access them.         
This will cause many crashes    
in your apps cuz you'll         
forget, oops, and               
during preparing,               
I accidentally accessed one of  
my outlets. Especially since,   
when you're preparing, you      
kinda want the outlets because  
you're trying to prepare the    
UI. But you have to get used    
to this fact that this          
happens before. I'm not sure    
why they made the decision      
to do this, but                 
it can be a pain. I mean,       
sometimes when you prepare      
the MVC that you're preparing,  
it's just collecting            
the information. And            
then, in its view did load,     
which is a function, remember,  
that we know is called after    
our outlets are hooked up.      
Then you talk to the outlets    
and parcel out the information  
or whatever.                    
So it can be annoying.          
But I'll intentionally          
crash in the demo, just so      
you can see this happening,     
because it will happen to you.  
All right, so that's            
prepare for segue. You can      
prevent a segue from            
happening with this method      
shouldPerformSegue in           
UIViewController.               
Okay, you get the identifier,   
if you return false from this,  
then the segue                  
will not happen.                
So some will click on that      
graph button, the system looks  
at this method. If it says no,  
then it will not segue          
to a new graph controller.      
It's just like you never even   
clicked on that button.         
This is pretty rare to do,      
but occasionally, you might     
wanna do it. All right,         
so let's see a demo             
of all the stuff.               
I'm probably gonna show you     
all this stuff in here.         
I think we have time for all    
of that. Yeah, we probably do.  
All right, so let's head back   
over to our Concentration. So   
what I'm gonna do here, this    
is Concentration as we left it  
off last time. I'm gonna        
change it to have multiple      
MVCs, so the new MVC I'm        
gonna add is a theme chooser.   
Remember how you all in your    
homework added theme to your    
Concentration game? You did,    
but it chose a random theme.    
So I'm gonna add a theme        
mechanism to mine, a simple     
one because it's a demo.        
And then, but I'm gonna have    
another MVC that lets me        
choose the theme. So, let's do  
that. Let's start by one thing  
I wanna do in here after I've   
been putting off, but I wanna   
do is now that I have multiple  
MVCs, I do not want any of my   
MVCs to have their controller   
called view controller. Okay,   
that's just way too generic.    
Okay, I'm gonna                 
have multiple MVCs.             
I want each one to have         
the class of controls.          
It'd be, you know,              
nicely named. So here,          
I'm going to go, Oops,          
controller here.                
And I'm gonna rename this.      
And the way to rename this,     
you can't just type             
in a new name here.             
Because this also appears       
in the storyboard by name.      
Everything in the storyboard    
is by name. So                  
the way to rename here is to    
do the special Cmd+Click,       
remember that menu?             
And choose Rename and           
the Xcode will go and look at   
all the places that is used.    
And now I'll just type in,      
I'm gonna call this my          
ConcentrationViewController.    
Because it's the view           
controller that controls this   
view controller right here, my  
Concentration game, all right?  
Okay, so let's go and add       
this theme support to my app.   
I'm gonna do it super simply.   
Here's where all my emoji       
stuff is. I'm just gonna add    
a var called theme, which I'm   
gonna have be an optional       
string, which is one of these.  
Okay, so my theme, when you     
set my theme, you just set      
the emoji you want, and that    
is the theme. Okay, so like,    
this would be the Halloween     
theme if we pasted in here.     
And when its didSet happens,    
I'm just gonna reset my emoji   
choices to equal this theme.    
By the way,                     
this is an optional.            
It's gonna start out nil,       
and if you set it to nil,       
then I'll just have no          
emoji as your theme.            
In which case, you're gonna     
end up getting this question    
mark if you'll remember,        
if you don't have any emoji.    
And then I'm also gonna reset   
the emoji that we have used so  
far because it might be         
from a different theme.         
So I'm gonna reset it,          
and by the way,                 
all I need to do to create      
an empty dictionary is that     
because Swift is gonna be able  
to infer the type from this.    
So I don't need to put          
card and string in here.        
And finally, what if            
someone sets my theme, and      
I'm in the middle of a game?    
I think I'd better update my    
view from my model. Okay,       
remember updateViewFromModel,   
so that whatever is showing,    
if it's got the wrong theme,    
will update to my new theme.    
Okay, so that's it.             
That's how I'm gonna do my      
theme. it's really simple,      
probably a little too simple.   
Another thing I'm gonna do is   
that, since we now let the      
theme be set, I really don't    
want this Halloween color       
theme here. So I'm gonna        
change all these things to be   
a more kind of standard color.  
Blue, blue is this default      
blue right here is              
probably one of the most        
standard colors, so             
let's make everything here be   
blue. I'll have to change up    
my code as well, easy to        
change here. All right,         
and then, the background        
doesn't wanna be black,         
it's very unusual, we're        
gonna make that white. And      
then our flips down             
here wants to be black,         
just standard color black,      
where's black, there it is.     
So now our UI looks a little    
more standard color.            
Let's go do the same thing      
in our code over here.          
Concentration ViewController,   
see we've got                   
these colors here,              
so this orange right here,      
which is the back of the        
cards, we'll make that blue.    
We don't want the card's        
background to be white, and so  
our overall                     
background is white.            
So I'll just make it            
be light gray, so               
that we can see the edges       
of the cards better. And        
then I also,                    
we have our flip count label,   
we'll make that be black.       
Okay, so I've added the theme,  
I've changed my color scheme.   
Let's just run and make         
sure I haven't broken anything  
here before we dive in.         
Okay, so                        
we got this blue theme, and     
we got the Halloween default,   
kind of our default theme,      
looks like it is                
functioning properly.           
We're even getting              
our outline font. And           
we've got normal colors here.   
Okay, so now let's go and       
add this other MVC, right?      
We've got this MVC,             
we need another one. How do we  
add an MVC to our app? Well,    
we just go over here, same      
place that we get a button or   
a label from. The very top      
one is View Controller.         
I just drag it out and          
drop it in.                     
So now I have two MVCs,         
two view controllers here.      
We call these things,           
by the way,                     
each one of these things a      
scene, S-C-E-N-E, scene. Okay,  
so, we, we have these two       
view controllers right here,    
two MVCs, and one, a couple     
things I need to do here.       
One is, every time I have       
a view controller, it needs     
a view controller subclass to   
control it. This one has one,   
ConcentrationViewController.    
We need to make one for         
here. And I do that             
with File > New File.           
That's always how I             
create a new class. And         
it's a UI thing, so I'm         
gonna do Cocoa Touch Class.     
It's a subclass of              
UIViewController.               
I'm gonna call this my          
ConcentrationThemeChooserView-  
Controller. Nice long name      
right there, won't have to      
type it very much though. And   
I'm gonna make sure not to put  
it at the level of my project.  
I'm gonna put it down a level,  
where all my files are,         
are there. And here we go.      
This is our viewController.     
We're gonna get rid of          
these viewController lifecycle  
methods like we always do.      
And that leaves us              
with this one method,           
all important prepare(for       
segue. So we will get back      
to prepare(for segue) there,    
and implement it quite soon.    
But the first thing we just     
do is the same thing you did    
when you dragged out a blank    
UI view. What did you do?       
You went to the identity        
inspector over here. And        
you changed its identity        
to be your custom subclass.     
So we wanna do the same thing   
here. So I'm gonna select this  
guy, I'm gonna go here to       
the identity inspector.         
I'm gonna change it from being  
just generic UIViewController   
to being my                     
ConcentrationThemeChooser       
ViewController.                 
Okay, don't forget that step.   
If you don't do that step,      
then your prepare(for segue),   
for example,                    
will never get called.          
You won't be able to create     
any outlets, or any actions,    
or anything. You need to do     
that. Another thing I'm gonna   
do is this little arrow,        
you see this arrow right here?  
This is the arrow that          
says when this app runs,        
which view controller do        
I show first? Okay, and         
obviously now, I wanna show     
the theme one first. So         
I just, you can just pick this  
up and drag it to whatever MVC  
you want to be the first one.   
All right, so here's my theme   
chooser right here. If we were  
really doing this for real,     
this would probably be a table  
view. Or some extensible list   
of themes, that I could add     
more themes to with one line    
of code, like you were asked    
to do do in your homework.      
But I haven't taught you table  
view yet, so I can't do it      
that way. Instead, I'm just     
gonna have three buttons,       
each of which is a theme.       
So, I'm just gonna grab three   
buttons here, and               
make this nice UI to this MVC.  
We'll make the font nice and    
big, so you can see it.         
Go over here, and maybe 40      
points or something like that.  
And we need three of them so    
I'll copy and paste,            
and then paste another one.     
Okay, so,                       
the three themes that I have,   
I have a Sports theme,          
I have a Faces theme, and       
I have an Animals Theme. So     
these are my themes. Lets do    
a quick review of auto layout.  
I'm going to select these and   
put them in a stack, with this  
button down here. Then in       
stack view, here they are.      
I'm going to make them be       
centered in the stack.          
And I'm going to make           
them be equal size.             
And I'm going to pick           
a standard spacing, like that.  
I'm also going to put           
this in the center,             
and do my control drag          
to my outer level, and          
have the center,                
horizontal and vertical there.  
Notice I get the yellow. That   
yellow is just warning me,      
that these frames will be       
different at run time.          
I can fix that in               
the document outline.           
If you'll recall this           
little guy right here,          
with this yellow button in the  
upper right, and go here, and   
then click on anything          
that's yellow. And              
it can fix the misplacement     
for me by updating the frame,   
so we'll do that.               
It moved it slightly, and       
now everything is resolved.     
Okay, so this is great.         
I got my nice UI here,          
I've got auto layouts, so       
it should work when I rotate,   
and do all those things. So,    
now all I need to do is wire    
these two MVCs up. Okay,        
make it so that when I click    
on one of these buttons,        
it shows this MVC over          
here on the right. And I        
do that with control drag. So,  
I'm just gonna control drag     
from the sports button over     
here. I'm gonna put this        
in a navigation controller      
to start anyway.                
So I'm gonna pick Show here,    
not Show Detail which is for    
split views, I'm gonna pick     
Show. Okay, let's do the same   
thing with this one. That's     
also gonna be a Show, and       
this one here also a Show, so   
they're all going to Show. And  
I want to make sure to          
click on each one of them,      
it's nice it shows you what's   
causing the segue here, and     
go over here to                 
the inspector and               
change the identifier.          
What does this segue do?        
It basically let's you          
choose a theme, so              
I'm going to call this          
Choose Theme, and I'm gonna     
call all three of them,         
identify with Choose Theme,     
because all three of them       
do exactly the same thing.      
They choose a theme,            
all right?                      
Now I'm gonna do something      
kind of bad, in fact not kind   
of bad, very bad, which is      
I'm gonna look at the button    
that caused the segue to        
decide which theme to show.     
Can anyone think of why         
that would be really bad?       
Should never do that, no        
guesses? Because, what happens  
when I convert this to French,  
or Chinese? Am I gonna have my  
code have to have French,       
and Chinese in it so            
that it works in those          
languages, no makes no sense?   
So you never really want to     
drive your code from something  
that's in the UI,               
cuz your UI is gonna be in      
40 different languages,         
you hope if your app            
is successful. But for          
downloads it's really good,     
because it's very little code,  
and I can do it quickly.        
So this is download ware,       
do not copy this aspect of      
what we're doing today.         
All right, so we have created   
these segues right here.        
Lets go ahead and run and see.  
Wait, one more thing we have    
to do. We're missing an MVC.    
We've got the first card on     
our stack, the second card of   
our stack, but we don't         
have the stack itself.          
We never have put a navigation  
control, which we could get     
from here by the way. If you    
go down and look here, right    
here navigation controller.     
I could just drag it out, and   
then control drag               
to wire it up, but              
I'm going to use that embed     
that I was telling you about.   
So I'm just selecting           
this view controller, and       
doing editor, embed in,         
navigation controller.          
Now we have three               
MVCs here okay,                 
the navigation controller, the  
first card on the stack, and    
then the one that we're going   
to push on to the stack Okay,   
are we cool with that?          
All right so now let's run,     
and notice it automatically     
moved the arrow when I          
embedded that,                  
which is kinda nice. So,        
let's hope this works,          
and see what happens.           
All right here's our UI,        
all right. Okay, it came into   
the right space at least which  
is our chooser. Let's see if    
when we choose one of these     
themes, if it will segue to     
that other MVC. In fact let's   
move it out of the way, so we   
can see what's going on here.   
Ready go, woo hoo it did it.    
But, the theme is Halloween.    
So, how about animals,          
still Halloween. So of course   
this is still Halloween,        
because we never did            
anything to actually            
prepare that MVC to be one of   
these themes, right? We just    
put the name here, we didn't    
actually do the prepare. So,    
our next step is to prepare     
this MVC, that gets put on to   
the top of the stack of cards   
to have the right theme.        
So, we're gonna prepare that.   
So, let's go do that. And       
we do that in the code of the   
ConcentrationThemeChooserView-  
Controller, right? That's the   
controller that we're choosing  
the theme. So,                  
let's uncomment out             
this all-important              
function right here. And        
get rid of the comments. And    
we gotta implement prepare.     
So, what do we have to          
do to implement prepare?        
Well, the first thing,          
as I've talked about before,    
is we're gonna check to see     
which segue we're doing.        
Now, we only have one kind of   
segue. So let's check for it,   
and if the identifier equals    
the Choose Theme segue,         
that's what we put              
in the inspector,               
remember in the storyboard.     
Then we want to see if we can   
find the Concentration          
game MVC and                    
prepare it by telling           
it its theme. So,               
let's get the theme. How        
are we gonna get the theme?     
Well, to speed things up I      
actually created a little       
code snippet here, that         
creates this dictionary. So     
this dictionary, it's just      
got the name of the theme,      
which is the same as            
the button title,               
that's why I'm saying           
that's bad design, and          
then the theme itself.          
All right so there's sports,    
there's a bunch of animals,     
there's a bunch of faces. Okay  
so, we want to get that theme.  
So, we're going to get the      
name of theme from the button.  
That's this sender argument,    
the sender is the thing         
causing this segue. So,         
we want to say something like,  
if we can let the themeName     
equal the sender's              
currentTitle, then we're gonna  
get the theme from that. But,   
this we can't do because        
sender, what type is sender?    
It's of type Any,               
optional Any, in fact.          
You can't send an optional Any  
with the method currentTitle,   
that's a button method.         
Okay, so we're gonna have to    
use as, any time we see Any     
we're almost always gonna have  
to use as. So I'm gonna say,    
if I can let button equal       
the sender as a UI button,      
then I can do this theme main   
thing. Because I now have       
a var of this button which is   
of type, Button, UIbutton,      
all right. So, now I can say    
button.currentTitle. So you     
see how we used as to resolve   
that ending right there.        
Now that we have the theme      
name, I can say if I can let    
the theme equal my              
themes sub theme name.          
Then I'm ready to go            
to prepare, right?              
And we're just looking at       
this theme as this. So          
I'm looking it up, and we know  
that that can fail of course,   
because maybe this theme name   
is not in this dictionary. So   
that's why we if let. By the    
way, these two if lets are so   
related to each other we would  
almost certainly go up here,    
and put them on the same line   
with a comma. Cuz they really,  
really go together.             
By the way,                     
we probably wouldn't            
do this line either.            
We'd take this and              
put it right here.              
In fact,                        
I'll show you how to do that.   
So, instead of creating         
a separate bar here, I would    
just take this right here out   
of that, get rid of this,       
put parentheses around this.    
Since this could return nil     
I need to optional chain it.    
And now I can get rid of        
all this. This is how we would  
write this code right here.     
We wouldn't have all            
those extra if lets,            
we try to make this concise     
because this is all             
has to do with the same thing   
which is getting this theme.    
If you didn't understand        
what I did right here.          
Ask on Piazza, go to a TA,      
go back and do your reading     
assignment, this is important   
to understand what's going on   
here. Alright, so I got this,   
now I've got the theme,         
now I need to prepare           
the destination.                
So I'd like to say something    
like segue.destination,         
set your theme to be            
this theme. Oops,               
not that theme, this theme.     
But I can't do that either.     
Because again,                  
this segue destination,         
let's look at the type of       
this segue destination.         
Option click on it. It took     
type UI view controller.        
And of course, UI view          
controller does not have        
the var theme so                
we can't do that.               
So we have to say here use as   
and say if we can let CVC,      
Concentration view controller,  
equal the segue destination as  
downcasted to a Concentration   
view controller. Now we can     
compare, prepare this thing     
by setting it's theme.          
Everyone see that? See how      
we're using as to downcast?     
Super important to understand   
that. So now that's it,         
we have successfully prepared   
this thing. So let's go,        
run our app,                    
see how it works. Okay,         
hopefully Sports. No, what's    
going on? My app crashed.       
Why did my app crash?           
No, Let's take a look and       
see if we can find out here.    
It says,                        
unexpectedly found nil while    
unwrapping an Optional value.   
And here's my call stack here   
on the left and it looks like   
card buttons here. My outlet    
to all my card buttons is nil.  
Let's make sure that's true.    
PO card buttons nil,            
no. So, let's go back           
up to call stack and            
see how we got here. Okay,      
so we're in update view for     
model. That got called          
from setting the theme.         
Cuz when we set our             
theme we update                 
the view from model. And that   
theme setting got called for    
preparing. So, the preparing    
is work it's trying to prepare  
it in setting the theme.        
But when it sets the theme it   
calls updateViewFromModel       
which tries to access the card  
buttons which is nil, because   
of that red on the slide.       
Which is that your outlets are  
not set when you're preparing.  
Okay, so what do we do          
about this. Unfortunately,      
even though this is an          
implicitly unwrapped optional,  
we're gonna have to check and   
see if cardButtons does not     
equal nil. And if cardButtons   
does not equal nil,             
then we can update our          
view from our model. But        
if it's not nil then we, if     
it's nil then we simply just    
can't do this. Now, hopefully,  
somewhere later in our code     
either in viewed load or case,  
when someone touches a card,    
update view from                
model happens.                  
And so, everything's gonna      
be fine, cuz all the cards      
are faced down until someone    
touches one, so we're good to   
go. So it's very important      
to understand, you've got to    
protect your code that can be   
called when your MVC is being   
prepared. Okay, now,            
let's try again.                
Let's try Sports.               
All right, it segued.           
Let's cross our fingers that    
these are sports related, and   
they are, excellent. The game   
is working just fine. Let's go  
back, we're gonna hit back,     
when I hit back, that sports    
game got thrown away. So now,   
when I pick animals, and        
go forward, look, brand new     
MVC. Game started over, and     
it's animals, so that's good.   
Go back over here, Faces.       
Brand new MVC. Segueing always  
creates a brand new MVC.        
It's a very good example        
of that happening,              
all right. Now let's do iPad.   
This is the first time we've    
done iPad in this course and    
you're going to be doing        
it from here on out and         
you're going to have to do it   
in your next assignment. So     
let's do this, let's take the   
app that we have right now and  
see what it would look like in  
our story board on an iPad. So  
here we're looking at it        
in iPhone X view here,          
I'm just gonna switch over and  
look at it as an iPad.          
And you can see that as         
an iPad it's really large so    
maybe I wanna zoom              
out a little bit so             
I can see it a little better.   
And this UI doesn't look very   
good. Look at all this          
extra white space around.       
If I had an iPad app and it     
looked like this, I'd be like,  
this is a terrible design. And  
it's kind of a waste because    
we really would a split view    
where this is on the left and   
this is on the right.           
That would be a much more       
effective use of the space,     
especially in landscape.        
Imagine this in landscape       
with this part on the left and  
this on the right,              
that would be really            
good use of space there.        
Okay, so that's what we wanna   
do. How are we gonna do that?   
Of course, we need              
a split-view controller for     
that. Now, I recommend          
anytime you add a split-view    
controller to your app,         
that you zoom way out.          
Okay, really, really far out.   
And that's because when you go  
over here to grab one of these  
split views and you get all     
those extra views that come     
with it, it's gonna be really   
big. See, so it's nice to       
have your scale be small.       
So I'm gonna drop this in       
here. And you can see this      
has dropped the split           
view controller here. And       
then it gave me a navigation    
controller and a master and     
a detail. Okay, I don't         
want any of those things.       
So I'm just gonna               
select them and delete.         
Right, cuz I already have my    
master, it's right here, and    
I have my detail right here.    
So let's move this up, if I     
can grab a hold of it it's so   
small. So we can do that and    
I'm even gonna move my detail,  
right here. If I can grab it,   
it's hard to get a hold         
of it when it's small.          
Over to here so that I can      
easily control drags. So let's  
zoom back in now that we've     
collected everything here.      
Get that out of there. And      
two things I want to do, one,   
I want to get this arrow to     
be here on the split view       
controller so that my app       
starts with the split view      
controller. Doesn't start       
with the master showing.        
Then I'm just going to          
control drag to my master and   
choose master view controller   
right here. And then I'm gonna  
control drag to my detail and   
choose Detail View Controller.  
Now notice I still have         
these segues right here.        
So my master when I'm clicking  
these is still trying to segue  
to this view controller. So     
let's just run on an iPhone,    
on an iPad rather and           
see if this works on iPad.      
We put it in a split view.      
Let's just try it.              
Let's see what's going          
on here. Okay so                
here's my iPad, wahoo,          
it looks like it's working,     
right? We've got our master on  
the left we've got our game     
here on the right,              
okay, looking good.             
Let's go ahead and              
choose a theme. Oops,           
that's not good. That's not     
what we want. Look at that.     
Now why is that happening.      
When I click Choose This,       
I want this over here to        
change to a new sports game.    
Why am I getting it in here?    
Well,                           
that's because of               
the type of these segues.       
You see these segues?           
They're all Show Segues.        
Show Segues mean do the         
navigation controller's trick.  
I want show detail, also        
know as replace because it      
replaces the detail view        
of your split view. Now,        
you might think let's just      
change it, oops we changed it.  
Okay, there is a bug interface  
builder, this does not work.    
So do not try to just           
change your kind here.          
I'm not sure under what         
circumstances it doesn't work,  
but it often does not work. So  
what we're gonna do is delete   
them. I'm just selecting them   
all and hitting Delete. And     
I'm gonna rewire them up. It's  
a simple matter to rewire them  
up. And this time I'm           
gonna choose Show Detail.       
It lets me show you             
acquiring it and                
hitting Show Detail, which is   
kind of a nice side effect.     
I'm gonna wire all              
three of these up, and          
which is not that bad.          
But, unfortunately, I also      
have to inspect them            
all right here and              
put the identifier back         
into steam for all three.       
And you can see that all three  
of them are of kind show        
detail now. Show detail,        
show detail, show detail. So    
now when we run                 
it's gonna work.                
Okay, here we go,               
cross our fingers. So           
we've got this is the           
Halloween style. And sports.    
Now again, it created a new     
game, hopefully with sports.    
Animals, new game               
with animals.                   
Now, the real question here     
is did we break the iPhone      
version here? Cuz we did        
a lot of iPad work here.        
We added this split view,       
which we know doesn't work      
on an iPhone at least not in    
iPhone Plus. And                
we changed these segues to be   
Show Detail. And the iPhone     
can't show split views, so      
it can't show detail.           
Did this break everything?      
And the answer is no. Because   
iOS is really smart and         
it knows that if this           
structure of having a split     
view with a navigation          
controller inside it,           
even with Show Detail things.   
That when we're on the iPhone,  
this means do it all in         
a navigation controller. So     
this is called adapting to      
a different trait collection.   
And we'll talk about            
that when we talk more          
about auto layout. But          
here's our UI appearing here.   
One thing interesting to        
notice here, it didn't come up  
showing the Themes, it came up  
showing again with the default  
theme. Now I can go back and    
choose a theme and it worked.   
But interestingly it comes up   
when. When it first comes up,   
it comes up with this           
default theme. And              
that's just a decision they     
made, some apps want this,      
some apps don't. I guess Apple  
figured this is the most        
common one. In our example,     
we don't want that.             
We would want it coming         
up with this, right? So         
if we have time in our demo,    
we'll fix that. So to do that,  
we have to become the split     
view's delegate so              
it's a little bit of            
complicated work.               
The code's not complicated,     
but being a delegate, you guys  
have not seen much yet, so      
we would have to do that. But   
otherwise, notice that          
it's working just fine.         
Okay, and notice that in        
landscape on an iPhone,         
it does not do the              
side-by-side split view thing.  
It uses the whole screen.       
However, on an iPhone Plus,     
like let's look at              
the iPhone 8 Plus and           
run it there. On pluses,        
it does do the split view.      
You see? This is doing          
the split view here,            
faces, sports. So it's          
doing the split view here.      
But in Portrait mode, it does   
navigation controller. See      
look there's a Back button. I   
can't slide out from the left,  
when I pull out from the left   
it goes back in the navigation  
controller. So an iPhone Plus,  
iPhone 8 Plus, iPhone 7 Plus,   
those are kinda hybrid devices  
half way between an iPad and    
iPhone. All right, let's take   
this one step further and       
put this whole thing in a tab   
bar controller. Just so         
you can see what this looks     
like. Again, really easy.       
I'm gonna zoom way out again.   
Anytime I drag these view       
controllers out they bring      
a bunch of extra junk. So       
here's a tab bar controller. I  
just drag it out. Here it is.   
It brings it out. I don't       
know if you can see it.         
But it actually gave me two     
little blank view controllers   
right there,                    
which I'll go ahead and leave.  
I'll just leave them there.     
It has three tabs total.        
So let's see if we can          
get hold of this and            
drag this up here. So           
I'm gonna leave these two that  
are brought out as tabs and     
then I'm gonna control drag to  
my split view to make it be     
relationship view controller    
here that's how you add it.     
It's not a segue. It's just     
adding it as a view controller  
right there. And                
we can zoom in see what it      
did there. Here's my tab        
bar controller. If you zoom     
in you can see it says tab bar  
controller right there. And,    
of course, I wanna move this    
little arrow arrow to here so   
it starts in the tab            
bar controller.                 
You can set the attributes      
about that the little tab has,  
here in the storyboard if you   
want. You see right here?       
If you click on it. Like this   
is my Concentration game so     
I can say Concentration. These  
ones that it added down here,   
lets see what it has for them,  
maybe we'll just leave it.      
It has item one. And item two   
are the two things that has,    
we'll just leave it like that.  
And you can click on these and  
not just set the name           
that it uses.                   
Where are we? So when you       
zoomed in it's hard to find     
where the heck you are.         
So that's when we often zoom    
way out. So we can also click   
on this thing and               
set things like the image.      
By the way, this image that     
goes into this tab bar item.    
Okay, it's an alpha only        
image. So all the drawing you   
do is either with transparent   
pixels or opaque ones.          
And if they're transparent,     
then kind of iOS is gonna       
shine light through those       
transparent pixels and          
that's what's gonna show        
up as your tab bar.             
The other thing you can do      
that's kinda cool is you can    
reorder the tabs. So            
here I've got my three tabs,    
Item 1, Item 2. Let's move      
our Concentration one to be     
the left most tab. Okay, so     
let's run it again. We'll do    
it on an iPhone 8 Plus. It      
doesn't really matter. Okay,    
here we go. You can barely      
see these tabs on the bottom.   
I don't know if it helps        
to make it any bigger.          
But there they are.             
There's the Concentration tab.  
Here's Item 1 tab.              
Here's Item 2.                  
They're blank. If we go         
back to Concentration,          
we still have our               
full UI here. Okay,             
it's just in a tab right there  
and same thing if we rotate.    
Got the three tabs here.        
Okay, so that's bar. So         
it's really, really simple.     
Okay. Lets talk about another   
little bit wonky thing with     
this app that we have.          
I'm going to run it on the      
iPad again. And just note that  
it does. Actually before I do   
that even I'm going to do one   
other thing which is lets show  
you how to make a segue from    
code. Okay so the segues that   
we have here are just directly  
from these buttons like if I    
click on a segue it's directly  
from a button to the MVC.       
There is a way to make it so    
that you do this performed      
segue business in code without  
performed segue lines. So to    
show that I'm going to delete   
these segues. So now the        
buttons no longer segue and     
instead I'm gonna segue from    
code. And I'm gonna do that by  
changing these buttons.         
Instead of being seguers,       
they're going to do             
target action. So               
lets just bring them up here.   
Zoom in a little bit. And       
just do our normal              
target action.                  
So this is nothing different    
than you been doing target      
action all quarter long.        
I'm just gonna control drag     
from the button here,           
and create an action.           
I am going to call this         
action ChangeTheme,             
because that's what it's        
going to do. Just for fun,      
you know where usually I say,   
set this UI Button or else.     
Well, actually now you don't    
need to set that UI Button or   
else because you know           
how to deal with Any. So        
I am going to connect this      
with any as the argument.       
Okay the sender instead of      
being UI Button its Any,        
and you know how to deal        
with that now. Okay,            
you didn't before,              
but now you know,               
with the as you can deal with   
that. And we'll put on that,    
we'll have all three buttons    
send the same thing right       
here. So I'm gonna put          
a choose theme segue in here,   
but its not gonna be            
from a particular button.       
It just gonna be a segue from   
this view controller to this    
view controller. So it's        
kind of like a generic segue    
between these two. So how do    
you create a segue like that?   
Well, you control               
drag like a buttons,            
but instead of control          
dragging from some UI element   
You control drag from this      
little round yellow thing.      
You see that's just             
Concentration theme control.    
This right here represents      
this MVC. This is the thing     
you can use to drag from or     
to, to mean this MVC.           
So, I am going to               
control drag from here          
to here. Okay, it's going to    
be showed detail, because we    
are in a split view context.    
I am gonna go here and          
still give it a name. The same  
name, choose theme, and now,    
I've created a segue between    
this view controller and        
this view controller,           
not between these buttons.      
See when I click on             
these buttons, or               
when I click on this it's       
not selecting these buttons.    
It's selecting the whole        
view controller.                
So, this is how you do          
a manual segue. You create      
a segue between the two view    
controllers. And then, in your  
code you just say performSegue  
with that theme name.           
Okay, or you may, or            
may not want a segue here.      
Now, you can also use that      
should perform segue method to  
conditionally segue, but I'm    
gonna show you how we can do    
conditional segue right here,   
a really good example of it.    
So, let's go back to our iPad   
Pro that we had running here.   
And I'm gonna put a cool        
feature in here, which is if    
I'm in the middle of a game,    
and I hate sports, it's         
not going to replace this.      
It's going to actually change   
the theme on the fly and        
not reset the game. Wouldn't    
that be a kind of better        
UI here? We don't really wanna  
start a new game every time we  
change the theme. So,           
if I am gonna do that,          
I can not segue.                
You see why I can't segue and   
do that? Because segue always   
create a new MVC, so there's    
no way for me to segue and      
keep this MVC like it is.       
So, I have to do this in code   
instead, so in change theme     
here, instead of segueing.      
I'm going to look in my         
split view controller, and      
find this find this little      
view controller over here,      
and talk to it directly.        
Just gonna talk to it,          
I'm not gonna segue to it, I'm  
gonna see if I can find it.     
And if I find it there,         
I'm just gonna talk to it,      
and tell it to change           
its theme. Okay, so             
how I'm gonna do that?          
So, now, I'm gonna put that     
code back that I deleted        
this themeName here. And        
if I have a theme, then inside  
here, okay, inside this         
thing I'm going to talk to the  
detail of my split view. So,    
this is gonna be a thing        
where if I'm in split view,     
and I can find my detail        
I'll just talk to it and        
tell it the theme otherwise,    
I'll do the performSegue.       
So, that's what I mean about    
conditional performSegue here.  
So, I'm gonna find out, find    
that split view controller by   
saying, if let cvc = and then   
I'm gonna create a little var,  
which is my                     
splitViewDetailConcentrationV-  
iewController, which might be   
nil, if I can't find it. So,    
I'm going to do that, and       
then if I can find that,        
then I'll get the theme and     
set the CVCs theme equal        
to this theme. There we go,     
like that. Else, I will         
perform segue. So, everyone     
see what I'm doing here. So,    
I just have to implement this.  
This is going to be a var       
that finds my split view        
detail controller as a          
concentration view controller.  
So, that's going to be          
a private var called this.      
Copy. Paste.                    
It's going to be of type        
Concentration view controller,  
optional though, because I      
might not be able to find it.   
And I'm just gonna return the   
splitViewController I'm in if   
any, dot its viewControllers,   
which is the master,            
an array of the master and      
the detail, right? Dot last,    
which should be the detail as   
a ConcentrationViewController.  
So, if all the optional         
chaining, and                   
then as make it through here,   
then I was able to find         
the ConcentratonViewController  
in my splitViewController's     
detail.                         
See what I'm doing there?       
Okay, and                       
if I'm able to do that,         
then I'll set the theme here.   
So, let's see if this works.    
All right, here we go,          
let's try it. So, we've got     
our Halloween theme here,       
that's great. Now, I'm gonna    
hit sports, hopefully,          
it will not reset the game,     
cuz it will hopefully find      
this Concentration view         
controller. Woo hoo! It just    
reset the theme, didn't reset   
the game, cuz we didn't segue.  
We did this, instead,           
of segueing. All right, what    
about this on the iPhone? This  
is going to work on iPhone?     
Let's go over there and         
see. Okay, so                   
let's go back, actually, let's  
pick one here, let's say like,  
here's ours sports one.         
Now, let's go back and try and  
change it to animals and see.   
No, it didn't work.             
And why didn't it work?         
Because, oops.                  
Sorry, because we only can do   
this if we're in a split view   
controller that has a detail    
view controller. And on the     
iPhone there is no detail in    
the split view controller. We   
use the navigation controller   
to get to it. So, how would we  
fix this on an iPhone? Well,    
on an iPhone what we are going  
to have to do is grab ahold of  
an MVC that we segue to, and    
hold on to it with a strong     
pointer. So, that when it gets  
thrown off the navigation       
stack it doesn't leave the      
heap and we will keep ahold     
of it. Then the next time       
someone wants to go to it,      
we will just put it straight    
on the navigation control.      
We will not segued to it,       
because that would reset it.    
We will just push it            
right on there, and             
it will show you how            
we do navigation                
controller direct pushing and   
popping.                        
So, how are we going            
to do that? Well,               
I am just going to create       
a little private var here,      
which I am going to call my     
LastSeguedtToConcentrationVie-  
wController, which              
is going to be                  
a ConcentrationViewController   
optional. And                   
I'm just gonna set this         
any time I successfully         
segue to something. So,         
that becomes my last segue to   
concentration view controller.  
Right?, so I'm just grabbing    
onto it right there.            
This is a known normal var, so  
it's gonna be a strong pointer  
too. It's gonna keep            
it in the heap. So,             
even when we hit                
the back button,                
it'll get thrown off            
the navigation stack, but       
it'll stay in the heap, all     
right? Pointed to by this var.  
And then, over here, when we    
change theme, if I can't do     
the splitView trick, then I'm   
gonna say, else if I can let    
cvc equal that last segued      
of two thing. Then,             
I'm just gonna push it right    
unto the navigation stack.      
And remember how we do that     
from the slides? We just say,   
the navigation controller       
I'm in, if I'm in one,          
.pushviewController this        
last of the CVC actually.       
Animated? True. And lets make   
sure that we, of course,        
set it's theme. Got to copy     
and paste in code here, so      
we will want to clean           
that up a little bit.           
But we will set its theme here  
before we push. All right?      
So, a lot going on here.        
You're learning about how       
to find into a Split View.      
You're learning how to hold     
something in the heap that      
gets thrown off the navigation  
deck. You're learning how to    
push things on a navigation     
deck without segueing.          
And you're learning how to      
segue from code. All in this    
one method right here. So,      
let's go see if this worked.    
All right, here we go, so       
we'll pick a theme              
like maybe animals,             
here we go looking good.        
Now, let's go and               
change it to sports,            
go back here sports. Woo hoo,   
it worked, because we didn't    
segue to it the second time.    
The first time we segued to     
it and we grabbed it. And       
the next time, we just pushed   
it on the navigation stack,     
and set. We go can back and     
set it to, you know, sports,    
how about faces, animals.       
Okay? So, the last              
thing I'm going to do, and      
this one a little complicated.  
Again, not complicated to       
implement, but it's using some  
concepts like delegation here   
that you're not quite used to.  
But I'm gonna make it so that   
when I run my iPhone version,   
it doesn't come up showing me   
a Concentration game that has   
the default Halloween. I want   
it to come up showing this.     
So, to do that,                 
my ThemeChooserViewController   
here is gonna make itself       
the delegate of the split view  
controller that it's in.        
Remember that even on iPhone,   
it's still in split view        
controller even though it       
doesn't show it as split view   
controller. Now it turns out    
that one of the ten or so       
split view delegate methods is  
one that controls whether it    
collapses. The what he calls    
the secondary view controller,  
which is the detail.            
Whether it collapses it         
on top of the primary           
at any given time, in the       
running of the app. So we're    
just gonna implement that       
splitView delegate method.      
And we're gonna return some     
bool that says what to do.      
And we're just gonna tell       
it to do the right thing.       
So how do we do that? Well,     
first we have to set our self   
as the split view               
controller's delegate,          
and I'm gonna do that in        
that function awakeFromNib.     
I haven't had a chance to       
show you awakeFromNib.          
It's a function that's called   
on every object that comes out  
of your interface builder       
file. Here you would never,     
extremely unlikely that you     
would ever build this whole     
split view navigation           
controller tab bar thing        
in code, that would be          
a lot of messy code.            
You're gonna build it in        
a storyboard, so it's okay for  
me to do this little split      
view trick in awakeFromNib.     
I don't have to worry about     
this being created somewhere    
else. I'm just gonna tell       
my SplitViewController that     
I'm in, if I'm in one,          
to set it's delegate            
to be myself. So                
that it will call that method   
about the collapsing on top     
of, now of course it says you   
can't do this because it says   
self is not a                   
UISplitViewControllerDelegate.  
So I have to go up here and     
announce that I am a            
UISplitViewControllerDelegate   
and all the methods in there    
are optional it's               
an Objective-C protocol.        
So I've implemented it,         
no warnings or                  
errors everything's good.       
But of course I do need         
to actually implement one of    
them which is that collapse.    
And I don't remember            
what it's called but            
I know it has collapse in it,   
here it is right here it's      
this one. Okay, so I'll let     
you take a look at this guy.    
It's called UIViewController    
collapseSecondary onto          
primaryViewController. And      
this secondaryViewController    
is the detail,                  
the primaryViewController is    
the master. And                 
it's basically asking here,     
hey I'm adapting to the fact    
that I'm a splitViewController  
on an iPhone. And I want to     
collapse the detail, using      
the navigation controller,      
on top of the primary,          
the master. Should I do it.     
And unfortunately the return    
value of this seems like        
it should be true, do it.       
But actually, if we wanna       
prevent this from happening,    
we return true. And the reason  
that happens is if you return   
false from this method,         
you're basically saying I did   
not collapse this for you so    
you do it. So the return        
values are kind of inverse.     
But the bottom line is if we    
don't want that collapsing      
to happen, okay, we need to     
return true from this method.   
So when do we not want it to    
collapse? Well, we don't want   
it to collapse any time that    
secondaryViewController,        
that concentration game,        
has a nill theme.               
If it has a nil theme then      
the theme's never been set,     
we want, don't wanna do that    
collapse. So I'm just gonna     
say here, if I can let cvc =    
secondaryViewController as      
concentrationViewController.    
Then,                           
if cve.theme==nil. So           
it's never been set, then I'm   
gonna return false. Otherwise,  
I'm just gonna return true,     
which says to the system true   
means yes, please do that       
collapse for me. Actually it's  
the other way around. See, I    
always get confused, true and   
false. So true means I did it.  
But I'm actually not going      
to do it. So                    
it's not gonna get done.        
False means no,                 
I didn't collapse it so         
you should do it.               
It's very confusing.            
Even I get confused between     
this true and false.            
But this is the way it is.      
So it's a little complicated.   
Little bit of advanced          
use of delegation there.        
But let's see if it works. So   
when we first run it worked,    
because that thing that would   
normally had put on there had   
a nil theme, which is using     
that default theme. But         
if I click, now it does         
collapse it on there because    
the theme is not nil. I set     
the theme to sports, right?     
So the now it's a sports        
theme. Let me go back here and  
now we're getting the reuse     
because we're not segwaying.    
Okay, all right so              
that's it, I showed you         
a lot of stuff about multiple   
MVCs there, right? So,          
you know, make sure you pile    
through this and understand it  
all because you're gonna be     
using it all pretty much in     
your next assignment right      
away. You're gonna have to do   
pretty much all of these stuff  
in your next assignment.        
All right, let's jump           
back into the slides and        
get as far as we can here with  
this animation thing. We only   
have about seven or eight       
minutes left, so we probably    
won't get all the way through.  
But that's okay, we'll just     
continue on Wednesday.          
Any questions about             
that MVC stuff?                 
I didn't see any raised hands,  
so. Okay, timer, so timer,      
I'm talking about timer right   
before I talk about animation.  
Timer is not really used for    
animation.                      
You wouldn't use a timer        
to do animation.                
But sometimes it's used in      
concert with animation. So      
I'm teaching it                 
about the same time.            
Now some of you actually used   
timer in your extra credit.     
For assignment two I guess,     
I'm not sure, yes assignment    
two and timer is super          
simple little struct very,      
very simple struct.             
It's basically made for you to  
give it a closure, a little     
function which will execute     
sometime in the future.         
And you tell it how much,       
two seconds in the future, ten  
seconds, a minute, an hour,     
and it will go and              
execute that code.              
And it can do it every          
hour if you want or             
every two seconds or            
it can just do it one time.     
So how do we use Timer?         
The easiest way to use timer    
is to use this class            
function on timer called        
scheduledTimer.                 
It only has three arguments.    
One is the time interval to     
wait until it executes it,      
whether it repeats it,          
keeps doing it, and             
the block of code which is a    
simple little block that takes  
the timer as the argument and   
returns nothing. And            
it'll jut execute that code,    
so it could not be simpler.     
So here's an example of it,     
I have this private weak var,   
which is a timer, I'll          
explain why that's weak cuz     
this is the first time besides  
outlet that you've              
seen me use weak.               
And I just set that timer       
var equal to the results of     
calling Timer.scheduledTimer.   
Here I'm doing TimeInterval     
of two seconds and it does      
repeat. So every two seconds,   
it's going to implement your    
code here. And every time he    
calls it, you pass over         
the timer back to you so        
that you have a hand of these.  
I putting it in a var, so       
I wouldn't need it. But it's    
nice to put a passage over      
there in case you don't wanna   
store it around in a var.       
Now why did I make that weak.   
I make it weak because as soon  
as that timer stops running.    
Either because it wasn't        
a repeating timer or            
because someone stopped         
it from repeating.              
Then no one else will have      
a strong pointer to it. So      
if I don't have                 
a strong pointer to it,         
what will happen to this timer  
var? It gets set to nil.        
Which is great. So this time    
the var will automatically set  
to nil as soon as the timer     
is stopped, which is a really   
nice feature. So I can always   
tell whether the times are on   
there, time there               
is running by                   
whether that thing is nil or    
not. So                         
it is kind of a cool feature.   
So how do you stop a repeating  
timer? You have timers going    
off every two seconds. Well,    
you just send the message       
invalidate to the timer and     
it will no longer run. In fact  
invalidate is going to throw    
it out of the heap and set our  
weak vars to nil and it's all   
gonna be done. So that's it.    
Super easy to use class timer,  
struct timer. Now timer,        
sorry, I thought I didn't put   
this tolerance in here. But     
the timer you can also specify  
a tolerance on your timer.      
That just says. If this timer   
goes off once an hour, it's     
okay if it goes off 30 seconds  
earlier or 30 seconds late.     
That's fine, and why would you  
wanna set a tolerance? Because  
it could help the system be a   
little more battery efficient.  
Cuz the system might not be     
awake exactly one hour later,   
it might be sleeping.           
But it might wake up to         
check cellular status or        
something like that, and        
then it could run it.           
So if you give it               
a little tolerance,             
it won't have to wake up        
specifically to try and         
run your timer.                 
By the way, these timers,       
even if they have tolerance     
zero, they don't run right      
on the microsecond of what      
you specify. These are not      
microsecond level timers. They  
probably, I mean, in practice,  
they're probably a tenth or     
a hundredth of a second,        
very reliably. But these are    
not for real time animation or  
something like that.            
>> [INAUDIBLE]                  
>> Yeah, so the question is,    
can the timer run when the app  
is in the background? And       
we haven't talked about the     
whole application life cycle,   
and when things are in          
the background, and             
I will talk about that. But     
the answer is, once the thing   
has gone to a suspended state,  
no, nothing runs in your app.   
But in that 30 seconds where    
it's not fully,                 
you know, backgrounded,         
it could run in that short      
time. So we'll talk all about   
that when we talk about         
the application life cycle.     
What happens to your app when   
you go to another app, for      
example. Okay, so brief         
overview here of the kinds of   
animation that exist in iOS,    
or at least some of the kinds.  
One is animating                
UIView properties,              
there's a few                   
UIView properties,              
very important ones             
which we'll talk about,         
that you can animate            
the changing of.                
Okay, this is the most common   
animation that goes on, okay,   
and we'll talk all              
about that one.                 
Then there's animating          
controller transitions,         
this is like you're in          
the navigation controller, and  
a new card comes on top of the  
deck. The animation of that     
sliding in or popping in or     
flipping in, or whatever.       
That can be animated, we're     
not gonna talk anything about   
that. That's kind of            
an advanced animation topic,    
we're not gonna                 
talk about that.                
There's core animation that,    
just like there's a CA layer    
underneath UI for drawing,      
there's kind of core animation  
under this UIView property      
animation at the top there,     
that I'm gonna talk about.      
I'm not gonna get into          
core animation much,            
it's basically the primitives   
for animating properties.       
It can animate more than just   
the UIView properties that I'm  
gonna talk about, but           
I just don't have time to get   
down to that layer. Even for    
UIView property animation,      
I'm just gonna kind of          
show you the real easy,         
top way to do it. Most of       
this class is really just       
trying to get you introduced    
to things, and you can look in  
more detail if you want to do   
more detailed stuff. If you're  
doing 3D, of course there's     
full 3D animation engine,       
OpenGL, and also Metal, which   
is a fantastic system for       
doing that. I'm not gonna talk  
about any 3D in this class      
either, so                      
if you are a 3D person,         
I'm presuming you might         
already know OpenGL.            
You may know how to figure      
how to get your OpenGL into     
a view on you own, but it's     
not actually that difficult.    
There is also SpriteKit,        
a whole framework for           
doing 2.5D animation,           
basically that's like Mario     
Brothers kind of animation,     
right?. Where you have Images   
and they're overlapping to      
create what appears to kinda    
be a 3D world, but it's really  
drawn 2D, where the images      
just overlap. So there's whole  
mechanisms for that, not        
gonna talk about that either.   
Maybe we'll have a Friday       
section on that, possibly,      
later in the quarter.           
But I doubt it,                 
cuz we've got some other        
things in the pipe for that.    
And finally,                    
there's dynamic animation,      
this is animating views         
using physics. So               
you give the view a mass and    
a velocity and                  
an elasticity, and              
then you operate on it.         
You push it, for example, and   
it'll just start flying across  
the screen. And depending       
on what its mass is and         
what it collides with, it'll    
bounce around and do various    
things. This I am going to      
tell you about on Wednesday.    
Because it's really great for   
kind of moving views at,        
on math and having them         
interact with each other.       
When you slide up from          
the bottom on your iPhone,      
and it kind of                  
bounces a little bit,           
that's the dynamic animation,   
right?                          
It's just kind of a little      
bit of elasticity and bounce.   
Let's wait on                   
UIView animation,               
cuz I don't wanna rush          
this too much, so               
we'll start Wednesday           
off with this.                  
UIView property animation is    
just these yellow properties    
right here on your view,        
like where it is, its center.   
Or the transform, remember      
the thing we did to rotate      
the View upside down when we    
made the corner of the card.    
Or alpha how transparent it     
is, making things fade in and   
out, or the background color,   
which is rare to animate.       
These properties and            
these properties alone,         
you can animate, so that your   
view can fly across screen,     
it can fade out,                
it can flip around because its  
transformed can be changed. It  
can scale up and get big, and   
then go back small,             
because its scale,              
the transform scale             
can be changed, etc.            
So there's a whole API for      
animating these things,         
and that's what we'll           
start Wednesday's with.         
And then I'll do dynamic        
animation, then we'll do        
a demo, gonna be time           
constrained at that point, but  
we'll do a demo that includes   
all of that stuff, hopefully,   
in it. And then your            
assignment that's gonna         
be due on Wednesday is          
to set your set game and        
add animation to it. And        
there's also going to           
be another part for             
multiple MDCs. All right,       
sound good, all right,          
I'll see you next time.         
>> For more,                    
please visit us                 
at stanford.edu.                
