1

00:00:07,570 --> 00:00:08,560

Hey hey everyone.



2

00:00:08,560 --> 00:00:11,290

Welcome back Johnny B here with slopes dot com.



3

00:00:11,470 --> 00:00:16,390

And this lesson we are going to actually start displaying and showing our messages.



4

00:00:16,490 --> 00:00:17,230

This is the big one.



5

00:00:17,230 --> 00:00:20,540

This is where our chat app finally looks like a real chat.



6

00:00:20,710 --> 00:00:23,790

We're going to be displaying channels and now we're going to be displaying messages.



7

00:00:23,800 --> 00:00:25,600

It's going to be pretty cool.



8

00:00:25,600 --> 00:00:27,120

All right so let's get started.



9

00:00:27,130 --> 00:00:30,700

We're going to start out with a custom table you sell.



10

00:00:30,700 --> 00:00:37,050

So here I'm going to click on view and see new file and it's going to be a Cocco touch class.



11

00:00:37,230 --> 00:00:39,750

The subclassed is going to be able to you cell.



12

00:00:39,820 --> 00:00:42,170

And we are going to call this message.



13

00:00:42,340 --> 00:00:43,150

So.



14

00:00:43,480 --> 00:00:44,050

All right.



15

00:00:44,110 --> 00:00:55,050

And the next thing create and then we need to go into storyboard and actually add our table view and



16

00:00:55,050 --> 00:00:56,490

table cells.



17

00:00:56,550 --> 00:00:57,210

All right.



18

00:00:57,390 --> 00:01:08,280

So zoom out a little bit here in the open are right pain and do a filter for Table View try to drop



19

00:01:08,310 --> 00:01:10,220

a table view in here.



20

00:01:10,410 --> 00:01:16,950

We're going to set its constraints to be zero from with constraints unchecked and zero from the left



21

00:01:17,580 --> 00:01:21,770

zero from the top zero from the right hand.



22

00:01:21,870 --> 00:01:27,510

About 30 or so just this later from the bottom and that's because in the next lessons we're going to



23

00:01:27,510 --> 00:01:31,310

be adding a label down here too.



24

00:01:31,320 --> 00:01:34,770

So we'll be able to see who's typing something when they're typing it so it'll be pretty cool.



25

00:01:34,770 --> 00:01:36,640

But we need to leave a little bit of space for that.



26

00:01:36,720 --> 00:01:44,160

So add those four constraints and then a beta bug we got this happens so if we just click out of the



27

00:01:44,160 --> 00:01:47,560

file and then back in that will be fixed.



28

00:01:47,670 --> 00:01:48,000

All right.



29

00:01:48,000 --> 00:01:50,090

So that's good.



30

00:01:50,100 --> 00:01:52,260

Couple things to set up in the table view.



31

00:01:52,260 --> 00:01:56,490

First off let's go ahead and set the separators tile to none.



32

00:01:56,490 --> 00:01:58,730

We don't want any dividing lines.



33

00:01:59,880 --> 00:02:02,510

And then let's go ahead and add a table view cell.



34

00:02:02,770 --> 00:02:03,160

OK.



35

00:02:03,180 --> 00:02:04,890

So here's our table Broussel.



36

00:02:05,040 --> 00:02:11,220

Let's go ahead and increase the height of it to about 80.



37

00:02:11,220 --> 00:02:12,300

That looks good.



38

00:02:12,300 --> 00:02:20,520

And then let's go ahead and start adding our UI elements that we're going to need if we check out our



39

00:02:21,360 --> 00:02:26,100

prototype or our mockups we can see and see here.



40

00:02:26,100 --> 00:02:34,200

Here we're going to need our image here in the left then a bolded user name slightly smaller time stamp



41

00:02:34,260 --> 00:02:39,590

and then the message text and come so we can use.



42

00:02:40,020 --> 00:02:42,310

Let's get an image in here.



43

00:02:42,430 --> 00:02:45,180

So this image is going to go over here.



44

00:02:48,660 --> 00:02:54,800

It will set the size that it's going to be 50 by 50.



45

00:02:55,260 --> 00:02:58,910

That's going to go right up here in the top left.



46

00:02:59,030 --> 00:03:03,420

Then we need a couple of labels three labels actually.



47

00:03:03,490 --> 00:03:09,460

And so we're going to have one label here another label here.



48

00:03:09,870 --> 00:03:12,590

And then a third label right here.



49

00:03:12,900 --> 00:03:16,040

And normally this bounding rectangle box kind of annoys me.



50

00:03:16,050 --> 00:03:17,250

That's a bug.



51

00:03:17,610 --> 00:03:21,740

Right now it's actually kind of helpful I'm able to see the outlines of some of these things.



52

00:03:21,750 --> 00:03:29,280

All right so let's go ahead and select all three of these labels are going to customize their appearance



53

00:03:29,280 --> 00:03:33,250

we're going to change the color to that dark gray color.



54

00:03:33,310 --> 00:03:43,710

The font is going to be custom and Helvetica new and regular is good except for this guy which is going



55

00:03:43,710 --> 00:03:49,950

to be our user name so I'll just put in Johnny B as some dummy placeholder text.



56

00:03:52,060 --> 00:04:03,940

And then we'll set the style to bold go and maybe drop the font by one hand and this one here we're



57

00:04:03,940 --> 00:04:07,940

going to drop the size to about 14.



58

00:04:08,550 --> 00:04:10,210

And that looks good will change.



59

00:04:10,210 --> 00:04:19,410

It's done fun too at times will say like Tove 33 P. M. X could press command equal on that one as well



60

00:04:19,420 --> 00:04:23,860

going to zoom in here because that we go right.



61

00:04:24,510 --> 00:04:33,250

And then this is going to be our message text and let's drop that down to maybe 15.



62

00:04:33,310 --> 00:04:34,690

I don't think that looks good.



63

00:04:34,710 --> 00:04:36,930

All right let's go ahead and constrain these.



64

00:04:36,980 --> 00:04:42,360

So for our image also I want to show you a little trick if you hold down shift and control and then



65

00:04:42,360 --> 00:04:44,790

click on anywhere.



66

00:04:44,790 --> 00:04:49,020

Then you get the kind of the layers of things that you clicked over.



67

00:04:49,020 --> 00:04:54,600

So if you want to go straight to your image view you could do that like that instead of having to click



68

00:04:54,900 --> 00:04:56,140

and then click and then click.



69

00:04:56,170 --> 00:04:57,810

You know maybe not getting the right thing.



70

00:04:57,900 --> 00:05:01,720

Just hold control shift and boom you can grab whatever you want.



71

00:05:01,920 --> 00:05:02,170

All right.



72

00:05:02,190 --> 00:05:09,570

Anyways so for this game we're going to set the class is going to be a circle image and we're going



73

00:05:09,570 --> 00:05:19,080

to constrain it was constrained to margins checked left zero top zero width and height and four constraints.



74

00:05:19,170 --> 00:05:23,780

And then for the for that name we're going to go



75

00:05:26,720 --> 00:05:34,890

let's go let's go 12 from the left and then I'm going to hold control and drag and we're going to say



76

00:05:35,190 --> 00:05:40,860

top so that our top the tops of both of those are lined up.



77

00:05:40,860 --> 00:05:46,650

And then this time label here we're going to control and direct to Johnny B and say center vertically



78

00:05:47,250 --> 00:05:53,280

and then let's do six from the left of the user name label.



79

00:05:53,280 --> 00:05:55,490

That set looks good.



80

00:05:55,650 --> 00:05:59,860

And then for this guy here.



81

00:05:59,880 --> 00:06:12,480

Pull pull him out and we'll go eight from the top 12 from the left and 12 from the right and then we'll



82

00:06:13,050 --> 00:06:21,300

set that to the bottom and say add for constraints and then we're going to get an error here is going



83

00:06:21,300 --> 00:06:26,270

to want us to set some vertical hugging compression.



84

00:06:26,550 --> 00:06:29,020

So we're going to let X could do that for us.



85

00:06:29,020 --> 00:06:34,030

When I say change priority and that should take care of that for us.



86

00:06:34,050 --> 00:06:38,280

So now we got our UI elements that we need.



87

00:06:38,340 --> 00:06:43,090

Let's go ahead and change the table cell class.



88

00:06:43,110 --> 00:06:44,090

We haven't done that yet.



89

00:06:44,100 --> 00:06:50,880

So here at the table your class set it equal to message cell and then the attributes inspector we can't



90

00:06:50,880 --> 00:06:56,310

forget to set the identity of the reuse identifier to get the same message cell.



91

00:06:56,730 --> 00:06:58,110

OK that's good.



92

00:06:58,110 --> 00:07:04,780

And then we're going to right click or unsorry hold option and click on the message spelled some of



93

00:07:04,780 --> 00:07:08,400

the file so that we can hook up our IB outlets.



94

00:07:10,870 --> 00:07:11,510

All right.



95

00:07:11,790 --> 00:07:13,090

Here we go.



96

00:07:13,100 --> 00:07:20,450

Going to create a little header here outlets and then we're going to control drag from each of the elements.



97

00:07:20,470 --> 00:07:26,010

So here we have the user image.



98

00:07:26,190 --> 00:07:30,950

Here we have the user name I'm going to go from the hierarchy here.



99

00:07:30,990 --> 00:07:35,430

So user name label



100

00:07:39,200 --> 00:07:45,750

here from the time stamp on it and tag over and say time stamp label



101

00:07:48,650 --> 00:07:55,550

and then from the message controlling and dragging and saying message body label



102

00:07:58,790 --> 00:08:00,150

it looks good.



103

00:08:00,420 --> 00:08:06,150

So now when we create our configure cell function we'll have the information that we need to populate



104

00:08:06,240 --> 00:08:07,380

each cell.



105

00:08:07,390 --> 00:08:16,000

So when I close the assistant editor and open our message cell that swift file and it's going to delete



106

00:08:16,000 --> 00:08:20,320

some code we're not doing any selected state for the messages.



107

00:08:20,390 --> 00:08:28,700

So we'll get rid of that and then all we need is a configure cell function so when I say func can figure



108

00:08:29,290 --> 00:08:30,440

so.



109

00:08:30,830 --> 00:08:36,710

And what we're going to do is we're going to pass into this function a message objects and when I say



110

00:08:36,840 --> 00:08:40,240

message type message



111

00:08:43,870 --> 00:08:54,720

then we're going to just go ahead and say so the message body label text is going to be equal to the



112

00:08:55,020 --> 00:08:59,730

message.



113

00:09:01,040 --> 00:09:07,650

Message the user name label.



114

00:09:07,690 --> 00:09:10,620

That text is going to be equal to the message



115

00:09:12,990 --> 00:09:28,470

that username the user image it's going to be too precious to use the image that image is going to be



116

00:09:28,470 --> 00:09:33,720

equal to a UI image named.



117

00:09:34,140 --> 00:09:43,100

That's going to be equal to the use the message that user avatar and then the background color we're



118

00:09:43,110 --> 00:09:53,750

going to use a user image image that background color is equal to user data service for instance to



119

00:09:53,820 --> 00:09:58,020

return a color and the components are message.



120

00:09:58,260 --> 00:10:03,220

Dot Avatar color area.



121

00:10:03,550 --> 00:10:08,250

And that should do everything except for the time label.



122

00:10:08,430 --> 00:10:14,700

You may have noticed that I'm leaving the time label out for now just because it requires quite a bit



123

00:10:14,700 --> 00:10:19,870

of conversion we have to go from a from a kind of a weird date to the one that we need.



124

00:10:19,890 --> 00:10:21,930

So we're going to cover that in the next lesson.



125

00:10:21,930 --> 00:10:25,720

This lesson we're just trying to get the message is showing.



126

00:10:25,730 --> 00:10:26,320

All right.



127

00:10:26,550 --> 00:10:34,830

So now that we have our custom message cell set up we can go into our chat Visi and we are going to



128

00:10:34,830 --> 00:10:42,210

need a an outlet for our table views and hold option and click on mean that's storyboard to open up



129

00:10:42,210 --> 00:10:55,890

our assistant editor or here and drag over Ann's table view Cain and say connect and we're going to



130

00:10:55,890 --> 00:10:57,480

close the assistant editor.



131

00:10:57,750 --> 00:10:59,750

And what do we need.



132

00:10:59,820 --> 00:11:00,760

Pop quiz.



133

00:11:01,170 --> 00:11:04,390

We need to conform to a couple of protocols and they are UI.



134

00:11:04,440 --> 00:11:15,270

Table View delegate can you write table the data source can and what are we going to do next.



135

00:11:15,270 --> 00:11:21,000

Next up we need to set our delegate and data sources for our table gruesomeness table view dot



136

00:11:23,700 --> 00:11:32,190

delegate equal to self and table view that data source is equal to self



137

00:11:35,170 --> 00:11:41,260

and then we're going to need to conform to these protocols by adding the required methods right.



138

00:11:41,260 --> 00:11:45,430

So let's go down here and let's say



139

00:11:48,170 --> 00:11:48,870

and then.



140

00:11:48,910 --> 00:11:53,320

So for row at the next path.



141

00:11:53,530 --> 00:12:00,650

And this is where we are going to actually queue up our cell Hermitage cells are going to say if let.



142

00:12:00,880 --> 00:12:13,360

So as go to table b you dot D Q reuseable cell with identifier string for index path and our identifier



143

00:12:14,140 --> 00:12:20,220

string is message cell for index path.



144

00:12:20,500 --> 00:12:23,430

And we're going to cast that.



145

00:12:23,570 --> 00:12:29,010

And not that we are going to cast that as a message.



146

00:12:29,480 --> 00:12:40,120

So so once we have queued up our our table view cell we're going to say we're going to grab the message



147

00:12:40,120 --> 00:12:41,300

that corresponds with it.



148

00:12:41,320 --> 00:12:51,640

And so if we have messages to say let a message equal message or this instance that messages and the



149

00:12:51,640 --> 00:12:56,050

one we want is index path.



150

00:12:57,030 --> 00:12:57,550

OK.



151

00:12:57,730 --> 00:13:07,960

And then we're going to call cell dog configure and pass into this function that object that message.



152

00:13:08,320 --> 00:13:11,320

And then we're going to return that cell.



153

00:13:12,000 --> 00:13:12,360

All right.



154

00:13:12,370 --> 00:13:19,770

And then if we're not able to do QSL we're just going to say turn UI table.



155

00:13:20,020 --> 00:13:27,040

You so empty your table you it's been a see this.



156

00:13:27,160 --> 00:13:30,460

And let's see here what do we got going on.



157

00:13:30,460 --> 00:13:32,060

I think this is just going to go away in a second.



158

00:13:32,060 --> 00:13:32,850

There we go.



159

00:13:33,350 --> 00:13:39,520

So we finished up one of our functions the next one we need to know is number of sections and that's



160

00:13:39,760 --> 00:13:41,310

going to be one.



161

00:13:42,100 --> 00:13:45,960

And then finally number of rows in S..



162

00:13:46,210 --> 00:13:48,350

And so this is just going to be however.



163

00:13:48,610 --> 00:13:58,690

However many messages are currently in our message service message service that instance dot messages



164

00:13:58,800 --> 00:14:02,650

that count could be 0 could be 100.



165

00:14:02,650 --> 00:14:09,040

And then the last thing I think that we need to do is here in our get messages when we go and get our



166

00:14:09,040 --> 00:14:20,720

messages we just need to say if success then self-taught table table view to reload data.



167

00:14:20,920 --> 00:14:27,010

So once we have retrieved messages we're just going to reload our table and load those all up and you



168

00:14:27,010 --> 00:14:27,850

know what I think.



169

00:14:27,880 --> 00:14:29,500

I think that's all we need to do.



170

00:14:29,700 --> 00:14:33,640

Let's let's test this out let's run it let's see if we can actually see our messages



171

00:14:36,880 --> 00:14:44,980

they check it is exciting.



172

00:14:44,980 --> 00:14:46,240

So cool.



173

00:14:46,240 --> 00:14:46,580

All right.



174

00:14:46,600 --> 00:14:53,020

So let's let's send a message and I'm going to make this a long message.



175

00:14:53,020 --> 00:14:56,420

This is a long message.



176

00:14:56,830 --> 00:14:58,810

I'm going to copy it.



177

00:14:58,810 --> 00:15:00,300

Can I copy this.



178

00:15:00,310 --> 00:15:03,550

Maybe this is a long passes.



179

00:15:03,580 --> 00:15:05,190

I'm just going to do a whole bunch of typing.



180

00:15:05,500 --> 00:15:10,430

And so the point of this is to see if we have an issue which I think we will.



181

00:15:10,690 --> 00:15:13,030

So I'm going to send this.



182

00:15:13,410 --> 00:15:19,720

All right and then we don't have the socket doc on set up so to actually see that message we're actually



183

00:15:19,720 --> 00:15:22,100

going to have to stop and reload.



184

00:15:23,350 --> 00:15:23,790

OK.



185

00:15:23,800 --> 00:15:24,100

Yes.



186

00:15:24,100 --> 00:15:26,630

So here you see this is a long message.



187

00:15:26,980 --> 00:15:32,180

We need to do some work in our cell to make it so that that actually will show the whole message.



188

00:15:32,260 --> 00:15:36,550

And so we're going to cover a cool little thing that some people a lot of people don't cover in their



189

00:15:36,550 --> 00:15:37,280

chances.



190

00:15:37,280 --> 00:15:44,230

How to make the cell dynamically sized to the height of the text and it's actually not that hard.



191

00:15:45,490 --> 00:15:52,150

So one thing that we need to do is go back to our main story board and we're going to select our message



192

00:15:52,210 --> 00:16:01,870

label and make sure that the lines is set to zero then back in our chat VCM what we need to do is we



193

00:16:01,870 --> 00:16:05,930

need to set a estimated Rubell height.



194

00:16:06,010 --> 00:16:13,080

And so we do that by seeing table view that estimated room height and will say about 80.



195

00:16:13,480 --> 00:16:18,460

And then what we need to do is say Table View dot



196

00:16:22,120 --> 00:16:23,200

row height.



197

00:16:23,830 --> 00:16:30,110

And we're just going to you tell it to say you table your automatic dimension.



198

00:16:30,170 --> 00:16:30,580

OK.



199

00:16:30,590 --> 00:16:38,110

And so that is what is going to give us the automatic sizing plus having the correct constraint.



200

00:16:38,110 --> 00:16:40,190

So hopefully we've got our constraints right down here.



201

00:16:40,420 --> 00:16:49,330

But basically what you need is just that the that you have a full line of constraints from top to bottom.



202

00:16:49,390 --> 00:16:50,000

Okay.



203

00:16:50,220 --> 00:16:56,930

And and I think we I think we do have that Solas go ahead and run this.



204

00:16:57,140 --> 00:16:58,980

And yeah there we go.



205

00:16:59,150 --> 00:17:00,350

So cool.



206

00:17:00,510 --> 00:17:05,770

So now we have our sales actually dynamically sizing to the length of our message.



207

00:17:05,840 --> 00:17:08,160

So that is pretty darn cool.



208

00:17:08,450 --> 00:17:12,990

All right so yeah I mean this looks it's looks fantastic guys.



209

00:17:13,130 --> 00:17:17,050

So I hope you're pretty happy with what you've gotten so far.



210

00:17:17,120 --> 00:17:18,330

We're not done yet though.



211

00:17:18,360 --> 00:17:25,080

I mean the next lessons we're going to we're going to do the socket on for the channel for the message



212

00:17:25,080 --> 00:17:32,270

is so that we can send a message and see it pop up right away on ours as well as on other devices that



213

00:17:32,270 --> 00:17:33,380

are running the same app.



214

00:17:33,530 --> 00:17:39,580

And so super exciting stuff and excited to show you guys all of that in the next coming lessons.



215

00:17:39,590 --> 00:17:46,520

But for now I'm going to add and commit my changes and then we'll see you all in the next one.