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