Anvil: Web apps with nothing but Python Transcripts
Chapter: Navigating between views
Lecture: Concept: Navigation module

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's round out this chapter on navigation
0:02 by reviewing where we started
0:04 and where we ended up.
0:06 So we saw that Anvil applications are single-page apps
0:10 that means they all load up at the beginning
0:12 and they never go back to the server
0:14 they don't refresh the page
0:15 as far as the browser's concerned
0:17 we're just on this one page for a super long time.
0:20 But, in fact, we do navigate around
0:21 and the way we do that is by using JavaScript to get data
0:24 which we haven't done a ton of yet but we're going to
0:26 and then manipulating the DOM.
0:29 And the easiest way to do that is
0:31 to just take these components that we built
0:33 like a HomeDetailsComponent
0:34 or an AddMeasurementComponent
0:36 and having Anvil have an area in our page
0:39 which is most of our app
0:41 where we just pop those controls in and out of.
0:44 So, here if we want to load up the home view
0:46 and we've got that HomeForm
0:48 which is a shell in the HomeDetailsComponent
0:50 which is like the here's your recent measurements
0:52 and whatnot
0:53 we're going to go and go to this content panel
0:55 figure whatever happens to be there
0:56 if something is there and then just add the one
0:59 and only home details component like this.
1:01 We potentially could pass additional data to the thing
1:04 but we're not actually doing that
1:05 so that's all well and good.
1:07 We also saw that we can set the title
1:09 we can set the active navigation
1:10 maybe we check for users
1:12 all that would have to be stuck in here
1:13 and it's hard to replicate that in other places, right?
1:16 This is inside the HomeForm.
1:17 We also saw, like, other components might need
1:20 to do stuff like this.
1:21 For example, the AddMeasurementComponent.
1:24 So what's better?
1:25 Well, we're going to move all of this navigation concept
1:28 to a navigation client side module.
1:31 We just called it navigation
1:32 and it has things like go add measurement.
1:35 And it can do and check, does this page require an account?
1:38 Yes, it does
1:39 so we're going to try to get that account.
1:41 If we don't get one, go home
1:43 otherwise, we're going to set the title
1:45 set the active navigation
1:47 and then load that add measurement component, right?
1:50 And then all we do is basically delegate back
1:52 to the home form to say load control and pass it off.
1:56 Also, set_title, set_active_nav and so on.
1:59 So this is a really nice pattern within Anvil applications
2:02 to factor all that kind of stuff
2:03 about moving from view to view
2:05 validation from view to view
2:07 setting up things like the active navigation and the title
2:09 and whether an account is required, all that stuff.
2:12 Really great and this is how you do it.