#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.