1
00:00:02,270 --> 00:00:06,700
This it was a good one.

2
00:00:06,730 --> 00:00:11,000
Mark it definitely overstock.com and I'm super excited to teach this lesson.

3
00:00:11,000 --> 00:00:15,120
This is the window shopper app and it's really the first full fledged app you're going to build.

4
00:00:15,350 --> 00:00:19,670
And we're going to build it as if a professional is building an app that's going to be published on

5
00:00:19,670 --> 00:00:21,020
the App Store or for company.

6
00:00:21,020 --> 00:00:24,270
And so we're going to consider all the little things that need to go into an app.

7
00:00:24,290 --> 00:00:25,650
And we're not going to cut any corner.

8
00:00:25,650 --> 00:00:31,220
So first things first is we've got a repo for this on bitbucket and I'm just going to go ahead and clone

9
00:00:31,790 --> 00:00:32,460
that.

10
00:00:32,480 --> 00:00:38,340
Or rather I'm going to create an X code project and then push that up as the remote for this repo so

11
00:00:39,170 --> 00:00:44,570
I'm going to go over to our X code make sure you have X cotinine open whether it's the beta or release

12
00:00:44,570 --> 00:00:51,110
version if it's released and create a new X code project single view app is what we are going to do

13
00:00:51,920 --> 00:00:58,190
and we're going to call this window shopper click next.

14
00:00:58,920 --> 00:01:08,150
And I'm going to place it right here now in my terminal LS CD window shopper is my project and I'm going

15
00:01:08,150 --> 00:01:13,160
to go ahead and get it to initialize as an empty get repository and then we're going to go ahead and

16
00:01:13,160 --> 00:01:22,160
do get remote ad origin and I'm going to paste in the Eurail for the repo on bitbucket and that's looking

17
00:01:22,160 --> 00:01:25,140
good and get status which is a bunch of red stuff now.

18
00:01:25,160 --> 00:01:25,900
Perfect.

19
00:01:25,910 --> 00:01:28,710
Get add Dash 8 add everything.

20
00:01:28,740 --> 00:01:33,090
Get commit Desch em first commit.

21
00:01:33,080 --> 00:01:39,260
Now what we're going to do is we're going to say get check out dash be lessons 0 1 and we're ready to

22
00:01:39,260 --> 00:01:39,920
go.

23
00:01:39,920 --> 00:01:50,190
So the idea behind this app is you see an item that you want to buy and you want to calculate how long

24
00:01:50,190 --> 00:01:52,440
it's going to take you to work to buy that item.

25
00:01:52,440 --> 00:01:57,450
So you know if your hourly wage was $10 an hour and you wanted an item that costs 100 dollars you're

26
00:01:57,450 --> 00:01:58,630
going have to work 10 hours to get it.

27
00:01:58,620 --> 00:02:02,710
So we want to run that math for the user and it's actually a really useful app.

28
00:02:02,730 --> 00:02:07,350
All I can think of many times and I would have liked to have had an app like this so let's just go ahead

29
00:02:07,350 --> 00:02:09,290
and get started and build it out.

30
00:02:09,930 --> 00:02:13,810
So first thing I like to do whenever working on a project is I like to grab the assets.

31
00:02:13,830 --> 00:02:20,550
OK so let's go to assets click that folder and then as you can see there's some Assa files here we're

32
00:02:20,550 --> 00:02:24,590
just going to copy these or rather select them all and drag them over here.

33
00:02:25,690 --> 00:02:26,440
Perfect.

34
00:02:26,720 --> 00:02:26,940
OK.

35
00:02:26,960 --> 00:02:28,200
There's our assets.

36
00:02:28,330 --> 00:02:32,470
And so the first thing we can start off right away is just building up the user interface Sometimes

37
00:02:32,500 --> 00:02:36,580
it's really hard to figure out where do I start not do I start with the data do I start with the functions

38
00:02:36,580 --> 00:02:37,470
that are underneath the hood.

39
00:02:37,480 --> 00:02:42,190
And if you can't think of what to do just jump on user interface because at least you should be doing

40
00:02:42,190 --> 00:02:44,820
something and this is this is kind of relaxing.

41
00:02:44,830 --> 00:02:46,900
Helps get your brain in the flow of the app anyway.

42
00:02:46,910 --> 00:02:49,750
So here's our view controller in the main storyboard.

43
00:02:49,900 --> 00:02:54,940
You know already as I'm looking at this is Buke controllers bothering me the name of it because it doesn't

44
00:02:54,940 --> 00:02:56,350
represent anything.

45
00:02:56,380 --> 00:03:02,490
So let's actually on this folder here let's go to a new group and we're going to call this abuse or

46
00:03:02,500 --> 00:03:05,530
excuse me controller if you think why.

47
00:03:05,590 --> 00:03:06,290
Why.

48
00:03:06,670 --> 00:03:10,700
You see that are we going there like versus you know your interface but then the switch over there and

49
00:03:10,720 --> 00:03:15,950
what I'm doing is I'm building on a project like I would really build that out as I'm developing it

50
00:03:15,980 --> 00:03:17,440
as I see things that I want to fix.

51
00:03:17,440 --> 00:03:18,300
I want to fix them.

52
00:03:18,310 --> 00:03:18,810
OK.

53
00:03:18,910 --> 00:03:23,140
So what you're seeing is Mark Price's real development experience I don't have these all listed out

54
00:03:23,140 --> 00:03:23,830
and a bunch of steps.

55
00:03:23,830 --> 00:03:25,590
Do this do this do this teach this teach.

56
00:03:25,600 --> 00:03:28,000
No I have the app that we just built.

57
00:03:28,000 --> 00:03:28,920
The teacher version of it.

58
00:03:28,930 --> 00:03:31,120
And now we're going through as if I'm really building an app.

59
00:03:31,120 --> 00:03:37,360
So first things first is let's drag and drop this controller controller to swift into the controller

60
00:03:37,360 --> 00:03:38,100
folder.

61
00:03:38,560 --> 00:03:39,800
And then once in here.

62
00:03:39,940 --> 00:03:40,990
OK.

63
00:03:41,110 --> 00:03:46,690
Right click the View Controller and go to rename and we're going to call this main Visi for main view

64
00:03:46,690 --> 00:03:49,350
controller a save this.

65
00:03:49,420 --> 00:03:53,920
Now go into my main storyboard here and we know that we're going to need an image as a background here

66
00:03:53,920 --> 00:03:59,080
so I'm going to type an image here at the bottom right beside the object library and well I'm just going

67
00:03:59,080 --> 00:04:00,610
to make this full screen here.

68
00:04:00,700 --> 00:04:02,450
We're just going to support iPhone in this app.

69
00:04:02,470 --> 00:04:05,290
We will do constraints but we're not going to support iPad.

70
00:04:05,300 --> 00:04:09,760
And so all those constraints as well and what we're going to do is we're an opinion from each of the

71
00:04:09,760 --> 00:04:13,320
corners here make sure that constrain the margins is off.

72
00:04:13,450 --> 00:04:18,410
Click add for constraints and on the image we're going to select window shop or Biji.

73
00:04:18,640 --> 00:04:24,050
And even though it's OK in the right aspect ratio right now I am going to change this to aspect.

74
00:04:24,040 --> 00:04:29,230
Fill in the case that it did go to i-Pad we would want to make sure that it doesn't stretch it to fill

75
00:04:29,230 --> 00:04:31,670
up in the proper aspect ratio.

76
00:04:31,750 --> 00:04:33,520
So that's looking good.

77
00:04:33,820 --> 00:04:34,300
Not bad.

78
00:04:34,300 --> 00:04:39,980
We've got a logo here and two textfiles we got a place it's pretty small so not that many controls.

79
00:04:40,140 --> 00:04:43,150
So let's go ahead and throw another image to you on here.

80
00:04:43,150 --> 00:04:47,300
Put it like so and let's select the image we'll say window shopper icon.

81
00:04:47,320 --> 00:04:48,370
Of course it's stretched.

82
00:04:48,430 --> 00:04:56,350
So let's go to Aspect fit and then we'll just scale well eyeball it doesn't have to be perfect I'm going

83
00:04:56,360 --> 00:05:00,770
to put it right about there because I know there's going to be a status bar up here or there.

84
00:05:00,990 --> 00:05:02,120
OK.

85
00:05:02,350 --> 00:05:03,320
Looks good to me.

86
00:05:03,460 --> 00:05:06,870
And we can bring these in here slightly.

87
00:05:06,880 --> 00:05:08,590
We don't need all this extra space.

88
00:05:08,590 --> 00:05:09,730
There you go.

89
00:05:10,360 --> 00:05:11,450
That's fine.

90
00:05:11,950 --> 00:05:12,670
Ok cool.

91
00:05:12,670 --> 00:05:18,030
I'm going to click the pin button here and I'm going to go ahead and give it a fixed width and height

92
00:05:18,640 --> 00:05:20,350
and this should be square.

93
00:05:20,350 --> 00:05:24,230
This would be my guess 60 by 60.

94
00:05:25,400 --> 00:05:26,990
Yeah it looks good.

95
00:05:27,010 --> 00:05:33,160
So 60 by 60 and from the height let's say 35 from the top I'm going to click Add three constraints and

96
00:05:33,160 --> 00:05:36,720
then I'll click the align menu here and we will just horizontally in container.

97
00:05:36,910 --> 00:05:40,450
So it's going to stay right there in the middle and looks great.

98
00:05:40,450 --> 00:05:41,460
Now these are two controls.

99
00:05:41,470 --> 00:05:42,480
Are you high tech svelt.

100
00:05:42,490 --> 00:05:44,290
So this was typed in the word text.

101
00:05:44,320 --> 00:05:46,690
You'll see a text field and text view.

102
00:05:46,690 --> 00:05:48,210
Let's do the textfield one.

103
00:05:48,310 --> 00:05:55,060
And what I'm going to do is change this from this rounded one to just this one with the dot dot dots

104
00:05:55,060 --> 00:05:55,500
on it.

105
00:05:55,660 --> 00:05:56,320
OK.

106
00:05:56,740 --> 00:06:02,260
And let's move it out move it out and you know this is kind of hard to work with.

107
00:06:02,260 --> 00:06:06,130
We've got some settings we can say yeah we can change the font color.

108
00:06:06,170 --> 00:06:08,830
You know maybe set a background color on here.

109
00:06:09,190 --> 00:06:12,280
If we look at our image here it has quite a few custom things on it.

110
00:06:12,280 --> 00:06:17,410
For instance the background on here it's kind of like all white with an opacity.

111
00:06:17,410 --> 00:06:21,760
And then we got some white text that centered for the placeholder and then it's got rounded corners

112
00:06:21,760 --> 00:06:22,240
and stuff.

113
00:06:22,240 --> 00:06:27,310
And we want this to be reusable and imagine if you wanted a textfield just like this across multiple

114
00:06:27,310 --> 00:06:27,610
apps.

115
00:06:27,610 --> 00:06:30,010
We wouldn't want to be setting all this stuff in Interface Builder.

116
00:06:30,240 --> 00:06:36,400
And so you're going to start coming to find that writing code writing custom classes for views in code

117
00:06:36,400 --> 00:06:38,390
is very important because you can reuse these.

118
00:06:38,410 --> 00:06:43,090
And if you want to make them really shine you can clean them up and then put them in their own framework

119
00:06:43,690 --> 00:06:46,290
or unbundle or there's many different ways of packaging.

120
00:06:46,300 --> 00:06:50,710
And then you could redistribute it or maybe even make it like a cocoa pod and make it available to other

121
00:06:50,710 --> 00:06:53,250
people to install in their project.

122
00:06:53,620 --> 00:06:57,580
So I think we're going to need to write some custom code for this background so let's go ahead to getting

123
00:06:57,580 --> 00:06:58,570
started doing that.

124
00:06:59,640 --> 00:07:06,100
First let's go ahead and create a new folder or group and we're going to call this use.

125
00:07:06,150 --> 00:07:08,370
Sometimes I wonder why they call it groups.

126
00:07:08,520 --> 00:07:13,920
Because like like Windows or Microsoft has a patent on the word folder and the X code can't say the

127
00:07:13,920 --> 00:07:14,970
word folder if there's a group.

128
00:07:14,970 --> 00:07:16,890
I don't know it's really weird.

129
00:07:16,890 --> 00:07:19,970
And in the views here somebody research that and get back to me.

130
00:07:21,190 --> 00:07:28,710
Use new file and we're going to go ahead and do a Kokoo touch class and we want to inherit from textfield.

131
00:07:28,790 --> 00:07:35,090
So let's call this currency tech Zale because we wanted to show currency.

132
00:07:35,120 --> 00:07:35,620
All right.

133
00:07:35,690 --> 00:07:39,080
You know because a wage is currency and item price is currency.

134
00:07:39,100 --> 00:07:39,610
OK.

135
00:07:39,650 --> 00:07:45,690
And so class of UI textfield that looks good.

136
00:07:47,100 --> 00:07:54,870
Just click create wonderful OK I'm going to get rid of this for now.

137
00:07:55,050 --> 00:08:02,160
The straw boiler boilerplate code code and what we want to do is we want to make it so it looks really

138
00:08:02,160 --> 00:08:05,630
nice when you're on the app.

139
00:08:05,640 --> 00:08:10,320
So we want it to have the white background etc. so what we'll do is we'll just do the Awake from NIB

140
00:08:10,320 --> 00:08:12,900
function call super awake from it.

141
00:08:12,900 --> 00:08:18,780
So basically when this textfield comes up from the interface builder file when the app is loaded it

142
00:08:18,780 --> 00:08:19,670
will run this code.

143
00:08:19,800 --> 00:08:20,460
OK.

144
00:08:20,760 --> 00:08:23,670
And so we're going to use your programmatically So this can be reused.

145
00:08:23,670 --> 00:08:28,410
Again we don't want to have to go into every control interface builder and then click and drag and type

146
00:08:28,410 --> 00:08:29,220
stuff.

147
00:08:29,330 --> 00:08:31,280
It's a lot of extra work we want it to be reusable.

148
00:08:31,440 --> 00:08:37,580
And so let's do it the right way which is with code sort of say background color.

149
00:08:37,680 --> 00:08:39,440
I know because I talked to a designer.

150
00:08:39,440 --> 00:08:44,140
In fact I asked him was like hey man this these textfield here bro.

151
00:08:44,290 --> 00:08:45,200
OK.

152
00:08:45,300 --> 00:08:48,610
Like what are they what's the color and opacity and he told me Yeah these are white text.

153
00:08:48,630 --> 00:08:52,120
So the pure white and they're only 25 percent opaque.

154
00:08:52,200 --> 00:08:54,360
And so I know what to set it as now.

155
00:08:54,360 --> 00:08:59,330
So that's why I know what we're going to put in here and what we're going to do is we are going to say

156
00:08:59,340 --> 00:09:05,910
background color equals start typing the word color and you can see this color literal and you literally

157
00:09:06,930 --> 00:09:09,080
all you have to do on this is click it.

158
00:09:09,510 --> 00:09:10,840
And you got a color literal.

159
00:09:10,860 --> 00:09:15,600
And what we're going to do is I'm going to click other we're going to set it to white and then we're

160
00:09:15,600 --> 00:09:22,170
going to use that opacity to 25 percent and magically you can now set colors in here.

161
00:09:22,160 --> 00:09:23,130
Isn't that pretty cool.

162
00:09:23,380 --> 00:09:26,650
Let me just show you how they did it in the past you know in the past you might have to do something

163
00:09:26,650 --> 00:09:27,310
like this.

164
00:09:27,330 --> 00:09:32,240
You color and then you know let's say.

165
00:09:32,560 --> 00:09:34,440
RGV I have to have it said you know.

166
00:09:34,460 --> 00:09:37,570
Twenty five point zero divided by two fifty five point zero.

167
00:09:37,660 --> 00:09:40,120
And then you'd have to do that for all these other values here.

168
00:09:40,220 --> 00:09:43,870
You no longer have to do that if you just want to color all you have to do is a color literal and you

169
00:09:43,870 --> 00:09:46,600
can insert it right here in the code which is trippy right.

170
00:09:46,630 --> 00:09:49,240
But at runtime it knows exactly what that is so.

171
00:09:49,240 --> 00:09:50,150
Very cool stuff.

172
00:09:50,170 --> 00:09:52,660
X code is becoming even more visual.

173
00:09:52,660 --> 00:09:56,980
Maybe one day I'll be drag and drop code that will be interesting.

174
00:09:56,980 --> 00:10:03,230
So cool so we've just set the background color so it's white with a little bit of transparency.

175
00:10:03,370 --> 00:10:06,280
And let's go ahead and set the radius of the corners.

176
00:10:06,280 --> 00:10:12,140
We've done this in the past layered up corner radius equals five point zero.

177
00:10:12,280 --> 00:10:16,430
We need to set the text alignment of the text so it's in the center instead of at the left.

178
00:10:16,570 --> 00:10:18,080
OK.

179
00:10:18,310 --> 00:10:21,100
And just to show you save it here.

180
00:10:21,100 --> 00:10:29,170
So we have text here so if I was to say you know $13 it's over there on the left hand side and it's

181
00:10:29,170 --> 00:10:31,560
black too which isn't the right color.

182
00:10:31,600 --> 00:10:34,390
And then of course placeholder text important to you know wage.

183
00:10:34,420 --> 00:10:37,190
And that's also a gray and that's not what we want.

184
00:10:37,240 --> 00:10:41,030
So we've got to fix a few things that are there by default.

185
00:10:41,620 --> 00:10:48,430
So no big deal here in the Awake from NIB function so text alignment is going to be equal to dot center

186
00:10:48,760 --> 00:10:49,740
to center.

187
00:10:50,230 --> 00:10:54,980
And then what we'll do is we'll say we need to set a placeholder text instead of custom color on it.

188
00:10:54,990 --> 00:11:00,760
And there's no way of doing that from the standard placeholder so we have to use no matter what we have

189
00:11:00,760 --> 00:11:02,890
to use code if we want to set the color on a placeholder.

190
00:11:02,890 --> 00:11:03,960
That's a fact.

191
00:11:03,970 --> 00:11:11,620
So what we're going to do is we're going to say if placeholder equals Neil OK so placeholder is a property

192
00:11:11,620 --> 00:11:15,010
of the textfield That's why I have access to it and that's why it's purple.

193
00:11:15,010 --> 00:11:20,890
So if it's nyl there's nothing in it then let's just go ahead and set it to an empty string and you'll

194
00:11:20,890 --> 00:11:21,690
see why in a minute here.

195
00:11:21,700 --> 00:11:24,120
But what we needed to do is initialize it with an empty string.

196
00:11:24,120 --> 00:11:26,400
Otherwise we can set a color on it.

197
00:11:26,400 --> 00:11:32,320
And so what we're going to do is create a variable called or constant called Place equals and this attribute

198
00:11:32,320 --> 00:11:33,540
ID string.

199
00:11:33,880 --> 00:11:42,350
And we want the one that has string and attributes like so and the string is going to be placeholder.

200
00:11:42,790 --> 00:11:44,830
And then the attributes.

201
00:11:45,010 --> 00:11:57,310
OK the attributes are going to be for ground color type color white like so or we could have also done

202
00:11:57,310 --> 00:12:02,440
the color literal either way like so.

203
00:12:02,890 --> 00:12:03,160
OK.

204
00:12:03,160 --> 00:12:07,110
Now here's word this this checks coming into place.

205
00:12:07,130 --> 00:12:09,750
So notice how on this and attribute it string.

206
00:12:09,790 --> 00:12:12,800
I'm using the implicitly unwrapped optional.

207
00:12:12,840 --> 00:12:14,300
Or basically I'm force.

208
00:12:14,380 --> 00:12:18,510
Excuse me I'm for's unwrapping this optional so placeholder is optional.

209
00:12:18,520 --> 00:12:20,470
There may be a value in that there may not be.

210
00:12:20,470 --> 00:12:25,750
So if I had not set it to this empty string if it's empty this would have crashed our program because

211
00:12:25,750 --> 00:12:27,640
we're forced unwrapping and optional.

212
00:12:27,640 --> 00:12:35,560
So always always know that if you're going to unwrap something it has to have data in it beforehand

213
00:12:35,560 --> 00:12:37,400
so this is our safety check right here.

214
00:12:37,540 --> 00:12:39,040
And a lot of people will miss that if you like.

215
00:12:39,040 --> 00:12:40,220
Mark where are you doing this.

216
00:12:40,250 --> 00:12:41,610
That's improper practice.

217
00:12:41,620 --> 00:12:46,390
It's not improper practice so long as you're initializing it like so here.

218
00:12:46,540 --> 00:12:49,760
OK we also could have started and another variable name and then ran that instead.

219
00:12:49,780 --> 00:12:51,270
But this is just fine here.

220
00:12:51,670 --> 00:12:52,160
OK.

221
00:12:52,300 --> 00:12:56,470
So here's our attribute of string and what we're doing is we're setting the property foreground color

222
00:12:56,470 --> 00:13:00,160
on it so the foreground color is what's going to make it white OK.

223
00:13:00,160 --> 00:13:03,940
There's many different things you can do with attribute of strings you can do you know declaration of

224
00:13:03,940 --> 00:13:05,980
there's an underline or strikethrough on it.

225
00:13:05,980 --> 00:13:10,270
Basically you can do all kinds of cool all the cool stuff you see with text on the Internet like with

226
00:13:10,270 --> 00:13:15,670
web development you can do here in Iowa with attributes strings which has a little bit more features

227
00:13:15,670 --> 00:13:18,200
than the regular standard string can.

228
00:13:18,310 --> 00:13:21,760
And then what we're going to do is we're going to attribute a placeholder.

229
00:13:21,760 --> 00:13:27,310
This is a property of the UI textfield people's play so we're going to set it to the attribute of string

230
00:13:27,310 --> 00:13:28,160
we just created.

231
00:13:28,330 --> 00:13:28,920
OK.

232
00:13:29,260 --> 00:13:35,290
So again this is if this is set here it will override the regular placeholder.

233
00:13:35,310 --> 00:13:35,540
OK.

234
00:13:35,560 --> 00:13:39,860
It will overwrite it and it will use this one instead to read a placeholder.

235
00:13:39,880 --> 00:13:40,400
All right.

236
00:13:40,630 --> 00:13:42,900
And then lastly let's set the text color.

237
00:13:42,910 --> 00:13:46,620
This is a property of the UI textfield or just setting the standard colors.

238
00:13:46,630 --> 00:13:52,270
We set the placeholder color but with the regular text color it does have a property and all we have

239
00:13:52,270 --> 00:13:55,400
to do is do that color literal literal again.

240
00:13:55,480 --> 00:14:02,560
So if you're of equal sign or go color literal and white White's defaults that works great for us.

241
00:14:02,560 --> 00:14:02,850
OK.

242
00:14:02,860 --> 00:14:05,650
So this all looks good here.

243
00:14:06,730 --> 00:14:10,570
You know that our changes aren't noticed and are reasonable here but let's see if they actually are

244
00:14:10,570 --> 00:14:11,680
noticeable when we run it.

245
00:14:11,680 --> 00:14:17,790
So the first thing we need to do is select our textfield here and change the class to a currency textfield.

246
00:14:19,420 --> 00:14:19,760
All right.

247
00:14:19,780 --> 00:14:26,950
And then I've changed it to an iPhone 7 simulator and I'm just going to run it it's yelling at us here

248
00:14:27,070 --> 00:14:31,530
because this was supposed to be a space just adding a space character.

249
00:14:31,660 --> 00:14:37,660
So if it's Neil let's add a space character just so it can run because they reduce the real use cases

250
00:14:37,660 --> 00:14:40,120
it's actually going to have a placeholder in it.

251
00:14:40,120 --> 00:14:42,090
So there we go.

252
00:14:42,180 --> 00:14:43,230
So it's up and running just fine.

253
00:14:43,230 --> 00:14:46,670
It looks great actually it looks just like we would expect it to look.

254
00:14:46,780 --> 00:14:50,980
We should probably put some text in there to see just make sure everything is doing what it supposed

255
00:14:50,980 --> 00:14:55,040
to do and maybe let's just write one quick refactor.

256
00:14:55,180 --> 00:15:01,170
So this works and we're adding a space in here but we can I think write some a little bit better code.

257
00:15:01,250 --> 00:15:03,670
And so what we can do here let's close this here.

258
00:15:04,900 --> 00:15:11,440
Want to do is basically check if placeholders Neal and if it is then in any case we will just use a

259
00:15:11,440 --> 00:15:14,310
temporary variable to set an attribute string like so.

260
00:15:14,320 --> 00:15:30,140
So what we'll do is we'll say if let us say p equals say placeholder like so we'll do an if statement

261
00:15:30,140 --> 00:15:37,140
here and we'll do it we will commence X command paste here OK.

262
00:15:37,330 --> 00:15:43,840
And instead of saying placeholder exclamation point now we'll say p ok because it will never even get

263
00:15:43,840 --> 00:15:44,380
in here.

264
00:15:44,410 --> 00:15:46,310
If if it's.

265
00:15:46,320 --> 00:15:50,410
And now we can actually get rid is what we don't even have to insert the empty space.

266
00:15:50,410 --> 00:15:52,680
And I think this is a little bit more elegant solution.

267
00:15:52,690 --> 00:15:53,890
What we did was we wrote some code.

268
00:15:53,980 --> 00:15:57,700
We tested it worked but then we thought of a better solution and we refactored it.

269
00:15:57,700 --> 00:16:00,330
And this is a very common practice in Iowa development.

270
00:16:00,370 --> 00:16:01,500
So if let p.

271
00:16:01,510 --> 00:16:02,550
So this is the text.

272
00:16:02,560 --> 00:16:02,970
OK.

273
00:16:03,010 --> 00:16:04,060
Equals placeholder.

274
00:16:04,090 --> 00:16:08,440
So if it's Neil none of this will run but if it's not Neal then we'll go ahead and make it and attribute

275
00:16:08,440 --> 00:16:10,440
it string like so.

276
00:16:10,450 --> 00:16:14,030
So let's go out and run this again and make sure it's doing what it's supposed to be doing.

277
00:16:18,430 --> 00:16:19,430
OK perfect.

278
00:16:19,480 --> 00:16:21,360
It's doing exactly what we want.

279
00:16:21,370 --> 00:16:22,960
No crashes.

280
00:16:22,960 --> 00:16:24,740
We've written a better application now.

281
00:16:24,820 --> 00:16:31,240
So one more thing I want to do is go to the main storyboard here and let's just Center this like so

282
00:16:31,840 --> 00:16:36,010
and then what I want is to put some text in it just to make sure it's all.

283
00:16:36,040 --> 00:16:42,100
It all looks correctly so or at least placeholder text so what did the what did the market image say.

284
00:16:42,100 --> 00:16:49,360
I said your hourly wage so placeholder text will say your hourly wage.

285
00:16:49,890 --> 00:16:50,570
OK.

286
00:16:50,980 --> 00:16:54,290
Notice here it's on the left hand side but at runtime it should be in the center

287
00:16:58,830 --> 00:16:59,660
perfect.

288
00:16:59,670 --> 00:17:02,000
So a couple of things.

289
00:17:02,520 --> 00:17:03,950
This is really annoying right.

290
00:17:03,960 --> 00:17:07,450
You probably seen this a lot before but at runtime it looks great.

291
00:17:07,560 --> 00:17:09,700
But here in Interface Builder it looks awful.

292
00:17:09,930 --> 00:17:13,980
And if you're working an interface builder a lot it really stinks that you have to pretend in your mind

293
00:17:13,980 --> 00:17:15,330
what it's going to look like.

294
00:17:15,420 --> 00:17:18,800
And so what I'm going to do in the next video is I'm going to blow your mind.

295
00:17:18,960 --> 00:17:23,870
I'm going to show you how you can get Interface Builder looking exactly like it looks at runtime.

296
00:17:24,000 --> 00:17:27,000
So you never get to be like oh what's it going to look like we're doing position.

297
00:17:27,030 --> 00:17:27,440
No.

298
00:17:27,540 --> 00:17:28,410
We'll make it look good.

299
00:17:28,410 --> 00:17:29,520
So that's it for now.

300
00:17:29,520 --> 00:17:33,690
Stay tuned for the exciting next episode Mark Price here at Def slopes dot com.

301
00:17:33,780 --> 00:17:34,400
So you assume.