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 by reviewing where we started and where we ended up. So we saw that Anvil applications are single-page apps
0:11
that means they all load up at the beginning and they never go back to the server they don't refresh the page as far as the browser's concerned
0:18
we're just on this one page for a super long time. But, in fact, we do navigate around and the way we do that is by using JavaScript to get data
0:25
which we haven't done a ton of yet but we're going to and then manipulating the DOM. And the easiest way to do that is
0:32
to just take these components that we built like a HomeDetailsComponent or an AddMeasurementComponent and having Anvil have an area in our page
0:40
which is most of our app where we just pop those controls in and out of. So, here if we want to load up the home view and we've got that HomeForm
0:49
which is a shell in the HomeDetailsComponent which is like the here's your recent measurements and whatnot
0:54
we're going to go and go to this content panel figure whatever happens to be there if something is there and then just add the one
1:00
and only home details component like this. We potentially could pass additional data to the thing but we're not actually doing that
1:06
so that's all well and good. We also saw that we can set the title we can set the active navigation maybe we check for users
1:13
all that would have to be stuck in here and it's hard to replicate that in other places, right? This is inside the HomeForm.
1:18
We also saw, like, other components might need to do stuff like this. For example, the AddMeasurementComponent. So what's better?
1:26
Well, we're going to move all of this navigation concept to a navigation client side module. We just called it navigation
1:33
and it has things like go add measurement. And it can do and check, does this page require an account? Yes, it does
1:40
so we're going to try to get that account. If we don't get one, go home otherwise, we're going to set the title set the active navigation
1:48
and then load that add measurement component, right? And then all we do is basically delegate back
1:53
to the home form to say load control and pass it off. Also, set_title, set_active_nav and so on.
2:00
So this is a really nice pattern within Anvil applications to factor all that kind of stuff about moving from view to view validation from view to view
2:08
setting up things like the active navigation and the title and whether an account is required, all that stuff. Really great and this is how you do it.