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