Anvil: Web Apps with Nothing but Python Transcripts
Chapter: Application first steps
Lecture: Adding measurement UI
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Well, here's our AddMeasurementComponent it's not super compelling is it? It has just like the words, Add Measurement what we want to do is build up
0:09
something cool and interactive. Let me just show you over here on the previously published version health.Python.com
0:17
we'll probably have fitnessd at the end but this is the previous one. So let me go and login. And here's what I want this form to look like.
0:30
This is nice, right? We've got this cool little top bar we've got this called out card thing that shows us what you can enter
0:37
we try to enter something that's invalid We're going to end up with the way that's required we have a numerical Up-down
0:43
we have a little placeholder text we're going to collect the weight and pounds and the resting heart rate and beats per minute each day, theoretically.
0:52
So let's say I'm on 70. Try to say this required and so on and eventually if I add them all in there
0:59
we're going to save that in the database and move on and show you like all your history of all your measurements including this new one you added.
1:07
Okay, so we've got this cool error-handling here, and so on. So this is what I want to build at a nice little calendar and so on.
1:15
So how are we going to do this with Anvil? Well, we're doing several parts. First, we're just going to spec out the UI
1:22
then we're going to add the events and then add the validation. So we can make this a lot better by going down here and setting some properties on it.
1:28
So Add Measurement, that's good. But let's go and set some more values. I wanted to go in the center I want the font size to be
1:38
it's probably a little big about 28 pixels Put 28. It's always pixels. And then I want to set an icon, Member on the left
1:48
we had the scale, and we wanted to add this in the link. And so we also want that topic over here and this all we want to see that appear over there.
1:58
The next one we want, it's that little card. So we're going to Come back over here and there's all these different components
2:03
that we can drop in and even more if you expand them out. So what we want is a card it's going to go below and it takes up all the space
2:12
has this little shadow it's a slightly different background color. And then here we want to have a couple of labels.
2:18
So one label it works a lot easier on a larger monitor just going to be label, title, date something like that. That's just kind of date
2:29
like so, kind of boring but we're going to have more stuff like it so let's make a copy, can drag that thing in here
2:40
in addition to the one that says date we want that's a weight in pounds. Already folks who are using the metric system
2:47
I love it as well but it got to pick something so I'm just going to go with pounds, speed, title and pounds something like that. Another one like this.
2:58
So we put it right, see the little blue drag it drop it indicator, so this is going to be rate for resting and heart rate.
3:08
And here what are we going to put? Resting and heart rate, beats per minute something like that. That's about as much space we have to work with.
3:18
So those are the labels that we saw. The other thing we want is to have people input value. So could get a single line text box
3:25
or a multi line text area. We going to add Text Box. Now, could rag it here but what I want is to be next to this. So check this out.
3:33
So I come over here and put it to the right I drop it in the right place and even move this little purple thing to make more room or less room you know
3:42
so it's like 75%, text input 25% label and so on. And let's connect here and give them some values. So this going to be text box.
3:52
Not date, let's put this down one. Let's put it there. Text Box, weight and then we can give it a little placeholder right here.
4:05
This will just be, weight like that. Then we have type equals text number, email but text is actually what we want
4:12
actually numbers is what we want, isn't it? So let's go set this to number and I'll make another one of those
4:19
and we'll put it over here for the heartbeat. Okay, I think we're doing pretty well. We've got our weight set we've got our heart rate set
4:35
and then I actually wanted a calendar for this first one. So let's put that right here and let's go set it's placeholder value too.
4:45
So not a date picker. This is going to be, p of measurement or something like that. Right, that looks pretty good. Let's see how we're doing.
4:54
We'll run it on auto load this is component for add measurement We click here, We got our date or we click on that date
5:01
or the Weight, set it to some values not negative to this at 170 or whatever, hopes that the resting heart rates at 60 whatever happens to be
5:11
things like that. So it looks like it's kind of working right? I think that's a pretty good looking UI. I got a few more things we need in our UI here
5:19
we're going to need a button so let's put the button as Outside, let's say Inside-Outside. So your UI from when you're building it.
5:27
So this is going to be a Save button which is going to be the Name. But down here, it's going to be, Add Measurement and again, let's put a little
5:40
cool little plus sign or something like that here. so you want to add it and I kind of like the colored inputs here.
5:47
So we can come down and set the role to either primary or secondary for different colors. I'll go with primary for now
5:55
and then finally, let's align that to the right All right again, how we doing? Hoo, it's looking pretty good. I can click it.
6:03
And the last thing though is what if I don't put weight here and I click it? Right, you saw that there's this nice error message.
6:11
That's the last thing that we need to add here so let's go to in here and put this error message like even right in the way here so people know.
6:18
And let's make it super obvious. Let's go, error message, like that. For the name, Let's go Error message, so we can see it more clearly.
6:30
Let's put it in the center make it bold go down to the appearance here we can set the foreground color red's so harsh R-G-B, like that, make it red.
6:45
And then the last thing we want to do is make it not visible by default. Someone will run it by default it's going to completely vanish from the UI
6:53
but if we click this and something goes wrong, We're going to set the visibility, True Set the Error message to what it is
7:01
Right, well, I think that pretty much does it for design in the UI of our AddMeasurementComponent. How cool is that! like, you notice we can grab these
7:09
we can lay them out really nicely put them side by side we can even change the divider here lot of cool stuff for that.
7:16
And for each one we have different class properties. We also have different events that we can click on down here and add
7:24
we don't really need to do any of those for these. It's not like changing the date drive some other part of the UI that we need to work with.
7:30
Right, but we will need an event for this one which we'll get to. That's the drag and drop way of building these forums.
7:36
And you can see it's really, really easy. How much HTML Do we need to know? None. How much CSS? Well, unless you count
7:45
knowing that, that hex code is red we really didn't need to know very much at all. Not that I'm saying knowing CSS is bad
7:54
knowing HTML is bad, I'm a web developer. I love those things. But it's certainly cool that we can build this great looking UI
8:00
without having to know it.