Anvil: Web apps with nothing but Python Transcripts
Chapter: Navigating between views
Lecture: Refactoring navigation

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's re-factor our navigation
0:02 into its own little library, this is going to introduce
0:05 an entirely new idea over here.
0:07 So far, we've had forms and components.
0:10 Now we have modules and server modules.
0:13 These are both Python files that can be shared
0:16 Python functionality that can be shared
0:18 across your application. The modules
0:22 these are things that can be shared with your forms.
0:24 They live in the client. They execute in the browser.
0:28 Server-side modules are more advanced Python code
0:31 that lives in the server, and is not directly
0:34 accessible through JavaScript or anything like that.
0:37 So, what we want, is a client-side module or just a module
0:41 and going to rename that to just navigation.
0:47 Now, what we need to do is basically go, and work with that
0:52 right here, we did the bottom
0:53 go to this column panel component
0:56 here and add this component to it.
0:59 We can already work with this function directly.
1:02 The idea is, we'd like to move this behavior
1:04 and remember, right now, it's simple.
1:06 Later, it's going to get increasingly complex.
1:08 We want to move this out, so I'm going to take all of this
1:11 'cause we don't want to do that there anymore
1:13 We're going to put it in our navigation thing.
1:17 This navigation component is going to need
1:19 to have access to that home control.
1:23 So, what we're going to do is, when it loads up
1:25 the home control's actually going to
1:26 set itself back to the navigation
1:29 another thing called the HomeForm, rather
1:32 and we're going to start out as None.
1:34 We could just work directly with this.
1:35 But, I want to verify that this has been
1:37 set to something other than this.
1:39 So, we're going to say get HomeForm
1:42 or I'll just get the form if HomeForm is None
1:49 raise exception, you must set the HomeForm
1:52 otherwise, it will just return HomeForm.
1:55 Okay, this lets us, throughout the rest of our application
1:58 make sure that we're doing things correctly.
2:01 Now, let's go back here, and take, some of this;
2:08 and we don't want to say, self here or any of these
2:12 sorts of things, it's not, no longer an event.
2:14 Let's just call this, go_add, something to that effect.
2:20 This one will be go_home, go_compare, go_account.
2:28 Now, it doesn't make any sense to have this
2:30 self look component, because what we got to do
2:32 is get a hold of the HomeForm and do that.
2:35 So, let's just say, form equals, get_form, like that
2:40 and then form load_component, okay?
2:42 So, we're just going to do that for all of them.
2:47 Now, let's go back here, of course
2:49 we wanted this to do something
2:51 so what we got to do is say import navigation
2:56 and then we can come down here and say
2:58 instead of this working with ourself
2:59 we can say dot go_home, that, this bit
3:04 down here can say go_add, that, perfect.
3:15 Now, this might not look like we've done much yet
3:17 and, honestly we haven't, we're going
3:19 like I said, to add more features
3:21 maybe we would want to set the title as we navigate around.
3:23 That would make a lot of sense.
3:25 Maybe, we want to set the selected navigation elements
3:27 to be active or inactive, all of that's going to be
3:31 dealt with through navigation.
3:32 Also, do you have to have an account
3:34 before you're allowed to access this stuff?
3:36 So, you got to realize we're putting this in place
3:38 to build it up over time, but now, it's a good start.
3:41 First of all, the refactoring thing should still work
3:44 let's find out if we got that right, beautiful.
3:47 We already caught the problem with our first error.
3:49 So, let's go here, and it says
3:51 well, you tried to get the HomeForm
3:54 when you called go_home, so the first thing we need to do
3:57 right at the beginning, is say, HomeForm equals self, okay
4:01 we do this once, at startup of the overall application
4:04 and then we can use this back reference to
4:07 like set the elements, and so on, try again.
4:12 Oh, that didn't look good, what did I do?
4:23 Aah, so what I did is I had this double underscore
4:25 and that means something, a little bit funky in Python
4:29 idea is to hide it and I guess I should have a function in
4:32 set HomeForm, but, I decided to just rename it
4:35 And just a little bit of a glitch there
4:37 it should have said that it didn't exist
4:39 when I tried to set it, anyway, sorry about that.
4:41 So, we're going to set the HomeForm here
4:45 and then, we'll be able to work with it.
4:47 Let's run it, by the output, here's anonymous
4:51 and compare, home, count, and so on.
4:56 But, notice up here this fitnessd app
4:58 we might want that to have, like dash home
5:01 dash account, or something like this
5:03 and we want these to be selected
5:05 remember we had ad selected before.
5:07 So, we're going to have the navigation deal
5:08 with all those things, if you try
5:10 to get to this account section, you should be logged in
5:12 or even if you're trying to add a component
5:15 you should be logged and then taken there.
5:17 So, that's what we're going to do with this module
5:19 the cool thing is, this runs on the
5:21 client-side in Python, very nice.