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