Anvil: Web Apps with Nothing but Python Transcripts
Chapter: Application first steps
Lecture: Loading a component into the main app page
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Well, our app is starting to come together. We have some forms in place these components that are going to dynamically swap out what we're showing
0:07
and we have the overall look and feel in this home form. Let's run it and see where we are. Well, all the navigation bits are here
0:14
and what we don't have is, really any content in this control thing we've got here called a column panel content.
0:24
The idea is that as we interact with the app we're going to load different things like, probably that first thing in the anonymous bit
0:30
then you're login will show you this and then you go in and add a measurement. If you click that, we're going to load that one in there.
0:35
What I want to do, this is one of the more interesting forms is going to show you how we work with this designer and the code that handles the events
0:42
which is super interesting. So, what I want to do is just start with loading this up as if this was what we're going to do. We'll talk about navigating
0:50
between these different components and creating a navigational system later. For now, let's just, somehow
0:56
have this appear right here when we launch our app. And that brings us to a super interesting aspect of this. You've probably already noticed it.
1:06
Over here we have our HomeForm here's our designer we have all of our elements we can drag on and once we have an element selected
1:12
we can set its properties. We also have events, down here when something happens like button when it's clicked we can have a function that's called.
1:20
But, notice up here, this design and this code. We've only been working the design mode and the UI design is really cool
1:28
but a lot of the magic happens here. So, check this out. This is Python code. It instantiates the form, the HTML that's basically what this does
1:37
it sets all those properties you set in the designer and then whatever code you want to write happens here. So, button clicks, for example
1:45
will happen here and so on. All right, I'll give you an example of that so if we click on, let's say, add
1:52
make sure the names are right before you set this link add because the method name is going to contain part of the name here. So, that looks good.
2:00
If I double click this, notice it writes a function and this code behind embed here that says the link_add has been clicked
2:06
and this is what happens when the link gets clicked. Now, what we're going to do is write the code that gets the AddMeasurementComponent
2:14
and puts it into the shell that is our home form. So, the way we're going to do that is we're going to write some Python code.
2:20
We're going to say, from AddMeasurementComponent that's this module right here this is like a separate file. But then, inside there
2:29
there's also a class named exactly the same thing. So, we're going to write code like that. Looks a bit funky, you'll get totally used to it.
2:35
That's just how it goes. So, we're going to create a component and we're just going to call the in it method just create the class
2:43
just like you would in standard Python. And then, over here, we're going to say self. and check out all that stuff.
2:50
There's a whole bunch of cool things. In fact, over here on the right you can also see, you've got the column panel one
2:55
this is the one we have the navigation in which, right, we should name it. But, this is the one that really matters
3:00
and we can actually see stuff about it, right all of its properties and so on. This is really interesting, the beginning and the end
3:07
after a while, I'll find that I don't really use that window that much but it's super nice to have it there.
3:10
So, we're going to say self.column_panel_content.clear. And then, we're going to come over here and say Add Component this AddMeasurementComponent.
3:21
Well, let's see how we've done. Let's run it. All right, here it is. We click this, it should clear out this part there's nothing in here at the moment
3:30
but imagine we were on another view this is going to add that form we're going to have a better way a more global factored way, a refactored way.
3:37
To do that, we're going to get in a later chapter but for now, we just got to bootstrap the process
3:41
so we can build that form and see it. So, let's click. Boom. Look at that. It doesn't look like much
3:47
but whatever we design in that add measurement component is just going to show up taking over the entire center of the screen here.
3:54
That's pretty awesome. And, just so that we can get started a little bit easier let's just write self.link_add_click, like so. That way, when we run it
4:11
it should start up with the AddMeasurement form loaded. See one other thing, you notice over on the left here
4:18
you don't see anything going on in terms of it's not highlighted, showing us we're on this page. We can do one final thing in this section.
4:27
We can say self link dot add role equals selected. Here we go. Now, see it's got that gray, even if I don't hover over. Okay, so we've loaded this up
4:38
and again we're going to take out that home bit to load it on unload when we get a more full-featured app written.
4:44
But I want to develop this AddMeasurement control component because it shows you the most power and most of the techniques you're going to need to know
4:53
how to build these components, these forms and then add the event handlers in all of those kinds of things.
4:59
Really cool. Looking forward to getting to it.