1
00:00:07,880 --> 00:00:12,600
Everybody what's going on this is Caleb with slopes dot com and in this video we're going to build out

2
00:00:12,600 --> 00:00:13,390
search Fisi.

3
00:00:13,410 --> 00:00:17,760
Thankfully we've already got a head start which is fantastic but we're going to build it out.

4
00:00:17,910 --> 00:00:22,620
Then we're going to connect the outlets to its subclass which we are also going to create.

5
00:00:22,620 --> 00:00:28,080
So pull open your project and we are actually you know what we already have the search fetii subclassed

6
00:00:28,080 --> 00:00:28,860
That's fantastic.

7
00:00:28,860 --> 00:00:33,230
So you know what let's just get rid of the boilerplate code while we're in here.

8
00:00:33,390 --> 00:00:39,030
Get rid of that comment that is not needed and then let's go ahead and head over to Main storyboard

9
00:00:39,540 --> 00:00:41,760
and go down to versey.

10
00:00:41,760 --> 00:00:43,110
Beautiful.

11
00:00:43,110 --> 00:00:48,570
Now we're going to start by dragging on a table view which is nice because that makes this app pretty

12
00:00:48,570 --> 00:00:55,080
easy to build or at least this interface and we're going to drag it here so that it is nicely space.

13
00:00:55,080 --> 00:01:02,720
Let's go ahead and just snap it like that and we're going to pin it let's do eight from the top zero

14
00:01:02,730 --> 00:01:07,130
from the left zero from the right and let's add those constraints.

15
00:01:07,130 --> 00:01:14,460
Now it appeared that it was not registering the tab bar there but I just fixed it.

16
00:01:14,460 --> 00:01:18,750
So pinnate 0 from the tab bar and there we go.

17
00:01:18,780 --> 00:01:24,840
Now it's in place and now we just need to drag on a cell and we're actually going to make this maybe

18
00:01:24,900 --> 00:01:25,720
80 high.

19
00:01:25,740 --> 00:01:28,620
Let's let's go ahead and let's actually do that over here.

20
00:01:28,620 --> 00:01:29,980
Make it 80 high.

21
00:01:30,000 --> 00:01:33,630
Select the table view and set the row height to 80 as well.

22
00:01:33,630 --> 00:01:35,960
That way it sets that and keeps it that way.

23
00:01:36,210 --> 00:01:41,850
And I also said in the last video that we would be fixing this to look nicer so select the table view

24
00:01:42,210 --> 00:01:46,300
go to the attributes inspector and the separator.

25
00:01:46,310 --> 00:01:52,170
We're going to set to have no separator and selection set no selection because we don't actually need

26
00:01:52,170 --> 00:01:59,640
the table view cells to select We just need the button to be selectable and for it to pop open the Safari

27
00:01:59,640 --> 00:02:02,930
Web you controller which we're going to do in a video in the future.

28
00:02:02,940 --> 00:02:05,120
So that is now fixed.

29
00:02:05,130 --> 00:02:10,140
And in this table view we're also going to select the table view here.

30
00:02:10,140 --> 00:02:14,520
We're going to set the separator to none and selection.

31
00:02:14,520 --> 00:02:16,520
We are going to keep on and you'll see why.

32
00:02:16,770 --> 00:02:18,210
So that's great.

33
00:02:18,240 --> 00:02:19,890
Now what else do we need to do.

34
00:02:19,890 --> 00:02:23,410
We have our table view we have our cell.

35
00:02:23,790 --> 00:02:24,170
Yeah.

36
00:02:24,180 --> 00:02:27,250
I mean let's connect our table view and let's call this video done.

37
00:02:27,270 --> 00:02:30,460
We're going to move on to build out our search cell.

38
00:02:30,480 --> 00:02:35,910
So open that Inspektor and go ahead and pull open search visi.

39
00:02:36,210 --> 00:02:42,180
We're going to go ahead and right click and drag from the table view and drop an outlet called WIPs

40
00:02:42,750 --> 00:02:47,260
table view like so and then go ahead and press return.

41
00:02:47,670 --> 00:02:49,080
And guys that's that's it.

42
00:02:49,080 --> 00:02:50,020
Search is done.

43
00:02:50,040 --> 00:02:51,380
We just need a table view.

44
00:02:51,540 --> 00:02:52,230
Super easy.

45
00:02:52,230 --> 00:02:55,290
Well no that's a lie we're almost done.

46
00:02:55,290 --> 00:02:57,450
We need to actually connect our search field as well.

47
00:02:57,450 --> 00:03:02,970
So right click and drag and go ahead and call this search field.

48
00:03:03,060 --> 00:03:07,590
Press Enter to connect it and we are good to go in the next video we're going to go ahead and build

49
00:03:07,590 --> 00:03:10,040
out our search cell and see over there.

50
00:03:10,050 --> 00:03:10,410
Let's go.