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