#100DaysOfCode in Python Transcripts
Chapter: Days 85-87: Fullstack web apps made easy
Lecture: Linking the forms
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
So we have our cool little app here, we've got our
0:02
various forms, and we've got a navigation.
0:05
Let's go ahead and actually run this,
0:06
we've not run it yet.
0:08
So, what happens when you run it?
0:09
Well it actually just kicks off, I think,
0:11
a docker image on the Anvil servers.
0:13
So let's click this and get started.
0:15
Oh, before we do, let's give it a name.
0:19
I'm going to call this HighPoint-100days.
0:23
Now we can hit run.
0:25
Now notice it's running right here,
0:27
this little helper thing up at the top,
0:29
and then press stop and get back.
0:31
But anything below this, this is our app,
0:33
this is what people will see.
0:34
You can even expand and collapse the little side thing.
0:37
But if we click on these notice, not so much
0:40
is happening, right?
0:41
Our forms are not showing.
0:42
But still, look, our app is running.
0:44
And if we wanted to see it on other browsers
0:46
or on our phone or something you can even go over here.
0:49
But we're not going to that yet, we're just going to hit stop.
0:52
Now remember, don't close your browser,
0:54
you're not going back to an editor,
0:56
you just want to hit stop, you're already here.
0:58
So how do we link these things together?
1:01
Well, this is where this goes from kind of interesting
1:04
to really different and interesting.
1:06
Watch what happens when I hit code here.
1:08
We've already seen that we have our code in the background,
1:10
okay, and let's open our app browser for a minute.
1:14
So what we need to do is import these other forms,
1:16
in Python, so here's how it goes.
1:18
From add_doc_form,
1:21
import add_dock_form.
1:25
So this is the standard way you get
1:27
access to these other forms.
1:28
You're going to need this for all the various sub forms here.
1:37
All right, so we have them all imported, now what?
1:42
So we're going to write a little bit of code here,
1:44
that when the page loads, after init components,
1:48
when the page loads we want to show the home details form.
1:51
So notice we have a content panel here,
1:56
and what we're going to do, is we're going to put instances
1:58
of these forms into the content panel,
2:00
and that's the thing contained in the middle.
2:03
So we'll say self, notice the nice Intellisense,
2:05
cotentpanel.items,
2:07
not items, what you want to say clear, like that.
2:10
So, in case something was here,
2:12
we want to get it out, and we're going to do this every time
2:15
we navigate, but also at the beginning basically.
2:18
Say self.contentpanel.addcomponent,
2:21
and we're going to create,
2:23
we want to create a home details form like that.
2:27
And that's going to do it.
2:28
All right, now let's run this and see if it works.
2:30
Boom! Look at that. HighPoint Home.
2:32
Now none of this is working, so let's go link those
2:34
three things up and replicate it for the various
2:37
operations we have here.
2:39
So we go back to design, and we just double click home,
2:41
and notice link home clicked, and here's a function.
2:44
Go back to design, do it for all docs,
2:48
do it for add_doc.
2:50
So notice, here are the various things that we can do.
2:53
We can go home, and let's actually,
2:55
do this over here.
3:00
Call self.link, clicked, home, like so.
3:04
Do the same thing with the other little forms
3:06
for the various other pieces.
3:08
So what have we got here?
3:11
The all_docs.
3:15
And this would be add_doc.
3:17
Okay, great, it's almost finished.
3:19
Let's run it and see where we are.
3:23
Notice up here our title, HighPoint Home, HighPoint Home,
3:26
and we click here, we get all documents,
3:28
add a new document, but notice this is not changing.
3:31
This is subtitle, but this is label title.
3:33
Let's fix that.
3:38
Now one thing that's cool, is notice over here on the right.
3:40
These are all the stuff,
3:41
things we can work with, and if you expand it, it shows you
3:43
you can set the icon, text, etc., etc.
3:46
So what we want to do is set the text here.
3:50
So we'll set it home there.
3:54
This one let's say All Documents.
3:56
And this one be Add a document.
4:01
How cool!
4:02
Look at that.
4:03
Very, very nice, I love how this is coming together.
4:06
So, I think our navigation is basically done.
4:09
The next thing that we got to do,
4:10
is let's focus on adding a document.
4:13
Because it's not super interesting to show the documents,
4:15
until we have the ability to add them.
4:17
So we're going to focus on adding a document next.