1 00:00:00,390 --> 00:00:06,660 High again in this assembly going to work on alert controllers view the contours to pop some sort of 2 00:00:06,660 --> 00:00:13,080 a dialog box to our users so users can based on that make a decision when something goes wrong or a 3 00:00:13,080 --> 00:00:18,500 user has to log into something or perhaps many use and has to enter some sort of text value. 4 00:00:18,930 --> 00:00:21,680 So let's get this stuff and see how we're going to do that. 5 00:00:21,800 --> 00:00:28,020 And when I go to explore I'm going to start a new project I'm going to call it I learned controller 6 00:00:28,140 --> 00:00:31,040 app and to produce our Earth controller. 7 00:00:31,050 --> 00:00:35,540 We don't actually need to do anything in our storyboards so I want to jump right into a view controller 8 00:00:35,540 --> 00:00:37,020 and start programming. 9 00:00:37,290 --> 00:00:39,940 The basics of it are actually rather simple. 10 00:00:40,390 --> 00:00:46,860 And when I come in here and usually you want to instigate your alert controller using some sort of event 11 00:00:47,130 --> 00:00:54,300 such as when the user taps on a button or vendor some data is read and finished from a network. 12 00:00:54,360 --> 00:01:01,020 So it should be essentially initialized after something happens in here just to simplify my life and 13 00:01:01,020 --> 00:01:04,550 lower the amount of code I'm going to put in the touches and that. 14 00:01:04,560 --> 00:01:10,590 But you can imagine the very same thing applies in very ever whether you're pressing a button or you're 15 00:01:10,590 --> 00:01:15,960 waiting for a function to finish in any situation you can do all of these things. 16 00:01:15,990 --> 00:01:19,210 Now I don't need my view did Lord someone delete that. 17 00:01:19,230 --> 00:01:26,100 So I have less code and less stuff here for the first part of it is going to be producing a new alert 18 00:01:26,100 --> 00:01:26,550 controller. 19 00:01:26,560 --> 00:01:32,200 So I'm going to say let my alert to be UI alert controller. 20 00:01:32,410 --> 00:01:33,930 I'm from my other controller. 21 00:01:33,930 --> 00:01:37,000 I'm going to have to initialize it with some settings. 22 00:01:37,050 --> 00:01:41,870 I'm going to initialize with this one with the title with a message and a stylus. 23 00:01:41,880 --> 00:01:46,860 I'm going to say let's format everything properly. 24 00:01:46,860 --> 00:01:55,260 And I'm going to say the title of it is something happens and then the message of it is what would you 25 00:01:55,350 --> 00:01:57,140 like to do. 26 00:01:57,150 --> 00:02:04,470 Imagine this is a message that says your network connection disconnected or you are now logged out or 27 00:02:04,470 --> 00:02:05,950 anything of the sorts. 28 00:02:06,120 --> 00:02:09,620 And then you have a style under two primary styles for it. 29 00:02:09,630 --> 00:02:15,160 One of style is an alert that pops in a middle of the screen and the other one is an action sheet which 30 00:02:15,210 --> 00:02:21,420 essentially produce hits from the bottom of the screen it slides in from the bottom of the screen. 31 00:02:21,450 --> 00:02:22,740 I'm going to use both of them. 32 00:02:22,740 --> 00:02:24,510 So we get a sense of how they work. 33 00:02:24,960 --> 00:02:31,400 So the first one is alert now that they have an Earth controller I can present it in my view controller. 34 00:02:31,430 --> 00:02:39,720 So I'm going to go ahead and say South dot present and in the present I'm going to say present my alert 35 00:02:40,680 --> 00:02:43,090 and do it animated true. 36 00:02:43,230 --> 00:02:45,620 I don't do anything thing at completion. 37 00:02:45,930 --> 00:02:47,270 So let me it's like this. 38 00:02:48,300 --> 00:02:52,920 And that's all we have to do to make a very very basic alert controller. 39 00:02:52,920 --> 00:02:54,710 Let's run this application. 40 00:02:54,720 --> 00:03:00,420 Obviously this doesn't do anything for us just yet but it shows us the foundations of what we have to 41 00:03:00,420 --> 00:03:04,080 do so here it is. 42 00:03:04,440 --> 00:03:07,680 Any time that they touch on this screen I should get this alert. 43 00:03:07,690 --> 00:03:10,200 So I tap on the of the screen shows up. 44 00:03:10,210 --> 00:03:11,350 It says something happened. 45 00:03:11,350 --> 00:03:12,580 What would you like to do. 46 00:03:12,580 --> 00:03:17,590 And unfortunately because I'm a very good programmer I don't have any buttons there's no way to dismiss 47 00:03:17,590 --> 00:03:18,880 it it's just stuck there. 48 00:03:19,210 --> 00:03:21,530 So let's go ahead and fixed all of this stuff. 49 00:03:21,590 --> 00:03:26,920 And before I do that you might have noticed that I'm using a different simulator and theoretically it 50 00:03:26,920 --> 00:03:29,970 doesn't really make any difference up until this point. 51 00:03:30,010 --> 00:03:35,360 And for a long time coming actually it doesn't really matter which kind of the simulator you use. 52 00:03:35,380 --> 00:03:36,940 I used to use iPhone 8. 53 00:03:36,940 --> 00:03:42,970 Now I am just like with iPhone ten because I was doing some project but we won't have anything that 54 00:03:42,970 --> 00:03:45,960 is specific to iPhone 10 or iPhone 8. 55 00:03:46,210 --> 00:03:49,860 If the time comes I have to do something there's a specific to iPhone 10. 56 00:03:49,990 --> 00:03:53,070 I will mention it to you and I will remind you about that. 57 00:03:53,080 --> 00:03:56,880 Otherwise you can continue with the one your heart or you can switch it up in here. 58 00:03:56,900 --> 00:04:03,350 And if you don't remember you can go to a window devices on simulators and in here in the simulator 59 00:04:03,350 --> 00:04:07,230 as you can choose the simulator that you wonder you can add the wand. 60 00:04:07,270 --> 00:04:09,930 Now back to our alerts controller. 61 00:04:10,000 --> 00:04:13,070 The first thing I need to do is I need to add an action to it. 62 00:04:13,090 --> 00:04:16,570 So I'm going to say let this call this one. 63 00:04:16,570 --> 00:04:17,470 OK action. 64 00:04:17,470 --> 00:04:20,220 Let's say you have an okay action and a council action. 65 00:04:20,300 --> 00:04:24,270 So okay action becomes a UI alert action. 66 00:04:24,480 --> 00:04:29,110 And for the action I will again need to initialize it with some settings. 67 00:04:29,200 --> 00:04:34,660 So the first part of these settings is the title that says OK whatever you're asking me I'm fine with 68 00:04:34,660 --> 00:04:35,230 it. 69 00:04:35,230 --> 00:04:40,750 And then we have a style that I'm going to put this side that default and then we have a handler which 70 00:04:40,750 --> 00:04:44,460 essentially says if you press this okay by then what should they do. 71 00:04:44,470 --> 00:04:46,030 Which is very very important. 72 00:04:46,120 --> 00:04:53,950 So I'm going to say let's call this one my alert action or my alert in here and then say if that did 73 00:04:53,950 --> 00:05:00,430 happen let's go ahead and say I'm not going to do anything right now I'm just going to say print you 74 00:05:00,430 --> 00:05:01,320 tap. 75 00:05:01,520 --> 00:05:05,920 Okay maybe later we'll do something a little bit more or more elaborate on it. 76 00:05:06,300 --> 00:05:07,910 No they have this new action. 77 00:05:07,930 --> 00:05:12,060 I'm going to go ahead and save my alerts that at action. 78 00:05:12,130 --> 00:05:14,740 I don't want to add the okay action to it. 79 00:05:14,740 --> 00:05:15,790 And that's all we have to do. 80 00:05:15,820 --> 00:05:21,840 So let's go ahead and run and this time that our pop up shows up we should have a button that says OK 81 00:05:22,210 --> 00:05:26,450 and then based on that we could decide about what we want to do now. 82 00:05:26,570 --> 00:05:30,320 I want you to pay attention to something that built into any bar. 83 00:05:30,320 --> 00:05:32,540 Then there is the dismiss. 84 00:05:32,540 --> 00:05:35,120 So you don't have to manually dismiss the alert. 85 00:05:35,150 --> 00:05:39,070 So when you tap on it it automatically does dismiss. 86 00:05:39,170 --> 00:05:42,740 Let me clear my console so we can see what we're going to see. 87 00:05:42,740 --> 00:05:43,520 And when I tap. 88 00:05:43,580 --> 00:05:44,690 OK. 89 00:05:44,740 --> 00:05:45,960 And yet it says your top. 90 00:05:45,980 --> 00:05:46,770 OK. 91 00:05:46,820 --> 00:05:49,550 I mean here the interface actually disappears. 92 00:05:49,550 --> 00:05:52,120 It dismisses the alert controller. 93 00:05:52,130 --> 00:05:53,270 Now this was all good. 94 00:05:53,270 --> 00:05:54,670 Let's add another one to it. 95 00:05:54,680 --> 00:06:03,050 I'm going to add another action saying my alert died at action and I'm going to make the action on the 96 00:06:03,050 --> 00:06:05,720 fly saying you I alert. 97 00:06:05,780 --> 00:06:10,760 Action you I alert. 98 00:06:10,850 --> 00:06:18,490 Action and that is going to be a string of feed is canceled. 99 00:06:18,740 --> 00:06:22,550 The title of it the estate if it is canceled is nine. 100 00:06:22,710 --> 00:06:23,960 It doesn't do anything. 101 00:06:23,960 --> 00:06:28,530 It just dismisses the view controller which is the alert. 102 00:06:28,550 --> 00:06:31,310 So this one actually does something for us. 103 00:06:31,310 --> 00:06:35,480 This is the part that we are interested in knowing what happens when we stop. 104 00:06:35,510 --> 00:06:39,100 This is the one that we just to dismiss the alert controller. 105 00:06:39,110 --> 00:06:42,500 Now if I run this application now you can imagine there are two buttons. 106 00:06:42,500 --> 00:06:47,410 One of them is saying OK one of them is saying cancer. 107 00:06:47,480 --> 00:06:49,690 Most of them they do dismiss. 108 00:06:49,850 --> 00:06:57,610 But one of them also does something so the last thing I want to do in here is I want to add another 109 00:06:57,610 --> 00:07:04,120 entity to my alert controller and that is a text field in case you want it to add a value and you want 110 00:07:04,120 --> 00:07:06,710 to allow your user to add content to it. 111 00:07:06,760 --> 00:07:11,760 You could essentially subclass the alerts controller and add anything that you want into it. 112 00:07:12,070 --> 00:07:14,590 But that doesn't seem like a very very good idea. 113 00:07:14,590 --> 00:07:19,060 The default behavior is a title a description on some text fields. 114 00:07:19,300 --> 00:07:24,760 So let's go ahead in here and let's do this before my actions even though it doesn't matter that I'm 115 00:07:24,760 --> 00:07:31,750 just going to make sure that happens right after the alert and here I'm going to say my alert dot add 116 00:07:31,750 --> 00:07:37,200 the text field and then it says well the text with you want to add Give me the configuration for it. 117 00:07:37,480 --> 00:07:40,110 I'm going to call this one name next to it. 118 00:07:40,510 --> 00:07:46,110 Let's assume that you have a named expert and we have a password text with I'm for this name takes me 119 00:07:46,110 --> 00:07:54,200 that way I just changed some of its attributes that say Name text with DOT text alignment becomes an 120 00:07:54,250 --> 00:08:00,760 ethics alignment dot Senate and that's about that you can you can you know infer the rest of it yourself 121 00:08:00,790 --> 00:08:05,020 that you can add anything to the normal text print has into here. 122 00:08:05,020 --> 00:08:11,110 So if you're on the application now we will get an alert with two buttons as well as a text with which 123 00:08:11,110 --> 00:08:12,100 is which is great. 124 00:08:12,130 --> 00:08:20,020 So in here if I touch we get a text field and two buttons as you can imagine the size of the bygone 125 00:08:20,020 --> 00:08:25,900 color and everything about this text with you can manually modify it maybe add one more sitting in here 126 00:08:25,940 --> 00:08:28,550 to his more easily viewable. 127 00:08:28,570 --> 00:08:31,630 So I'm going to say a name that font is you. 128 00:08:31,630 --> 00:08:36,430 I find that system font of size will increase it to 24. 129 00:08:36,450 --> 00:08:39,570 So it's much larger it's more visible. 130 00:08:39,580 --> 00:08:45,790 Now the question becomes if you had this text with hard we're going to get access to them at any point 131 00:08:46,150 --> 00:08:50,580 and that point primarily is venue press either of these buttons. 132 00:08:50,590 --> 00:08:52,680 So in here when I press the okay. 133 00:08:52,680 --> 00:08:58,840 But then I want to find out what user has entered on the text with someone to come in here and say you 134 00:08:58,850 --> 00:09:07,560 typed OK I'm going to have another print I have other print says and 60 for the years. 135 00:09:08,190 --> 00:09:12,520 I'm willing to say it is my alert. 136 00:09:12,610 --> 00:09:25,240 There are text fields and it doesn't autocomplete for me text fields the my Oh I don't know why I named 137 00:09:25,240 --> 00:09:33,810 this argument my alert this argument should be called anything is basically a part of the closure but 138 00:09:33,900 --> 00:09:37,280 any name other than my alert would do. 139 00:09:37,510 --> 00:09:40,090 I'm sorry about making such mistake. 140 00:09:40,080 --> 00:09:45,870 Ah this is the argument of the closure which is essentially the name of the returning action so you 141 00:09:45,870 --> 00:09:52,920 can call it my alert action or anything such as that but if you call with my alert is gonna cause a 142 00:09:52,920 --> 00:09:57,540 confusion between this argument and the alert that you have up there. 143 00:09:57,900 --> 00:10:04,140 So if you have followed my steps and you have made a mistake because of me please change that to any 144 00:10:04,140 --> 00:10:05,100 other name. 145 00:10:05,100 --> 00:10:10,830 So here when I will print the text with I'm going to say my alert the DOT text fields and that's an 146 00:10:10,930 --> 00:10:16,500 array from there I'm going to get the very first one and I'm guessing I know the text fields actually 147 00:10:16,500 --> 00:10:23,100 exist because I have added one and then from there I'm going get the very first ones text. 148 00:10:23,340 --> 00:10:31,500 So the value of the text fields 0 8 dot text is what I'm going to be interested in printing every time 149 00:10:31,520 --> 00:10:32,970 we tap on the okay button. 150 00:10:33,330 --> 00:10:40,460 So let's go ahead and run this application and now when the upload every time I tap something pops that 151 00:10:40,520 --> 00:10:42,180 I can clear my console. 152 00:10:42,390 --> 00:10:43,660 I says something happened. 153 00:10:43,670 --> 00:10:44,480 What would you like to do. 154 00:10:44,480 --> 00:10:48,420 I'm gonna say hello and head okay. 155 00:10:48,530 --> 00:10:52,110 It says your tap on the text with value is hell. 156 00:10:52,130 --> 00:10:53,420 This is all we needed to do. 157 00:10:53,420 --> 00:10:57,070 And then depending on what you're trying to do we can change this. 158 00:10:57,110 --> 00:11:03,510 You can have two of these text fields and then really quickly say this one is actually called pass to 159 00:11:03,750 --> 00:11:12,250 the Eiffel tee and then I'm going to put it in here and maybe pass is secure text entry is true. 160 00:11:12,250 --> 00:11:17,600 And if I run the application now we should be able to see two text fields one of them is for a name. 161 00:11:17,600 --> 00:11:19,260 The other one is for a password. 162 00:11:19,310 --> 00:11:25,550 You can obviously add place holders or other things in your text with or to make them more easily understand 163 00:11:25,550 --> 00:11:29,730 develops with us the name and the password is her law whatever. 164 00:11:29,870 --> 00:11:36,200 So that when you press the cable then you want to read both of these and then make a decision. 165 00:11:36,200 --> 00:11:39,710 Have we entered the correct credentials or not. 166 00:11:39,770 --> 00:11:41,900 Or whatever it is that you are trying to do. 167 00:11:41,900 --> 00:11:48,100 So right now when we press the cable that we get your top Okay that takes with the first one is Amir 168 00:11:48,530 --> 00:11:51,030 and then that's pretty much all there is to it. 169 00:11:51,030 --> 00:11:56,990 To making an alert controller making it show up as well as adding different actions. 170 00:11:57,020 --> 00:12:03,050 Now I did promise that I will show you how an action shit alert controller will work and that is why 171 00:12:03,050 --> 00:12:08,640 coming to an alert and seeing this style is actually not alert rather action. 172 00:12:08,650 --> 00:12:15,230 Shoot now however you have to keep in mind that the action shoot as the name implies it only accepts 173 00:12:15,350 --> 00:12:20,110 actions so action shots can not have text fields because of that. 174 00:12:20,120 --> 00:12:26,540 I'm actually going to comment this far out when I comment this far out. 175 00:12:26,570 --> 00:12:29,450 So now we have an action sheet that has two buttons on it. 176 00:12:29,540 --> 00:12:36,560 Let's run this and we now should see an alert controller that essentially a slight itself in from the 177 00:12:36,560 --> 00:12:38,000 bottom of the screen. 178 00:12:38,000 --> 00:12:38,970 So when it comes in. 179 00:12:38,970 --> 00:12:40,920 Yes a tap. 180 00:12:41,000 --> 00:12:43,070 Action sheet slides in from the bottom. 181 00:12:43,100 --> 00:12:44,260 Let's do it again. 182 00:12:44,540 --> 00:12:45,660 And that's how it works. 183 00:12:45,660 --> 00:12:48,040 And from time to time this is more useful. 184 00:12:48,040 --> 00:12:49,910 This is what you want to have on time. 185 00:12:49,910 --> 00:12:55,550 Other times you want to have a dialog box right in the middle of the screen so that's about it for alert 186 00:12:55,550 --> 00:12:58,180 controllers and let's move on to our next lesson.