1 00:00:01,000 --> 00:00:01,880 So I'll come back. 2 00:00:01,880 --> 00:00:07,850 This exercise uses a lot of the things that we have done in the past to help us produce an app that 3 00:00:07,850 --> 00:00:11,540 can only accept certain type of characters. 4 00:00:11,540 --> 00:00:18,420 So it's essentially going to be a text view that you can type the values that you want put only alphanumeric 5 00:00:18,440 --> 00:00:19,950 values are accepted. 6 00:00:20,180 --> 00:00:21,770 So let me show you the final product. 7 00:00:21,770 --> 00:00:28,580 I've actually developed it in here so you can see I can go in here and say Hello my name he is in me 8 00:00:29,010 --> 00:00:32,350 and I can write a lot of conversation as I'm writing. 9 00:00:32,360 --> 00:00:39,670 It counts the number of characters and it doesn't let me go beyond 140 characters. 10 00:00:39,830 --> 00:00:41,690 That's one thing about it. 11 00:00:41,690 --> 00:00:48,520 The other thing about it is that I can't enter values such as curly brackets or brackets or whatnot 12 00:00:48,740 --> 00:00:53,640 like I'm trying now see it doesn't I don't enter any of those. 13 00:00:53,750 --> 00:00:57,280 Only us on human values are accepted. 14 00:00:57,410 --> 00:01:03,470 So that's all I'm going to give you some time to do it on your own if you want you can pause the video 15 00:01:03,500 --> 00:01:04,630 at this point. 16 00:01:04,840 --> 00:01:11,480 And once you are ready or you decide that you know look at my solution you're welcome to or to work 17 00:01:11,480 --> 00:01:12,300 along with me. 18 00:01:13,740 --> 00:01:14,190 All right. 19 00:01:14,190 --> 00:01:16,060 So let's go ahead to what. 20 00:01:16,140 --> 00:01:22,880 I'm gonna start a new project I'm going to call this on Niigata cocktails. 21 00:01:25,910 --> 00:01:35,980 And I don't have to put it there if someone else I'm not the first thing is designing a very very simple 22 00:01:35,980 --> 00:01:37,060 user interface. 23 00:01:37,060 --> 00:01:46,600 So there is a text through from that text you have somewhat of a lot here and make it a bit larger. 24 00:01:46,600 --> 00:01:57,340 So the fun is going all the way to about say Tennessee there currently is nothing in it and maybe they 25 00:01:57,340 --> 00:01:59,420 make the whole background that it is different. 26 00:01:59,420 --> 00:02:06,310 So I can see things easier and I even lead a label to count up the numbers. 27 00:02:06,310 --> 00:02:06,730 Right. 28 00:02:06,730 --> 00:02:08,020 So I'm going to put it here. 29 00:02:09,330 --> 00:02:16,770 And I'm going to place it there say there's audio on it says a maximum of 100 than 40. 30 00:02:17,070 --> 00:02:17,910 So. 31 00:02:18,130 --> 00:02:19,900 Thirty six maybe six. 32 00:02:19,980 --> 00:02:25,710 At the moment I'm not going to really worry about where I place it exactly because we know that's going 33 00:02:25,710 --> 00:02:28,230 to come up in our utterly adolescent. 34 00:02:28,590 --> 00:02:30,900 So the next thing is assistant editor. 35 00:02:31,210 --> 00:02:39,130 I'm going to go in here and say This is called My textfield. 36 00:02:39,330 --> 00:02:43,090 This is called let's say a text counter. 37 00:02:43,260 --> 00:02:47,590 So thanks counter. 38 00:02:47,740 --> 00:02:48,390 Perfect. 39 00:02:48,400 --> 00:02:51,740 So that's pretty much all I have to doing here. 40 00:02:51,850 --> 00:02:54,610 I don't have to buy any more outlets for anything. 41 00:02:54,730 --> 00:03:01,660 I do need to connect this takes view as a delegate and I can do it either here by controlling the writing 42 00:03:01,690 --> 00:03:08,050 and saying delegate to view controller or we could do it in or view it lot I'm going to do it here. 43 00:03:08,320 --> 00:03:13,090 So we know that our text view is delegating its tasks to a view controller. 44 00:03:13,410 --> 00:03:17,380 OK so I'm going to go to the ones we're going to clean all of this up. 45 00:03:17,380 --> 00:03:21,080 I don't want to have this much space up here. 46 00:03:21,250 --> 00:03:23,050 I don't need to view that load at all. 47 00:03:23,050 --> 00:03:26,190 I actually need two methods from the United States. 48 00:03:26,260 --> 00:03:26,980 You would delegate. 49 00:03:26,990 --> 00:03:27,700 So you. 50 00:03:27,700 --> 00:03:31,850 I text you delegate and the two methods that I need. 51 00:03:31,870 --> 00:03:36,670 One of them is called should change the text. 52 00:03:36,680 --> 00:03:43,870 So this is the one that says that we should change the text that has been entered or not depending on 53 00:03:43,870 --> 00:03:45,700 whether it is legal or not. 54 00:03:45,970 --> 00:03:49,070 And then we have another one called text. 55 00:03:49,080 --> 00:03:51,090 So did that change. 56 00:03:51,400 --> 00:03:55,390 So let me quickly explain the difference between these two. 57 00:03:55,510 --> 00:04:05,830 This one should change is the one we will use to determine whether values are legal. 58 00:04:06,100 --> 00:04:11,580 So this is the one that we choose but the ones that you want are entered or not. 59 00:04:11,590 --> 00:04:16,230 This is the one that says well they have been entered. 60 00:04:16,330 --> 00:04:17,770 What do you want to do now. 61 00:04:17,870 --> 00:04:22,870 I mean what do you want to do is you want to change these a little counter. 62 00:04:22,980 --> 00:04:25,670 I want to make sure that our counter counts up. 63 00:04:25,670 --> 00:04:28,250 Also if you notice this culture changes. 64 00:04:28,390 --> 00:04:35,890 So if I have a lawyer text I'm on the card is more towards green and if I have less takes the space 65 00:04:36,700 --> 00:04:38,030 the car becomes a wreck. 66 00:04:38,050 --> 00:04:40,310 So at the very beginning is pitch green. 67 00:04:40,330 --> 00:04:41,920 So on and so forth. 68 00:04:41,920 --> 00:04:44,550 So this is the reason why we need to have these. 69 00:04:44,560 --> 00:04:47,000 Obviously one of them is a bully return. 70 00:04:47,020 --> 00:04:48,700 So they have to return something. 71 00:04:48,700 --> 00:04:51,610 The other one doesn't have any return type. 72 00:04:51,700 --> 00:04:53,400 So let's go ahead to the first one. 73 00:04:53,530 --> 00:05:05,360 So you don't then write down what I'm going to do or get the packs of bright kids I can set join them 74 00:05:06,520 --> 00:05:09,500 if not change. 75 00:05:09,730 --> 00:05:12,790 It means they were OK. 76 00:05:13,980 --> 00:05:15,330 Just like what you have done before. 77 00:05:15,330 --> 00:05:17,920 So get the text from here. 78 00:05:17,990 --> 00:05:25,470 Boy the characters said that you like which in this case is the alpha numeric and then joined them back 79 00:05:25,470 --> 00:05:26,130 together. 80 00:05:26,220 --> 00:05:30,000 If the result was exactly the same as what we had at the beginning. 81 00:05:30,100 --> 00:05:35,580 It means nothing has changed and they are ok otherwise they're not OK. 82 00:05:35,580 --> 00:05:39,780 There is also something else that you have to account for and that is backspace. 83 00:05:39,840 --> 00:05:47,890 So I'm going to say I can't for backspace as well because backspace is neither an acceptably tight there 84 00:05:47,910 --> 00:05:51,470 nor a member of alphanumeric characters. 85 00:05:51,570 --> 00:06:01,630 So to do all of these things I'm going to go ahead and yet say I have a variable called Alfar or numeric 86 00:06:01,920 --> 00:06:04,070 and that's going to be a jack. 87 00:06:04,070 --> 00:06:06,880 There are sets of it. 88 00:06:06,900 --> 00:06:10,240 It's called alphanumerics So I've got that. 89 00:06:10,250 --> 00:06:15,930 Now here's something that you should know about the alphanumerics alphanumerics doesn't include L-Space 90 00:06:16,070 --> 00:06:23,020 any so it has every value of the alphabet alphabet on all the numbers but does not include this space. 91 00:06:23,190 --> 00:06:25,380 So that's something I have to do manually. 92 00:06:25,530 --> 00:06:32,180 So I'm going to go ahead and say well if that's the case then say I'll find you that inserts and they 93 00:06:32,290 --> 00:06:38,810 don't insert into it is a single space so spaces are ok then. 94 00:06:38,880 --> 00:06:44,460 But I'm going to go ahead and say Let let's call it character set. 95 00:06:44,520 --> 00:06:49,360 This is going to be fun you don't know worth it. 96 00:06:49,380 --> 00:06:54,240 So this is how we want to break or our text entry. 97 00:06:54,270 --> 00:07:02,580 So that's the reverse of whatever we have in here which is all the alphabet and the space the next thing 98 00:07:02,580 --> 00:07:11,090 to do I'm going to say to let a call this one filter a text for instance or anything like that unless 99 00:07:11,090 --> 00:07:15,980 they feel that the text is essentially all the text that we have in here. 100 00:07:16,020 --> 00:07:18,670 Dot is it components. 101 00:07:18,690 --> 00:07:22,260 Yes components separated right. 102 00:07:22,290 --> 00:07:25,870 And we want to separate them by this Cocteau set. 103 00:07:26,160 --> 00:07:31,450 And then you want to join them by nothing. 104 00:07:31,960 --> 00:07:32,310 Why. 105 00:07:32,340 --> 00:07:34,290 No spaces no nothing. 106 00:07:34,560 --> 00:07:36,460 So let's see what we did in here. 107 00:07:36,480 --> 00:07:39,430 If I can get everything in one line that would be great. 108 00:07:40,940 --> 00:07:43,090 If not I'm actually going to do this. 109 00:07:43,100 --> 00:07:44,990 I'm going to bring everybody down like that. 110 00:07:44,990 --> 00:07:51,230 So I'm going to say filter text is what the variety of the text has been and to be about to determine 111 00:07:51,230 --> 00:07:52,650 their validity. 112 00:07:53,030 --> 00:07:55,030 Let's separate them. 113 00:07:55,060 --> 00:08:02,720 Boy everyone here in this character said which is everyone who is not alphanumeric or a space. 114 00:08:02,780 --> 00:08:07,500 So technically this character set is all of these values. 115 00:08:07,520 --> 00:08:15,230 All of those all of those all of these values the Carol-Lee brackets everything square brackets all 116 00:08:15,230 --> 00:08:15,670 of them. 117 00:08:15,830 --> 00:08:22,640 So let's break the field test the text with all of these guys with separate pieces and then join them 118 00:08:22,640 --> 00:08:23,850 back together. 119 00:08:24,150 --> 00:08:36,530 Then if the third text was equivalent to the actual text then you could simply say return to of course 120 00:08:36,750 --> 00:08:41,940 else return false. 121 00:08:42,260 --> 00:08:43,130 That's about that. 122 00:08:43,130 --> 00:08:50,360 So by now you have managed to return true or false depending on whether the values are valid or not. 123 00:08:50,360 --> 00:08:52,800 Let me get rid of all of my comments. 124 00:08:52,820 --> 00:08:57,410 I do remember that they have to account for the backspace so don't worry about that. 125 00:08:57,930 --> 00:09:00,160 And I'm actually going to do that right away. 126 00:09:00,170 --> 00:09:03,670 Let me let me reformat my text even though I don't like it. 127 00:09:03,680 --> 00:09:09,410 But I think I have to because I want to make sure that you can see everything in one screen. 128 00:09:09,980 --> 00:09:10,540 OK. 129 00:09:10,610 --> 00:09:16,310 So that's my if else statement then right here. 130 00:09:16,730 --> 00:09:19,370 Let me get down one up there as well. 131 00:09:20,450 --> 00:09:25,790 I'm sorry this happens a lot with me because I'm trying to make sure that you see everything in one 132 00:09:25,790 --> 00:09:28,410 screen and it's not confusing. 133 00:09:28,640 --> 00:09:34,340 And I end up having an art form I know I don't personally like and I don't know if you guys like it 134 00:09:34,340 --> 00:09:34,880 or not. 135 00:09:35,060 --> 00:09:44,410 So in any case before we do this thing I'm going to say what if we want to check for backspacing here. 136 00:09:44,570 --> 00:09:49,600 So I'm going to say if text was nothing had nothing has been entered. 137 00:09:49,670 --> 00:09:56,700 But Ranjan lens was larger than zero. 138 00:09:56,780 --> 00:10:02,780 So if something has changed that put nothing in the text has changed. 139 00:10:02,870 --> 00:10:05,680 This only means hackerspace. 140 00:10:05,720 --> 00:10:08,660 So I'm going to go in here for not. 141 00:10:08,670 --> 00:10:10,680 This is what I'm writing here. 142 00:10:10,730 --> 00:10:18,270 These can only be a parking space so it means that there is no text that has been entered. 143 00:10:18,290 --> 00:10:24,180 But you have changed something on the set in that case do you return true anyway. 144 00:10:24,470 --> 00:10:26,240 So let's see one more time. 145 00:10:26,240 --> 00:10:27,420 What with it. 146 00:10:27,710 --> 00:10:30,320 And I hate to do this but at least not one. 147 00:10:30,500 --> 00:10:34,960 So we got our characters set the Insert the space to it we reverse it. 148 00:10:34,970 --> 00:10:37,140 We made our filter text. 149 00:10:37,160 --> 00:10:41,920 We said if it's backspace returned to run don't care about any of these guys if it is not. 150 00:10:41,960 --> 00:10:47,720 And we ended up here if the filter text and the original text are the same return true. 151 00:10:47,870 --> 00:10:49,700 Otherwise return false. 152 00:10:49,760 --> 00:10:51,810 Let's see what we have until now. 153 00:10:53,840 --> 00:10:56,870 So once it loads on my simulator 154 00:10:59,520 --> 00:11:01,110 I should be able to. 155 00:11:01,190 --> 00:11:06,570 Hello this is and I can not enter anything that I like. 156 00:11:06,570 --> 00:11:11,610 It has to be alphanumeric values but obviously nothing is happening with this guy. 157 00:11:11,610 --> 00:11:13,420 The little text counter. 158 00:11:13,590 --> 00:11:16,820 So that's the part you have to fix in English text. 159 00:11:16,850 --> 00:11:18,320 You did change. 160 00:11:18,320 --> 00:11:24,340 So for this one I'm going to go ahead and say let's get the length of the text I'm going to say let's 161 00:11:24,770 --> 00:11:32,640 just call this one our count or it's called current count you can cope with it or you lied. 162 00:11:32,670 --> 00:11:33,130 Right. 163 00:11:33,300 --> 00:11:38,770 So that's going to be my picks through our DOT DOT count. 164 00:11:39,030 --> 00:11:44,910 So if we find out how many characters are entered so that seems simple enough. 165 00:11:45,270 --> 00:11:48,640 Let's find our label which is called text counter. 166 00:11:49,170 --> 00:11:58,360 So thick encounter dots text of course becomes a extreme value of discarding because you know this guy 167 00:11:58,440 --> 00:11:59,520 is an integer. 168 00:11:59,530 --> 00:12:03,310 He could actually explicitly say that it is an integer. 169 00:12:03,540 --> 00:12:07,610 So now whatever it is that counts we put it in our text counters. 170 00:12:08,000 --> 00:12:15,580 Let's see it up on the whether I'm teaching I don't want to run the app so many times because it takes 171 00:12:15,600 --> 00:12:19,700 so much time but sometimes I feel like that is you know necessary. 172 00:12:19,780 --> 00:12:22,740 HARLOW This is necessary. 173 00:12:22,800 --> 00:12:23,580 Perfect. 174 00:12:23,580 --> 00:12:29,620 Now to see if I could go on adding more text I mean jibberish or it. 175 00:12:30,000 --> 00:12:32,260 It goes way beyond hundred forty. 176 00:12:32,260 --> 00:12:33,780 We never accounted for that. 177 00:12:33,780 --> 00:12:36,420 And obviously the color of it is not changing. 178 00:12:36,420 --> 00:12:38,060 So we have to tackle those too. 179 00:12:38,070 --> 00:12:40,170 One of them is fixing the color. 180 00:12:40,170 --> 00:12:44,990 The other one is making sure that it doesn't go beyond 140. 181 00:12:45,210 --> 00:12:51,950 So let's go ahead and say in here I'm going to go ahead and add a new color. 182 00:12:52,170 --> 00:13:02,460 I'm going to say let me all of you back on when you B.G. background is going to be so kids I think the 183 00:13:02,460 --> 00:13:09,920 new background color should be green at the beginning and the read at the end. 184 00:13:09,990 --> 00:13:14,960 So it should be green while this number is close to zero. 185 00:13:15,150 --> 00:13:18,380 And what I said By the time it has to become red. 186 00:13:18,390 --> 00:13:20,250 So what should we do about that. 187 00:13:20,250 --> 00:13:27,180 So this will they have to think of it I have to think of I need a variable let's call it anything you 188 00:13:27,180 --> 00:13:35,610 know rate or ratio or anything like that that keeps increasing for read and keeps decreasing for green 189 00:13:36,000 --> 00:13:37,710 at the same rate. 190 00:13:37,780 --> 00:13:41,060 And you're right that in our My best approach. 191 00:13:41,070 --> 00:13:42,450 And then you can see how it works. 192 00:13:42,450 --> 00:13:50,580 I'm going to say let the ratio to be what ever we have currently as they count. 193 00:13:50,580 --> 00:13:58,590 I'm going to say the current count divided by one hundred and forty because that's the maximum that 194 00:13:58,610 --> 00:13:59,690 I want. 195 00:13:59,700 --> 00:14:06,360 So if the court counts reaches one hundred forty then one hundred forty two point one hundred forty 196 00:14:06,360 --> 00:14:07,620 becomes one. 197 00:14:07,830 --> 00:14:12,850 But at the very beginning we will have zero divide by one hundred forty. 198 00:14:12,870 --> 00:14:16,100 And that essentially becomes zero. 199 00:14:16,290 --> 00:14:25,980 So to do this division against a I mean teacher I'm actually going to make this one a C G flat C G. 200 00:14:26,140 --> 00:14:28,690 Lot of this. 201 00:14:28,850 --> 00:14:36,410 You saw what the C-g flute of concocted count and divided by one hundred and forty. 202 00:14:36,900 --> 00:14:39,880 And I have an error on the flute. 203 00:14:39,910 --> 00:14:40,520 Yes. 204 00:14:40,860 --> 00:14:44,840 So I have the flute of Kernstown by one hundred and forty. 205 00:14:45,030 --> 00:14:50,380 And this number as you can imagine it goes between zero all the way to 1. 206 00:14:50,400 --> 00:14:51,490 At some point. 207 00:14:51,870 --> 00:14:59,250 So I can use this for my read but I have to kind of use the opposite of this for my green. 208 00:14:59,370 --> 00:15:00,760 So let's go ahead and rename it. 209 00:15:00,780 --> 00:15:08,020 I'm going to say this is red and then I'm going to say let Green be 1 minus. 210 00:15:08,030 --> 00:15:08,940 Right. 211 00:15:09,240 --> 00:15:15,440 Because at any point at the very very beginning VENDREDI 0 1 minus 0 becomes 1. 212 00:15:15,600 --> 00:15:23,370 Towards the end of and red is gaining more more essentially more of the value of 1 minus one becomes 213 00:15:23,460 --> 00:15:23,930 zero. 214 00:15:24,030 --> 00:15:30,990 So I'm going to send you my graph is your eye color and I'm glad to hear that Carlist face that they 215 00:15:30,990 --> 00:15:32,060 want to use. 216 00:15:32,160 --> 00:15:39,180 I need something that can give me red green and blue with floating values one to zero. 217 00:15:39,330 --> 00:15:47,990 So I welcome your display of peach tree the red Petri red green and so forth. 218 00:15:48,030 --> 00:15:49,900 So that seems like the one I need. 219 00:15:50,250 --> 00:15:55,390 So in this case I'm going to send out always one because it's fully opaque. 220 00:15:55,560 --> 00:15:58,640 Blue is always zero because I don't want to have any blue. 221 00:15:58,770 --> 00:16:04,350 Red is obviously red and green is obviously green and that's about that. 222 00:16:04,350 --> 00:16:11,670 So we managed to have that and the next thing they have to do is I have to say this guy takes the counter 223 00:16:12,600 --> 00:16:17,220 dot Micron's color becomes a new Biji. 224 00:16:17,570 --> 00:16:22,640 So let's go ahead and test this out and let me get rid of all of these comments so it's easier to read 225 00:16:22,650 --> 00:16:24,970 whatever is absolutely necessary. 226 00:16:25,800 --> 00:16:34,080 So as I'm running the code now we will see if all goes then hopefully we will see that Hello. 227 00:16:34,110 --> 00:16:41,540 So at the beginning is green and then as we move forward while it's becoming dark and towards or rather 228 00:16:41,610 --> 00:16:43,660 it's really really really strange. 229 00:16:43,680 --> 00:16:45,540 And we're getting to it now. 230 00:16:45,570 --> 00:16:51,810 The only challenge you still have is that the characters still go beyond 140 and that's going to be 231 00:16:51,810 --> 00:16:55,720 actually a very very very simple you know fix. 232 00:16:55,830 --> 00:16:57,100 Here's what I'm going to do. 233 00:16:57,150 --> 00:17:02,210 I'm going to go through here where takes the view should that change or not. 234 00:17:02,370 --> 00:17:11,310 I'm going to say if text is equal to equivalent to the filter text then check something else and that 235 00:17:11,310 --> 00:17:19,890 is text view dot text dot count is still below 140. 236 00:17:19,890 --> 00:17:26,850 So before you decide that you should change this text or not decide whether the value of it is still 237 00:17:26,850 --> 00:17:28,310 below 140. 238 00:17:28,320 --> 00:17:32,370 So this one does not wants its mordent. 239 00:17:32,570 --> 00:17:40,460 So here I can say all this is name and then I start typing a lot of random stuff as you can see the 240 00:17:40,460 --> 00:17:44,050 colors is working properly as we go along. 241 00:17:44,180 --> 00:17:47,120 240 It doesn't allow me to do anything anymore. 242 00:17:47,270 --> 00:17:53,520 I can still use that space where they can type anything beyond that and that's about that. 243 00:17:53,570 --> 00:18:02,270 So in this exercise I've managed to make a text that only accepts of two hundred forty office specific 244 00:18:02,270 --> 00:18:06,050 set of characters and it counts the contest. 245 00:18:06,110 --> 00:18:13,070 Besides about the new color for the bike you're on of the counter and applies to that label. 246 00:18:13,370 --> 00:18:15,680 So keep it up to here on Bill and move on to.