WEBVTT 00:00:02.090 --> 00:00:06.225 >> All right. I think we're good to go. 00:00:06.225 --> 00:00:10.170 It's going to walk around holding the banana the whole time. 00:00:10.170 --> 00:00:13.320 All right. So how's everyone doing? 00:00:13.320 --> 00:00:18.340 Good? Yeah. Last session. 00:00:18.350 --> 00:00:21.015 It seems good. Good amount of people here, 00:00:21.015 --> 00:00:23.565 I wasn't sure after the deserts came. 00:00:23.565 --> 00:00:27.810 So let's get going. All right. 00:00:27.810 --> 00:00:30.810 Using Xamarin.Forms Shell to easily create a consistent, 00:00:30.810 --> 00:00:34.965 dynamic, customized, and feature filled UI, fun, fun, fun. 00:00:34.965 --> 00:00:36.870 So I'm Shane Neuville, 00:00:36.870 --> 00:00:38.720 Xamarin.Forms Senior Engineer with 00:00:38.720 --> 00:00:41.525 Microsoft working on a lot of Shell bits. 00:00:41.525 --> 00:00:45.715 So this is going to be a coding session of just kicking through. 00:00:45.715 --> 00:00:48.780 It's just a fun one I put together almost for myself just to 00:00:48.780 --> 00:00:52.940 see what fun things we could do with the Shell architecture. 00:00:52.940 --> 00:00:55.010 A lot of it too is going to be how 00:00:55.010 --> 00:00:57.230 the MVVM frameworks are going to hook together, 00:00:57.230 --> 00:00:58.700 which is going to be cool. 00:00:58.700 --> 00:01:00.320 The fresh MVVM did 00:01:00.320 --> 00:01:02.990 a sample with it as well which is neat that I'll show, 00:01:02.990 --> 00:01:05.330 where they've hooked into a lot of these things. 00:01:05.330 --> 00:01:09.360 So as a beginning point, 00:01:09.590 --> 00:01:12.785 some of the birth of shell came from here. 00:01:12.785 --> 00:01:16.220 So here's our existing page choices within Form. 00:01:16.220 --> 00:01:17.930 So let's say you're a new developer, 00:01:17.930 --> 00:01:19.650 you're coming into Forms and you're like, "All right. 00:01:19.650 --> 00:01:23.115 What do I do? How do I create a Forms app?" 00:01:23.115 --> 00:01:28.710 First, you have to understand what pages you have views. 00:01:28.710 --> 00:01:30.420 So you have Mastered Details Page, 00:01:30.420 --> 00:01:31.880 probably one of the most used one 00:01:31.880 --> 00:01:34.240 because that just works as like a top-level, 00:01:34.240 --> 00:01:39.275 Navigation Page which mainly is there just to annoy people, 00:01:39.275 --> 00:01:45.400 and then the Tab Page which has tabs and it's a page. 00:01:45.400 --> 00:01:50.750 So that's our page story. All right. 00:01:50.750 --> 00:01:53.550 Putting it together. So you're going together and you're like, 00:01:53.550 --> 00:01:56.670 let's put it together, let's do a Master details page. 00:01:56.670 --> 00:01:58.630 First off, well for me, 00:01:58.630 --> 00:01:59.750 I always confuse which one's 00:01:59.750 --> 00:02:01.110 the master and which one's the detail. 00:02:01.110 --> 00:02:02.120 It took me a little bit, 00:02:02.120 --> 00:02:06.635 but I maybe got there, I don't know. 00:02:06.635 --> 00:02:08.390 There's probably some historical verbiage or 00:02:08.390 --> 00:02:11.855 regular or something that I'm just missing on that one. 00:02:11.855 --> 00:02:16.285 So create a new page for the Master, 00:02:16.285 --> 00:02:18.285 which is the side bar. 00:02:18.285 --> 00:02:20.490 I had to remind myself real quick. 00:02:20.490 --> 00:02:22.815 So you create that page there, 00:02:22.815 --> 00:02:25.100 create a new page for the details because you're like, "Okay. 00:02:25.100 --> 00:02:27.725 This is the content that I want to show." 00:02:27.725 --> 00:02:29.655 Then you're like, "All right, yeah. 00:02:29.655 --> 00:02:30.760 Cool,. I got my stuff, 00:02:30.760 --> 00:02:32.240 I have a second page, 00:02:32.240 --> 00:02:33.890 I want to navigate to a second page. 00:02:33.890 --> 00:02:35.595 That'll be super exciting." 00:02:35.595 --> 00:02:38.140 So you're like, all right, there's this thing on a page 00:02:38.140 --> 00:02:40.520 called Navigation push async, 00:02:40.520 --> 00:02:42.165 and you're like, cool, all right, 00:02:42.165 --> 00:02:45.255 that's going to push my Details page. 00:02:45.255 --> 00:02:47.180 Who thinks that's actually? Who thinks that it's going to 00:02:47.180 --> 00:02:48.785 navigate to the Details page, anyone? 00:02:48.785 --> 00:02:49.970 Dave is shaken his head no, 00:02:49.970 --> 00:02:51.500 he knows what he's going to see. 00:02:51.500 --> 00:02:53.845 Oh, look at that. 00:02:53.845 --> 00:02:56.550 I learned animations just for this talk. 00:02:56.550 --> 00:02:58.875 This is the exception you get. 00:02:58.875 --> 00:03:00.120 Then at this point you're like, well, 00:03:00.120 --> 00:03:01.685 what the heck is a navigation page. 00:03:01.685 --> 00:03:03.530 So now you go back to the docs, 00:03:03.530 --> 00:03:05.600 usually Google this exception, 00:03:05.600 --> 00:03:07.550 hit a whole bunch of things that indicate, 00:03:07.550 --> 00:03:09.125 what do you have to do? Oh, okay. 00:03:09.125 --> 00:03:10.310 Your page is in a page, 00:03:10.310 --> 00:03:14.980 needs another page, so that you can get anywhere. 00:03:15.170 --> 00:03:17.820 So now we have four, 00:03:17.820 --> 00:03:19.275 I think four, I might have counted wrong. 00:03:19.275 --> 00:03:21.480 We've 4-5 separately created pages, 00:03:21.480 --> 00:03:24.720 and we're still really nowhere with an application. 00:03:25.760 --> 00:03:29.460 So you have this Drawer Menu, 00:03:29.460 --> 00:03:32.250 so that's your Master page. 00:03:32.250 --> 00:03:34.609 You have this Master page on the left 00:03:34.609 --> 00:03:37.595 which is just this totally separate thing, 00:03:37.595 --> 00:03:39.635 and you have this page over here too. 00:03:39.635 --> 00:03:42.020 It's like, okay. Well, how do I connect these things? 00:03:42.020 --> 00:03:43.130 It's really ain't funny too. 00:03:43.130 --> 00:03:45.955 Like if you look at the docs for Master Details page, it's crazy, 00:03:45.955 --> 00:03:49.500 I don't know anyone who would translate that to some thing useful, 00:03:49.500 --> 00:03:52.260 because you have to be in the Master page. 00:03:52.260 --> 00:03:54.140 It's interesting on there, because they're at the MDP 00:03:54.140 --> 00:03:56.150 and they like subscribe to the Master page 00:03:56.150 --> 00:03:58.190 from the master and then go route it through to 00:03:58.190 --> 00:04:00.260 the Details page to navigate the details, 00:04:00.260 --> 00:04:03.960 so you have this weird connection going on, 00:04:03.960 --> 00:04:05.460 plus you're not really anywhere, 00:04:05.460 --> 00:04:07.025 you just have these pages. 00:04:07.025 --> 00:04:08.870 So it's a lot of effort. 00:04:08.870 --> 00:04:12.545 It's confusing how you put these things together, 00:04:12.545 --> 00:04:15.610 so in picture form, you look like this. 00:04:15.610 --> 00:04:21.590 So this was one of the big motivations behind creating Shell. 00:04:21.590 --> 00:04:26.780 We wanted to create a cohesive experience where you can 00:04:26.780 --> 00:04:32.030 get rid of the headache of having to put those things together. 00:04:32.030 --> 00:04:34.485 Navigation would just work from everywhere, 00:04:34.485 --> 00:04:37.965 you fly out, your menu would work from everywhere, 00:04:37.965 --> 00:04:41.175 you'd be much more able to customize, 00:04:41.175 --> 00:04:43.640 you'd be able to sort of break out of this box of 00:04:43.640 --> 00:04:47.090 these separate parts that we've stuck in. 00:04:47.090 --> 00:04:52.110 So that's really where the whole shelled thing went, which Shell. 00:04:53.410 --> 00:04:56.970 Great movie if anybody hasn't seen it. 00:04:57.640 --> 00:04:59.285 Is it like Super-health too? 00:04:59.285 --> 00:05:00.440 Oh Super-health, no. 00:05:00.440 --> 00:05:05.600 Shell. The Simpson's version was the best take on it, 00:05:05.600 --> 00:05:08.850 but Marlon Brando's was pretty good too. 00:05:09.260 --> 00:05:11.980 So we have Shell. 00:05:11.980 --> 00:05:14.195 David's gone over a lot of these things as well, 00:05:14.195 --> 00:05:15.695 but we have it. 00:05:15.695 --> 00:05:18.275 It's a declarative application structure. 00:05:18.275 --> 00:05:20.540 So effectively, a user can just 00:05:20.540 --> 00:05:22.850 go into your shell application that's 00:05:22.850 --> 00:05:24.770 one XAML file and they can 00:05:24.770 --> 00:05:27.465 see the articulation of the application. 00:05:27.465 --> 00:05:29.525 They can see the tabs that they're going to have, 00:05:29.525 --> 00:05:33.690 you can see the fly-out pages you're going to have, 00:05:33.690 --> 00:05:36.490 you can see where those are going to lead to. 00:05:36.490 --> 00:05:40.250 You have everything that you need to put that together. 00:05:40.250 --> 00:05:41.690 Simplified navigation. 00:05:41.690 --> 00:05:43.025 Navigation is just built in. 00:05:43.025 --> 00:05:45.695 It's a first-class citizen of the application. 00:05:45.695 --> 00:05:48.225 So you have these member. 00:05:48.225 --> 00:05:50.834 First of all, it works with the old navigation APIs, 00:05:50.834 --> 00:05:53.960 so you can grab navigation and 00:05:53.960 --> 00:05:57.560 just push a page and it'll push a page, it works with those. 00:05:57.560 --> 00:05:59.330 It also works with the shell 00:05:59.330 --> 00:06:01.910 being able to go around to the different part, 00:06:01.910 --> 00:06:06.560 it uses simple pathing to indicate what path you want to go to, 00:06:06.560 --> 00:06:10.165 which is what a lot of frameworks are moving around as well. 00:06:10.165 --> 00:06:12.120 So it's easy. You can just say, "Hey, 00:06:12.120 --> 00:06:13.170 I want to go to this place, 00:06:13.170 --> 00:06:16.480 that I've called this thing and that's where I'm going to end up." 00:06:16.480 --> 00:06:20.430 It's nice. It's a very cohesive development experience. 00:06:20.430 --> 00:06:21.910 You have in that page, 00:06:21.910 --> 00:06:23.870 you know how the left part is going 00:06:23.870 --> 00:06:27.940 to work with the middle part. It's good to go. 00:06:27.940 --> 00:06:32.385 Plus everything is just in that one place. 00:06:32.385 --> 00:06:36.020 So with Shell, the goal that we're moving 00:06:36.020 --> 00:06:39.650 towards is that you don't really need a Master Details page, 00:06:39.650 --> 00:06:41.970 you don't need a Tab page, 00:06:43.220 --> 00:06:45.585 there's probably another one I'm forgetting, but yeah, 00:06:45.585 --> 00:06:47.090 you don't need the other pages. 00:06:47.090 --> 00:06:49.625 You just essentially have Shell and you have your content. 00:06:49.625 --> 00:06:52.430 Then, because when you're doing on any page, 00:06:52.430 --> 00:06:55.295 you want to be able to easily tell it what you want to do. 00:06:55.295 --> 00:06:57.245 You want to go to a Content page and say, 00:06:57.245 --> 00:06:59.090 "Okay, this page, I want a navigation bar." 00:06:59.090 --> 00:07:01.430 You don't want that to be wrapped in a navigation. 00:07:01.430 --> 00:07:03.080 This page, I want to have tabs, 00:07:03.080 --> 00:07:05.610 and then that just shows based on the content description, 00:07:05.610 --> 00:07:07.655 but declarative content indicates what 00:07:07.655 --> 00:07:10.005 your page is going to do. It's easy. 00:07:10.005 --> 00:07:14.670 So navigate from anywhere to anywhere. 00:07:14.960 --> 00:07:17.340 This is what I was talking about. 00:07:17.340 --> 00:07:20.030 You can customize your tabs, 00:07:20.030 --> 00:07:22.460 your navigation bar just based on page properties, 00:07:22.460 --> 00:07:25.370 so that each page can dictate how it 00:07:25.370 --> 00:07:28.280 wants to display and the effect that it has. 00:07:28.280 --> 00:07:29.300 So if you're moving to like 00:07:29.300 --> 00:07:31.370 a details page where you want the tabs gone, 00:07:31.370 --> 00:07:32.675 you just have the tabs gone. 00:07:32.675 --> 00:07:34.340 It's nice and easy. 00:07:34.340 --> 00:07:37.420 You can customize the Drawer layout. 00:07:37.420 --> 00:07:41.690 You get all of the features of the Shell templatable. 00:07:41.690 --> 00:07:45.200 So you can create a template for all the items, 00:07:45.200 --> 00:07:47.420 you can create a template for the top. 00:07:47.420 --> 00:07:51.260 It's really easy to just get to where you want to get to, 00:07:51.260 --> 00:07:56.765 or rapidly get to an application starting point. 00:07:56.765 --> 00:08:01.225 So, that is where we're going with Shell. 00:08:01.225 --> 00:08:06.020 So here's just where you see the declarative XAML. 00:08:06.020 --> 00:08:08.420 So this is cool here, because this is basically, 00:08:08.420 --> 00:08:11.430 you have your Master Details page 00:08:12.020 --> 00:08:15.210 with the fly-out items, you have the content. 00:08:15.210 --> 00:08:17.204 So you have your Master which is your fly-out, 00:08:17.204 --> 00:08:19.490 and you have your details which is your Shell content. 00:08:19.490 --> 00:08:23.240 Now, this whole thing here is a Master Details page, a Tab page, 00:08:23.240 --> 00:08:27.500 all rolled up into one nice happy box. 00:08:27.500 --> 00:08:30.860 So this is taken from the templates, the shell template, 00:08:30.860 --> 00:08:36.410 if you want to see how that rolls together, 00:08:36.410 --> 00:08:40.345 which is the template I'm also basing my demo on. 00:08:40.345 --> 00:08:43.090 So that's what we're going to move into now. 00:08:43.090 --> 00:08:49.820 So this is just a let's see what we can do with shell talk. 00:08:49.820 --> 00:08:51.440 So a lot of this stuff is stuff, 00:08:51.440 --> 00:08:54.430 these are very alphabets that we're then breaking out 00:08:54.430 --> 00:08:57.520 into the features that you're going to be seeing coming through, 00:08:57.520 --> 00:09:00.550 and then fresh MVVM actually took a lot of 00:09:00.550 --> 00:09:02.620 this stuff and map 00:09:02.620 --> 00:09:05.440 their framework over to it and got going pretty quickly with that. 00:09:05.440 --> 00:09:08.230 So it's neat. So you'll see how you can really 00:09:08.230 --> 00:09:11.330 easily articulate how you want the application to work, 00:09:11.330 --> 00:09:13.810 how the navigation to where control things 00:09:13.810 --> 00:09:15.730 like literally everything. 00:09:15.730 --> 00:09:18.985 So that's the big thing is we're trying to make sure you can take 00:09:18.985 --> 00:09:21.775 the declarative aspect of it and 00:09:21.775 --> 00:09:25.835 essentially replace that whole insides of it. 00:09:25.835 --> 00:09:28.310 So we're going to do a demo here, 00:09:28.310 --> 00:09:30.595 code demo with customizing Shell. 00:09:30.595 --> 00:09:32.390 So this is going to be a coding demo 00:09:32.390 --> 00:09:34.050 that we're going to move through, 00:09:34.050 --> 00:09:36.655 and we can see. 00:09:36.655 --> 00:09:38.725 So let's see. 00:09:38.725 --> 00:09:40.815 This is the app. 00:09:40.815 --> 00:09:43.160 Okay, cool. So this is our basic app. 00:09:43.160 --> 00:09:44.570 Can everyone see nothing? 00:09:44.570 --> 00:09:50.370 Cool. Perfect. I might have it on the wrong mode. 00:09:50.370 --> 00:09:55.200 There we go. You have to end the slideshow first. 00:09:56.140 --> 00:09:59.910 Let's make that a little bigger for everybody. 00:10:01.920 --> 00:10:07.070 That is a very unfortunate cut of the region text. 00:10:08.040 --> 00:10:11.770 Yeah? Okay. There we go. Let's fix that up. 00:10:11.770 --> 00:10:14.725 We can fix that in editing. 00:10:14.725 --> 00:10:17.740 All right. So what we've done. 00:10:17.740 --> 00:10:19.480 So let me just show you sort of 00:10:19.480 --> 00:10:24.175 the basic app that is blank maybe because of the display switched. 00:10:24.175 --> 00:10:27.535 So what I've done here is I've taken 00:10:27.535 --> 00:10:36.970 the template app. 00:10:36.970 --> 00:10:39.100 So the template app is your basic to-do app. 00:10:39.100 --> 00:10:40.915 It has an items page. 00:10:40.915 --> 00:10:42.130 You click on the items, 00:10:42.130 --> 00:10:45.220 the items show up, very exciting. 00:10:45.220 --> 00:10:47.095 So what I've done here, 00:10:47.095 --> 00:10:49.870 I've wanted to show how easy it 00:10:49.870 --> 00:10:53.245 is to hack in the features that you want. 00:10:53.245 --> 00:10:55.060 So here's the app. 00:10:55.060 --> 00:10:56.815 Everyone's maybe seeing this. 00:10:56.815 --> 00:11:02.065 I don't really know. Yeah. Basically, go to somewhere, 00:11:02.065 --> 00:11:04.600 go back from somewhere. All right. 00:11:04.600 --> 00:11:07.150 So now let's break this up. 00:11:07.150 --> 00:11:11.990 So we've created this thing which is ShellNavigationService. 00:11:12.660 --> 00:11:16.320 A lot of this stuff is going to be available in XAML as well 00:11:16.320 --> 00:11:19.200 through SEGS that we want to be able to easily expose, 00:11:19.200 --> 00:11:20.415 but this is sort of the guts. 00:11:20.415 --> 00:11:21.660 So this is if you really want to get into 00:11:21.660 --> 00:11:23.315 kind of a guts of playing with it. 00:11:23.315 --> 00:11:27.445 So what we've done is created this ShellNavigationService. 00:11:27.445 --> 00:11:30.475 Now, what this is is this is how everything works. 00:11:30.475 --> 00:11:32.890 When you send it a URI, 00:11:32.890 --> 00:11:34.300 like string or a path, 00:11:34.300 --> 00:11:35.800 it goes through this service. 00:11:35.800 --> 00:11:38.350 When it parses that out, it goes to the service. 00:11:38.350 --> 00:11:39.670 When it applies all of 00:11:39.670 --> 00:11:42.340 the parameters to the page it's going through, 00:11:42.340 --> 00:11:43.420 it goes through this service. 00:11:43.420 --> 00:11:47.320 So you can influence it at every aspect of what it's doing. 00:11:47.320 --> 00:11:49.330 So that's very much what this demo is doing. 00:11:49.330 --> 00:11:52.795 So what this demo was set up with 00:11:52.795 --> 00:11:55.570 is I've set it up so that you 00:11:55.570 --> 00:11:58.975 can do effectively ViewModel navigation. 00:11:58.975 --> 00:12:05.440 So what you can see here is I've taken the routes on this, 00:12:05.440 --> 00:12:09.730 and I've renamed all the routes to the ViewModel names. 00:12:09.730 --> 00:12:13.315 So now when I'm doing navigation, 00:12:13.315 --> 00:12:16.045 I can just give it the name of a view model 00:12:16.045 --> 00:12:19.990 and I can give it the name of the actual view, 00:12:19.990 --> 00:12:21.370 and there's different ways you can wire this 00:12:21.370 --> 00:12:22.885 together however you need to. 00:12:22.885 --> 00:12:24.970 But are you give it a name of a view model, 00:12:24.970 --> 00:12:28.480 and then what I've done if we go into the navigation service, 00:12:28.480 --> 00:12:31.265 you can see where I have 00:12:31.265 --> 00:12:35.430 implemented this feature here where basically, 00:12:35.430 --> 00:12:38.275 I grabbed the route. 00:12:38.275 --> 00:12:40.810 So these are the arguments that are coming into it. 00:12:40.810 --> 00:12:42.760 So this is grabbing the route name, 00:12:42.760 --> 00:12:44.905 and then I'm instantiating the view model 00:12:44.905 --> 00:12:47.320 here and then setting it on the binding context. 00:12:47.320 --> 00:12:49.540 So if you look at like the fresh MVVM example 00:12:49.540 --> 00:12:51.950 which I should have up. 00:12:52.320 --> 00:12:55.360 He does a very similar thing here too, see? 00:12:55.360 --> 00:12:57.550 He checks if the binding context is null, 00:12:57.550 --> 00:12:59.950 and now he's tapping into 00:12:59.950 --> 00:13:04.330 the resolver that's part of fresh to be MVVM, 00:13:04.330 --> 00:13:06.910 so that he can do the dependency injection and stuff. 00:13:06.910 --> 00:13:08.740 If you're ended dependency injection, 00:13:08.740 --> 00:13:09.880 I think some of you are. 00:13:09.880 --> 00:13:13.825 So if you've ever talked to Dan and then you're probably into it. 00:13:13.825 --> 00:13:18.550 So fresh indium just plugged into it. 00:13:18.550 --> 00:13:21.100 It's a nice easy way to do what you need. 00:13:21.100 --> 00:13:23.650 So the cool thing about it too is it, 00:13:23.650 --> 00:13:28.345 this is a way to describe the entire way your content is created. 00:13:28.345 --> 00:13:30.610 So you'll see you in a sec, I have an example where 00:13:30.610 --> 00:13:33.730 I'm hiding a section based on your roles. 00:13:33.730 --> 00:13:35.995 You'll see in the top secret page 00:13:35.995 --> 00:13:39.205 where it's not even going through our system. 00:13:39.205 --> 00:13:42.430 So if you look at the top secret page, 00:13:42.430 --> 00:13:45.774 I don't even have a content template specified, 00:13:45.774 --> 00:13:50.170 because what I've done is I've checked to 00:13:50.170 --> 00:13:52.120 see if that's what they're creating 00:13:52.120 --> 00:13:54.460 and then just returned my own content page. 00:13:54.460 --> 00:13:56.680 So as a library designer, 00:13:56.680 --> 00:13:59.590 you could even just make it so whoever's 00:13:59.590 --> 00:14:02.740 implementing shell isn't even using the content templates, 00:14:02.740 --> 00:14:05.170 that the entire thing is being routed through your framework. 00:14:05.170 --> 00:14:08.695 So this is the whole aspect of creation here. 00:14:08.695 --> 00:14:10.270 It sounded so grand, 00:14:10.270 --> 00:14:12.790 the whole aspect of creation. 00:14:12.790 --> 00:14:15.985 This is the Alpha and the Omega of the page. 00:14:15.985 --> 00:14:17.050 No, it's the Alpha I guess, 00:14:17.050 --> 00:14:20.810 the Omega is later slow down here somewhere. 00:14:20.970 --> 00:14:25.975 So this is the starting point of what I'm wanting to show. 00:14:25.975 --> 00:14:30.450 Well, it's essentially what I wanted to show. 00:14:30.450 --> 00:14:32.940 So let's move through the demo and 00:14:32.940 --> 00:14:36.195 see the different things that you can do. 00:14:36.195 --> 00:14:37.350 So one thing I wanted to do 00:14:37.350 --> 00:14:40.785 here since this is something that's been coming up. 00:14:40.785 --> 00:14:42.270 Oh, is visible. Is visible 00:14:42.270 --> 00:14:43.800 is coming for anyone who hasn't seen it. 00:14:43.800 --> 00:14:47.180 So this is the ability to hide and show your shell items. 00:14:47.180 --> 00:14:50.215 So I wanted to show a quick example with a login page. 00:14:50.215 --> 00:14:54.820 So the idea here is that a tab bar has your fly out disabled. 00:14:54.820 --> 00:14:56.305 This is a scenario 00:14:56.305 --> 00:15:00.655 where you want the user 00:15:00.655 --> 00:15:03.835 to not really reach the rest of your application, right? 00:15:03.835 --> 00:15:06.745 So in this case here, 00:15:06.745 --> 00:15:11.240 we start up with a login page. 00:15:13.070 --> 00:15:17.290 I thought we put enough poker chips in there, 00:15:17.290 --> 00:15:19.135 so it would start up faster but maybe not. 00:15:19.135 --> 00:15:23.020 All right. So there we go. 00:15:23.020 --> 00:15:24.070 So we have the login page, 00:15:24.070 --> 00:15:26.680 which is showing the hideout because did I not disable it? 00:15:26.680 --> 00:15:34.760 A lot of this is Alpha codes. 00:15:36.570 --> 00:15:38.800 Why did that show? All right. 00:15:38.800 --> 00:15:40.810 If that showed, let's just imagine it didn't show. 00:15:40.810 --> 00:15:44.560 >> [inaudible]. 00:15:44.560 --> 00:15:45.970 >> I didn't know we were showing it for this, 00:15:45.970 --> 00:15:54.520 so I didn't set it up on here. All right. 00:15:54.520 --> 00:15:56.170 Of course, like the one thing I wanted to 00:15:56.170 --> 00:15:57.490 make sure show with the login page, 00:15:57.490 --> 00:15:58.720 but if this is just say, 00:15:58.720 --> 00:16:01.210 let's just imagine this disabled. 00:16:01.210 --> 00:16:04.900 There might've been something I broke on the other ones. 00:16:04.900 --> 00:16:06.925 Okay. Let's just move through it. 00:16:06.925 --> 00:16:09.325 No, but it's not, I don't know why it's showing. 00:16:09.325 --> 00:16:11.350 Oh, it might be showing because of some other code I have. 00:16:11.350 --> 00:16:13.375 All right. Let's ignore it. But it doesn't work. 00:16:13.375 --> 00:16:18.190 Okay. So we'll say that's a one fourth failure of demo so far. 00:16:18.190 --> 00:16:22.165 All right. So this is your login page. 00:16:22.165 --> 00:16:23.530 So you have this login page, 00:16:23.530 --> 00:16:25.269 you can't get anywhere 00:16:25.269 --> 00:16:28.660 because you've disabled the flyout behavior on there. 00:16:28.660 --> 00:16:30.670 Then you can click Login, 00:16:30.670 --> 00:16:32.995 it get logs you end to the application, 00:16:32.995 --> 00:16:35.605 you click on it, and now you're able to access it. 00:16:35.605 --> 00:16:39.325 So you can customize that page and do what you want. 00:16:39.325 --> 00:16:42.400 So now I'm like hyper-aware there's 00:16:42.400 --> 00:16:45.880 not using hot reload like every time I close it and be like. 00:16:45.880 --> 00:16:48.370 All right. I was 00:16:48.370 --> 00:16:49.120 one of the things where you have 00:16:49.120 --> 00:16:50.170 your demo ready and then they're like, 00:16:50.170 --> 00:16:52.405 " Oh, we're showing hot reload," and you're like, "I don't know. 00:16:52.405 --> 00:16:53.500 I don't want to install these new 00:16:53.500 --> 00:16:58.840 bets".. All right. So now, we're starting it up. 00:16:58.840 --> 00:17:03.085 So this is now showing the idea of say an admin section. 00:17:03.085 --> 00:17:05.065 So let's say down here. 00:17:05.065 --> 00:17:08.319 Here, I've created the top secret section, 00:17:08.319 --> 00:17:11.995 which is based on if the user is an admin. 00:17:11.995 --> 00:17:15.745 So this is a way to show different areas, 00:17:15.745 --> 00:17:19.750 and I'll show you this working real quick with the checkbox. 00:17:19.750 --> 00:17:20.860 Who's excited about the checkbox? 00:17:20.860 --> 00:17:23.360 Yeah, let's hear for checkbox. 00:17:23.700 --> 00:17:27.280 The super funny thing about checkbox is there 00:17:27.280 --> 00:17:28.690 was so much discussion about 00:17:28.690 --> 00:17:30.235 and there are so many things about it, 00:17:30.235 --> 00:17:32.650 and like the second we implemented it, 00:17:32.650 --> 00:17:34.825 man, I use that thing all the time. 00:17:34.825 --> 00:17:37.615 Especially in the UI tests and things like that. 00:17:37.615 --> 00:17:39.895 Yeah, I use it everywhere. I'm like, "This thing is great." 00:17:39.895 --> 00:17:45.430 So thanks for James for motivating us to get that done. But, yeah. 00:17:45.430 --> 00:17:50.125 Okay. Is admin, click on that, oh Top Secrets. 00:17:50.125 --> 00:17:51.880 So now if you go here, 00:17:51.880 --> 00:17:54.835 you'll see there's another section here Top Secret 00:17:54.835 --> 00:17:58.060 which you can get to you click "Logout", 00:17:58.060 --> 00:18:00.505 it takes you back here, 00:18:00.505 --> 00:18:02.725 and then you click "Login". 00:18:02.725 --> 00:18:04.900 I actually haven't tested on clicking or unclicking. 00:18:04.900 --> 00:18:08.560 Oh my God it worked cool. There you have it. 00:18:08.560 --> 00:18:11.095 Going through. So that kind of a study is visible, 00:18:11.095 --> 00:18:12.640 is something that's coming. 00:18:12.640 --> 00:18:16.120 That's one of the the newer features that we're pushing through. 00:18:16.120 --> 00:18:19.600 One thing I wanted to highlight about this were this is kind of 00:18:19.600 --> 00:18:23.365 articulating that cool where everything comes together aspect. 00:18:23.365 --> 00:18:26.635 So if you look at the top secret page, 00:18:26.635 --> 00:18:28.810 this is one of those things where there's going 00:18:28.810 --> 00:18:30.745 to be a mix of cringe and excitement about this one, 00:18:30.745 --> 00:18:35.845 but at the top level we have the shell ViewModel. 00:18:35.845 --> 00:18:40.765 So the shell ViewModel is being assigned to the app shell here. 00:18:40.765 --> 00:18:42.640 All right. So that's being signed with 00:18:42.640 --> 00:18:44.725 the binding context at the shell level. 00:18:44.725 --> 00:18:46.330 So then what happens is that 00:18:46.330 --> 00:18:49.075 ShellViewModel is going to trickle through 00:18:49.075 --> 00:18:51.310 your entire hierarchy until it 00:18:51.310 --> 00:18:55.865 reaches somewhere else that's using its own binding context. 00:18:55.865 --> 00:18:58.739 So for the Top Secret page, 00:18:58.739 --> 00:19:02.190 since I'm not setting the binding context here, 00:19:02.190 --> 00:19:04.440 I'm just returning the page. 00:19:04.440 --> 00:19:08.570 The Top Secret page which is over here, 00:19:08.570 --> 00:19:11.275 which is not useful yet. 00:19:11.275 --> 00:19:13.030 Code behind with something in it. All right. 00:19:13.030 --> 00:19:14.905 Here we go, is the logout command. 00:19:14.905 --> 00:19:18.310 That logout command on that content page is actually 00:19:18.310 --> 00:19:22.540 binding through to the ShellViewModel command that's right here. 00:19:22.540 --> 00:19:27.940 So the content page is binding up to your app level ViewModel. 00:19:27.940 --> 00:19:29.410 So the cool thing here, I mean because 00:19:29.410 --> 00:19:30.925 that's the neat thing about MVVM. 00:19:30.925 --> 00:19:35.095 You basically describe your entire application in your ViewModels, 00:19:35.095 --> 00:19:37.630 and once you have all that connected, 00:19:37.630 --> 00:19:39.010 you just do everything there. 00:19:39.010 --> 00:19:44.780 So when the user logs in to the LoginViewModel, 00:19:45.320 --> 00:19:48.660 here I'm just accessing the shellViewModel 00:19:48.660 --> 00:19:51.885 in a very poor fashion but it's still doing it. 00:19:51.885 --> 00:19:55.710 It sets the is admin flag which is bound to 00:19:55.710 --> 00:19:59.590 the shell item in your App Shell here, 00:19:59.590 --> 00:20:01.435 which is hiding that visibility. 00:20:01.435 --> 00:20:03.715 So now at your ShellViewModel layer, 00:20:03.715 --> 00:20:09.820 you can indicate all the roles and the aspects of everything and 00:20:09.820 --> 00:20:12.490 buying that through it all your shell items or 00:20:12.490 --> 00:20:16.180 even how you want your shell content to show. 00:20:16.180 --> 00:20:18.100 So you can even bind anything on there. 00:20:18.100 --> 00:20:19.690 So if you want to change the way the fly 00:20:19.690 --> 00:20:21.340 out were showing or anything like that. 00:20:21.340 --> 00:20:24.490 Like you can do all of that with these top-level ViewModel. 00:20:24.490 --> 00:20:27.730 So there you have like that what I'm talking about as far as like 00:20:27.730 --> 00:20:31.235 be cohesive nature of shell. 00:20:31.235 --> 00:20:35.185 You have everything put together. 00:20:35.185 --> 00:20:37.310 Let's see. So I think that was the most 00:20:37.310 --> 00:20:38.690 of the stuff I wanted to show. 00:20:38.690 --> 00:20:42.840 Nobody read my text notes. All right, cool. 00:20:42.840 --> 00:20:45.410 Yeah, that's what I wanted to show with the admin sections, 00:20:45.410 --> 00:20:46.610 because always big thing people are 00:20:46.610 --> 00:20:47.930 asking for is being able to hide 00:20:47.930 --> 00:20:53.610 those flyouts based on your context. 00:20:53.890 --> 00:21:01.945 All right. So I'm going to hide the login page really quick, 00:21:01.945 --> 00:21:04.090 mainly just because you guys 00:21:04.090 --> 00:21:05.735 don't want to see me click "Login" every time, 00:21:05.735 --> 00:21:07.745 which you wouldn't have to if hit I'd hot reload right? 00:21:07.745 --> 00:21:12.440 Whatever. So let's move through the custom navigation service. 00:21:12.440 --> 00:21:15.470 So what I've done here on the custom NavigationService is 00:21:15.470 --> 00:21:21.245 I've implemented a few additional features, 00:21:21.245 --> 00:21:26.000 so that you don't have to keep watching me compile and recompile. 00:21:26.000 --> 00:21:28.250 One thing I've done here. 00:21:28.250 --> 00:21:34.530 Where's the parse? Is it hidden? 00:21:35.500 --> 00:21:38.530 So one thing I've done here, okay. 00:21:38.530 --> 00:21:41.960 Cool. So one thing you can't do with shell currently, 00:21:41.960 --> 00:21:43.790 which will probably implement pretty soon 00:21:43.790 --> 00:21:45.860 is through the URI navigation, 00:21:45.860 --> 00:21:47.405 you can't go back a page. 00:21:47.405 --> 00:21:50.210 There's no way to give it anything to tell it, 00:21:50.210 --> 00:21:51.875 "Hey, I want to go back a page." 00:21:51.875 --> 00:21:54.360 So what you can do, 00:21:54.360 --> 00:21:56.060 but the thing is is that you can implement 00:21:56.060 --> 00:21:59.850 your own URI scheme on here. 00:21:59.880 --> 00:22:03.654 You can implement your own URI scheme 00:22:03.654 --> 00:22:06.160 and tell it to do whatever you want. 00:22:06.160 --> 00:22:07.810 Is the items page, 00:22:07.810 --> 00:22:12.895 the thing is such a mix of, there we go. 00:22:12.895 --> 00:22:14.335 Yeah. So here you see, 00:22:14.335 --> 00:22:16.000 I'm doing this dot dot dot. 00:22:16.000 --> 00:22:18.655 So this is something that's not even built into Shell. 00:22:18.655 --> 00:22:21.820 This is the area where things like prism and MVVM cross. 00:22:21.820 --> 00:22:23.830 It'll be interesting to see when they innovate on this. 00:22:23.830 --> 00:22:26.440 So prism can effectively take it's 00:22:26.440 --> 00:22:33.670 URI scheme modeling and key into my text notes, 00:22:33.670 --> 00:22:36.625 key into, "Control" not "Shift", 00:22:36.625 --> 00:22:39.415 can key into the ParseAsync 00:22:39.415 --> 00:22:42.130 to parse that URI however they want and 00:22:42.130 --> 00:22:48.940 articulate what the new state of the Shell is going to be, 00:22:48.940 --> 00:22:50.620 which is also a big aspect 00:22:50.620 --> 00:22:51.970 that's going to help with the hot reload things 00:22:51.970 --> 00:22:53.860 because the whole idea is 00:22:53.860 --> 00:22:56.110 that this is the new model I want Shell to look like, 00:22:56.110 --> 00:22:58.540 it submits that into the Shell concept and then 00:22:58.540 --> 00:23:01.150 Shell morphs itself to match that. 00:23:01.150 --> 00:23:04.795 So what I've done here with the "Back" button, 00:23:04.795 --> 00:23:10.030 you'll see here, I've 00:23:10.030 --> 00:23:15.210 basically taken code and I've looked at it and I've said, 00:23:15.210 --> 00:23:16.590 hey, look at this. 00:23:16.590 --> 00:23:20.575 Is the URI matching? 00:23:20.575 --> 00:23:24.700 Is it dot dot dot" If it is dot dot dot then what we want to 00:23:24.700 --> 00:23:29.455 do is we want to go backwards in the application. 00:23:29.455 --> 00:23:32.530 So here you can set up your own URI scheme. 00:23:32.530 --> 00:23:33.940 So this is where it's going to play into 00:23:33.940 --> 00:23:38.695 stuff even with things like deep-linking for example. 00:23:38.695 --> 00:23:41.575 Let's say your deep-linking URI 00:23:41.575 --> 00:23:44.155 doesn't quite match up or things like that, 00:23:44.155 --> 00:23:46.360 what you can do here is you can say, 00:23:46.360 --> 00:23:50.440 hey, I want to implement my own thing. 00:23:50.440 --> 00:23:53.890 If you hate the way we've set up the URI scheme and you want 00:23:53.890 --> 00:23:56.890 to do your own parsing of everything, 00:23:56.890 --> 00:23:59.560 then you can set up your parameters. 00:23:59.560 --> 00:24:04.150 The cool thing about this structure here is that what it parses 00:24:04.150 --> 00:24:10.165 into is something that you can indicate. 00:24:10.165 --> 00:24:12.250 So this is your path being broken up, 00:24:12.250 --> 00:24:14.815 it has all the navigation parameters on it here. 00:24:14.815 --> 00:24:18.280 So you can add navigation parameters to it as well that 00:24:18.280 --> 00:24:22.015 get applied to the page, which is useful. 00:24:22.015 --> 00:24:31.990 So we're going to really customize the "Back" button here. 00:24:32.810 --> 00:24:35.370 Just trying to make sure 00:24:35.370 --> 00:24:38.930 the parts and see what the navigation stack stuff. 00:24:38.930 --> 00:24:42.400 So it's nice because 00:24:42.400 --> 00:24:46.450 the "Back" button especially is very customized. 00:24:46.450 --> 00:24:48.070 So I'm just going to comment 00:24:48.070 --> 00:24:49.630 some of these sections out so I can make 00:24:49.630 --> 00:24:54.890 sure that this all gets pulled together. That's the wrong button. 00:24:55.920 --> 00:24:59.170 Yeah. So let me pull some of these parts out. 00:24:59.170 --> 00:25:07.090 So let me show you what the application looks like. 00:25:07.090 --> 00:25:12.280 All right lets leave the, year, 00:25:12.280 --> 00:25:16.900 we're going to show you the the final result here, 00:25:16.900 --> 00:25:18.160 I was going to walk through it but 00:25:18.160 --> 00:25:19.720 it's running a little low on time. 00:25:19.720 --> 00:25:22.795 So I just wanted to make sure we can see. 00:25:22.795 --> 00:25:26.590 So this is all being done inside the navigation service. 00:25:26.590 --> 00:25:31.540 So I just wanted to show how much I can modify what 00:25:31.540 --> 00:25:33.565 we're doing here and then I'll walk through this 00:25:33.565 --> 00:25:37.490 once the demo runs perfectly without errors. 00:25:38.940 --> 00:25:42.385 Any of my weird little sections commented out anymore? 00:25:42.385 --> 00:25:43.735 No. Okay, cool. 00:25:43.735 --> 00:25:46.940 The animation, it's going to blow your mind. 00:25:48.750 --> 00:25:52.165 I should add audio to it too. 00:25:52.165 --> 00:25:56.005 It's like a Batman transition. 00:25:56.005 --> 00:26:03.175 So this is the app now tapping into it here which, 00:26:03.175 --> 00:26:04.780 oh look at that, 00:26:04.780 --> 00:26:07.070 it's that pretty exciting. 00:26:09.060 --> 00:26:12.790 Yeah. If you are watchful, 00:26:12.790 --> 00:26:16.945 you saw I went to the "About" page first. Why would it do that? 00:26:16.945 --> 00:26:21.250 So we have these navigation points here, look at that. 00:26:21.250 --> 00:26:23.830 Now, the "Back" button with the dot dot works. 00:26:23.830 --> 00:26:25.030 So now here watch this. 00:26:25.030 --> 00:26:27.355 Now, if I go to this second item, 00:26:27.355 --> 00:26:29.245 you see I'm on the second item, 00:26:29.245 --> 00:26:31.195 trust me it says second item. 00:26:31.195 --> 00:26:35.170 Now, if I "Close" the application and then I go back over 00:26:35.170 --> 00:26:37.240 here and I click on 00:26:37.240 --> 00:26:40.120 it because none of the naming makes any sense right now. 00:26:40.120 --> 00:26:41.485 But if I click on it, 00:26:41.485 --> 00:26:44.935 it will, look at that. 00:26:44.935 --> 00:26:47.800 So this is the tombstone recovery stuff here. 00:26:47.800 --> 00:26:51.235 So now the application is closed and when it comes back, 00:26:51.235 --> 00:26:52.660 it's where it left off. 00:26:52.660 --> 00:26:55.090 So this is the stuff that's really powerful 00:26:55.090 --> 00:26:57.655 with Shell because each concept, 00:26:57.655 --> 00:27:02.545 each part of your Shell is represented by a URI. 00:27:02.545 --> 00:27:06.355 So as the user is navigating through, 00:27:06.355 --> 00:27:09.970 you can reconstruct that entire hierarchy which is really neat. 00:27:09.970 --> 00:27:12.610 So let's break this down a little bit. 00:27:12.610 --> 00:27:16.030 Just look through the way this works. 00:27:16.030 --> 00:27:18.820 We can look through the life-cycle. 00:27:18.820 --> 00:27:21.010 Actually, one thing I also wanted to show you. 00:27:21.010 --> 00:27:22.180 So one of the things people have been 00:27:22.180 --> 00:27:23.650 talking about as well is wanting 00:27:23.650 --> 00:27:26.980 to influence the navigation stack. 00:27:26.980 --> 00:27:29.710 So by default, when you're navigating through 00:27:29.710 --> 00:27:33.460 Shell and you click on the different fly out items, 00:27:33.460 --> 00:27:36.670 it doesn't maintain the back stack. 00:27:36.670 --> 00:27:39.160 But what I've done here is I've customized 00:27:39.160 --> 00:27:41.140 the "Back" button behavior so that if you 00:27:41.140 --> 00:27:43.569 go here and you click this, 00:27:43.569 --> 00:27:47.305 it goes to the about page which replaces it with a "Back" button 00:27:47.305 --> 00:27:49.150 and I click the "Back" button and now it goes 00:27:49.150 --> 00:27:51.160 back to the other fly-out item. 00:27:51.160 --> 00:27:55.720 So these are this cool scenarios that you can really 00:27:55.720 --> 00:28:01.300 easily define how you want it to work. 00:28:01.300 --> 00:28:06.040 So let's work through this a little bit here. 00:28:06.040 --> 00:28:09.410 So here, when the page is created, 00:28:11.580 --> 00:28:15.910 we have this bindable property here, "Back" button behavior. 00:28:15.910 --> 00:28:18.805 So what I've done here, which is cool, 00:28:18.805 --> 00:28:21.250 is I've created a command for 00:28:21.250 --> 00:28:23.260 the "Back" button behavior and now 00:28:23.260 --> 00:28:25.870 every single page that's created, 00:28:25.870 --> 00:28:32.500 the "Back" button gets pathed through, 00:28:32.500 --> 00:28:35.320 the execution goes through this command. 00:28:35.320 --> 00:28:37.525 So now anywhere in the application 00:28:37.525 --> 00:28:40.090 where they click that top-left thing, 00:28:40.090 --> 00:28:42.895 I can look at it and then 00:28:42.895 --> 00:28:46.374 determine based on the application state, 00:28:46.374 --> 00:28:49.180 indicate where what I want to do. 00:28:49.180 --> 00:28:51.520 So you'll see here what I've done is 00:28:51.520 --> 00:28:55.795 I maintain a navigation stack, 00:28:55.795 --> 00:28:58.795 and if the navigation stack has more than one item, 00:28:58.795 --> 00:29:03.145 I send this here which is my customized URI that I've created. 00:29:03.145 --> 00:29:05.905 Otherwise, what I do is I tell the Shell, hey, 00:29:05.905 --> 00:29:08.110 actually you want to present the fly out because there's nobody 00:29:08.110 --> 00:29:11.545 there, which I think is cool. 00:29:11.545 --> 00:29:13.900 Because now, you have all your "Back" button here's centralized in 00:29:13.900 --> 00:29:17.275 a service of how you want your application to work. 00:29:17.275 --> 00:29:19.930 So you could tell the "Back" button to do anything. 00:29:19.930 --> 00:29:22.390 So if you look at the Facebook app for example, 00:29:22.390 --> 00:29:24.445 when they're clicking through the tabs, 00:29:24.445 --> 00:29:27.160 the "Back" button always goes back to the "Home" tab. 00:29:27.160 --> 00:29:29.830 So if you're on the "Home" tab and you click on the second, third, 00:29:29.830 --> 00:29:31.390 fourth, fifth tab and you click "Back", 00:29:31.390 --> 00:29:32.860 it goes back to the "Home" tab. 00:29:32.860 --> 00:29:35.920 So you can use this behavior here 00:29:35.920 --> 00:29:40.285 to influence however you want your navigation to work. 00:29:40.285 --> 00:29:43.705 That's what's really cool here in your navigating. 00:29:43.705 --> 00:29:48.085 So here we're looking at the life cycles. 00:29:48.085 --> 00:29:52.450 So the navigating point is when it's determined 00:29:52.450 --> 00:29:58.495 the URI has submitted a successful navigation. 00:29:58.495 --> 00:30:02.155 So now, a navigation is going to occur. 00:30:02.155 --> 00:30:06.085 So this is where the fun animation comes into play. 00:30:06.085 --> 00:30:08.530 So what I do here is during navigating, 00:30:08.530 --> 00:30:11.050 I grab the current page. 00:30:11.050 --> 00:30:14.320 So I grab the current page that's going to be displayed, 00:30:14.320 --> 00:30:18.730 and I apply a scale to animation. 00:30:18.730 --> 00:30:22.030 So that's what you're seeing when the page is coming in. 00:30:22.030 --> 00:30:23.875 When the page is coming in, 00:30:23.875 --> 00:30:28.220 it scales to it which you can even see. Hold on. 00:30:28.470 --> 00:30:31.060 I forgot I would do this. See look at that. 00:30:31.060 --> 00:30:33.895 If you click the "Abouts", isn't that fun? 00:30:33.895 --> 00:30:36.505 You're just clicking between the tabs 00:30:36.505 --> 00:30:39.400 and it's giving you this cool animation. 00:30:39.400 --> 00:30:44.770 Because that's all parsing through appearing. 00:30:44.770 --> 00:30:52.040 So appearing now is indicating that your page is going to appear. 00:30:52.290 --> 00:30:55.090 So this happens. 00:30:55.090 --> 00:30:56.710 The cool thing here about the Shell stuff, too, 00:30:56.710 --> 00:30:58.585 is "appearing" actually means appearing. 00:30:58.585 --> 00:31:01.779 So the appearing event is fired on Shell 00:31:01.779 --> 00:31:05.695 prior to the view actually appearing on the page. 00:31:05.695 --> 00:31:08.590 So this is the place where MVVM frameworks will hook into 00:31:08.590 --> 00:31:12.160 changing your bindings and all of those things, because right now, 00:31:12.160 --> 00:31:15.445 if you hook into "appearing" on iOS, 00:31:15.445 --> 00:31:17.320 your page will show up blank and then 00:31:17.320 --> 00:31:20.395 your text will fade in because the event is wrong, 00:31:20.395 --> 00:31:23.935 but Shell fires appearing correctly in 4.2. 00:31:23.935 --> 00:31:28.345 It didn't fire it all in four-line but we won't talk about that. 00:31:28.345 --> 00:31:31.595 So it's cool. 00:31:31.595 --> 00:31:34.945 Now, appearing is where I'm customizing how I want it to work. 00:31:34.945 --> 00:31:37.465 So look at this, I have this back button behavior 00:31:37.465 --> 00:31:39.745 that I've assigned to all the pages 00:31:39.745 --> 00:31:42.550 and what I've done now is I retrieve 00:31:42.550 --> 00:31:45.415 that back button behavior that's on that page, 00:31:45.415 --> 00:31:47.680 and then I look at the navigation stack, 00:31:47.680 --> 00:31:50.155 and then based on the navigation stack, 00:31:50.155 --> 00:31:52.060 that's when you saw here. 00:31:52.060 --> 00:31:54.535 Where is it? See where I'm setting, what this looks like. 00:31:54.535 --> 00:31:57.130 So now inside this appearing thing, 00:31:57.130 --> 00:32:00.910 I have context of my virtualized stack. 00:32:00.910 --> 00:32:03.715 The stack that I've made up in 00:32:03.715 --> 00:32:05.890 this service and I say what I want you to 00:32:05.890 --> 00:32:08.455 actually do is I want you to set the text to back, 00:32:08.455 --> 00:32:10.720 and then if there is no navigation stack, 00:32:10.720 --> 00:32:13.960 I want you to use the normal hamburger menu there. 00:32:13.960 --> 00:32:18.459 So it's neat. The whole navigation concept 00:32:18.459 --> 00:32:22.345 of your application is being described in this service. 00:32:22.345 --> 00:32:24.070 So you can really richly 00:32:24.070 --> 00:32:26.230 orchestrate how you want everything to work. 00:32:26.230 --> 00:32:30.520 So then this is where the effect of its spinning. 00:32:30.520 --> 00:32:32.890 So each time you're clicking one of those tabs, 00:32:32.890 --> 00:32:34.645 the appearing event fires, 00:32:34.645 --> 00:32:38.170 and then this is the set of operations that happen. 00:32:38.170 --> 00:32:39.670 So this rotation here, 00:32:39.670 --> 00:32:43.690 what you're seeing as this incoming page animation. 00:32:43.690 --> 00:32:45.280 So isn't that neat? So that's because 00:32:45.280 --> 00:32:47.170 the forms animations are really cool. 00:32:47.170 --> 00:32:49.105 I think sometimes people forget that they're there. 00:32:49.105 --> 00:32:52.720 So the entirety of those animations that you saw, 00:32:52.720 --> 00:32:55.255 it's so little code. 00:32:55.255 --> 00:32:59.620 All it is, is this code here which is transforming 00:32:59.620 --> 00:33:05.960 the page and then the thing here which is scaling it. That's it. 00:33:08.630 --> 00:33:10.830 That's everything that's doing 00:33:10.830 --> 00:33:13.425 that cross-platform animation which is cool. 00:33:13.425 --> 00:33:16.005 So, yeah. 00:33:16.005 --> 00:33:19.890 So that's how the animation works. 00:33:19.890 --> 00:33:21.330 The parse we went through. 00:33:21.330 --> 00:33:23.040 So the parse is pretty basic. 00:33:23.040 --> 00:33:26.835 It's just looking at the navigation stack which is neat. 00:33:26.835 --> 00:33:31.380 All right. So let's see. 00:33:31.380 --> 00:33:36.135 Let's look at the tomb-stoning here real quick. 00:33:36.135 --> 00:33:39.210 So the tomb-stoning is neat that's using 00:33:39.210 --> 00:33:43.390 Xamarin essentials but basically what I 00:33:43.390 --> 00:33:50.710 do is I have these simple methods that I've created. 00:33:50.710 --> 00:33:56.570 So this is a very basic serializing. 00:33:56.580 --> 00:34:02.290 I take the URIs and then I just stormed into the settings stack. 00:34:02.290 --> 00:34:05.155 Into Settings is like a string. 00:34:05.155 --> 00:34:06.760 So pretty basic. 00:34:06.760 --> 00:34:10.855 So let me go through where I'm building the stack. 00:34:10.855 --> 00:34:13.015 Yeah, here "Navigating". 00:34:13.015 --> 00:34:17.710 So all I'm really doing with navigating is I'm looking at it and 00:34:17.710 --> 00:34:24.940 saying so when the URI is coming in, 00:34:24.940 --> 00:34:27.400 I look at it and I say, "Okay, cool." 00:34:27.400 --> 00:34:31.165 So I grab the navigationStack and then I add it to the navStack. 00:34:31.165 --> 00:34:33.040 The main reason I'm doing the compare 00:34:33.040 --> 00:34:34.150 on top is if you're doing like 00:34:34.150 --> 00:34:35.620 a back because you don't want 00:34:35.620 --> 00:34:38.200 the back button to go into your navigationStack. 00:34:38.200 --> 00:34:41.950 So if the last page is the current page, 00:34:41.950 --> 00:34:44.575 that means the user is popping it off the top. 00:34:44.575 --> 00:34:47.215 So that's basically what this is here. 00:34:47.215 --> 00:34:52.135 So what this is doing is creating this VirtualStack, 00:34:52.135 --> 00:34:57.880 and then the VirtualStack is just a list that's stored locally. 00:34:57.880 --> 00:35:00.220 So you can see the saved state. 00:35:00.220 --> 00:35:01.645 It's not that exciting. 00:35:01.645 --> 00:35:05.260 It's just down here, saved state. 00:35:05.260 --> 00:35:08.395 So it's just taking the navigationStack. 00:35:08.395 --> 00:35:13.945 This the delimiter of the navigationStack and it's storing it, 00:35:13.945 --> 00:35:17.850 and that's really it. 00:35:17.850 --> 00:35:18.990 It's storing it. 00:35:18.990 --> 00:35:21.225 Where I'm I? Magic strings. 00:35:21.225 --> 00:35:22.290 So that's cool. 00:35:22.290 --> 00:35:24.390 So now what's happening is when you're 00:35:24.390 --> 00:35:27.610 starting up the application, 00:35:29.210 --> 00:35:33.250 what it's doing here with your navigationStack, 00:35:33.250 --> 00:35:38.170 is it's saying, "Does the navigationStack exist?" 00:35:38.170 --> 00:35:41.395 It doesn't. So navigationStack is zero. 00:35:41.395 --> 00:35:45.025 So that means it's the first navigation point 00:35:45.025 --> 00:35:47.410 and then what it does is that it loads the states. 00:35:47.410 --> 00:35:53.080 So now it's deserializing that. 00:35:53.080 --> 00:35:56.440 Deserializing is way too 00:35:56.440 --> 00:35:57.955 of a complicated word for what it's doing, 00:35:57.955 --> 00:36:00.325 but it basically bores the string out, 00:36:00.325 --> 00:36:03.295 splits it on that term and then 00:36:03.295 --> 00:36:07.910 recreates what your URI stack works looks like. 00:36:08.520 --> 00:36:10.600 Because every application has 00:36:10.600 --> 00:36:12.715 a different way they want to do stacks. 00:36:12.715 --> 00:36:14.965 What they want the "Back" button to do. 00:36:14.965 --> 00:36:17.050 Some people for example on Slack, 00:36:17.050 --> 00:36:19.195 if you're navigating between channels, 00:36:19.195 --> 00:36:21.850 the "Back" button doesn't let you do anything but a lot of people 00:36:21.850 --> 00:36:25.300 want to be able to customize that behavior. 00:36:25.300 --> 00:36:29.380 Yeah, so this is cool. So it saves the state and then all we do, 00:36:29.380 --> 00:36:32.125 this is where you can see it pull everything together 00:36:32.125 --> 00:36:36.520 is you take it, 00:36:36.520 --> 00:36:39.130 you get the navigationStack and then what 00:36:39.130 --> 00:36:41.500 I do is I call "ParseAsync". 00:36:41.500 --> 00:36:42.640 So now what I'm saying to 00:36:42.640 --> 00:36:46.795 the Navigating is I'm taking that last URI, 00:36:46.795 --> 00:36:50.635 I'm parsing that URI against the system, and then saying, 00:36:50.635 --> 00:36:54.880 "I want you to return to me the next state of the application." 00:36:54.880 --> 00:36:57.010 So then now that's the page that it's going to go 00:36:57.010 --> 00:37:00.295 to and now my navigationStack is restored. 00:37:00.295 --> 00:37:03.040 So now the navigationStack here is able 00:37:03.040 --> 00:37:11.110 to now work with the Back Button Behavior that I've customized. 00:37:11.110 --> 00:37:12.730 So it's cool. 00:37:12.730 --> 00:37:15.265 So you've been able to pull together. 00:37:15.265 --> 00:37:17.260 You can very much 00:37:17.260 --> 00:37:20.050 customize all these different features of how it works. 00:37:20.050 --> 00:37:23.095 So, yeah. 00:37:23.095 --> 00:37:25.810 So on any of these pages where it's pulling in 00:37:25.810 --> 00:37:30.340 the pages with these lifecycles here, 00:37:30.340 --> 00:37:31.480 this is where on the appearing, 00:37:31.480 --> 00:37:33.265 you can set the navbar visible. 00:37:33.265 --> 00:37:35.845 You can set the tab pages visible. 00:37:35.845 --> 00:37:37.780 Anything you really want to do. 00:37:37.780 --> 00:37:40.240 So, yeah let's see. 00:37:40.240 --> 00:37:42.730 I think that was most of the stuff with the demo. 00:37:42.730 --> 00:37:46.000 Check notes. Yeah tomb-stoning top-secret, cool. 00:37:46.000 --> 00:37:47.875 So let's switch over. 00:37:47.875 --> 00:37:50.020 I've clicked on most of these pages but I wanted to 00:37:50.020 --> 00:37:52.720 just show the fresh MVVM. 00:37:52.720 --> 00:38:00.130 Let's close the Xamarin. All right. So let's see. 00:38:00.130 --> 00:38:08.080 So we don't run out because we had about seven minutes left. 00:38:08.080 --> 00:38:10.600 So are there any questions? 00:38:10.600 --> 00:38:13.330 Anybody want to go up to the mic and ask your question about 00:38:13.330 --> 00:38:16.990 Shell or things that it's going to support or not support? 00:38:16.990 --> 00:38:20.960 No? If not, I don't want to do with the next five minutes. 00:38:22.500 --> 00:38:25.645 >> Number 1, first thing that I like to know is, 00:38:25.645 --> 00:38:30.640 what's the timetable on being able to use prism with shell? 00:38:30.640 --> 00:38:36.295 >> I don't really know the timetable honestly, 00:38:36.295 --> 00:38:39.115 it's hard to commit to timetables. 00:38:39.115 --> 00:38:40.930 But with that, what we're doing, 00:38:40.930 --> 00:38:42.550 so it's really neat because FreshMvvm, 00:38:42.550 --> 00:38:44.215 which is the sample here, 00:38:44.215 --> 00:38:47.920 has an example here where they've tapped into it. 00:38:47.920 --> 00:38:51.069 So the part of that we're determining 00:38:51.069 --> 00:38:55.899 is where we can get to with what's here, 00:38:55.899 --> 00:38:57.670 what parts we can put in to allow 00:38:57.670 --> 00:38:59.755 prism to start doing the support? 00:38:59.755 --> 00:39:03.010 So that's one of the big reasons I'm building a lot of this stuff. 00:39:03.010 --> 00:39:05.500 There's a NuGet for this that we can pull in, 00:39:05.500 --> 00:39:08.200 so I'm working with Dan very actively and a lot of 00:39:08.200 --> 00:39:11.260 them to make sure that everything's here that they need. 00:39:11.260 --> 00:39:14.260 So yeah, a lot of that stuff is built with that in mind. 00:39:14.260 --> 00:39:15.970 I have a version I want to say 00:39:15.970 --> 00:39:19.120 in my head but I'm not going to say it 00:39:19.120 --> 00:39:21.535 >> His part is what version I hope it's going to be in, 00:39:21.535 --> 00:39:24.220 but a lot of it too is just trying to put the parts in. 00:39:24.220 --> 00:39:28.150 So instead of putting in this huge PR, 00:39:28.150 --> 00:39:29.890 it's going to be all these things. 00:39:29.890 --> 00:39:32.140 I need to get the visibility wine 00:39:32.140 --> 00:39:34.630 and some of the back button behaviors that may appearing, 00:39:34.630 --> 00:39:36.430 so we're rolling that rock or 00:39:36.430 --> 00:39:38.770 forward very aggressively between them, 00:39:38.770 --> 00:39:40.270 and at some point, we're going to hit that point where 00:39:40.270 --> 00:39:42.010 prism is able to really do what they want. 00:39:42.010 --> 00:39:44.950 So the main one I think the prism is going to need is really 00:39:44.950 --> 00:39:48.685 this create and then some of the navigation hooks. 00:39:48.685 --> 00:39:49.990 This is the big one right now, 00:39:49.990 --> 00:39:55.330 is that right now there's no way to DI your pages with shell, 00:39:55.330 --> 00:39:57.010 so that'll be big. 00:39:57.010 --> 00:39:59.950 Then, the second step is going to be really exciting. 00:39:59.950 --> 00:40:04.150 >> So right now the recommendation for doing onboarding, 00:40:04.150 --> 00:40:06.535 there is procedures that we can do. 00:40:06.535 --> 00:40:09.070 If we're doing tabs we can use the flyout and just 00:40:09.070 --> 00:40:11.755 disable the flyout or vice versa. 00:40:11.755 --> 00:40:14.290 Is there going to be a separate flow 00:40:14.290 --> 00:40:15.790 that will handle like onboarding, 00:40:15.790 --> 00:40:18.190 logging in separate flows 00:40:18.190 --> 00:40:21.310 that you wouldn't necessarily want the user to navigate to? 00:40:21.310 --> 00:40:24.070 >> Yeah. 00:40:24.070 --> 00:40:26.440 So that's with the login page. 00:40:26.440 --> 00:40:32.530 So you mean where you would have with their registering? 00:40:32.530 --> 00:40:34.060 Is that what you're saying like if they're 00:40:34.060 --> 00:40:35.560 registering and moving through? 00:40:35.560 --> 00:40:37.900 >> Yes. Onboarding tutorials that sort of thing. 00:40:37.900 --> 00:40:39.310 >> Okay. Yeah, we've had 00:40:39.310 --> 00:40:42.295 a few cases of talking to people with that. 00:40:42.295 --> 00:40:45.610 That's very much what this login page flow 00:40:45.610 --> 00:40:49.105 here is for because with this, 00:40:49.105 --> 00:40:52.255 you could do an onboarding with these scenarios. 00:40:52.255 --> 00:40:54.820 Here I think some of the naming gets in the way. 00:40:54.820 --> 00:40:57.160 So for example, with this tab bar, 00:40:57.160 --> 00:41:00.175 this isn't going to have a tab bar as you saw, 00:41:00.175 --> 00:41:01.660 but you could still from 00:41:01.660 --> 00:41:06.775 this login page move through an application of onboarding. 00:41:06.775 --> 00:41:10.855 You could push a content page on for the next page, 00:41:10.855 --> 00:41:13.630 and then the next page, and then like all the modal things work. 00:41:13.630 --> 00:41:18.535 But that's one thing that people are really interested in, 00:41:18.535 --> 00:41:23.290 so there's an issue that someone created where we 00:41:23.290 --> 00:41:25.540 want to be able to more declaratively 00:41:25.540 --> 00:41:28.030 define things like onboarding. 00:41:28.030 --> 00:41:30.520 So like what you might do in an onboarding case with 00:41:30.520 --> 00:41:33.790 a login is you might do another shell content here 00:41:33.790 --> 00:41:37.360 that represents registration and 00:41:37.360 --> 00:41:39.790 then that's the next page pass your login page. 00:41:39.790 --> 00:41:41.410 Then with your nest registration, 00:41:41.410 --> 00:41:43.795 you might do, okay, gathering details. 00:41:43.795 --> 00:41:45.775 Then, now that's articulating 00:41:45.775 --> 00:41:49.345 your hierarchy that you're moving through for onboarding. 00:41:49.345 --> 00:41:51.235 So we want to be able to also describe 00:41:51.235 --> 00:41:54.565 the flows in a more in-depth fashion. 00:41:54.565 --> 00:41:55.915 Does that answer your question? 00:41:55.915 --> 00:41:56.580 >> Yes. 00:41:56.580 --> 00:41:58.900 >> Okay. If it didn't quite cover it, 00:41:58.900 --> 00:42:02.575 just let me know and we can chat more directly about it. 00:42:02.575 --> 00:42:04.900 >> Okay. So I have two questions. 00:42:04.900 --> 00:42:07.480 The first one, is it possible or 00:42:07.480 --> 00:42:10.375 easy to do custom renderer on the tab, 00:42:10.375 --> 00:42:13.270 for example, like the icon or 00:42:13.270 --> 00:42:16.600 the text if I want to put like a batch in the tab? 00:42:16.600 --> 00:42:18.280 >> Okay. Yeah. 00:42:18.280 --> 00:42:19.495 >> Yeah. 00:42:19.495 --> 00:42:21.880 >> Yeah. So you're talking about just 00:42:21.880 --> 00:42:24.070 on the tabs on the bottom in white node? 00:42:24.070 --> 00:42:24.510 >> Yeah. 00:42:24.510 --> 00:42:27.055 >> That one I would like to make a little bit easier, 00:42:27.055 --> 00:42:29.545 but the tab icon, 00:42:29.545 --> 00:42:32.285 David, can you customize the tab icons? 00:42:32.285 --> 00:42:40.960 >> [inaudible]. 00:42:40.960 --> 00:42:43.060 >> Okay. Yeah. What's that? 00:42:43.060 --> 00:42:44.950 We have a PR for the badges. 00:42:44.950 --> 00:42:46.675 Because you asked about badges? 00:42:46.675 --> 00:42:47.050 >> Yeah. 00:42:47.050 --> 00:42:48.790 >> Okay. Sorry, I missed that. 00:42:48.790 --> 00:42:52.105 Yeah. We have a template where you can wear a templates. 00:42:52.105 --> 00:42:54.700 We have a PR for the badges that we're hopefully 00:42:54.700 --> 00:42:57.550 going to get in soon where you can set those up. 00:42:57.550 --> 00:43:02.635 Right now, I would say the renderer story it's still evolving. 00:43:02.635 --> 00:43:05.275 You can get to everything within shell. 00:43:05.275 --> 00:43:08.800 So one thing about shell which is a little different about 00:43:08.800 --> 00:43:10.870 the renderer structure is that instead of 00:43:10.870 --> 00:43:15.070 having a renderer for every aspect of it, 00:43:15.070 --> 00:43:17.725 it all gets piped through 00:43:17.725 --> 00:43:21.145 a single renderer just called shell render. 00:43:21.145 --> 00:43:24.445 So if you wanted to customize at the platform level, 00:43:24.445 --> 00:43:26.770 it's a good question like you pipe through here. 00:43:26.770 --> 00:43:29.815 The shell renderer is the renderer for shell. 00:43:29.815 --> 00:43:33.550 So it's one renderer instead of having to go through it. 00:43:33.550 --> 00:43:34.780 So what you would do on 00:43:34.780 --> 00:43:37.570 the platform level is you would implement your own shell renderer, 00:43:37.570 --> 00:43:39.730 use the normal export attribute, 00:43:39.730 --> 00:43:41.350 and then now in here, 00:43:41.350 --> 00:43:45.145 it has different overrides virtual methods 00:43:45.145 --> 00:43:49.660 for creating these different parts of it. 00:43:49.660 --> 00:43:51.685 So here's the tab layout, 00:43:51.685 --> 00:43:53.875 here's the bottom nav view. 00:43:53.875 --> 00:43:56.425 Here's where you can get access to that, 00:43:56.425 --> 00:43:59.050 here's the status bar. 00:43:59.050 --> 00:44:02.515 So this here is where it's creating all of these, 00:44:02.515 --> 00:44:06.970 and this is where you can create those things and access them. 00:44:06.970 --> 00:44:08.740 Does that answer your question? 00:44:08.740 --> 00:44:09.610 >> Kind of. Yeah. 00:44:09.610 --> 00:44:13.405 >> Yeah. So if the tabs I would say, 00:44:13.405 --> 00:44:15.610 which has been interesting because with the voting, 00:44:15.610 --> 00:44:18.640 one of the highest votes that we had restored startup was 00:44:18.640 --> 00:44:22.150 to have a cross-platform navigation bar. 00:44:22.150 --> 00:44:23.890 So the tab is another one 00:44:23.890 --> 00:44:26.200 that we've been looking at which would be cool 00:44:26.200 --> 00:44:28.270 to have more cross-platform so 00:44:28.270 --> 00:44:30.535 that you can much more easily tap into them. 00:44:30.535 --> 00:44:33.970 But it's still all in native tablet layout. 00:44:33.970 --> 00:44:37.480 It's using tab layout on Android bottom navigation bar, 00:44:37.480 --> 00:44:41.380 and then tab controls on iOS. 00:44:41.380 --> 00:44:44.170 So you can get to them at the renderer level and 00:44:44.170 --> 00:44:47.440 customize those things. But yeah. 00:44:47.440 --> 00:44:50.080 So if this a specific case, 00:44:50.080 --> 00:44:54.025 you can get too easily definitely login issue with shell 00:44:54.025 --> 00:44:56.740 because the renderer story needs a little bit of 00:44:56.740 --> 00:44:59.875 work making it more easy to get to all the different parts. 00:44:59.875 --> 00:45:01.330 So that's one thing that makes 00:45:01.330 --> 00:45:02.860 shell a little different because you have 00:45:02.860 --> 00:45:06.175 the shell renderer and it's such a top-level, 00:45:06.175 --> 00:45:08.470 making sure they have access to all those parts. 00:45:08.470 --> 00:45:08.710 >> Okay. 00:45:08.710 --> 00:45:15.880 >> [inaudible]. 00:45:15.880 --> 00:45:18.130 >> Okay. My next question is, 00:45:18.130 --> 00:45:21.775 if I wanted to do like deep linking or app linking, 00:45:21.775 --> 00:45:27.145 would it be possible to do with this shell routing navigation? 00:45:27.145 --> 00:45:30.235 >> Yeah. We're almost out of time here, but yeah. 00:45:30.235 --> 00:45:32.290 That's one of the big things that we want to enable. 00:45:32.290 --> 00:45:36.500 So because like when you're doing deep linking, 00:45:37.050 --> 00:45:39.370 when you map your deep linking, 00:45:39.370 --> 00:45:42.070 it's basically your host and your scheme 00:45:42.070 --> 00:45:46.105 which tells it that this application services this URL, 00:45:46.105 --> 00:45:48.910 and then the interesting part of that is the path that the end. 00:45:48.910 --> 00:45:51.040 So like if you were doing deep linking, 00:45:51.040 --> 00:45:52.615 that's where the URI comes in. 00:45:52.615 --> 00:45:55.630 So you would basically start your application 00:45:55.630 --> 00:45:58.780 when it starts from that point where it's deep linked into, 00:45:58.780 --> 00:46:01.630 and then from there you get the path they're going to, 00:46:01.630 --> 00:46:04.930 and then if you've set up your shell to match that, 00:46:04.930 --> 00:46:06.610 then you can just go to that path and 00:46:06.610 --> 00:46:08.545 it'll go directly to that page. 00:46:08.545 --> 00:46:11.980 So that's what happens with the query string navigation. 00:46:11.980 --> 00:46:16.585 So when it's navigating on the details pages, 00:46:16.585 --> 00:46:19.675 for example, the view model, 00:46:19.675 --> 00:46:24.190 here, see the URI that it's building it's just a query string, 00:46:24.190 --> 00:46:27.970 it's just a name of something here on a query string parameter. 00:46:27.970 --> 00:46:29.620 So with the deep linking, 00:46:29.620 --> 00:46:32.170 you can just do "details ID equals something" 00:46:32.170 --> 00:46:33.310 based on what they're doing and then 00:46:33.310 --> 00:46:35.350 link that into the application. 00:46:35.350 --> 00:46:38.680 Then if you want, you can go crazy in your navigation service 00:46:38.680 --> 00:46:42.265 and build a custom stack as well. 00:46:42.265 --> 00:46:45.490 So that's goes back to where he was talking about, 00:46:45.490 --> 00:46:47.050 which would be cool if we could describe 00:46:47.050 --> 00:46:48.820 a hierarchy here because then we could 00:46:48.820 --> 00:46:52.825 generate the entire stack for you if we have knowledge about it. 00:46:52.825 --> 00:46:54.610 So yeah. 00:46:54.610 --> 00:46:57.440 I think we prime you to cut it. 00:46:57.720 --> 00:47:01.405 I'm going to close my stuff and then maybe? 00:47:01.405 --> 00:47:03.080 He's in charge so he can tell me to get up or not. 00:47:03.080 --> 00:47:05.770 >> I have a quick question about navigation parameters, 00:47:05.770 --> 00:47:07.195 but I can take it offline. 00:47:07.195 --> 00:47:10.360 >> Okay. Take it up there because we need to wrap it up. 00:47:10.360 --> 00:47:11.635 So yeah. All right. 00:47:11.635 --> 00:47:14.830 Well, that's it. Yeah, [inaudible] . 00:47:14.830 --> 00:47:17.045 Yay! Summit. 00:47:17.045 --> 00:47:19.500 Yeah. 00:47:19.500 --> 00:47:22.000 [MUSIC]