Anvil: Web Apps With Nothing but Python Transcripts
Chapter: Navigating between views
Lecture: Basic navigation

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Here we are in our application. And when we run it, we see that all we get is we automatically load up this ad measurement control
0:08 but when we click on these various things nothing is happening, right? There's no navigation. So let's go work on the navigation.
0:15 Now we're going to do this in two parts. I want to show you the most naive basic straightforward way and then the more polished way that lets us build
0:23 better structured applications. So we're going to start out just making it work and then we're going to make it right.
0:29 So let's look at these various things here. We're going to need to go and add little event handlers
0:34 for when somebody clicks home they can just double click that and it's going to add link home clicked. I'm going to do that for the rest of 'em.
0:47 All right, here it is. Let's go and see how we might do this. Now, we already have this when somebody clicks on
0:54 the link ad we're going to go and create this AddMeasurementComponent, we're going to change the role and we're going to put it in a panel.
1:04 I'm going to push this off for just a moment. But what we want to do is basically, we want to create the various components and then add them here.
1:13 Now notice this part is always the same. So let's add a function down here called load_component, it'll take self and a component
1:25 let's say, component like that. And what it's going to do is, well it's just what's happening here.
1:31 'Cause we're going to need to do this for every control, right? All right, that looks good. Then down here we just say self.load_component
1:42 kind of like that. In fact, at this point we could inline this, right? There we go. So this is all we really need to do and
1:51 let's put this off for just a second here. The next thing is, when we click on go home let's go here, and what've we got?
2:00 We've got the HomeAnonComponent and the HomeDetails when you're logged in. So let's do the HomeAnonComponent.
2:09 Now we're going to load that one for now and then we'll just go ahead and load we figure out whether they're logged in.
2:14 We don't have users yet so that' not a big deal. Remember, in order to get access to these we've got to write this statement p like so.
2:24 So let's just run it and see that these two are working. If I click ad it should take me add, if I click home
2:29 it should take me to home and back and forth. Right. Home, home anonymous. Add and look how quick add.
2:39 That's zero latency, I mean yeah JavaScript has to execute the DOM has to be manipulated, but there's no network
2:45 right, there's no changing of the URL or anything like that. So that's great, let's just go ahead and think about how we might do the rest of those.
2:54 Just write those out and it'll come back to him. And then we have it. We have Add Measurement, Home Anonymous for now, Compare
3:02 all count, we also have some stuff with login, logout and registered, those are not actually going to be
3:06 separate components, there's a different mechanism for dealing with them, we'll talk about that when we get to it.
3:11 This should more or less have it working. Let's go clicking around here. So home, add, compare, just like that.
3:20 Then the last thing to fix, we started working on the AddMeasurementComponent here because it's the most interesting.
3:27 I think we got the biggest bang for the buck. But it shouldn't really start out with this it should start out either anonymously telling you
3:32 about the air, hey you need to log in, here's all the cool stuff you can do or, if you're logged in
3:37 here's your recent measurements and things like that. So let's go up here really quick and just change this to link on click, like that.
3:46 Now if we run it one more time it's going to have probably the most reasonable behavior, right so we go here, right right to account and so on.
3:55 Like I said, these three we need to deal with separately. This is our simple navigation. What's wrong with it though?
4:01 Before we move on, I said this is not ideal what's wrong with this? Well, here's the thing. If I go over to add measurement and I click on this
4:10 and I submit everything correctly, recall what we're going to do is we're going to go and when we get to
4:16 database setup, we're going to save this to the database and then probably the most natural thing to do would be to go
4:22 to compare list, recent measurements, something like that. We need to navigate from here to somewhere else as the result of this button click.
4:33 What do we do then, do we have this thing import the home control? That doesn't work very well because the home control
4:40 is already importing this and that gets a little weird and also that very tightly binds together these various controls and their components.
4:48 That's not great, right? So what we're going to do is we're going to make it so sharing this navigation concept is basically its own
4:55 standalone thing, there's actually more happening. You saw over here as well that we have the various roles
5:02 we could set another, you know, various things we could say I want to link for add role to be kind of active or home link active, things like that.
5:13 Also possibly setting the title, checking for whether or not a user's logged in, making them log in if they need to be logged in.
5:19 There's a lot of stuff that we have to add here and we don't want to just load this up in our home forum
5:25 we're going to have a separate little library whose job it is to only deal with navigation and we can share
5:30 that library easily across all of these things.


Talk Python's Mastodon Michael Kennedy's Mastodon