1 00:00:05,450 --> 00:00:13,010 Say what's up everyone Arkwright's slopes dot com and previously on Windows shopper we created an app 2 00:00:13,220 --> 00:00:19,150 and it's really cool but unfortunately the runtime look is not how it looks when I'm in Interface Builder 3 00:00:19,190 --> 00:00:22,460 and it's really hard to build apps and the Interface Builder and it doesn't look like what it's supposed 4 00:00:22,460 --> 00:00:23,170 to look like. 5 00:00:23,390 --> 00:00:27,230 And how do you fix it how do you get it to do what you want it to do because it's custom code that's 6 00:00:27,230 --> 00:00:28,110 changing this. 7 00:00:28,250 --> 00:00:29,410 And we want it to be reusable. 8 00:00:29,410 --> 00:00:33,080 Now I'm really thinking about maybe just going back to Interface Builder and resetting all the buttons 9 00:00:33,530 --> 00:00:37,100 manually because I want to see what I'm doing. 10 00:00:37,100 --> 00:00:41,740 Well what did you could have the best of both worlds What if you could have your cake and eat it too. 11 00:00:41,990 --> 00:00:45,580 Well I'm going to show you right now and it's really really simple. 12 00:00:45,590 --> 00:00:53,270 So let's go back to our code here in our currency textfield and we're going to do is we're going to 13 00:00:53,270 --> 00:00:55,250 use something called IB desirable. 14 00:00:55,340 --> 00:00:58,850 So you preface your class with something called at IB design. 15 00:00:58,850 --> 00:01:00,430 Well this is a class attribute. 16 00:01:00,620 --> 00:01:05,750 And what we're saying is hey we want the changes that happen in this class to show up in the interface 17 00:01:05,750 --> 00:01:06,270 builder. 18 00:01:06,340 --> 00:01:07,060 OK. 19 00:01:07,280 --> 00:01:09,440 Which is really really cool. 20 00:01:09,590 --> 00:01:11,170 Now it's not going to work yet. 21 00:01:11,420 --> 00:01:21,080 And there's one reason why it's because we need to implement a function called prepare for prepare prepare 22 00:01:21,080 --> 00:01:27,890 for Interface Builder OK and prepare for Interface Builder is going to run code to show the changes 23 00:01:27,890 --> 00:01:28,870 in Interface Builder. 24 00:01:29,000 --> 00:01:32,350 And so what we want is all the code that's in this function here to run there. 25 00:01:32,360 --> 00:01:33,220 Well how do we do that. 26 00:01:33,230 --> 00:01:37,910 Because we also need our awake from NIB function to run that as well too because this one is only going 27 00:01:37,910 --> 00:01:39,240 to be called an Interface Builder. 28 00:01:39,240 --> 00:01:41,100 But this is called that runtime. 29 00:01:41,150 --> 00:01:46,190 Well that's as simple as extracting both of these into a custom function and you can call this whatever 30 00:01:46,190 --> 00:01:47,080 you want. 31 00:01:47,270 --> 00:01:57,450 I think we'll call it customize phunk customize view like so and then all we need to do is command X 32 00:01:57,680 --> 00:02:05,010 code command V to paste it here and then prepare for Interface Builder we'll call customize view and 33 00:02:05,010 --> 00:02:14,440 then in a week from now we'll call customize you like so. 34 00:02:15,370 --> 00:02:15,970 That's it. 35 00:02:15,970 --> 00:02:21,480 Literally all we did was we put at I be desirable and then we did the prepare for Interface Builder. 36 00:02:21,490 --> 00:02:27,190 So any of your code that changes things programmatically any of your view logic needs to happen in the 37 00:02:27,190 --> 00:02:30,690 prepare for Interface Builder which it is because we moved everything into customized view. 38 00:02:30,940 --> 00:02:36,610 So if we go back to our main storyboard it's brilliant to look at that and guess what nobody else teaches 39 00:02:36,610 --> 00:02:38,110 this blows my mind. 40 00:02:38,410 --> 00:02:42,280 You should be implementing this in your app so you can actually build apps that look the way that you 41 00:02:42,310 --> 00:02:43,230 are dragging them around. 42 00:02:43,270 --> 00:02:47,130 So now I feel comfortable finishing our interface here. 43 00:02:47,410 --> 00:02:51,400 So let's make this a little bit bigger there like that. 44 00:02:51,400 --> 00:02:57,990 And it's going start pinning stuffs I want to pin this let's say 35 from the top and you know from the 45 00:02:57,990 --> 00:03:03,060 sides 1:58 let's say 2000 from the left and 20 from the right. 46 00:03:03,790 --> 00:03:09,270 And then let's give it a fixed height let's say a 40. 47 00:03:10,570 --> 00:03:13,260 Much better beautiful. 48 00:03:13,330 --> 00:03:18,180 I'm really like in this app now all real time command DB duplicate. 49 00:03:18,190 --> 00:03:22,740 And of course it's giving us red lines is yelling at us because we don't have constraints set up yet. 50 00:03:22,750 --> 00:03:23,920 So let's do that now. 51 00:03:24,400 --> 00:03:31,490 Let's pin this say 25 from the top 1 and as far as the left and the right go do 20 and 20. 52 00:03:31,490 --> 00:03:34,270 And we also could have pinned to these edges to be the same. 53 00:03:34,600 --> 00:03:35,160 We'll do that. 54 00:03:35,170 --> 00:03:36,480 I'll show you how to do that. 55 00:03:36,520 --> 00:03:40,870 We'll give it a fact when we want to do the high here we'll just pin it from the top. 56 00:03:40,870 --> 00:03:41,670 And this is cool. 57 00:03:41,680 --> 00:03:44,760 What does control drag from this hourly wage. 58 00:03:44,770 --> 00:03:54,290 And let's go ahead and say we want him to have the equal leading and the equal trailing boum. 59 00:03:54,320 --> 00:03:57,870 And how about equal heights really cool. 60 00:03:57,900 --> 00:04:04,990 So now if I change this one the other one will follow suite follow suit if I update the frames. 61 00:04:05,100 --> 00:04:06,000 But we're not going to do that. 62 00:04:06,000 --> 00:04:11,400 So really cool stuff your hourly wage your hourly wage this is all looking great. 63 00:04:11,460 --> 00:04:20,640 And then the item price is what this one says so in the placeholder we're going to say item price looking 64 00:04:20,640 --> 00:04:21,480 good. 65 00:04:21,480 --> 00:04:26,580 Let's just run it just to be sure everything is ship shape beautiful. 66 00:04:26,580 --> 00:04:28,200 Your hourly wage item price. 67 00:04:28,410 --> 00:04:30,900 Let's click one of these here and we got the wrong keyboard. 68 00:04:30,930 --> 00:04:32,230 Let's fix that. 69 00:04:32,290 --> 00:04:33,810 We want the decimal pad keyboard. 70 00:04:33,810 --> 00:04:36,380 So this one is pretty simple to change as well. 71 00:04:36,510 --> 00:04:39,020 Turn off this thing and close up here. 72 00:04:39,510 --> 00:04:39,840 OK. 73 00:04:39,840 --> 00:04:48,350 So we want to do is for the keyboard type we want to do decimal pad and same thing here. 74 00:04:48,410 --> 00:04:52,730 We want to do decimal pad keyboard type decimal pad. 75 00:04:52,990 --> 00:04:58,880 And I think on this bottom one here will say auto and able to return key on this bottom field here. 76 00:04:58,880 --> 00:05:03,790 Cool so you enter a value here you interview here you can only enter in numbers digits. 77 00:05:03,870 --> 00:05:04,480 This is great. 78 00:05:04,510 --> 00:05:06,730 It's exactly what we want. 79 00:05:06,770 --> 00:05:10,040 And then of course what we need also if we look at our images here. 80 00:05:10,520 --> 00:05:15,770 OK we're going to need this Calculate button here and then we're also going to need this label here 81 00:05:15,770 --> 00:05:21,540 that says 32 hours etc. we can really do this stuff over here without the Calculate button. 82 00:05:21,540 --> 00:05:24,070 And so I say we did that first but this is really interesting. 83 00:05:24,350 --> 00:05:28,660 So the Calculate button if I'm looking at the designs correctly when the keyboard's up we need this 84 00:05:28,820 --> 00:05:30,040 calculator button at the top. 85 00:05:30,050 --> 00:05:33,060 And when the keyboard disappears we want the Calculate button to disappear. 86 00:05:33,290 --> 00:05:37,820 Now one way to do this is to programmatically detect when the keyboard comes up or its height and position 87 00:05:37,870 --> 00:05:43,000 is in place of you and have animate and hide and show based on what the keyboards visible or not. 88 00:05:43,280 --> 00:05:50,920 But X code has given us a handy feature that makes this all that functionality automatic for us so let's 89 00:05:50,960 --> 00:05:52,380 go ahead and do that next. 90 00:05:53,640 --> 00:05:57,790 Drag these off drag this off. 91 00:05:58,120 --> 00:06:02,100 Well we're going to do is in our view controller we're going to write some code for this. 92 00:06:02,110 --> 00:06:08,140 Now maybe in the future I might put this in some type of custom extension or class that's more reusable 93 00:06:08,140 --> 00:06:10,470 but I don't really see that use case just yet. 94 00:06:10,480 --> 00:06:17,590 And sometimes it's not ideal to prematurely refactor things OK because you may never you may never get 95 00:06:17,590 --> 00:06:19,120 to that point and the code will be just fine. 96 00:06:19,120 --> 00:06:24,790 So I feel comfortable doing this code here in the view did load because it's only a one time thing and 97 00:06:24,820 --> 00:06:26,380 it's specific to this app here. 98 00:06:26,440 --> 00:06:29,300 And so what we're going to do is we're going to create a button code. 99 00:06:29,320 --> 00:06:33,460 I don't know if you knew that but everything you can do in Interface Builder you could do in code. 100 00:06:33,460 --> 00:06:36,280 In fact that's how a lot of it used to be you do it programmatically. 101 00:06:36,280 --> 00:06:39,730 So what we're going to do is we're going to create a button programmatically. 102 00:06:39,820 --> 00:06:44,550 And then we're going to attach it to the text fields accessory. 103 00:06:44,690 --> 00:06:45,430 OK. 104 00:06:45,530 --> 00:06:51,190 And first things first is you've got to have ibl it's for text fields Otherwise we can't reference them. 105 00:06:51,190 --> 00:07:00,010 So back to the Interface Builder click the assistant editor and close some of the stuff up here so it's 106 00:07:00,010 --> 00:07:04,540 not so congested normally it won't be this congested. 107 00:07:04,650 --> 00:07:09,130 I have things extra large on the screen for teaching purposes but normally when you're working you can 108 00:07:09,190 --> 00:07:12,370 adjust the resolution of your monitor so you can fit more things on it. 109 00:07:12,580 --> 00:07:18,700 And I'm going to control drag from this first textfield over here above the override to load outlet 110 00:07:18,720 --> 00:07:24,940 and we're going to call this wage ti XTi like so. 111 00:07:25,120 --> 00:07:34,250 And then the item price put right below it will let me right there and we're going to call this price 112 00:07:34,520 --> 00:07:35,580 XTi. 113 00:07:36,290 --> 00:07:41,880 I'm going to close this as an editor and then I'm going to expand this here so we can see all of our 114 00:07:41,880 --> 00:07:50,110 code files save it and then open up the main VC does with ALCA very good. 115 00:07:50,100 --> 00:07:53,070 And now we have two text fields we have Atlas references for them. 116 00:07:53,070 --> 00:07:56,530 So first things first is let's go ahead and create that button programmatically. 117 00:07:56,760 --> 00:08:05,460 So let calque button equals UI button and we're going to do one with the frame whenever you're working 118 00:08:05,460 --> 00:08:09,630 programmatically you typically want to do the UI button or you would view with the frame so you can 119 00:08:09,630 --> 00:08:11,530 specify how big it's going to be. 120 00:08:11,550 --> 00:08:12,260 You don't have to. 121 00:08:12,280 --> 00:08:15,640 You could do at a later point in time but usually you want to do it here. 122 00:08:15,720 --> 00:08:20,370 And so we're going to create a CGI wrecked inside that's going to create the frame for us because frame 123 00:08:20,370 --> 00:08:21,070 is a CD-ROM. 124 00:08:21,090 --> 00:08:30,430 That's what it calls for and what we'll do is we're going to say zero x okay and zero y zero x zero 125 00:08:30,430 --> 00:08:34,010 Why that's just going to keep it at the top left which is where we want it. 126 00:08:34,050 --> 00:08:38,220 And then we just sort of with the height and the with is going to be the width of the view itself which 127 00:08:38,220 --> 00:08:41,130 is the size of the keyboard because the keyboard expands the whole view. 128 00:08:41,160 --> 00:08:46,470 So all we have to do is say view of frame size and the height can be whatever we want and I'm going 129 00:08:46,470 --> 00:08:50,460 to put 60 because I think 60s a nice high looks nice. 130 00:08:50,460 --> 00:08:58,020 OK let's go and give it a background color so calque button dot the background color equals and we're 131 00:08:58,020 --> 00:09:05,370 going to say the color literal and let's double click it and let's go for a nice nice orange color and 132 00:09:05,430 --> 00:09:12,750 like those oranges to this orange here and just adjust it slightly so it's a little bit lighter. 133 00:09:12,810 --> 00:09:13,910 We go. 134 00:09:14,530 --> 00:09:14,850 You go. 135 00:09:14,850 --> 00:09:17,130 Nice little orange color there. 136 00:09:17,130 --> 00:09:20,320 All right say calque button set title. 137 00:09:20,820 --> 00:09:21,650 OK. 138 00:09:21,750 --> 00:09:28,790 And we're going to say calculate like so for control control control state normal. 139 00:09:29,040 --> 00:09:30,950 Let me give you a pro tip. 140 00:09:31,110 --> 00:09:31,740 OK. 141 00:09:31,980 --> 00:09:39,240 Always always always use set title when you're setting the text on a button always versus. 142 00:09:39,480 --> 00:09:41,340 We could have said Kalpa and dot 143 00:09:45,230 --> 00:09:53,640 that title OK which is a title I will not text I could have said calque but that title will that text 144 00:09:53,670 --> 00:09:55,830 equals calculate. 145 00:09:56,010 --> 00:09:59,460 But guess what it doesn't work and you'll bang your head on the keyboard. 146 00:09:59,460 --> 00:10:02,830 This does not work because that's not how you set text on a button. 147 00:10:02,920 --> 00:10:06,920 Let's use that text on the label as you know you'll say my label that text equals whatever. 148 00:10:07,170 --> 00:10:13,070 But the protip again when working with the button if you want to set the title called Set title. 149 00:10:13,230 --> 00:10:17,250 Trust me this title table that text does not work and you'll probably want to do that because you're 150 00:10:17,250 --> 00:10:18,230 used to working with labels. 151 00:10:18,240 --> 00:10:20,680 But you heard it from me. 152 00:10:20,820 --> 00:10:22,330 Ok cool. 153 00:10:22,350 --> 00:10:28,760 So that's the that's the title calculate we're going to say calque button set. 154 00:10:28,810 --> 00:10:34,220 Title color again you want to use the set title color and not the other way of setting the color. 155 00:10:34,350 --> 00:10:39,810 And we're going to say color literal white is fine. 156 00:10:39,810 --> 00:10:42,620 And for the normal state of the button. 157 00:10:42,950 --> 00:10:46,680 OK we don't want the press data or the highlighted state or anything like that. 158 00:10:46,680 --> 00:10:47,060 All right. 159 00:10:47,070 --> 00:10:51,010 And then the next thing we need to do is we need to have a target for when the button is pressed like 160 00:10:51,060 --> 00:10:56,040 what function is going to be called and soullessness let's get rid of this memory warning and then let's 161 00:10:56,040 --> 00:11:04,110 go ahead and say phunk calculate like so we want to do is when the calculator is press we want it to 162 00:11:04,110 --> 00:11:05,150 call a function. 163 00:11:05,190 --> 00:11:12,120 And so now we can actually add the target of the buttons we can say calque button add target like so 164 00:11:12,720 --> 00:11:19,710 and we're going to say self and the action OK is going to be a selector and we're going to say I mean 165 00:11:19,750 --> 00:11:21,000 visi. 166 00:11:22,050 --> 00:11:28,860 Calculate like so for touch up there you go touch up inside. 167 00:11:28,900 --> 00:11:31,090 Now if we run this this should group let us build. 168 00:11:31,090 --> 00:11:32,910 Phil I don't know what do we do. 169 00:11:33,010 --> 00:11:37,910 Argument of Selecta refers to instance method to calculate that is not exposed to objective c at RBJ 170 00:11:37,930 --> 00:11:40,530 C to expose this instance method to objective c. 171 00:11:40,530 --> 00:11:42,660 So go ahead n click fix. 172 00:11:42,670 --> 00:11:46,830 Now the thing is ok you'll notice here we've gotten at RBJ see. 173 00:11:46,870 --> 00:11:48,900 So when you're working with selectors. 174 00:11:48,970 --> 00:11:51,870 OK this is a function that will be called at a later point in time. 175 00:11:51,880 --> 00:11:59,080 It is using Objective-C runtime that's a feature of Objective-C messaging sending strings between classes 176 00:11:59,080 --> 00:12:00,540 that can call a function. 177 00:12:00,560 --> 00:12:01,790 That's not a swift thing. 178 00:12:01,840 --> 00:12:08,070 And so previous versions of X code this would happen automatically under the hood but would now before 179 00:12:08,170 --> 00:12:12,760 they want you to know when a function is an object A C runtime function. 180 00:12:12,760 --> 00:12:18,730 So your code doesn't change here but it has changed here you've got to use the explicitly add at o BJC 181 00:12:18,730 --> 00:12:24,680 to say hey it's going to use an objective c feature in order to run this and so that is how you do it. 182 00:12:24,680 --> 00:12:29,140 And so the pound sign selector main Veazey calculator there are a couple of other ways of running selectors 183 00:12:29,610 --> 00:12:31,730 but this is the best way and the safest way. 184 00:12:31,860 --> 00:12:32,360 OK. 185 00:12:32,560 --> 00:12:38,080 And make sure that the functions actually there if you use a different method like the you know if I 186 00:12:38,080 --> 00:12:46,810 said selector and then use the string method like calculate like so if that function didn't exist then 187 00:12:46,810 --> 00:12:50,110 at runtime the app would crash and that's not a good experience so this is safer. 188 00:12:50,390 --> 00:12:51,060 OK. 189 00:12:51,550 --> 00:12:57,980 So we set the button at the target that we want to be called when the when the button is pressed. 190 00:12:58,120 --> 00:12:58,760 OK. 191 00:12:59,050 --> 00:13:04,410 And then all that's left now is on those two textfield to set this button as the accessory view. 192 00:13:04,420 --> 00:13:06,590 So we're going to say wage TXI. 193 00:13:06,820 --> 00:13:10,890 Input accessory view equals calque button. 194 00:13:11,260 --> 00:13:18,520 And then what we'll do is we'll say the price next to 60 that input access review equals the calque 195 00:13:18,580 --> 00:13:21,800 button and that looks good as well too. 196 00:13:22,510 --> 00:13:29,100 And then right here let's just do a print saying hey we got here a got here. 197 00:13:29,800 --> 00:13:32,250 We could also debugged it but prints are more fun. 198 00:13:32,580 --> 00:13:32,910 OK. 199 00:13:32,920 --> 00:13:40,660 So what I'm going to do here is I'm going to run this is clear this nonsense let's run it. 200 00:13:40,750 --> 00:13:46,120 And when I tap on this you're going to see the calculate field here and when I click it we got here 201 00:13:46,120 --> 00:13:47,100 should print which it did. 202 00:13:47,170 --> 00:13:52,210 Now if you're working with the simulator and the keyboard didn't prayer you can do command K that toggles 203 00:13:52,210 --> 00:13:57,150 the keyboard for the simulator itself and sometimes it's not enabled by default. 204 00:13:57,250 --> 00:14:00,760 But what we want is for it to appear when you're typing and stuff. 205 00:14:00,930 --> 00:14:03,850 And so it's definitely a working the Calculate button is working. 206 00:14:03,910 --> 00:14:08,050 And so the whole hiding and showing of it it's all automatic now. 207 00:14:08,050 --> 00:14:11,430 It adds it automatically hides it shows automatically. 208 00:14:11,440 --> 00:14:12,460 And that's exactly what we want. 209 00:14:12,460 --> 00:14:16,330 This would have been a lot of code right if we hadn't used the input accessor abuse of coolit little 210 00:14:16,330 --> 00:14:19,520 feature that comes with the text fields. 211 00:14:19,630 --> 00:14:20,120 OK. 212 00:14:20,150 --> 00:14:22,860 And so again what we did here was we created a. 213 00:14:23,560 --> 00:14:24,130 All right. 214 00:14:24,220 --> 00:14:29,290 And then we set a background color gave it a title and stuff and we added its target function programmatically 215 00:14:29,290 --> 00:14:31,470 instead of having Iby action from your interface builder. 216 00:14:31,480 --> 00:14:36,220 We used ad target and then we put it here if you didn't want to use a button we could also have used 217 00:14:36,220 --> 00:14:39,940 a UI view and did the same things added a label on it and the colors. 218 00:14:39,970 --> 00:14:43,580 And then we could added a gesture recognizer but I thought that was a little bit more code. 219 00:14:43,780 --> 00:14:45,550 And this made a whole lot more sense here. 220 00:14:45,550 --> 00:14:50,390 So this is what we're going to roll with right here so I think this video is good for now. 221 00:14:50,410 --> 00:14:53,140 We've done some really cool stuff and so let's stop it. 222 00:14:53,140 --> 00:14:57,920 Catch up if you're behind and let's move on afford Mark Price slopes dot.com.