#100DaysOfWeb in Python Transcripts
Chapter: Day 52: Anvil - Full Stack Web Apps
Lecture: Adding navigation

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Alright, here we are. Let's begin, this is going to be our home_form. Let's begin by renaming this thing, that's not amazing so
0:07 we can come over here and we can rename it to home_form is what I'm going to call it. Since my resolution is so small,
0:15 I'm going to hide this thing back. I typically work with that open but for recording I made my resolution really small
0:21 which means I'll try to compact things. Alright, so let's go over here and put a title. And we're going to give this a name,
0:28 so in code we refer to these things as you know, whatever their name is here. Label1 is not super helpful, is it? So let's call this label title.
0:40 And let's set it's default text as HighPoint Home, something like that. Alright, so what we want to do is we want to take some links, some hyper links
0:51 and put them over here. So we're going to have three of them and let's just set the properties. Give them a name. It's going to be link home,
1:03 it's text is going to be HOME all caps. This is going to be all_docs and this is going to be add_doc for creating a new document.
1:16 Now, one thing you may have picked up on in our little demo app was there were some cool icons here and Anvil is integrated with
1:22 what's called font awesome which I love it, font awesome is so cool. I use it. You've seen plenty of these fonts
1:28 in the player that you're working with right now I'm sure. So we can come over here and say I'd like to have a home icon,
1:34 actually this is the ad so let's have a plus. And it's a little plus that appears over here, let's do it for docs.
1:42 Now if you're going to make a knock off on SharePoint obviously you've got to use word, right? So we've got a word icon down there
1:49 and for home let's go over here and add an icon and type home. That looks nice, right there. Okay, so we've defined our UI,
1:59 we've got these pieces here. Now the next thing to do is to actually add the contents. Now the way our navigation is going to work
2:06 is we're actually going to load up this one page and we're not going to navigate away at all as far as the browser is concerned.
2:13 So this is kind of what you'd consider a single page application which has a lot of benefits, means every time you interact with this stuff
2:20 it doesn't necessarily go back to the server. Once the thing is downloaded, it runs really really fast which is a great way to run Anvil apps.


Talk Python's Mastodon Michael Kennedy's Mastodon