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