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