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