Anvil: Web Apps with Nothing but Python Transcripts
Chapter: Application first steps
Lecture: What forms / pages do we need?
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now let's go ahead and create the rest of our forms. And we're not quite there yet in terms of writing the code, but I do want
0:07
to speak just a little bit about how the navigation between these forms is going to work. I did say that this is kind of like the top level
0:14
of our application. One really important thing to do or consider when you're writing web apps is what is the overall look and feel?
0:21
You want the same navigation on the top maybe even on the side. A little footer on the bottom. Kind of want the same thing all over
0:28
and then different content for the pages. So what we're going to do is we're actually going to set up this form so we can take little sub forms
0:35
or components and dynamically replace them in here. So we're going to have one form that shows us our home view like a history of our measurements
0:44
that we've saved in this as we've done work outs over time or just measurements over time. One that will show our account details
0:51
one that will let us add another measurement in here. So we're going to dynamically swap those out. So right now we're going to create this top level
0:57
material design form, we've already have. But then the subsequent ones these are going to be more blank ones
1:04
and they're just going to fill in a little gap here. In fact let's go ahead and put that in here. Put a little column panel in here
1:11
and we're going to give this a name. This is going to be content or something like that, right. Name it whatever you want.
1:17
We're going to dynamically replace that... the value or the content of that with these other forms. Just to give us a sense of what kind
1:27
of forms we need to build. Let's go ahead and add some hyper links over here. Before we do that, if you look carefully it says to...
1:33
whoops, to put a column panel here. And so this is a column panel. Into the column panel we're going to put link one link two, link three.
1:47
Those are not great names or values. So suppose we have one that's going to take us home. The text is going to be something like Home.
1:57
Over here, let me just type Home. Another one we're going to want to add a measurement so let's just say Add.
2:05
And we'll come up here and just say link_add. Maybe add measurement we need to be more clear and this one will be compare.
2:12
So you can compare yourself against other people in the app stuff like that. So this one down here is going to be compare.
2:21
Now we can add some little icons on top of this while we're at it. So if you're familiar with that, awesome. And then that kind of thing.
2:27
So we come down here and say I would want some kind of home. If I choose that we have this little home thing there. This one I want some kind of scale
2:38
so like, um measurement right? To indicate measurement. And for compare, what should we put? Lets put a chart or something like that. There we go.
2:49
So now we have this cool little thing going on. Lets just take a quick look at that. Alright so over here we got our little hyperlinks with our stuff.
2:56
We're coming along well. Alright that gives us a sense. We're going to need a Home form we're going to need a AddMeasurement form and a Compare form.
3:04
The other thing that we need to do is we're going to have somethings like registration so come up here have Register. Actually lets put it in this way.
3:13
Lets say you want to have an account and view your account details. Name Account and then the text is just going to be Account like that.
3:22
We also want to have some other elements. We're going to come up here and we're going to have like, logout.
3:28
So that's something you might see if you're logged in these are like the two things... You might have if you're logged in.
3:40
These are the two things you can do. But if you're not logged in, you would have other operation. Now we could make these kind of dual purpose
3:45
and change their text but it turns out in Anvil its generally easier to have different things in show and hide them depending on your circumstance.
3:53
So this would be register like so. Then make the text register. We're just going to hide the logged out ones when you're logged in and vice versa.
4:08
Okay, so lets just run this real quick and make sure everything's looking good. Great, now were not hiding these yet.
4:13
We're going to, but we're not yet. So were going to need a home form an add measurement form and compare form something to do show me your account
4:20
someway to login and register. Turns out login and register are little dialogues we don't have to write, they're provided by Anvil.