#100DaysOfCode in Python Transcripts
Chapter: Days 85-87: Fullstack web apps made easy
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.
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.
