1

00:00:07,780 --> 00:00:12,400

It everybody what's going on this is Caleb began with Deb's slopes dotcom and we're going to continue



2

00:00:12,400 --> 00:00:17,950

building out our app for using protocols to delegate the passing of information between two controllers



3

00:00:17,960 --> 00:00:20,530

so let's pull open our project again.



4

00:00:20,740 --> 00:00:26,920

And in this video we're going to go ahead and do the code related stuff in the last video we basically



5

00:00:26,920 --> 00:00:30,820

just built out the UI and kind of hooked everything up the way that it needs to be.



6

00:00:31,180 --> 00:00:34,570

But now we're going to get into the good stuff the code.



7

00:00:34,660 --> 00:00:41,560

So let's begin actually by creating our protocol remember a protocol is like a blueprint.



8

00:00:41,560 --> 00:00:46,980

It's like a set of instructions or requirements needed to achieve a certain kind of functionality.



9

00:00:46,990 --> 00:00:52,870

So to begin we're going to go ahead and right click on color magic click new file and we're going to



10

00:00:52,870 --> 00:00:54,800

create a new Swift file.



11

00:00:55,050 --> 00:00:55,660

OK.



12

00:00:55,990 --> 00:01:03,820

Now for this kind of protocol where we are dealing with specific functionality in an application we're



13

00:01:03,820 --> 00:01:05,930

going to actually call it a delegate.



14

00:01:06,160 --> 00:01:12,710

Not a protocol because the protocol itself is acting as a delegate between the two controllers.



15

00:01:12,810 --> 00:01:13,200

OK.



16

00:01:13,270 --> 00:01:19,120

It's delegating those tasks so we're going to go ahead and call this color transfer because that's that's



17

00:01:19,120 --> 00:01:19,710

its job.



18

00:01:19,710 --> 00:01:20,890

That's what it's doing.



19

00:01:21,100 --> 00:01:24,630

And it is the color transfer delegate.



20

00:01:24,820 --> 00:01:32,460

That's what we're going to name and color transfer delegate click Create and we now have a color transfer



21

00:01:32,460 --> 00:01:34,380

delegate swift file.



22

00:01:34,380 --> 00:01:40,230

Now of course we're going to need to actually create the protocol right here by typing protocol just



23

00:01:40,230 --> 00:01:41,830

like we did in the previous videos.



24

00:01:42,150 --> 00:01:46,880

And its name is color transfer delegate.



25

00:01:47,700 --> 00:01:49,080

Very easy.



26

00:01:49,080 --> 00:01:55,810

Now we need to think we need to set up a function that's going to do two things.



27

00:01:55,830 --> 00:02:04,040

This function is going to basically pass a color from the button to the view in the first view controller.



28

00:02:04,350 --> 00:02:09,760

And it's also going to pass a label it's kind of past the name of the color on the button.



29

00:02:09,960 --> 00:02:16,210

So we need a function that can accept two parameters one of color and one of string.



30

00:02:16,230 --> 00:02:24,780

So we're going to go ahead and just write the function here for our protocol called phunk user did choose



31

00:02:25,170 --> 00:02:34,290

and we're going to say the user did choose a color of type color and that color is going to be with



32

00:02:34,500 --> 00:02:40,720

a name and we'll we'll use an internal parameter here called Color name of type string.



33

00:02:40,840 --> 00:02:46,440

Can you'll see why I'm using this internal parameter later but it's giving us an issue.



34

00:02:46,470 --> 00:02:49,610

It says use of undeclared type color.



35

00:02:49,770 --> 00:02:54,620

The reason for that we're only importing foundation color is a part of it.



36

00:02:54,630 --> 00:02:59,120

So beneath Foundation go had an import UI kit so we can have both.



37

00:02:59,310 --> 00:03:02,000

And you'll notice our air will go away.



38

00:03:02,010 --> 00:03:08,990

So here is our color transfer delegate and I'm going to explain how this is used in just a little bit.



39

00:03:09,060 --> 00:03:10,030

OK.



40

00:03:10,230 --> 00:03:15,870

So we need to think about what we are doing here when we go into our main storyboard.



41

00:03:16,320 --> 00:03:22,830

We are tapping our plus button and it's loading up our view controller here with all of our options



42

00:03:23,430 --> 00:03:26,700

in our color picker Visi when we choose a button.



43

00:03:26,850 --> 00:03:32,330

It gives us the ability to pull out the title label as well as the background color.



44

00:03:32,370 --> 00:03:33,660

So here's what we need to do.



45

00:03:33,660 --> 00:03:40,940

We need to basically set up a variable in color picker Visi for our delegate.



46

00:03:40,950 --> 00:03:42,780

Okay our color transfer delegate.



47

00:03:42,780 --> 00:03:47,520

So I'm going to create a variable for that and I'll explain this in just a moment but we're going to



48

00:03:47,520 --> 00:03:55,660

go ahead and type of var delegate delegate and that's going to be of type color transfer delegate.



49

00:03:55,680 --> 00:04:00,780

Now the thing is this delegate it says we don't have any initializers.



50

00:04:00,780 --> 00:04:03,960

And so what we need to do is we need to initialize it from the get go.



51

00:04:04,170 --> 00:04:07,780

But at the beginning we're not going to actually have a delegate.



52

00:04:07,800 --> 00:04:10,710

It's going to be equal to nil from the beginning.



53

00:04:10,710 --> 00:04:13,120

So the delegate is going to be equal to nil.



54

00:04:13,160 --> 00:04:20,910

Now basically why we are creating a delegate here is because when we tap on a button we're going to



55

00:04:20,910 --> 00:04:29,340

be able to use this function delegate dot user delegate dot



56

00:04:31,990 --> 00:04:39,330

delegate does delegate delegate user did choose color and we can pass in a color and we can pass in



57

00:04:39,330 --> 00:04:40,210

a name.



58

00:04:40,260 --> 00:04:46,530

Now we can't because the delegate is nil from the beginning and that's where we're going to fix that



59

00:04:46,980 --> 00:04:49,190

and we're going to fix this right now.



60

00:04:49,440 --> 00:04:53,990

So we have a delegate property color picker Visi has a delegate property.



61

00:04:54,150 --> 00:05:00,750

And what we need to do is we need to instantiate that property when we tap on the plus button to open



62

00:05:00,750 --> 00:05:09,210

up our view controller so to do that we're going to use a function called prepare for Segway just like



63

00:05:09,210 --> 00:05:10,250

that.



64

00:05:10,380 --> 00:05:17,130

Now preparing for a Segway basically means when I pressed the plus button I need to tell it what it



65

00:05:17,130 --> 00:05:20,040

should do in order to present the next view controller.



66

00:05:20,040 --> 00:05:25,340

Now if I click on the Segway here that's that arrow represents the Segway.



67

00:05:25,620 --> 00:05:30,390

And if I go into the attributes inspector you can see there is some information for this Segway.



68

00:05:30,390 --> 00:05:35,160

The most important thing we need to think about right now is the identifier and that is what's going



69

00:05:35,160 --> 00:05:42,120

to set this Segway apart from all other segues So let's just go ahead and let's name this present color



70

00:05:42,240 --> 00:05:51,510

picker Visi press enter and now this Segway has a specific identifier so we can get that exact Segway



71

00:05:51,570 --> 00:05:52,840

and do something with it.



72

00:05:53,160 --> 00:05:56,990

So go back to color presenter Visi and prepare for Segway.



73

00:05:56,990 --> 00:05:59,610

This is where we're going to actually present our color visi.



74

00:05:59,610 --> 00:06:01,500

We're going to do this programmatically.



75

00:06:01,500 --> 00:06:02,510

But for good reason.



76

00:06:02,550 --> 00:06:03,700

Let me show you why.



77

00:06:03,780 --> 00:06:13,470

So go ahead and let's just say if Segway meaning if one of the segues and our storyboard identifier



78

00:06:13,650 --> 00:06:23,260

is equal to present color picker the C K that's our identifier.



79

00:06:23,280 --> 00:06:27,060

If it's equal to that we're going to present our color picker visi.



80

00:06:27,210 --> 00:06:33,590

So to do that let's go ahead and let's create a constant that's going to be of type color picker visi.



81

00:06:33,890 --> 00:06:38,030

And then after that we're going to do something with the protocol that that explains why we created



82

00:06:38,030 --> 00:06:41,100

that delegate variable on color picker B.c.



83

00:06:41,240 --> 00:06:42,800

So go ahead and type.



84

00:06:42,920 --> 00:06:52,810

Let color picker Visi and we're going to say that this is equal to the segue dot destination.



85

00:06:53,210 --> 00:06:55,930

And do you notice that it says it's of type you view controller.



86

00:06:56,150 --> 00:06:59,990

That is because every Segway has a destination View Controller.



87

00:06:59,990 --> 00:07:03,860

And we're going to actually set it to be equal to color picker visi.



88

00:07:04,010 --> 00:07:10,190

But if we want it to be of type color picker Visi we actually need to force cast this as color picker



89

00:07:10,190 --> 00:07:12,840

Visi like so.



90

00:07:13,370 --> 00:07:18,230

But since we're using guard let We need to provide an instance in case this doesn't work.



91

00:07:18,230 --> 00:07:19,980

So we're going to type else.



92

00:07:20,450 --> 00:07:24,620

And if we don't get a color picker Visi we're just going to return and break out of this function so



93

00:07:24,620 --> 00:07:26,300

we don't cause a crash.



94

00:07:26,330 --> 00:07:31,690

So guard let is basically a safe way to create a constant that is non optional.



95

00:07:32,000 --> 00:07:36,500

And if it is nil if it does return nil we're just going to go ahead and return out of the function so



96

00:07:36,500 --> 00:07:37,370

we don't have a crash.



97

00:07:37,370 --> 00:07:38,700

Pretty cool.



98

00:07:38,720 --> 00:07:44,320

So we now have a color picker Visi and this is where the coolest part happens.



99

00:07:44,330 --> 00:07:50,830

So like we have said our color picker Visi needs a delegate but it's currently nil.



100

00:07:51,000 --> 00:07:51,490

OK.



101

00:07:51,630 --> 00:07:57,210

Now the delegate is basically going to be used to pass information from one view controller to the next.



102

00:07:57,440 --> 00:08:03,260

So in our color presenter we see what we're going to do is we're going to go ahead and say color picker



103

00:08:03,260 --> 00:08:06,540

Visi dot delegate.



104

00:08:06,810 --> 00:08:11,750

OK remember it has that property although it's not letting us access it.



105

00:08:11,750 --> 00:08:13,140

Let's try that again.



106

00:08:13,280 --> 00:08:17,080

Color picker Visi dot delegate.



107

00:08:17,300 --> 00:08:17,930

We're getting an error.



108

00:08:17,930 --> 00:08:19,580

Let's try to build and see what the error is



109

00:08:22,640 --> 00:08:24,240

initialiser for conditional binding.



110

00:08:24,260 --> 00:08:24,680

Oh.



111

00:08:24,890 --> 00:08:29,490

Since we're in a guard let We need to go ahead and bind that conditionally.



112

00:08:29,540 --> 00:08:31,150

That is our problem.



113

00:08:31,250 --> 00:08:38,630

And now there we go now that we have a color picker we can go ahead and type dot delegate that's a property



114

00:08:38,630 --> 00:08:44,140

of color picker B C and we need to set it to be equal to something right.



115

00:08:44,150 --> 00:08:48,530

We need to basically pin the delegate to a certain view controller saying where are we going to delegate



116

00:08:48,530 --> 00:08:51,200

this information from the previous view controller.



117

00:08:51,210 --> 00:08:57,380

Now if I were to go in and if I was going to set this view controller color presenter AVC to be equal



118

00:08:57,620 --> 00:08:58,850

to the delegate.



119

00:08:58,850 --> 00:09:05,620

Watch what happens when I build and run this can not assign whips can not assign value of type color



120

00:09:05,620 --> 00:09:08,580

presenter AVC to type color transfer delegate.



121

00:09:08,710 --> 00:09:15,390

Do you know why we have not conformed to our color transfer delegate protocol so to do that.



122

00:09:15,390 --> 00:09:21,030

Go ahead and type a comma type color transfer delegate and now we have conformed.



123

00:09:21,040 --> 00:09:22,500

But watch what happens.



124

00:09:22,540 --> 00:09:23,590

We're going to get an error.



125

00:09:23,860 --> 00:09:29,110

And it says we do not conform to protocol color transfer delegate.



126

00:09:29,110 --> 00:09:30,210

Why is that.



127

00:09:30,370 --> 00:09:33,750

If I go look you can see there is a required function.



128

00:09:33,760 --> 00:09:40,120

So we need to basically call that function in whatever view controller we are conforming to that delegate



129

00:09:40,120 --> 00:09:40,760

for.



130

00:09:40,840 --> 00:09:47,500

So get rid of the boilerplate code there and beneath feuded load we need to type user did choose color



131

00:09:47,980 --> 00:09:51,070

from our color transfer delegate.



132

00:09:51,070 --> 00:09:52,600

That's really cool.



133

00:09:52,600 --> 00:09:54,570

Now think about this.



134

00:09:54,790 --> 00:09:59,420

This function is going to be called from the other view controller.



135

00:09:59,770 --> 00:10:00,440

OK.



136

00:10:00,670 --> 00:10:02,370

Let that sink in for a second.



137

00:10:02,470 --> 00:10:07,990

I am loading the color transfer Visi Let me show you on the simulator here really quick.



138

00:10:08,140 --> 00:10:14,440

When I open this up and I click on this what I'm doing is I'm setting the previous view controller to



139

00:10:14,440 --> 00:10:15,580

be the delegate.



140

00:10:15,790 --> 00:10:25,420

And that means that if I am in color picker Visi Now if I press a button I can basically use my delegate



141

00:10:25,450 --> 00:10:33,490

which is now not nil and I can call delegate Dom user did choose color so I can call like this delegate



142

00:10:33,730 --> 00:10:38,450

user did choose you eye color and I could pass.



143

00:10:38,560 --> 00:10:42,830

Well let's think the sender is the button and I could send the background color.



144

00:10:42,910 --> 00:10:45,820

OK there's a color and the name.



145

00:10:45,820 --> 00:10:47,250

I already printed it out.



146

00:10:47,340 --> 00:10:53,270

Sender title label dot text so I could cut that and paste it here.



147

00:10:53,380 --> 00:10:57,140

Now that I have a delegate I should be able to send that information back.



148

00:10:57,520 --> 00:11:03,310

So if the delegate is equal to color presenter AVC It's like I'm calling that function.



149

00:11:03,310 --> 00:11:04,860

On the other controller.



150

00:11:05,300 --> 00:11:11,160

But we need to think what is user did choose color with name going to do in this view controller.



151

00:11:11,430 --> 00:11:16,450

Uncolored presenter see this function right here user did choose.



152

00:11:16,690 --> 00:11:22,300

It should change the background color of this view and it should change this text in this label to be



153

00:11:22,300 --> 00:11:23,890

the colors name.



154

00:11:23,920 --> 00:11:28,400

So go ahead and we're going to say self view.



155

00:11:28,420 --> 00:11:28,860

Well you know what.



156

00:11:28,860 --> 00:11:37,330

I don't even need to call self I can just say View background color equals color and I can say color



157

00:11:37,420 --> 00:11:44,720

name label color and name label dot text is equal to color name.



158

00:11:44,890 --> 00:11:49,210

And that's why I use that internal parameter there because using with name as the parameter doesn't



159

00:11:49,210 --> 00:11:51,340

really make sense but color name does.



160

00:11:51,640 --> 00:11:57,850

So when this function gets called uncolored picker Visi and I pass in the buttons background color and



161

00:11:57,850 --> 00:11:59,620

the buttons title label.



162

00:11:59,860 --> 00:12:02,210

It's going to go ahead and send that through to this function.



163

00:12:02,230 --> 00:12:08,800

Set the view of color presenter VC to be whatever color the button was and it'll set the labels text



164

00:12:08,800 --> 00:12:12,910

property to be equal to whatever the buttons title label was.



165

00:12:12,910 --> 00:12:16,950

Now I am getting some errors here and it's saying that we do not conform to the protocol.



166

00:12:16,960 --> 00:12:19,850

Now if I build and run you'll see that error goes away.



167

00:12:20,040 --> 00:12:25,060

OK sometimes you need to do that but we are getting an issue here and it's saying that background color



168

00:12:25,060 --> 00:12:26,100

is not unwrapped.



169

00:12:26,170 --> 00:12:30,970

We need to do that because those properties do come in as optional because you don't have to set a background



170

00:12:30,970 --> 00:12:35,940

color as well as our title label here.



171

00:12:35,950 --> 00:12:36,460

But you know what.



172

00:12:36,460 --> 00:12:38,570

Since I know for sure that I have a value.



173

00:12:38,650 --> 00:12:43,470

I'm going to go ahead and force on RAP the title label because each button has one for sure.



174

00:12:43,600 --> 00:12:45,250

You wouldn't normally do that.



175

00:12:45,280 --> 00:12:50,350

You might want to actually cast this in some type of guard but instead of using guard let.



176

00:12:50,380 --> 00:12:54,120

I'm just going to go ahead and force unwrap the title label property.



177

00:12:54,230 --> 00:12:57,580

But now let's go ahead and let's just think about what we're doing here.



178

00:12:57,580 --> 00:13:03,780

We are able to go in we can select this button and we set the delegate to have a value right.



179

00:13:03,790 --> 00:13:08,020

We set color transfer delegate to be equal to the previous view controller.



180

00:13:08,020 --> 00:13:14,500

Then once it has a value when we select a button we should be able to pass that value back to the view



181

00:13:14,500 --> 00:13:15,460

controller.



182

00:13:15,490 --> 00:13:21,640

OK delegate user to choose we pass the color back but it's not going to do us much good if we stay on



183

00:13:21,640 --> 00:13:23,380

this view controller right.



184

00:13:23,470 --> 00:13:24,930

That's going to be a problem.



185

00:13:24,940 --> 00:13:31,030

So what we can do is in order to actually get back to the previous view controller we can call self



186

00:13:31,610 --> 00:13:37,780

navigation control or remember we embedded in a navigation controller so that's automatically a property



187

00:13:38,320 --> 00:13:44,140

and all we need to do is type pop view controller and that's going to pop us back one view controller



188

00:13:44,750 --> 00:13:46,930

of course we want that to be animated.



189

00:13:47,350 --> 00:13:52,040

And now when I select the color button it should pass the value it should.



190

00:13:52,090 --> 00:13:57,100

Sorry it should pass the value for the color for the title label and it should pop the color of your



191

00:13:57,100 --> 00:13:59,860

controller back to the direction it came.



192

00:14:00,010 --> 00:14:04,550

And when we go back to color presenter AVC this function is called.



193

00:14:04,590 --> 00:14:10,210

So we're going to set the background color and the color name label to have a value.



194

00:14:10,210 --> 00:14:11,450

Do you want to try it out.



195

00:14:11,740 --> 00:14:12,700

I do.



196

00:14:12,720 --> 00:14:13,500

Let's build and run.



197

00:14:13,500 --> 00:14:18,380

Let's go see how we did and we should be able to call this video Arap.



198

00:14:18,630 --> 00:14:19,450

So check it out.



199

00:14:19,470 --> 00:14:21,890

If I select here it opens it up.



200

00:14:21,900 --> 00:14:23,640

We don't get a crash that's good.



201

00:14:23,640 --> 00:14:28,530

And now when I select a button it should set the view and the label to match.



202

00:14:28,530 --> 00:14:30,070

Check it out.



203

00:14:30,180 --> 00:14:36,040

It works blue green red purple.



204

00:14:36,120 --> 00:14:37,760

So so cool.



205

00:14:37,920 --> 00:14:45,090

So this is just one amazing way that we can basically use a delegate to transfer information and communicate



206

00:14:45,090 --> 00:14:46,770

between two view controllers.



207

00:14:46,770 --> 00:14:48,660

Super super cool.



208

00:14:48,660 --> 00:14:52,260

Now of course there's one thing we should do this delegate is optional.



209

00:14:52,260 --> 00:14:57,890

So what if for some reason the delegate was not able to be passed in we would get a crash.



210

00:14:57,900 --> 00:15:03,410

So we should go ahead and type if delegate is not equal to nil.



211

00:15:03,450 --> 00:15:10,470

That should be an equal sign if the delegate is not nil then we should call a user to choose.



212

00:15:10,470 --> 00:15:12,290

And we should pop the view controller back.



213

00:15:12,430 --> 00:15:12,960

OK.



214

00:15:13,200 --> 00:15:17,630

That's just the way to be safe and to make sure that we are not going to have a crash.



215

00:15:17,640 --> 00:15:22,260

Now of course that's not going to do anything right now because our delegate is non nil.



216

00:15:22,260 --> 00:15:24,820

We pass it in when we create the view controller.



217

00:15:25,080 --> 00:15:26,370

But check it out guys.



218

00:15:26,400 --> 00:15:31,340

This works were able to pass colors and all kinds of other cool values if we wanted to.



219

00:15:31,410 --> 00:15:32,790

This is super super awesome.



220

00:15:32,790 --> 00:15:39,030

So great job using your first protocol to use the delegate method for transferring data between two



221

00:15:39,080 --> 00:15:40,200

view controllers.



222

00:15:40,200 --> 00:15:42,120

Awesome work in the next video.



223

00:15:42,300 --> 00:15:47,700

I'm going to show you how we can use what are called mutating functions to toggle on and toggle off



224

00:15:47,700 --> 00:15:48,640

certain switches.



225

00:15:48,650 --> 00:15:52,950

It's just one particular use case but it's pretty useful and you could use it in a lot of different



226

00:15:52,950 --> 00:15:54,820

ways so I'll see in the next video.



227

00:15:54,840 --> 00:15:56,280

Awesome job with this one.