1
00:00:05,880 --> 00:00:10,170
Hey guys what's going on says Caleb with Dev slopes and in this video we're going to start building

2
00:00:10,170 --> 00:00:16,980
out an app called binary that essentially is going to be able to turn decimal numbers into binary and

3
00:00:16,980 --> 00:00:18,620
binary into decimal numbers.

4
00:00:18,630 --> 00:00:24,690
It's a very very cool little app you can use to basically you know convert values into binary and binary

5
00:00:24,690 --> 00:00:30,420
back into decimal values and the cool thing is that we're going to actually take our conceptual understanding

6
00:00:30,420 --> 00:00:36,480
of binary and we're going to go ahead and apply it to building this app and writing the functions that

7
00:00:36,480 --> 00:00:39,390
are actually going to manage the data the way that we want to.

8
00:00:39,390 --> 00:00:41,250
So very cool stuff.

9
00:00:41,550 --> 00:00:43,880
Let's go ahead and let's dive into it right now.

10
00:00:43,890 --> 00:00:49,770
We're going to go ahead and pull up an X code here and I'm going to go ahead and click Create new X

11
00:00:49,770 --> 00:00:50,780
code project.

12
00:00:51,120 --> 00:00:55,560
And of course the window will show up on my other screen but that's fine we'll just pull it on over

13
00:00:55,560 --> 00:00:59,780
here and click single view application and give it a name.

14
00:00:59,850 --> 00:01:04,880
I'm going to go ahead and give it the name maybe just binary.

15
00:01:04,890 --> 00:01:05,670
That's fine.

16
00:01:05,970 --> 00:01:08,050
And we don't need to do anything else.

17
00:01:08,130 --> 00:01:13,740
So just click next and save it somewhere I'm going to save it to my desktop.

18
00:01:13,750 --> 00:01:14,430
There we go.

19
00:01:14,430 --> 00:01:17,440
Let's make it full screen and here we are.

20
00:01:17,430 --> 00:01:21,710
So let's go ahead and let's build out the interface Let's connect everything up.

21
00:01:21,870 --> 00:01:28,560
And let's also set up a textfield delegate which is going to give us the ability to basically control

22
00:01:28,560 --> 00:01:33,270
the textfield and do things when we enter text into the textfield which will be very important.

23
00:01:33,270 --> 00:01:39,240
So go ahead and click on may not storyboard and let's build out the user interface.

24
00:01:39,270 --> 00:01:39,540
All right.

25
00:01:39,540 --> 00:01:44,340
So in our view controller here we're going to actually just set the background to be a dark gray color.

26
00:01:44,580 --> 00:01:48,840
And I believe this color is well what is it in hex.

27
00:01:48,870 --> 00:01:49,270
It is.

28
00:01:49,290 --> 00:01:51,410
Oh this is just straight black.

29
00:01:51,420 --> 00:01:53,580
I want it to be kind of like a dark ish gray.

30
00:01:53,580 --> 00:01:57,360
So we're going to just use six threes six threes is really good.

31
00:01:57,360 --> 00:01:59,280
Dark gray color.

32
00:01:59,580 --> 00:02:00,600
So let's use that.

33
00:02:00,600 --> 00:02:02,730
3 3 3 3 3 3.

34
00:02:02,730 --> 00:02:03,540
All right.

35
00:02:03,540 --> 00:02:09,180
Next I want to put a little label up here at the top and just so you know this is what I'm referencing.

36
00:02:09,180 --> 00:02:13,800
This is the interface that I designed out and this is something like what we're going to build so we're

37
00:02:13,800 --> 00:02:21,430
going to do a label here a textfield here and then a stack view containing two buttons and another label.

38
00:02:21,450 --> 00:02:24,420
So that's what I'm trying to recreate here in X code.

39
00:02:24,420 --> 00:02:29,540
So let's go ahead and let's add a label for the app name up at the top.

40
00:02:29,880 --> 00:02:30,750
OK.

41
00:02:31,110 --> 00:02:37,190
And let's change the font color to white and let's change the font itself to Avenir next.

42
00:02:37,200 --> 00:02:38,250
That's a nice font.

43
00:02:38,250 --> 00:02:45,630
I use it all the time and I used heavy for the name here and let's use a size 36 font and let's stretch

44
00:02:45,630 --> 00:02:52,650
it out a bit and I just stylistically wrote by an area with a little dot there that will be the name

45
00:02:52,650 --> 00:02:54,330
of the application.

46
00:02:54,780 --> 00:02:59,090
And I'm going to go ahead and just centered there and I'm not going to use any constraints just yet

47
00:02:59,100 --> 00:03:02,480
I'm going to get everything in place and then constrain everything.

48
00:03:02,490 --> 00:03:04,510
So let's go ahead and add an 8.

49
00:03:04,540 --> 00:03:07,540
Textfield just like so.

50
00:03:07,890 --> 00:03:14,830
And we're going to go ahead and stretch this so that it fits the screen and place it right about here.

51
00:03:14,970 --> 00:03:17,410
And let's think what do we want to do.

52
00:03:17,790 --> 00:03:27,870
I want to set it to have no background and it's going to say enter a value dot dot dot and that placeholder

53
00:03:27,870 --> 00:03:31,220
text will show up when you know there's no text.

54
00:03:31,230 --> 00:03:32,660
So that's cool.

55
00:03:32,820 --> 00:03:34,820
Let's go ahead and change the font.

56
00:03:34,950 --> 00:03:39,720
I'm going to use a cool kind of program or code font for the numbers that just kind of saint you know

57
00:03:39,720 --> 00:03:41,840
seems cool with binary and whatever.

58
00:03:41,850 --> 00:03:45,970
So I choose Menlo font already on your Mac.

59
00:03:46,220 --> 00:03:51,140
Ok choose Menlo and let's make Menlo size 36 as well.

60
00:03:51,700 --> 00:03:53,400
And yeah leave it like it is.

61
00:03:53,430 --> 00:03:55,550
But let's make the font white.

62
00:03:55,550 --> 00:03:57,680
That'll show up a little better when we type.

63
00:03:58,170 --> 00:04:00,680
And that looks pretty good.

64
00:04:01,080 --> 00:04:01,560
Let's see.

65
00:04:01,560 --> 00:04:04,950
Let's leave the minimum font size 17:16 something like that.

66
00:04:05,190 --> 00:04:11,980
Oh and we want the keyboard type to be a number pad because we're not dealing with alphanumeric values.

67
00:04:12,030 --> 00:04:14,110
For this app we will in the challenge.

68
00:04:14,110 --> 00:04:14,580
Ha ha ha.

69
00:04:14,580 --> 00:04:15,360
Prepare yourself.

70
00:04:15,360 --> 00:04:19,140
But for now we're going to go ahead and just use a number pad.

71
00:04:19,140 --> 00:04:22,440
So select number pad for keyboard type.

72
00:04:22,470 --> 00:04:28,860
Now we're going to go ahead and create a stack view containing those two buttons as well as the convert

73
00:04:28,860 --> 00:04:30,120
to label.

74
00:04:30,120 --> 00:04:38,440
So let's go ahead and just put the label down first like so drop it here and type convert to Colon.

75
00:04:38,450 --> 00:04:41,160
All right and change the color there to white.

76
00:04:41,160 --> 00:04:43,590
So it can be seen on the background.

77
00:04:43,590 --> 00:04:46,050
And let's change this also to Avenir.

78
00:04:46,060 --> 00:04:47,830
Next like we did before.

79
00:04:48,170 --> 00:04:53,620
And make it heavy like I did below and a size 18 is probably good.

80
00:04:53,640 --> 00:04:57,800
Stretch it out and I'm going to make it centered as well.

81
00:04:57,800 --> 00:05:00,770
And so we can go ahead and leave that there.

82
00:05:00,780 --> 00:05:02,520
And now we can drag on two buttons.

83
00:05:02,520 --> 00:05:06,560
So type of button and a drag on one button here.

84
00:05:06,600 --> 00:05:08,240
We're going to stretch it.

85
00:05:08,280 --> 00:05:09,420
Change the name.

86
00:05:09,450 --> 00:05:13,710
One is going to be binary because that will be a choice to convert it to binary.

87
00:05:13,710 --> 00:05:17,670
And then we need another button for decimal so I'm going to copy and paste it.

88
00:05:17,670 --> 00:05:18,100
Whoops.

89
00:05:18,120 --> 00:05:21,250
Make sure it's selected copy and paste.

90
00:05:21,450 --> 00:05:25,880
Drag it over here and change this to say decimal.

91
00:05:26,160 --> 00:05:32,830
And I'm actually going to go ahead and change these both to have a background of white like so.

92
00:05:33,510 --> 00:05:37,060
K and the font color is going to be that same dark gray.

93
00:05:37,080 --> 00:05:39,520
But let's change the font because it's ugly.

94
00:05:39,630 --> 00:05:43,370
The system font is so gross I'm going to change it to Avenir next.

95
00:05:43,380 --> 00:05:45,520
And let's just use Demy bold.

96
00:05:45,570 --> 00:05:46,800
That looks pretty good.

97
00:05:47,400 --> 00:05:49,980
And let's make sure these are not overlapping.

98
00:05:50,110 --> 00:05:52,580
Doesn't really matter the size because we're going to use a stack view.

99
00:05:52,830 --> 00:05:57,840
And so let's go ahead and select both of these and put them in a stack view like I've been saying.

100
00:05:57,840 --> 00:06:02,940
So with them both selected click the stack button down here at the bottom and then we're going to want

101
00:06:02,940 --> 00:06:06,600
to give it some spacing so there's some space between them so give it 20.

102
00:06:06,750 --> 00:06:09,310
Well yeah 10 points of spacing.

103
00:06:09,600 --> 00:06:15,380
And now we can go ahead and select this label and the stack you by holding Shift and selecting both

104
00:06:15,870 --> 00:06:21,880
and then click stack and of course it's going to accidentally converted into a horizontal stack.

105
00:06:21,880 --> 00:06:26,850
So instead choose vertical and make sure that the label ends up on top.

106
00:06:26,860 --> 00:06:29,370
Sometimes that can be a problem but there.

107
00:06:29,380 --> 00:06:30,270
That looks good.

108
00:06:30,340 --> 00:06:36,670
And this stack you should also have ten pieces of spacing 10 pieces and 10 points.

109
00:06:36,760 --> 00:06:41,000
And then we want to set it up so that everything is centered and filling the entire stack.

110
00:06:41,020 --> 00:06:46,130
So to do that all you have to do is click the alignment and change it to fill.

111
00:06:46,240 --> 00:06:47,230
Very cool.

112
00:06:47,290 --> 00:06:53,380
So now that we have everything in place let's go ahead and start using constraints to pin it in place.

113
00:06:53,380 --> 00:06:58,510
So for the name I'm going to go ahead and pin this 10 from the top 10 from the left and 10 from the

114
00:06:58,510 --> 00:07:03,310
right and give it a fixed height of 50 k that looks good.

115
00:07:03,340 --> 00:07:06,600
Now for the textfield here I want it to be extra tall.

116
00:07:06,610 --> 00:07:14,270
So in order to do that we need to pin it maybe 20 from the top 10 from the left 10 from the right.

117
00:07:14,290 --> 00:07:20,320
And let's give it a fixed height of maybe 80 k let's make it really tall.

118
00:07:20,800 --> 00:07:21,490
And there we go.

119
00:07:21,490 --> 00:07:22,000
Very cool.

120
00:07:22,000 --> 00:07:27,060
So when we actually enter text in here we're zoomed out and zoom back in.

121
00:07:27,250 --> 00:07:28,540
There we go.

122
00:07:28,540 --> 00:07:33,820
When we actually enter text in here you'll see it's nice and big which is very cool.

123
00:07:33,820 --> 00:07:38,890
Now we're going to also tick the box here automatically adjust font and that'll help to align things

124
00:07:38,890 --> 00:07:40,510
and make it look nice.

125
00:07:40,600 --> 00:07:43,880
And now our last thing is we need to align the stack for you.

126
00:07:43,900 --> 00:07:51,100
So go ahead and click the pin button and we're going to make this 20 from the textfield 10 from the

127
00:07:51,100 --> 00:07:52,890
left 10 from the right.

128
00:07:53,070 --> 00:07:59,500
And let's give it a fixed height of 80 and press enter to add those constraints.

129
00:07:59,500 --> 00:08:01,750
Now of course we're getting some issues here with alignment.

130
00:08:01,750 --> 00:08:08,140
So choose the stack views that contain the two buttons and we're going to go ahead and say fill equally

131
00:08:08,570 --> 00:08:11,380
and that will make the buttons the same size which is pretty cool.

132
00:08:11,380 --> 00:08:18,100
So now when we run this we should see enter a value and you know what I just realized our text here

133
00:08:18,100 --> 00:08:22,190
should be centered and centered looks good.

134
00:08:22,480 --> 00:08:28,030
And now when we actually type in text it should be in Menlo font in white and it should say enter a

135
00:08:28,030 --> 00:08:29,170
value before we do that.

136
00:08:29,170 --> 00:08:33,730
So let's go ahead and let's build this to our simulator and let's see if that actually works out the

137
00:08:33,730 --> 00:08:34,350
way we want.

138
00:08:34,360 --> 00:08:36,940
I think we're pretty darn close to what I wanted.

139
00:08:36,940 --> 00:08:40,750
So let's let's do that let's pull up in the simulator here.

140
00:08:40,840 --> 00:08:48,260
Shrink it down a bit and it will be able to compare it to our design and see how we did so it's building

141
00:08:48,620 --> 00:08:49,260
opening.

142
00:08:49,310 --> 00:08:50,870
And let's see.

143
00:08:51,080 --> 00:08:51,590
OK.

144
00:08:51,860 --> 00:08:53,220
That looks pretty good.

145
00:08:53,630 --> 00:08:54,110
Nice.

146
00:08:54,110 --> 00:08:58,790
If we click on the text field here our number pad comes up and our values are centered.

147
00:08:58,820 --> 00:08:59,710
Very cool.

148
00:09:00,050 --> 00:09:07,490
The only thing is that the placeholder is black and it's not really that easy to adjust the color of

149
00:09:07,490 --> 00:09:13,370
the placeholder without using an attributed textfield So we're actually going to create an attributed

150
00:09:13,370 --> 00:09:16,140
placeholder in code because I find that to be a little easier.

151
00:09:16,340 --> 00:09:18,460
And we're going to set it in our view controller.

152
00:09:18,460 --> 00:09:23,810
So let's go ahead and let's link everything up to our view controller now.

153
00:09:24,230 --> 00:09:30,360
So open the assistant editor and go ahead and click on this to make sure we are connected here.

154
00:09:30,440 --> 00:09:32,350
Get rid of did receive memory warning.

155
00:09:32,360 --> 00:09:38,000
We don't need it and we're going to go ahead and create an outlet for the buttons.

156
00:09:38,030 --> 00:09:43,610
Each of the buttons and the textfield So let's do that first right click and drag from the text field

157
00:09:43,630 --> 00:09:46,200
and we'll call this value entry.

158
00:09:46,580 --> 00:09:50,090
Textfield Okay press connect to connect it.

159
00:09:50,420 --> 00:09:54,270
And then below that make one for each of the buttons right click and drag.

160
00:09:54,680 --> 00:09:57,600
We'll call this one binary button.

161
00:09:58,300 --> 00:09:58,910
OK.

162
00:09:59,330 --> 00:10:02,250
And we'll call this one decimal button.

163
00:10:04,570 --> 00:10:05,380
Cool.

164
00:10:05,480 --> 00:10:06,980
So now those are connected.

165
00:10:06,980 --> 00:10:13,430
We're going to need an Ivy outlet for the buttons so let's go ahead and right click and drag and create

166
00:10:13,430 --> 00:10:14,160
an action.

167
00:10:14,170 --> 00:10:18,800
I mean Iby action because it's basically a function that gets called when the button is pressed so we'll

168
00:10:18,800 --> 00:10:24,040
just say binary button was pressed and connect that.

169
00:10:24,420 --> 00:10:25,050
OK.

170
00:10:25,580 --> 00:10:29,680
Then below that create one for the decimal button right click and drag.

171
00:10:29,690 --> 00:10:37,350
Change it to action and say decimal button was pressed and then connected.

172
00:10:37,620 --> 00:10:39,020
So that's great.

173
00:10:39,020 --> 00:10:40,050
We're now connected.

174
00:10:40,100 --> 00:10:41,420
That's super nice.

175
00:10:41,420 --> 00:10:46,000
But we want our placeholder here to show up with white text.

176
00:10:46,100 --> 00:10:50,030
So to do that we're going to create a variable called placeholder.

177
00:10:50,030 --> 00:10:53,730
So go ahead and say well it can be a constant because it's not going to change.

178
00:10:53,750 --> 00:11:02,670
So Type let placeholder equals and the type we need to use is called an s attributed string k and n.

179
00:11:02,690 --> 00:11:04,220
Well let's see what it says.

180
00:11:04,370 --> 00:11:11,890
And N.S. attributed string is a string that contains associated attributes like a visual style hyperlink

181
00:11:11,900 --> 00:11:16,230
accessability data for portions of its text which is perfect for our placeholder.

182
00:11:16,290 --> 00:11:24,020
So put a parentheses here and we're going to go ahead and creates an attributed string from string with

183
00:11:24,020 --> 00:11:29,120
attributes K and there's a dictionary with all these keys that we're going to access so check it out.

184
00:11:29,150 --> 00:11:35,010
Push enter there and our string of course we want it to say enter a value dot dot dot.

185
00:11:35,420 --> 00:11:37,210
And now we need to give it some attributes.

186
00:11:37,220 --> 00:11:40,390
So create a dictionary by creating two square brackets.

187
00:11:40,490 --> 00:11:47,510
Put a colon in the center and we can just we can access all of these keys by typing s attributed string

188
00:11:48,440 --> 00:11:49,580
key.

189
00:11:49,580 --> 00:11:50,100
OK.

190
00:11:50,330 --> 00:11:56,960
Now we want to change the font and the colors so type dot and you'll see all these keys appear.

191
00:11:56,990 --> 00:12:04,400
Now the foreground color is for the font color so type and s distributed trng and then attributed.

192
00:12:04,730 --> 00:12:11,930
And this attributed string key foreground color K and the value for that key we can just use a color

193
00:12:11,930 --> 00:12:15,450
literal so type color literal and select it.

194
00:12:15,620 --> 00:12:19,280
And the cool thing is that it automatically chooses white from the beginning so we don't even need to

195
00:12:19,280 --> 00:12:20,510
click on it and change it.

196
00:12:20,510 --> 00:12:24,500
However if you wanted to you can double click and choose your own color.

197
00:12:24,500 --> 00:12:25,630
Very cool stuff.

198
00:12:25,910 --> 00:12:29,540
But we have one more value that's really important and that is the font.

199
00:12:29,540 --> 00:12:34,810
So Type A comma then type and as a tribute it's drinky font.

200
00:12:35,110 --> 00:12:38,670
Put a call in and we need to create an instance of UI font.

201
00:12:38,670 --> 00:12:40,440
So type you I font.

202
00:12:40,970 --> 00:12:47,090
And to create a UI font what we can do is we can basically give it a name and a size.

203
00:12:47,180 --> 00:12:53,750
And so we're going to go ahead and say UI font in net and for the name we're going to go ahead and type

204
00:12:53,750 --> 00:12:59,600
Menlo because that's the font we used and the size is of type C.G. float so we can type thirty six point

205
00:12:59,600 --> 00:13:01,070
zero.

206
00:13:01,460 --> 00:13:05,720
And now we don't actually need this init but sometimes it's easier to type that to access the functions

207
00:13:05,720 --> 00:13:09,560
if it's not properly auto completing so delete in net.

208
00:13:09,680 --> 00:13:13,590
And then in order to actually use a font you need to force on wrap it.

209
00:13:13,790 --> 00:13:14,970
There is a safer way to do it.

210
00:13:14,990 --> 00:13:21,140
But for now I know for sure that I have a font called Menlo and I know size 36 is fine.

211
00:13:21,140 --> 00:13:22,990
But now we have a placeholder.

212
00:13:23,040 --> 00:13:25,670
It's setup with a font and with a color.

213
00:13:25,670 --> 00:13:28,790
Now in order to set it all we have to do is go inside.

214
00:13:28,790 --> 00:13:37,670
You did load type value entry textfield placeholder like so and you'll see there are two options placeholder

215
00:13:38,000 --> 00:13:39,680
and attributed placeholder.

216
00:13:39,690 --> 00:13:45,350
Now we want attributed placeholder for one because it's of type and as attributed string and for two

217
00:13:45,440 --> 00:13:48,050
it just it won't work with placeholder because that's just a string.

218
00:13:48,060 --> 00:13:52,120
So attributed placeholder is going to be placeholder.

219
00:13:52,310 --> 00:13:55,490
And the one we just made now get rid of that comment.

220
00:13:55,580 --> 00:13:56,830
Let's build and run.

221
00:13:57,020 --> 00:14:01,170
And let's go check to see how that improved our placeholder.

222
00:14:01,220 --> 00:14:03,550
It should be white which is awesome.

223
00:14:04,810 --> 00:14:05,580
See.

224
00:14:05,640 --> 00:14:06,620
All right look at that.

225
00:14:06,690 --> 00:14:07,680
Very very cool.

226
00:14:07,680 --> 00:14:11,990
And now when we type it's good and we delete it goes back to our placeholder.

227
00:14:12,180 --> 00:14:18,090
There is one problem usually a placeholder is almost like a grayish color so that it seems a little

228
00:14:18,090 --> 00:14:19,920
darker than the text that's going into it.

229
00:14:19,920 --> 00:14:21,300
So you know it's a placeholder.

230
00:14:21,390 --> 00:14:25,150
So let's actually change it from white to like this lightish Gray.

231
00:14:25,260 --> 00:14:26,240
Let's build and run.

232
00:14:26,250 --> 00:14:27,690
And let's see how that looks.

233
00:14:27,690 --> 00:14:31,980
This is just a minor UI tweak it's not a big deal but I just kind of like it.

234
00:14:31,980 --> 00:14:32,180
OK.

235
00:14:32,190 --> 00:14:33,560
So it's kind of a gray area.

236
00:14:33,570 --> 00:14:37,820
And then when we type it's white and then we delete It's great.

237
00:14:37,840 --> 00:14:38,400
OK.

238
00:14:38,490 --> 00:14:41,100
That is what I want so very very cool.

239
00:14:41,130 --> 00:14:44,720
We have now built the user interface for application.

240
00:14:44,790 --> 00:14:49,520
We have also set it up so that our placeholder is white.

241
00:14:49,570 --> 00:14:53,290
It's Menlo font size 36 very very cool stuff.

242
00:14:53,310 --> 00:14:58,080
So now we're going to go ahead and set up our buttons because from the beginning our buttons should

243
00:14:58,080 --> 00:15:04,320
not be accessible because we have not put in a value and we're going to set them so that they are enabled

244
00:15:04,410 --> 00:15:06,050
when the value is in place.

245
00:15:06,060 --> 00:15:11,310
But first we need a way of monitoring what actually is happening in the text field.

246
00:15:11,370 --> 00:15:11,930
OK.

247
00:15:12,180 --> 00:15:16,650
Now to do that we're going to go ahead and add a target to our textfield.

248
00:15:16,860 --> 00:15:17,280
OK.

249
00:15:17,370 --> 00:15:21,620
Now Target is sort of like we're linking it to a particular function.

250
00:15:21,810 --> 00:15:25,950
And whenever the editing changes in our text field it's going to call that function.

251
00:15:25,950 --> 00:15:34,350
So go ahead and let's go ahead and interview did load type view or sorry value entry textfield dot add

252
00:15:34,350 --> 00:15:37,880
target and push enter.

253
00:15:37,920 --> 00:15:39,660
Now the target is self.

254
00:15:39,660 --> 00:15:44,630
Meaning this view controller the action is going to be a selector and this is where we call our function

255
00:15:44,640 --> 00:15:51,490
so type pound sign selector and we'll put the function name inside those parentheses in just a moment.

256
00:15:51,930 --> 00:15:59,340
But the control event is dot and you can see there's a lot of things here but we want editing changed

257
00:15:59,700 --> 00:16:04,470
anytime the text changes we want to call this function because we're going to make it so that the buttons

258
00:16:04,500 --> 00:16:05,730
are disabled.

259
00:16:05,850 --> 00:16:11,470
If there's no value and once we start typing they'll become enabled so we can actually click on them.

260
00:16:11,520 --> 00:16:13,550
So let's write that function now.

261
00:16:13,650 --> 00:16:14,160
OK.

262
00:16:14,400 --> 00:16:21,750
So we're going to call this function textfield text did change and I'm going to copy that so I can just

263
00:16:21,750 --> 00:16:26,320
use the name right here phunk textfield text did change.

264
00:16:26,790 --> 00:16:31,970
And just so you know with a target we need to expose this function to objective c code.

265
00:16:31,980 --> 00:16:35,310
That's just something that X code will yell at you about.

266
00:16:35,400 --> 00:16:38,700
And so just like that that error up there is going to go away.

267
00:16:39,090 --> 00:16:40,230
Very cool.

268
00:16:40,230 --> 00:16:45,720
And now what we need to do is we need to check to see hey if the text field is empty We're going to

269
00:16:45,720 --> 00:16:48,570
go ahead and enable the buttons.

270
00:16:48,570 --> 00:16:49,820
Otherwise we're going to disable them.

271
00:16:49,830 --> 00:16:58,290
So we're going to say if value entry textfield that text is equal to nothing if it's empty.

272
00:16:58,290 --> 00:17:06,040
We're going to go ahead and say binary button dot Well if it's empty meaning there's nothing there we

273
00:17:06,040 --> 00:17:10,820
want the buttons to be disabled so binary buttons isn't enabled.

274
00:17:11,090 --> 00:17:12,340
Equals.

275
00:17:12,410 --> 00:17:14,320
Equals false.

276
00:17:14,350 --> 00:17:23,560
OK then we're going to go ahead and type decimal button decimal button is enabled equals false.

277
00:17:23,560 --> 00:17:28,330
All right but this is not going to actually change their appearance in any way so I think would be cool

278
00:17:28,570 --> 00:17:32,040
if we sort of faded them down to maybe 50 percent opacity.

279
00:17:32,050 --> 00:17:34,310
So Type A binary button.

280
00:17:34,360 --> 00:17:39,730
Alpha equals zero point five and do the same thing for the decimal button.

281
00:17:39,760 --> 00:17:41,980
Alpha equals zero point five.

282
00:17:42,310 --> 00:17:47,430
Otherwise if there is text we're going to go ahead and just say that the buttons are enabled.

283
00:17:47,470 --> 00:17:53,880
However if they're enabled the alpha should be 100 percent right.

284
00:17:53,980 --> 00:17:56,340
So go ahead and type else.

285
00:17:56,830 --> 00:18:00,640
And I'm going to copy this because it's the same exact code that is going to change some of the values

286
00:18:00,640 --> 00:18:01,310
here.

287
00:18:01,570 --> 00:18:08,590
If there is text we're going to go ahead and say that the buttons are available to be pressed and the

288
00:18:08,620 --> 00:18:12,600
alpha or the opacity is going to be 100 percent.

289
00:18:12,610 --> 00:18:19,690
So every time our textfield changes it's going to go ahead and basically you know set the buttons to

290
00:18:19,690 --> 00:18:21,180
be disabled or enabled.

291
00:18:21,340 --> 00:18:25,610
And if you think about it when we open the application there are no values.

292
00:18:25,660 --> 00:18:28,390
So the buttons should be disabled by default.

293
00:18:28,570 --> 00:18:33,070
And so in order to do that I'm actually going to turn this into a function so I can call it here and

294
00:18:33,070 --> 00:18:35,960
call it here without needing to write the same four lines of code.

295
00:18:35,980 --> 00:18:44,470
So beneath this type phunk enable buttons and I'm going to copy that code in place and actually you

296
00:18:44,470 --> 00:18:51,460
know what that is the disable button code so lets type disable buttons then right phunk and enable buttons

297
00:18:52,900 --> 00:18:57,100
and copy the Enable buttons code into that function.

298
00:18:57,490 --> 00:19:02,890
And now we can say if the textfield is empty we want to disable buttons otherwise.

299
00:19:02,950 --> 00:19:05,120
Whoops.

300
00:19:05,140 --> 00:19:05,800
Here we go.

301
00:19:05,800 --> 00:19:07,620
Otherwise enable the buttons.

302
00:19:07,720 --> 00:19:11,470
And of course when the view loads we want to disable the buttons by default.

303
00:19:11,500 --> 00:19:12,750
So let's build and run.

304
00:19:12,790 --> 00:19:18,010
Let's make sure that our interface is looking good and that we can type in the text field and it will

305
00:19:18,070 --> 00:19:19,830
enable two buttons and disable them.

306
00:19:19,960 --> 00:19:24,330
Cool look at this so the buttons are now faded out and if I click on them they don't do anything.

307
00:19:24,340 --> 00:19:28,280
However if I type a value the buttons should become enabled.

308
00:19:28,540 --> 00:19:29,010
Look at that.

309
00:19:29,020 --> 00:19:34,120
They are so I can type a value I can tap on the buttons and now if I go back and there suddenly nothing

310
00:19:34,120 --> 00:19:37,420
in the textfield watch they're disabled.

311
00:19:37,420 --> 00:19:40,810
Very very cool I can't tap on them unless there there's a value.

312
00:19:40,810 --> 00:19:46,090
That's a really good way to safeguard against up you know potential errors in crashes.

313
00:19:46,090 --> 00:19:50,010
The buttons can't even be accessed unless there is a value in the textfield.

314
00:19:50,050 --> 00:19:51,050
Very very cool stuff.

315
00:19:51,060 --> 00:19:53,560
So our interface is now complete.

316
00:19:53,830 --> 00:19:58,510
Our textfield is set up our buttons are set up so in the next video we're going to go ahead and set

317
00:19:58,510 --> 00:20:04,960
up a class that's basically going to use our knowledge of binary and enable us to create binary values

318
00:20:04,960 --> 00:20:10,120
and perform all kinds of functions on them to convert binary to decimal and decimal to binary.

319
00:20:10,150 --> 00:20:12,580
Let's head over to the next video and let's get started now.