Anvil: Web Apps with Nothing but Python Transcripts
Chapter: Rounding out the UI
Lecture: The set your height and gender form
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
All right, let's quickly use this set height and gender thing. I've even also added a little drop-down which is cool, we haven't seen that before.
0:08
So we're going to implement something that happens when we click on this. And what we're going to do is
0:14
we're going to gather up the details that we have over here. We want to get the height in inches, so we'll say self. let's just say height equals self.
0:28
have a little textbox.text and that's going to come in as a string so we've got to convert that to an integer. Perfect, and we have gender
0:38
is equal to self.dropdown selected value. And we could always do a little validation here. We'll say, if not one of these, like let's go if not this.
0:56
self.error message, label_error_message, sorry label_error.text equals you must set your height. And this one's a little different because when it runs
1:09
it's automatically going to have select your gender. So over here we'll say self.dropdown_gender.selected_value. If that's equal to self.dropdown.items
1:21
of zero, which is the first one you must set your gender. All right so that's a good start. And in order to test that, let's go into the navigation
1:31
and before we go to our account let's say if not user, what are we looking for? Gender, that'll work.
1:42
Go set details, something like that, then hit return. So this we haven't written yet. Set the active nav to None. Set title to None.
2:01
And then we'll do something much like this. And up at the top, we again have to import one last time from sent height component.
2:10
Maybe I should rename that to details but I'm just going to leave it like this for now. There, like that. Okay, I think that'll do it here.
2:23
And we also need to add that in compare in case they try to go to compare. Perfect, let's give that a try. Alright, here we are.
2:37
If we try to go to our account it's going to take us here, that's cool. Let's go back. Try to go to compare also because these details are not set.
2:46
Super, so now this page is showing up. If we try to say save, you must set your height. Whatever, that's not really height.
2:53
Must set our gender, okay cool. If we pick this, the error doesn't go away. We just do the work and actually leave.
3:00
So we don't need to worry about that. Now the last thing here is what happens when this actually succeeds, right?
3:07
We get to this part, and just like before we want to make sure we refresh the user and we're going to talk to the server.
3:13
So that was our data access we're using everywhere else. Let's say set details height and gender. And up here, we need to import that stuff.
3:28
There's a bunch of things we don't need. Cool, now let's go over to data access and write one more function that's going to be
3:38
very similar to the one right above it. So all we have to do is go and call server here a server thing, and it's going to be set details
3:51
doesn't exist yet, but what we're going to pass it is height and gender. And the other thing we need to do is just wipe out the user.
4:01
So we're going to go over here. And we're not going to log them out, necessarily. I guess we could just call a logout, but I don't know.
4:10
I'm just going to set it to be none and we need that to be global. The reason is, we need to get the user again from the server
4:18
because these details are going to be set on it. All right, so let's go and do that. The last bit is just going to be a real simple thing
4:26
over on the server side. Remember, we don't have direct access to this. Here we have set details and we're going to have
4:34
what order, this order has to be consistent. Height and gender. All right, height and gender. We're going to get the user. Let's just raise.
4:49
Must be logged in. Okay, so that's going to require that we do that. Now here, this is going to be really easy.
4:53
We're going to say user set to gender, equal to gender. And user height equals to height. And I'll just say return, there we go.
5:07
Perfect, so this is all we should need to do. Let's make sure that this works. We will take it through it's paces real quick.
5:16
All right, so over here, so over here let's try to go to our account page. Says no, no, no, we can't show you that just yet.
5:22
I have to set your height and so on. And for me that is 71 and I come over here and use my dropdown and say I'm a guy.
5:32
When I click this, it should go to the server and set those details. And then, well, let's see what happens. If it goes anywhere, I think it'll take us
5:40
back to our account, we'll find out. So the details have been set. We should do a redirect, which apparently we didn't.
5:45
But if we go home and then back. Check it out, it's set. We've got to fix that redirect really quick but look how cool that is. My details are now set.
5:56
So quickly, we forgot a quick redirect here. Now we need navigation as well. I'm going to say go to your account. I guess we could pass it and somehow
6:12
whether or not you go to the account or back to compare I'm just going to, just go like this. This will be good enough
6:19
for what we've got going on I suppose. Okay, so this is going to take us to home. I can't really test it again because my details are set.
6:25
I guess I could erase them, but it seems like that's going to be just fine. All right, so now our account page
6:31
after a little diversion there, is working.