Anvil: Web apps with nothing but Python Transcripts
Chapter: Application first steps
Lecture: Creating the forms

Login or purchase this course to watch this video and the rest of the course contents.
0:01 Okay, now that we know kind of
0:03 what our app is going to be doing
0:04 we can go and create these forms
0:05 that are going to go into this little component
0:07 that's hidden right there.
0:09 Now these are wrapping around 'cause they're too big
0:11 but remember only half of them will ever be shown at a time
0:14 so it shouldn't be a problem.
0:16 Right, now, let's go and add this here.
0:18 So we could choose another separate page
0:21 that looks totally different
0:22 like the one we just created
0:23 but like I said, we're going to have these components
0:26 that we can use as we navigate around our application.
0:29 There's a really interesting model
0:31 pretty straightforward to do
0:33 to swap in and out these views.
0:34 We're going to write a little module, client module
0:37 that's going to take care of that and just say go to Home
0:40 go to Add Measurement, and it's going to totally solve it.
0:43 So here is a basic form called Form One
0:46 not super loving the name
0:48 so let's go over here and give it a different name.
0:51 Let's say we have an AccountComponent.
0:54 We don't need to call it component
0:56 just to conceptually for us to know like
0:58 this one is being used in this way, I'm going to call it that.
1:01 And we could just do real quick just something
1:04 so we know that this is happening here.
1:07 A quick name for the text and just call this Account.
1:10 Something like that.
1:12 The next thing we can do is we can add another one of these.
1:15 We're going to need to have one for adding measurements.
1:19 This is probably the most involved form
1:21 in terms of user input and validation.
1:27 So AddMeasurementComponent.
1:30 And again just so you know what we're working with here
1:32 let's put a label here and put some text on it.
1:41 It could be like the title or something when we're done.
1:51 If we want to compare us against other people.
1:55 People that are our age or something like that
1:57 we might have this compare form.
1:59 That's one of our features.
2:03 Now we have the Home Form
2:04 but remember the Home Form is meant to be kind of like
2:06 the overall application.
2:07 So we want to dynamically swap out what you see
2:11 when you're logged in.
2:12 Just when you're laying on the sites.
2:13 We're going to have another one here like this
2:17 and its name can be HomeDetailsComponent.
2:23 Now it's easiest if we have a separate component
2:26 for when you're logged in
2:28 and you have details or when you first open the app but you're not yet logged in.
2:32 So we're going to have one more of these here
2:37 called HomeAnonComponent.
2:39 As anonymous, not logged in, that type of thing.
2:43 That pretty much does it.
2:44 It turns out we need one more thing
2:47 and I'm going to go ahead and just add it right now.
2:50 And I'm going to call this SetHeightComponent.
2:57 When you first register for the site it pops up a dialogue
3:00 that says what is your username, what's your email
3:03 what's the password you want to use.
3:04 Stuff like that. But, it doesn't let us ask additional information.
3:07 In order for us to compare you
3:09 like your weight, your heart rate.
3:10 Things that we're going to measure on you to others.
3:13 We need to compare.
3:14 We need to know like how tall are you, how old are you?
3:16 Things like that. So we're going to have this other form
3:18 that we're going to show just once to get
3:20 that information when you sign up.
3:22 Right so here's all the forms that we're going to use.
3:25 I'm going to load this up
3:26 and then dynamically put in here
3:28 the AccountComponent, AddMeasurementComponent, Compare
3:31 HomeDetails are anonymous
3:33 and then the one time when I get your height
3:35 and your age and things like that.
3:38 And then we're going to store it.
3:39 And we'll show you that one again.
3:40 But, we do need to form for that as well.
3:42 So it looks like we're just about ready to get going.