#100DaysOfWeb in Python Transcripts
Chapter: Day 52: Anvil - Full Stack Web Apps
Lecture: Adding navigation
0:00 Alright, here we are.
0:01 Let's begin, this is going to be our home_form.
0:03 Let's begin by renaming this thing,
0:05 that's not amazing so
0:06 we can come over here and we can
0:07 rename it to home_form is what I'm going to call it.
0:12 Since my resolution is so small,
0:14 I'm going to hide this thing back.
0:15 I typically work with that open
0:16 but for recording I made my resolution really small
0:20 which means I'll try to compact things.
0:22 Alright, so let's go over here and put a title.
0:26 And we're going to give this a name,
0:27 so in code we refer to these things as
0:31 you know, whatever their name is here.
0:33 Label1 is not super helpful, is it?
0:35 So let's call this label title.
0:39 And let's set it's default text
0:41 as HighPoint Home, something like that.
0:46 Alright, so what we want to do is
0:47 we want to take some links, some hyper links
0:50 and put them over here.
0:51 So we're going to have three of them
0:55 and let's just set the properties.
0:58 Give them a name.
1:00 It's going to be link home,
1:02 it's text is going to be HOME all caps.
1:06 This is going to be all_docs
1:10 and this is going to be add_doc for creating a new document.
1:15 Now, one thing you may have picked up on
1:17 in our little demo app was there were some
1:18 cool icons here and Anvil is integrated with
1:21 what's called font awesome
1:23 which I love it, font awesome is so cool.
1:25 I use it.
1:26 You've seen plenty of these fonts
1:27 in the player that you're working with right now I'm sure.
1:30 So we can come over here
1:31 and say I'd like to have a home icon,
1:33 actually this is the ad so let's have a plus.
1:36 And it's a little plus that appears over here,
1:37 let's do it for docs.
1:41 Now if you're going to make a knock off on SharePoint
1:44 obviously you've got to use word, right?
1:46 So we've got a word icon down there
1:48 and for home let's go over here
1:50 and add an icon and type home.
1:53 That looks nice, right there.
1:56 Okay, so we've defined our UI,
1:58 we've got these pieces here.
1:59 Now the next thing to do
2:01 is to actually add the contents.
2:03 Now the way our navigation is going to work
2:05 is we're actually going to load up this one page
2:07 and we're not going to navigate away at all
2:10 as far as the browser is concerned.
2:12 So this is kind of what you'd consider
2:14 a single page application which has a lot of benefits,
2:18 means every time you interact with this stuff
2:19 it doesn't necessarily go back to the server.
2:22 Once the thing is downloaded,
2:23 it runs really really fast
2:24 which is a great way to run Anvil apps.