Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Now that our model is refactored, let's add a text field to our app so that users can input their names.
-
0:00
With our model reconfigured to accept a name value,
-
0:03
the next thing we need to do is allow the user to input their name in the app.
-
0:08
To do that, we're going to add a text field to the main page.
-
0:12
Since this is the main view, the one we configured using a storyboard,
-
0:16
let's continue there rather than adding it programatically.
-
0:19
So in the main.storyboard file with the first view controller selected.
-
0:25
Go to the object library in the utilities area and
-
0:28
we're going to drag out a text field component and place it in the main view.
-
0:35
Let's give it a few constraints to position it.
-
0:37
Now I might need to zoom in so that you can see this better.
-
0:41
I'm going to position this 24 points on either side from the main view
-
0:45
from the margins.
-
0:47
So from the add new constraints menu,
-
0:49
we'll select the left and right constraints and we'll specify those as 24.
-
0:54
I also want to put it 40 points above the start adventure button.
-
0:59
So I'll click the bottom constraint I'll say 40.
-
1:02
We'll add these 3 here and then over in the align menu,
-
1:06
I'm going to specify that I want to horizontally center this in the container,
-
1:12
add the constraint and finally to resolve all this ambiguity,
-
1:16
we'll hit the update frames button, there we go.
-
1:19
I should point out that while we're laying out things using auto layout
-
1:24
we're still specifically designing for the larger iOS devices.
-
1:27
If you go ahead and look in the iPhone SE simulator for
-
1:30
example, you'll see that this layout does not work at all on the smaller sizes,
-
1:35
and this is a pretty bad error.
-
1:37
Our layouts should always look good on all devices.
-
1:40
But we don't know sufficient Auto Layout concepts just yet.
-
1:44
We will in the future, though.
-
1:45
And once we have that down, we'll start designing for most if not all screens.
-
1:50
Okay, let's run the app and make sure that our text field looks good.
-
1:54
Okay, so we have an error here,
-
1:55
it says, cannot assign value of type String Page to tie page.
-
2:01
Since we're trying to run the app, we need to resolve this error here.
-
2:04
We change the story computed property Adventure to be a function now that
-
2:08
takes a name.
-
2:10
So let's call that for the time being and pass in a temporary hardcoded value.
-
2:15
Okay, let's run this.
-
2:18
Our text field looks good and you might not be able to see clearly on mine, but
-
2:21
it's right here.
-
2:22
There are a couple different ways we can interact with the text field.
-
2:26
The simplest way is to create an outlet and poke at the properties that we need.
-
2:31
UI text field, the backing class,
-
2:34
has a text property that stores any of the text that the user types into the field.
-
2:39
You should know, though, that this class is a lot more powerful than that and
-
2:43
can even send streaming updates to anyone listening.
-
2:47
We can figure out what the user is typing when the user is typing it
-
2:51
when they press the Delete key, and much more.
-
2:53
Now all that is too complex for our use cases, so we're going to keep it simple,
-
2:58
and just create an outlet.
-
3:00
So we'll go back to the main.storyboard file,
-
3:04
select the main view control, here the entry point.
-
3:08
Go to the assistant editor.
-
3:11
So we have the right file here only more room and
-
3:14
up of the top will create an output.
-
3:17
So control drag from the text field over and
-
3:21
we'll call this nameTextField, pretty simple.
-
3:27
Now that we have a text field and our model requires a name.
-
3:30
We can't start the story without a name.
-
3:33
So instead if someone does try to do that,
-
3:35
hit start adventure without providing a name will go ahead and throw an error.
-
3:40
So let's go back to the Page.swift file.
-
3:45
And in here let's add a new error type up at the very top
-
3:49
to model errors that can arise in our interactive adventure.
-
3:53
So we'll say enum AdventureError and this is going to be of type Error.
-
4:00
And it's going to be super simple we'll just have one case name, nameNotProvided.
-
4:08
Now we can through the name not provide an error if the user doesn't enter a name but
-
4:13
tries to hit started venture.
-
4:15
There's one issue don't only go to the point where this would happen.
-
4:19
Be prepared for Segue method.
-
4:22
This is where the user taps the start of venture button and we make that check.
-
4:26
The issue is that this method is not a throwing one
-
4:29
which means that we cannot propagate the error if it's thrown within here.
-
4:33
That's okay though, we don't want to propagate it.
-
4:36
We're simply going to handle the error right as it is thrown.
-
4:40
So we'll check to see if a name is provided when the user
-
4:44
hits the start adventure button and
-
4:46
then we'll figure out what we do in the event that it's right and wrong.
-
4:50
So right in here, so if the Segue is the start of venture segue,
-
4:56
what's not to do clause rather we'll do this right here.
-
5:02
So I'll say do and then first we unwrap the text property
-
5:06
using an if let statement, the text property on the name text field.
-
5:10
So we'll say if let name equal.
-
5:14
So remember that the user is going to type their text into the name text field.
-
5:18
So whatever we're trying to get this name that we want to check,
-
5:22
whether it exists or not before we run our adventure.
-
5:25
It's going to be in the text property on the name text field.
-
5:28
So we'll say if that name equal nameTextField.text and
-
5:33
open the body of the if let statement.
-
5:36
Now UI TextField text property is an optional property and
-
5:40
you can see that if you click here, it's an optional string.
-
5:43
So we need to unwrap this but
-
5:45
there's an annoying thing in that it also defaults to an empty string.
-
5:49
So at this point the string is empty so
-
5:52
we can't just assume that we have a name in here.
-
5:55
So what we need to do after we unwrap it is
-
5:58
check to see if it's just an empty string.
-
6:01
So if name equal an empty string, then the user hasn't typed a name.
-
6:07
So if this is the case we throw the adventure
-
6:13
error in the nameNotProvided case.
-
6:16
Now I need to put a double equals here.
-
6:19
Okay, so if this doesn't happen, then else will execute our segue code.
-
6:25
So I'll copy this, the page controllers segueing section where we assign the name,
-
6:32
and we'll put that inside the else clause,
-
6:34
except now instead of hard coding a name we have a name we can use.
-
6:41
Now we'll have one more error in here.
-
6:43
And when you click it it says the error is not
-
6:47
handled because this enclosing function is not declared as a throwing one.
-
6:51
That's okay.
-
6:53
For now we're going to add an empty catch block which should be right here.
-
6:57
So we'll say catch let error and we'll take a break here.
-
7:02
In the next video, we'll try and fix this error.
You need to sign up for Treehouse in order to download course files.
Sign up