Anvil: Web apps with nothing but Python Transcripts
Chapter: Navigating between views
Lecture: Pinning the active navigation element
0:00 Our app is pretty good, it has navigation.
0:02 It's setting the title as we navigate
0:04 over as here you can see, but when we click on these
0:08 we don't have them highlighted.
0:10 They should be kind of this blue color
0:12 to indicate here's where you are
0:13 in the navigation as well.
0:15 But lets go and make that work finally.
0:18 So the last thing that we want to do here
0:21 is we're going to have a set_active_nav
0:25 and we'll have it state or something like that.
0:27 This is going to be a string that we're going to pass in
0:30 so that will let us do things like over here on add
0:34 we can say set_active_nav add, keep this nice and short
0:40 home, compare, account
0:48 and I'm just making this stuff up.
0:50 We're going to have it mean something in a second.
0:53 What we're going to do down here
0:54 is we're going to say form = get_form().
0:56 My form, I'm going to pass this idea onto it.
1:01 Again, we could do this up here
1:03 but I kind of like having it
1:05 the idea of setting the nav
1:06 just focused on this one function
1:09 even if we're going to delegate it.
1:11 So what we've got to do is
1:12 to find a function like this over our home form
1:15 'cause the form is really in charge of it's elements, right?
1:19 In charge of it's navigation and it's links and so on
1:21 we shouldn't really be working with these too much
1:23 outside of here
1:24 but we're going to write some simple code
1:26 we'll say something like self link
1:30 going to pass self in this world
1:32 so we'll say self.link_home.role equals
1:35 it's either going to be selected or empty.
1:38 Selected is a string, or empty.
1:39 So we'll do a little ternary expression selected
1:43 if state is home else None.
1:48 And we're just going to do exactly this
1:49 for all of the navigational elements, there's only three
1:51 so we have link add, the navigation element is add
1:57 and then the last one link is compare.
2:02 What's nice, if it's none of those
2:04 it deselects all of them, right
2:05 if we pass account it's going to unselect home add in compare.
2:09 All right let's see if this works.
2:11 So here we are, we go home, we go add, notice how it sticks
2:16 it's gray, go to compare, sticks but if I click on account
2:21 all those on the left go away.
2:22 How slick is that, right?
2:23 Super easy, home sticks, add sticks, compare sticks.
2:28 And even when the app starts up
2:31 it's already got home selected, why is that?
2:33 That's because at the very top here
2:35 we're actually using the navigation to go home
2:38 not just internally loading that control.
2:40 That means all the cool stuff of setting the title
2:43 clearing the title, setting the selected elements
2:46 potentially checking for users
2:48 all of that stuff is happening
2:49 as we build out this navigation, very very cool
2:52 so hopefully you're starting to see the value
2:54 of this navigation module over here
2:56 and also just how cool is it
2:58 that we can write these Python libraries
3:00 these Python modules and share them through our application?
3:04 It's pretty cool.