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.