Everybody.

And welcome to part five of the key V tutorials in this video we're gonna be doing is building out that actual chat app page basically where the chatting is to occur.

So, uh, so far, we have built the following, which is just a label, and instead, what we want to do is actually kind of set up the layout and then talk a little bit about how we're actually gonna update the chat.

Because the label itself, while that contains text and we could continuously like, update that label once the Texas long enoughto run off the screen, it's just going to run off the screen.

So there's no like scroll.

So instead, what we need to do is kind of combine the scroll view with a label and kind of make our own Custom scroll herbal label.

So, uh, we're gonna be working on that, so the first thing we're gonna do is we're gonna keep Self Coles is one, and then we're gonna say self dot Rose is too.

So I've drawn a beautiful picture for the text based tutorial about how I envisioned this app toe work, and this is it.

So the chat will kind of exist here and wrote one and then for road, too.

Wrote to is actually gonna have two columns.

So it will be it a layout inside of a layup.

So on road to will have calling one, which will take about 80% of the width.

And then column two will be the actual send button.

So this is where you'll enter your message.

This is the chat history, and then this is send about him.

Cool.

So, um, first thing we'll do is just get rid of this because we're not going to be using that anymore.

So now we're gonna say itself that history is gonna be still, um, a label here for now.

Ah, that we're gonna set to be.

Height is equal to the window.

Don't size.

And one end, since I've just brought in window, let me see here.

Ky v corps window.

So to reference to just generally the window from tv dot cord out window import window coming back down.

Chat up here.

Okay, so one its coordinates.

Right window.

That size will be coordinates.

So x zero, why is one wise height?

Boom?

So why Um, So for that height, times will do 10.9 0.9 and then size.

Hint.

Why none?

Aah!

These parameters.

So rude space for pep eight.

Great.

So then self dot ad widget self dot history.

Lovely.

Now, in the second row, we're gonna have the message input that we want input and then send button.

So for that, we're going to say self dot new message is equal to a text inputs, and this will be with and that's gonna be window dot size zero with for the X times 0.8.

So 80% ah, size hint Not why it'll be X.

Um, none.

And for now, we'll set multi line to false.

Okay, then, um, we need our send button.

So self dots end is going to be a button that says send spoons, then self dot send dot bind.

Any time we send a message, uh, what we want is on press were going to say self dot send underscore message, so we'll need to build that.

Okay, now, what we want to do is we have this widget history which is taking up that entire because remember the way this can you kind of weird until you get used to it.

And you almost have to have, like, this mental image.

So right now we're programming in the space.

That is one column to rose.

So the first ad widget that we did is taking up this whole thing.

Now, if we add one more widget, it's gonna take up this whole thing.

Okay?

So we can't just we don't want to just add a widget right away, because it's gonna take up that full row.

So instead, what we're gonna say is bottom line is equal to the agreed layout of calls equals two, and then we're going to set up bottom line.

So we're going to say bottom line dot ad widget and we're gonna add both widgets himself dot um, new message.

And then bottom line dot ad widget self dot sent.

So now this bottom line grid layout thing that just doesn't belong anywhere.

Now we're going to add that, and now this bottom line widget takes up that entire bottom row.

But inside of that, we have a grid layout.

That's two columns, and it contains these two widgets which are sized accordingly.

I'm sorry.

Sized accordingly and then this just takes up the rest.

So now when we say self dot and widgets, we add bottom line.

Boom!

Don't, uh, Now what we're gonna do is we'll just add this send message method just real quick CE and message.

So, so cool.

So, uh, when you click the button, it also returns.

Um, what is it?

The button, right.

It it'll return whether you hit the send button or the enter key.

That's right.

So, um so in this case, um, we don't really care s Oh, that's why we're using the underscore here.

So for now, when this method gets triggered, we're just gonna say sand message.

Okay.

Um very good page.

Okay, let's test.

I think Yeah, we'll test this for now.

Let's just run that real quick.

So Pied Ash 37 key V App.

No, give you.

There we go.

Uh, sense is the first time we're running it.

Don't forget you need to be also running socket server.

Dupuy, if you don't know what the heck I'm talking about, quit skipping tutorials, okay?

It join.

And it looks pretty good.

So in here, you could say bah, bah, blah, blah.

Um and there won't click Send.

And we can see here on her key V app thing as we hit Send it says send a message.

So it knows.

Okay, we're gonna do something when we send a message, and we'll probably handle that in the next video.

But the other issue is, as we continue to populate this label, we're gonna get too much.

So we need to make this scroll herbal label, which unfortunately doesn't exist.

It seems like a really obvious thing.

So, uh, anybody watching knows ky V and knows what should be in place of this.

Like, how would you use Ky vy to display anything?

Scroll herbal.

That would be updated, right?

Let me know.

Um, anyway, so let's fix that.

So what we're gonna do is from tv dot u ex dot scroll view.

We're going to import scroll view, and we're just gonna make something that is a better version of a label.

So we're gonna make this, like, label widget thing that will just take the place of a label.

Not all of the labels, but the one that we want to take a place of.

So, uh, collapse.

Screw cool.

Global label it's going to inherit from school view.

And why don't you guess it?

We're gonna do this as well.

Cool.

All right, so first we're gonna say self dot layout is equal to a Gridley out.

Um, where we just have one column and then size hint Why equals none.

And they were gonna add that.

So self dot ad widget self don't lay up.

Great.

Now we want to do is basically we need to widgets ah, one to be appended to and have a scrolling capability.

And the other widget is simply there for us to scroll to it.

So to scroll, like down, right by default.

As new messages come in, we actually we want to continue scrolling down, so we need, like, a target to school down, too.

So we're gonna just throw a widget there to scroll Thio.

And that's its sole purpose.

So we're gonna say self dot chat underscore History equals a label with a size hint wine.

You could do it none, and then mark up equals true.

And this is there.

So we can add pretty colors.

Make your user name one color and everybody else's user name a different color.

So, you know.

So it's just easier for you to read and then self not scroll to point is just going to be a label.

So it's just an empty label, But this is the thing that we're going to scroll to every single time.

So now we're gonna add this to our layout, So we're just going to say self dot layout dot ad widgets, and we're gonna add a self dot chat history, and then we're going to add self.

Don't scald yourself.

So that led ad widget.

You can do it, man.

Um, and we're adding self self done scroll to point more coffee is necessary.

Okay, So awesome.

So, yeah, so we have the chat history, and these two things are going to go in this layout widget.

Um, in this layout, which it is Scroll Herbal.

And all we're doing is just we've got this label that's just ever updating it will scroll, but to get it to scroll to the bottom, we're adding one more widget.

That's just gonna be empty.

It's just empty label.

Kind of like we abused in empty label earlier.

Um, and we're just simply using it as like a target to scroll to.

So pretty cool.

Awesome.

So that's our innit method here for our scroll herbal label.

Now, we need a method to actually update the chat history as a new message comes in.

So we're going to say defined update, shat history.

This'll take two parts.

That'll be self.

And the message that you wanna update into the chat history.

So self dot chat history dot text is gonna be a plus, equals, um, first of all, it should be a new line.

So backslash in Plus, whatever the message waas, um, so immediately, you should be taking note that this is not sanitized in any way.

I'm already thinking of all kinds of fun stuff we could do.

Um, so yeah, that's why I'm not gonna leave this public.

Um, now, I'm not gonna leave my chat serve republic anyway, uh, Chad history text.

Okay, So, new man, a new line, then the message.

And then now what we want to do is we want to set the layout height to be whatever the height is necessary.

And then we just kind of are gonna be adding some padding here.

So the first thing that we're gonna dio is self dot layout Don't.

Height is gonna be self dot Shat hiss history dot Texture It's not not having type texture size one for the why, plus 15 pixels just to give us some extra space at the bottom.

And then what we're gonna say is self don't chat history itself.

Don't height his self dot chat history dot texture signs one Awesome.

So now self not chat history dot text underscore.

Size is equal to the self dot Shat history with times 0.98 comma and then none there.

Okay, I think that's what we want.

We'll find out, uh, and then finally Don't forget.

We want a self Don't scroll underscore too.

Um, self, don't scroll to point.

Cool.

So that's with our school view.

Uh huh.

So when we update, we'll add the message we get the, uh, height here.

We, uh, add that information and then set the text set the size, and we're good to go.

Cool.

So Ah, now I think we're ready to go ahead and try this.

Um, let's just make sure we don't have any errors, cause until we actually get some coke or some text coming in.

We're not really gonna know if this is working as intended.

So I think what I'll do, Let's just run it really quickly and just see what we have here.

Okay?

So I mean everything up to this point that we contest does work.

But until we actually start updating the text in this actual label, um, there's really nothing for us.

Thio test further.

So Okay.

So, yeah.

In the next video, um, will wrap up the application, and, uh, and then the subsequent video will talk about packaging, so we'll get it on.

I mean, doing windows.

I mean, pretty much every desktop, you could just stop by dawn, but on windows, you can create an ex execute herbal.

Um, I'm trying to think on Mac.

If there are no limits, there is no option.

You would just need to get you get Python and TV on.

Mac.

There is.

I haven't tested it on Mac.

I have got it on Android and then haven't tests on IOS.

But apparently you can get there, too.

So anyway, we'll start talking about packaging and stuff like that and mostly just the hardships of packaging, because there's so many seven.