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.


Talk Python's Mastodon Michael Kennedy's Mastodon