Anvil: Web Apps with Nothing but Python Transcripts
Chapter: Navigating between views
Lecture: Navigation intro
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
It's time to expand our application. So far, we've only had the Add Measurement control. And yeah, it's doing some cool stuff.
0:08
It does validation and it processes the request and things like that. But, there are many aspects for application
0:13
and so we've already created these different components. The CompareComponent and the home details the AddMeasurementComponent, and all those things.
0:22
But we need to talk about navigating between them. With normal web applications standard server side driven web applications
0:29
or even static ones the way navigation happens is we navigate by going to different URLs and completely reloading the web page.
0:38
Anvil, on the other hand, is different. The way Anvil works is it is what's called a Single Page Application, often shortened to SPA.
0:46
In a Single Page App, the app does not actually reload. As you interact with it, just certain parts are changed.
0:53
The DOM, the Document Object Model and HTML is just replaced. So here we can see the shell the home form that we've already created.
1:01
And there's this section right here. Into this little panel, what we're going to do is we're going to start dropping different components.
1:09
Let's imagine they've clicked add here in the left navigation, and we need to load the AddMeasurementComponent into this area.
1:15
So what happens? We sort of did this early on just to get things up and running. What happens is, we're first going to create
1:22
one of these add measurement components. We're just going to call it's initializer in Python. Then, potentially, we're going to set some data.
1:29
I don't believe we actually do that on the AddMeasurementComponent but if we needed to we could go ahead and set some properties
1:36
because maybe the state of one of the components needs to be passed over to the other. Then, we're going to tell Anvil to update this panel
1:45
which will effectively change the DOM and insert this into this little shell thing that we've created. So this is how navigation works.
1:53
We're going to load the overall HomeForm and it's little component there, that content_panel. And then as we interact with the navigation
2:00
and the buttons and the app and so on we're just going to create copies, or instances of these components and load them up with data and set them here.
2:08
As far as the user's concerned it's going to be super snappy. We're not actually refreshing the page. We're not going back to the server.
2:14
We're not navigating the internet. This is all client side goodness. Of course, we may end up talking to the back end
2:21
to get data, but there's nothing implicit about this navigation that does that.