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