Subtitles section Play video Print subtitles Stanford University. Okay, well, welcome to lecture 7 of CS193P. This is the winter of 2015. And today, we are going to talk about multiple MVCs, all right? That includes split view controller, navigation controller. We talked about tab bar controller a little bit last time. We're also gonna talk about segues which is how we make all those multiple MVCs kind of transition to each other. And I have a big demo that shows it all off. And that after that demo I'll come back. We'll talk about popovers which are similar thing for having multiple MVCs but are not quite the same. So that's why I've kind of segregated them off to the end. And we'll have a demo about that. All right. So MVCs working together. These are the slide we saw at the end of last time. We're trying to build apps by taking our MVCs and combining them with tab bar, split view, and navigation controller. We talked about tab bar controller which is just simply four or five or however many MVCs all connected by just having this little tab bar so the bottom just picks which MVC you want to see. Each MVC by the way in the tab bar's completely independent. It runs on its own. It doesn't depend on the other ones. It actually might be kind of bad object on your programming really for them to depend on the other one. So, tab bars for peers that aren't really talking to each other they're just working together, they're related. Maybe they share a model and they're each having a different part of the model or whatever. And then we talked about split view controller, which only has two MVCs in it, a master, and a detail. We call them master and detail, by the way, because the master is usually the one determining what's in the detail. So the master is letting you view something, and then you're going to use the detail to see more detail about what you're doing in the master, okay? So that's why we call it master and detail. So we're going to pick up now with navigation controller. So navigation controller is just yet another MVC whose view is multiple of other MVCs and navigation controller can handle any number of other MVCs. Okay. And it puts them on screen, it shares the screen instead of just putting them side by side or putting them with the tabs, it puts them like a stack of cards. Okay? So NavigationController's basically stacking them like cards and you can only see the one on top. That's how NavigationController shares the small screen space between multiple MVCs. So it's gonna stack these MVCs up. So here's a NavigationController. And it's got an MVC in it. This is the All Settings MVC from your device. If you go look in your iPhone or whatever, you'll see the settings app looks like this. So this is just an MVC that's kind of the top level. Has all the settings accessible from here. Now the navigation controller is drawing only a little part of it's view here, which is that title bar. And the navigational controller will put the title there, and also you can have a couple of buttons up at the top and the navigational controller draws that part. The rest of it is totally drawn, and even underneath that title bar, totally drawn by whatever MVC is on top of this stack of cards. Okay, and right now the only thing on our stack of cards is this All Settings MVC. Now even though the contents of the top are drawn by the navigation controller, what the contents are is determined by the MVC that's showing. Okay? And that's done with this UIViewController property called navigationItem. So if you go look in the documentation for UIViewController you'll see this property navigationItem. If you click through to the type UINavigation item you'll see that it's got a lot of properties and they're like left button, right button, title. Things like that. So, the way the navigation controllers figures out what to put in the top bar is it asks whatever MVC is on top of the stack. So as you go to different MVCs being on this stack of cards that thing at the top will change. Okay? So, let's say I click on General here, because I want to see general settings. Okay, so I click on it, and a new MVC gets put on top of the stack of cards, so now I can't see the other one, okay? This new one is overlaying it, and this is just a general settings MVC. Completely different MVC, completely independent of the other one working on its own. By the way, I don't have a good screenshot of this unfortunately, but it's also possible for the navigation controller to draw some buttons along the bottom there. A little small sliver on the bottom. And it get those button items to put there, by asking the MVC that's on top of the stack of cards for the toolbar items property. So if you look at toolbar items, it's just an array of these bar buttons, so any MVC that returns anything in that array, when it's in a navigation controller like this, those buttons will appear at the bottom. So those would change each time you go to the next thing on the stack as well. So let's go ahead and click on something here. Let's click on, oh sorry, the back button. Yeah, you see there's a back button in the upper left. The back button says, Throw the top card off. That's basically what back means. Throw the top card on this stack of MVCs that we're building, throw it off, and then I'm going to go back to where I was before. So that's how back works, it just throws it off. And when it throws it off, it completely throws it off, it disappears. Completely gone. All right? Out of the heep, okay? All right, so let's put another card on the stacks, I'm going to click on accessibility here, another card's going to slide in, I'm trying to simulate the animation of it but in keynote I can't exactly do it, but it slides in from the side. And this is yet another completely different MVC, the accessibility MVC. And we can pick something out of here, like I'm going to pick larger text right there, and another MVC is going to slide in. So we have four MVCs, totally different MVCs, on our stack of cards right here. And the one on top, which is the last one that I chose, this larger text MVC, is showing. Okay? The rest of them are there, you just can't see them because they're underneath this top card. Okay, so now let's do the back button. So I'm going to click this back button in the upper left and when I do, it takes that larger text one off, throws it out, and now we've got the accessibility card, which is now the top of our stack which only has three things on it. And we can do back again. It goes back to the general one. We do back again. It goes back to the very top. Of course, once we get back to the very top there's no more back button because this is the only card on the stack. Okay, so everyone understand what a NavigationController is? It's just a stack of MVCs. All right? But it's just like split view controller and UITabBar Controller in that it is showing multiple MVCs. So I'm going talk a little bit about how navigation controller works internally, so you can get a feel for it. And I'm going to try to mix it with our MVC image that we had so you can kind of combine the two concepts in your mind. So, let's say I had an MVC. This one up here, the purple MVC thing. And I had more features I wanted to put on there, but there's just not enough room on the screen anymore, I've kind of maxed out. Or it's just those features don't logically make sense to be in the same place. Well, what I would do is create another MVC to manage those other features that won't fit,okay? And, so now though I need a way to have those two MVCs share the screen and I can use a split view controller or tab bar controller if they were peers or I could use navigation controller. So, let's see what it would look like to use a navigation controller to have these two MVCs which they're related share the screen. So a navigation controller is just an MVC, okay? It's a controller of an MVC. And it's view is a little rectangular area that usually fills the entire screen or a portion of the screen. It's got the title. But it's a special MVC and they've just got an outlet called Root View Controller that points to an MVC. [UUU] points to the controller of an MVC. And when it is pointing to that, then the navigation controller puts that MVC's view, okay, its view property. All right, we know that UIVController has this very important property called view, which is its top level of its view. It puts that on the screen underneath this title thing. So it fills the entire rectangular area and then the title kind of overlaps it transparently, semi-lucent transparency. Okay? So that's great. So we got it in there. Now how do we get the other MVC on? Well, when a ui element inside the view of this MVC like a button or something like that is pressed then it can cause another MVC to get created. You notice that MVC just appeared? It wasn't there before. But as soon as the button gets pressed in this guy's view, this MVC's view, that thing gets created. And that's something important to notice that we're always going to be creating a new MVC when we do these transitions. Okay? Transitioning to a new card. In a split view, we do something in the master that changes the detail. That's always creating a new, even the first time we press a tab bar, but only the first time for the tab bar, it creates a new MVC. Okay? So it creates this new MVC. And then the NavigationController just moves over to put that MVC's view on top. All right? And then of course you've got the back button. When you click the back button, it goes back to the first MVC. And look what happens to that MVC. Gone. Okay. That is not hidden or something. It's just gone. It got de-allocated probably from the heat. Okay? And then we're back to here. Okay, so that's how navigation controller works. Very simple. And, you know, split view and tab bar are similar kind of mechanism. Okay. So how do we get at these sub-MVCs? So let's say I had a split view controller or a navigation controller or a tab bar controller. How do I get at the things on the stack of cards, or the two things the master and detail? And the answer is they all have a property called view controllers.