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.


Talk Python's Mastodon Michael Kennedy's Mastodon