1 00:00:07,640 --> 00:00:09,620 Hey everyone how y'all doing. 2 00:00:09,620 --> 00:00:11,990 Johnny B here with slopes dot com. 3 00:00:12,170 --> 00:00:16,590 And in this lesson we are going to continue with our SMAC chat app. 4 00:00:16,670 --> 00:00:21,320 We are going to create the had channel view in this lesson. 5 00:00:21,320 --> 00:00:28,480 All right so let me see if I can pull up our mockups once and she can open these up 6 00:00:34,290 --> 00:00:38,000 and this is what we are going to build right now. 7 00:00:38,190 --> 00:00:43,010 All right it's just another model similar to our profile model. 8 00:00:43,050 --> 00:00:50,790 We have a title we have a couple of text fields a button to create the channel and one to close it and 9 00:00:50,790 --> 00:00:56,960 we'll also have the touch just recognize it to dismiss like the like the profile one. 10 00:00:57,340 --> 00:00:59,770 And so it's get to it. 11 00:01:00,060 --> 00:01:06,180 We are going to again create a view controller file with IDS. 12 00:01:06,240 --> 00:01:13,770 So here and the controller put them in a right click and say new file you can do a cocoa touch class 13 00:01:13,950 --> 00:01:15,860 and sing next. 14 00:01:15,870 --> 00:01:24,260 And what do we call this and channel Visi and also accrete a file then next. 15 00:01:24,660 --> 00:01:26,860 And create. 16 00:01:27,930 --> 00:01:33,040 And then I'm going to grab these and drop it into the Zeb's folder. 17 00:01:33,390 --> 00:01:39,240 And let's go and just get get crackin on this on this is here. 18 00:01:39,260 --> 00:01:43,680 All right so let's go ahead and look for a view. 19 00:01:43,870 --> 00:01:51,120 And this is going to be the container to hold hold of the UI elements the main UI elements like the 20 00:01:51,480 --> 00:01:56,150 labels and the text fields and such and then give it a background. 21 00:01:56,160 --> 00:01:57,830 We got that weird bug again. 22 00:01:57,870 --> 00:02:04,020 So we're going have to leave this file and then go back into the add channel ABC that we are going to 23 00:02:04,020 --> 00:02:10,890 give this a little bit of an off colored white so that we can view it and just go ahead and constrain 24 00:02:10,890 --> 00:02:11,470 it right now. 25 00:02:11,460 --> 00:02:21,070 So I want to say 20 from the left 20 from the right is about maybe 150 from the top. 26 00:02:21,690 --> 00:02:26,790 And then we're going to set the height equal to about 320 27 00:02:29,350 --> 00:02:32,920 ABC Java this version. 28 00:02:33,140 --> 00:02:39,630 I think that's a little too far from the top so let's just go back to size Inspektor top space to say 29 00:02:39,660 --> 00:02:41,270 maybe 80. 30 00:02:41,620 --> 00:02:43,490 And I think that looks pretty good. 31 00:02:43,500 --> 00:02:46,930 All right so now let's go ahead and add in those elements. 32 00:02:46,980 --> 00:02:54,830 And actually if we take a look at this you know what I was going to I was going to cheat I was going 33 00:02:54,830 --> 00:03:03,120 to copy those from our profile view but let's just let's just do it. 34 00:03:03,180 --> 00:03:10,140 All right so let's go ahead and look for a label view of this label is going to come up here. 35 00:03:10,580 --> 00:03:14,540 There going need a couple of text fields. 36 00:03:14,860 --> 00:03:19,970 So I got one text field here another textfield here. 37 00:03:20,350 --> 00:03:27,750 We're going to take a couple of buttons one button up here and one down here and then we're going to 38 00:03:27,750 --> 00:03:36,420 need a couple of views to be our divider lines case going to chop that down right here and hold option 39 00:03:36,450 --> 00:03:42,990 and drag to make a copy of it actually you know what let's leave that and first of set all the properties 40 00:03:42,990 --> 00:03:47,000 up on this and then we'll copy it. 41 00:03:47,400 --> 00:03:51,000 All right so this is going to be that blue color that we've been using. 42 00:03:51,720 --> 00:04:03,840 And let's go ahead and set some sizes on this with is 250 and the height is to make two of those cup 43 00:04:03,930 --> 00:04:11,370 controls or commencing command V to make a copy just drop that right down here and then for these two 44 00:04:12,840 --> 00:04:22,410 grab both of these text fields and here in the color we're going to change the color of the font to 45 00:04:22,410 --> 00:04:29,390 the purple The font is custom and Helvetica new is fine. 46 00:04:29,730 --> 00:04:34,050 And then we're going to set none for the border style here. 47 00:04:34,410 --> 00:04:36,960 And then let's put some placeholder text in there. 48 00:04:36,960 --> 00:04:38,030 This one is. 49 00:04:38,220 --> 00:04:43,430 This is the the name of the channel. 50 00:04:44,130 --> 00:04:50,190 And then this one right here is the description. 51 00:04:50,240 --> 00:04:51,210 Right. 52 00:04:51,530 --> 00:04:58,580 So just move those over year and then let's change this up here. 53 00:04:58,580 --> 00:05:06,410 This is going to say create channel K and change the color to keep doing that. 54 00:05:06,410 --> 00:05:07,130 Click here. 55 00:05:07,130 --> 00:05:14,830 That's right one purple hand font that's going to be custom Helvetica new. 56 00:05:14,930 --> 00:05:21,650 Let's bump that up to maybe like 22 and the style is bold. 57 00:05:21,850 --> 00:05:22,130 OK. 58 00:05:22,150 --> 00:05:26,370 And then I'm going to press command equal to size it. 59 00:05:27,050 --> 00:05:35,930 And then this guy right here we can get rid of the button text and under image this is going to be close 60 00:05:35,990 --> 00:05:42,520 button and you're going to drag that right here and let's go ahead and constrain it while hear here 61 00:05:42,630 --> 00:05:48,420 from the top it from the right width and height is good. 62 00:05:48,830 --> 00:05:53,740 And then let's go ahead and throw these in a stack for you. 63 00:05:53,780 --> 00:06:02,770 So the name textfield description textfield and the two dividers and someone to sit down here embed 64 00:06:02,800 --> 00:06:08,990 in stack and that's going to throw off the size of our divider views like it usually does. 65 00:06:08,990 --> 00:06:10,880 So now we have to do some constraints. 66 00:06:10,880 --> 00:06:15,230 All right so we're going to select all four of these elements to sit there with because they're all 67 00:06:15,230 --> 00:06:16,630 going to be with us. 68 00:06:17,060 --> 00:06:20,100 Two hundred and fifty. 69 00:06:20,570 --> 00:06:21,600 I set the height. 70 00:06:21,610 --> 00:06:23,180 Whoops. 71 00:06:23,670 --> 00:06:26,370 MANZI Manzi. 72 00:06:26,730 --> 00:06:28,940 I think I set the height. 73 00:06:29,220 --> 00:06:32,180 OK let's try that again with. 74 00:06:32,540 --> 00:06:34,190 Two hundred and fifty. 75 00:06:34,190 --> 00:06:35,030 There we go. 76 00:06:35,450 --> 00:06:45,170 And then with the two views selected constrain the height to two you can going to add two constraints 77 00:06:45,960 --> 00:06:49,270 looks better right now with that stack you selected. 78 00:06:49,270 --> 00:06:55,080 Let's go ahead and give us some spacing Maybe you like 12 maybe a little bit more. 79 00:06:55,100 --> 00:06:57,080 Something like 18. 80 00:06:57,090 --> 00:06:58,730 See how that looks. 81 00:06:58,730 --> 00:07:00,530 Maybe a little too much. 82 00:07:00,830 --> 00:07:03,220 Let's try 15. 83 00:07:03,260 --> 00:07:07,700 I think there still might be a little too much let's try 14. 84 00:07:07,730 --> 00:07:07,930 All right. 85 00:07:07,940 --> 00:07:08,790 Now it's pretty good. 86 00:07:08,800 --> 00:07:12,740 I'm going to take that and agree here and let us do this. 87 00:07:12,740 --> 00:07:14,210 Button here this. 88 00:07:14,510 --> 00:07:26,540 See here the text is create channel the background color is our blue color. 89 00:07:26,810 --> 00:07:39,720 The text color is white and the font is custom Helvetica new and the style is bold. 90 00:07:39,920 --> 00:07:41,400 Looks good. 91 00:07:41,450 --> 00:07:49,900 Now let's go ahead and set some constraints for a size the width is 250 and the height is 50. 92 00:07:49,980 --> 00:07:55,470 Can add two constraints center horizontally in container. 93 00:07:55,610 --> 00:08:02,880 Add one constraint and then set it from the bottom 20. 94 00:08:05,880 --> 00:08:08,080 Actually don't set this. 95 00:08:08,150 --> 00:08:10,090 Now we can set this one and that's fine. 96 00:08:10,620 --> 00:08:11,250 OK. 97 00:08:12,090 --> 00:08:20,940 Now we're going to do is we're going to go ahead and constrain this top one so maybe 40 from the top 98 00:08:20,940 --> 00:08:29,300 we'll see how that looks and then we'll set it horizontally in a container that looks good on the stack. 99 00:08:29,330 --> 00:08:37,880 You see how centered horizontally and vertically looks right now looks pretty good. 100 00:08:37,920 --> 00:08:40,960 I think this stack go up a little bit. 101 00:08:40,950 --> 00:08:48,690 So let's go ahead and come over here to our size inspector and find the align center to Y and see maybe 102 00:08:48,720 --> 00:08:50,960 minus 10. 103 00:08:50,970 --> 00:08:53,540 I would think that looks that looks better. 104 00:08:53,690 --> 00:08:54,640 Yeah. 105 00:08:54,750 --> 00:09:00,600 All right and then our create channel button we can set the class for this one to be around and button 106 00:09:01,590 --> 00:09:04,720 and set the corner radius to five. 107 00:09:04,770 --> 00:09:07,460 That looks good. 108 00:09:07,860 --> 00:09:08,590 All right. 109 00:09:08,730 --> 00:09:17,130 Let's go ahead and switch the background color on the container view back to white and then we need 110 00:09:17,130 --> 00:09:19,090 to add in our background view. 111 00:09:19,110 --> 00:09:26,100 So here in the library I'm grabbing a view and I'm dragging it over here into the hierarchy and placing 112 00:09:26,100 --> 00:09:29,420 it above or behind the front of you. 113 00:09:29,420 --> 00:09:29,920 OK. 114 00:09:30,170 --> 00:09:37,680 And I'm just going to rename this background you B.G. view and then I'm going to control and drag to 115 00:09:37,680 --> 00:09:44,220 the Super view and say leadings paste a container control and drag trailing space to container control 116 00:09:44,220 --> 00:09:51,810 and drag tough space to container and control and drag and bottom space to container and that's essentially 117 00:09:51,810 --> 00:09:55,770 the same thing as clicking on this and saying all of these. 118 00:09:56,370 --> 00:10:03,210 But the reason I do it that way is because then I have control over which what I'm setting the top and 119 00:10:03,210 --> 00:10:04,530 left and right constraints too. 120 00:10:04,530 --> 00:10:09,050 If you're doing here it just automatically tries to set it to the nearest neighbor. 121 00:10:09,050 --> 00:10:09,760 OK. 122 00:10:10,080 --> 00:10:16,150 And then with the book can be selected going to select or size inspector and set each of these to zero 123 00:10:16,180 --> 00:10:24,450 so so zero here Zero here zero here and zero here. 124 00:10:24,510 --> 00:10:24,740 All right. 125 00:10:24,750 --> 00:10:30,120 And then we're going to end with the second to be selected go to its attributes Inspektor change the 126 00:10:30,120 --> 00:10:38,850 background to black and the Alpha to zero point four and then select the Super view and the main view 127 00:10:38,850 --> 00:10:44,550 here and change its background color to clear color. 128 00:10:44,660 --> 00:10:46,040 All right it's looking pretty good. 129 00:10:46,050 --> 00:10:53,730 I'm going to save that and I'll just go ahead and add the Iby outlets and some of the actions for this 130 00:10:53,910 --> 00:10:59,530 for this view to want to hold the option and write or hold option and click on the channel ABC that's 131 00:10:59,530 --> 00:11:08,360 out of the file and then we're going to go ahead and add some and some of these actions and how close 132 00:11:08,400 --> 00:11:12,820 we need to delete this on used code here. 133 00:11:12,860 --> 00:11:15,630 I'm going to start with the close model button. 134 00:11:15,690 --> 00:11:26,880 You want to control and drag and say close mode all pressed and so that to an action and connect them 135 00:11:26,880 --> 00:11:29,880 we're going to need outlets for that name and description. 136 00:11:30,170 --> 00:11:34,950 So we're talking to say outlet's whips out. 137 00:11:35,070 --> 00:11:39,230 Let's end with the name textfield selected. 138 00:11:39,230 --> 00:11:46,550 I want to control and drag and say name text connect say 139 00:11:49,280 --> 00:11:58,190 Chan description or just Chan desk for short and connect and then I'm going to select the background 140 00:11:58,190 --> 00:12:04,020 view and control and drag and say B.G. view I'm going to stick there. 141 00:12:04,460 --> 00:12:09,670 And then over here we'll go ahead and create the action for the Create channel. 142 00:12:10,040 --> 00:12:15,820 Even though we're not going to get to it this lesson create channel preste. 143 00:12:15,930 --> 00:12:20,100 And that's an action and connect. 144 00:12:21,110 --> 00:12:21,440 All right. 145 00:12:21,440 --> 00:12:23,850 So go ahead and go back to our standard editor. 146 00:12:23,870 --> 00:12:30,580 Open up our ad channel obviously does swift and for the close model we know how to do that. 147 00:12:30,590 --> 00:12:38,570 That's easy just to dismiss I say true and completion is new Very good. 148 00:12:39,020 --> 00:12:41,590 And this one we're going to ignore for now. 149 00:12:41,750 --> 00:12:46,910 So the rest of this is just going to be some UI visual setup. 150 00:12:46,970 --> 00:12:52,400 So we're going to create a function here call the phunk set up 151 00:12:56,810 --> 00:13:02,150 and we're going to do here is we're going to set the placeholder attribute in font color and then we're 152 00:13:02,150 --> 00:13:08,420 also going to create the tap recognizer for that background view so that you can tap on it and dismiss 153 00:13:08,510 --> 00:13:09,160 that note. 154 00:13:09,170 --> 00:13:09,830 All right. 155 00:13:09,830 --> 00:13:11,060 So let's get to it. 156 00:13:11,060 --> 00:13:19,070 First off let's go ahead and do the the touch gesture recognizer and say let close touch equal. 157 00:13:19,200 --> 00:13:24,760 That's can be a wire tap gesture recognizer hand. 158 00:13:24,770 --> 00:13:32,320 See here we need the target and selector but go let's go ahead and create the function first. 159 00:13:32,630 --> 00:13:40,550 So there's going to be sorry to say at Objective-C and the function we're going to stay closed tap and 160 00:13:41,540 --> 00:13:54,120 then we're passing a recognizer of type I tap gesture recognizer and we're going to do here also is 161 00:13:54,120 --> 00:14:00,070 say dismiss animated true completion. 162 00:14:00,930 --> 00:14:01,460 Ready. 163 00:14:01,550 --> 00:14:03,640 So there are a selectors. 164 00:14:03,890 --> 00:14:16,760 The target itself and the action is hash tag selector and then we're going to say had channel Visi got 165 00:14:17,100 --> 00:14:18,720 close tap. 166 00:14:18,790 --> 00:14:19,370 All right. 167 00:14:19,540 --> 00:14:20,870 Perfect. 168 00:14:20,890 --> 00:14:32,080 And then we need to add the gestures or CBG view that and gesture recognize the recognizable red to 169 00:14:32,110 --> 00:14:35,710 add is of course close touch. 170 00:14:35,710 --> 00:14:42,250 All right so now let's go ahead and add the the placeholder font color. 171 00:14:42,460 --> 00:14:51,000 So if you remember how to do that we're going to say name text dot attribute and placeholder. 172 00:14:51,180 --> 00:14:54,920 And so we need to create and attribute that string to do that. 173 00:14:55,230 --> 00:15:02,670 So we're going to say in this true beauty string and we're going to initialize with let's see here this 174 00:15:02,670 --> 00:15:05,430 guy right here with a string and then its attributes. 175 00:15:05,430 --> 00:15:05,660 All right. 176 00:15:05,670 --> 00:15:16,290 So the string is going to be let's use this for the name texture and say name and the attributes here 177 00:15:17,340 --> 00:15:19,020 that's going to be. 178 00:15:19,460 --> 00:15:34,740 And this true muted string key dropped for ground color says the key and the value is Auris Mac purple 179 00:15:34,740 --> 00:15:36,600 placeholder color that we created. 180 00:15:36,960 --> 00:15:37,320 All right. 181 00:15:37,380 --> 00:15:42,000 And then I'm going to copy this for the description placeholder as well. 182 00:15:42,000 --> 00:15:46,710 And so we're just going to say Chowan desk right here. 183 00:15:47,070 --> 00:15:56,600 And the string is description and that should do it right there. 184 00:15:56,600 --> 00:15:56,960 All right. 185 00:15:57,150 --> 00:15:58,290 So now let's. 186 00:15:58,330 --> 00:16:04,710 Oh don't forget to set up the view or to call the function that we just created. 187 00:16:04,710 --> 00:16:07,090 All right looking good. 188 00:16:07,410 --> 00:16:13,320 So go ahead and make it so that we can actually make this model appear. 189 00:16:13,390 --> 00:16:19,170 All right so in our channel BCU that's where that's where it's called from someone opened up our channel 190 00:16:19,170 --> 00:16:21,160 beside us with the file. 191 00:16:21,180 --> 00:16:28,980 And then I don't believe we have a B action for the addition of new channels so we're going to need 192 00:16:28,980 --> 00:16:34,170 to add that so a holding option and clicking on mean storyboard we're going to open the assistant editor 193 00:16:34,780 --> 00:16:38,430 and close this left panel and the right panel will give us a little more room. 194 00:16:38,910 --> 00:16:44,280 And then let's see here was soof the background could snap into place. 195 00:16:44,280 --> 00:16:45,330 There goes. 196 00:16:45,330 --> 00:16:52,290 All right so this is the button we want the ad channel buttons so I'm going to control and drag and 197 00:16:52,290 --> 00:16:52,920 let's put it 198 00:16:57,040 --> 00:17:04,770 put it right here and we're going to say add channel pressed. 199 00:17:05,110 --> 00:17:09,760 And this is an action and touch openside and connect. 200 00:17:09,780 --> 00:17:10,840 All right. 201 00:17:11,360 --> 00:17:16,070 So just like we did here with the profile VC we're going to do the same thing. 202 00:17:16,070 --> 00:17:19,430 We are going to instantiate the controller. 203 00:17:19,470 --> 00:17:23,470 It's going to go back to our standard editor first open up our left and right panes. 204 00:17:23,840 --> 00:17:25,850 Now we can leave our right closed. 205 00:17:25,850 --> 00:17:28,480 All right we're going instantiate the view controls from the seat. 206 00:17:28,530 --> 00:17:40,420 Let add channel cool and channel B stanchly and then we're going to set the modal presentation style 207 00:17:40,680 --> 00:17:55,040 to say add a change no dot modal presentation style is equal to dot custom and then we're going to just 208 00:17:55,040 --> 00:18:05,760 presented and say present and is the one we want present your controller to present is add channel. 209 00:18:06,330 --> 00:18:10,090 Animate it is true and completion is new. 210 00:18:10,440 --> 00:18:15,530 I can say that and I think that's all we need let's go ahead and run it. 211 00:18:18,730 --> 00:18:20,750 All right clicking here on the menu. 212 00:18:20,750 --> 00:18:32,040 And Harry that dismisses that dismisses the placeholder font color looks great. 213 00:18:32,500 --> 00:18:41,040 Let's make sure those look good create channel doesn't do anything as expected. 214 00:18:41,320 --> 00:18:41,900 All right. 215 00:18:42,070 --> 00:18:43,570 That looks real good. 216 00:18:44,680 --> 00:18:46,710 And I think that's all we are going to do. 217 00:18:46,710 --> 00:18:52,600 And in this video and the next video some exciting stuff we're going to work with sockets for the first 218 00:18:52,600 --> 00:18:53,160 time. 219 00:18:53,320 --> 00:18:59,050 And you guys are going to see how cool it is and actually how easy it is also to work with sockets and 220 00:18:59,050 --> 00:19:05,470 have that open line of communication between our client app and the server so that we can see real time 221 00:19:05,470 --> 00:19:08,210 changes so we're excited for that. 222 00:19:08,260 --> 00:19:14,030 And I will see you next time right after I commit and add our changes. 223 00:19:14,030 --> 00:19:14,550 All right. 224 00:19:14,740 --> 00:19:15,190 See you later.