Hey buddy this is Caleb with Deb's Lopes dot com and in this video we're going to continue in our project
our our next name or app.
And so I'm going to go ahead and pull up in my simulator here just to remind you what we've done so
far.
We have basically created an app that we can type in values to a text field and the UI label above reacts
to the data going in K and real time.
That's about all we've done.
Nothing super impressive.
But in this video we're going to basically set up another asynchronous stream and other observable.
And when we press submit we're going to go ahead and add values to that and present them down here below
in the UI label down here.
So let's go ahead let's minimize that and let's pull open our X code project like so.
And as you remember this is what our code looks like I'm going to go ahead and stop that from running.
So we don't waste resources and you don't what we're going to do is we're going to create a names array.
But we're going to use the Eric swift variable type in order to hold those.
So go ahead and below your disposed bag go ahead and type var names array.
And we're going to make this of type variable.
Now that's the swift variable type.
And if you remember a variable type needs an explicit swift type to go with it.
So we're going to go ahead and create some brackets and this variable is going to be of type array and
that array is of type string.
Now we're going to go ahead and instantiate it from the get go.
So go ahead and type equals and type variable.
Give it some parentheses and inside of those print the C's just set it to be empty right.
Very cool.
So now what we can do is we can take and we can set up our bind function to include something for the
submit button.
Now if you go back to main storyboard this Submit button here is linked to this IB outlet.
OK.
Now you're probably thinking to get the button to do something.
We should use an IB action and you can it with Eric Swift.
We can do something that's actually even cooler.
So let's go ahead let's actually create a separate function.
Let's call this bind textfield and below let's create a function called bind maybe bind the submit button
would be a little more descriptive.
Very good.
So now whoops we need to fix our function here.
Bind textfield.
There we go.
OK.
So now we can do is we can call submit button and we can access re-active properties of AUI button.
So check this out submit button x and we can go Dot tap.
And now every time our button is tapped we can call subscribe and do something when the button is tapped.
How cool is that.
So go ahead and on the submit button.
Are X-Com tap call that subscribe.
And you'll notice sometimes that doesn't pop up with the proper options.
But we're going to go ahead and just call on next.
Give a colon there and then some curly braces.
And now inside of this subscribe block every time we tap the button the code inside here will be called.
So what we want to do is we want to set up our button to basically take the the name value that's in
the text field we want to add it to our name array and then we want to go ahead and display the text
from that array in the label below.
So what we're going to do first is we're going to go ahead and type if self name entry text feel text
is not equal to an empty string meaning if there's text what we're going to do is we're going to go
ahead and call self names array which is of type variable which is an array of type String kind of nested
types.
They're pretty interesting.
And what we can do is type datt append what you're noticing.
Why can't I append values there.
It's not letting me call Dom append and that's because we can't append things like we can to an array
on a variable type.
So we need to actually access the array inside the variable and to do that we call names array value
and you'll see value is of type array of type string or it is an array of type string.
So we call self names or a value and now we can call append and let's append whatever is in the textfield.
So go ahead and type self name entry textfield text.
And since it's coming from a text field the string property is optional.
But since we've already verified that we do have text coming in we can go ahead and force and wrap it
safely.
So now what we've done is we have added the name typed in the text field into our array.
So now what we need to do is we need to call on next on the names label which is down at the very bottom
with no data.
We need to call the next property of that and pass in whatever the names or raise value is.
Ok I'll show you what I mean.
So below this.
Go ahead and type self names label.
There it is.
And we need to go into our X property are X we can access the text property which you can see is of
type UI binding observer.
And with that we can go ahead and call on next.
All right.
And what we're going to do is we're going to pass it the names array.
So go ahead and call self names array.
And remember to get the actual array.
We need to call that value.
But at this point it would just print an array with the brackets and the quotes and the commas.
We don't want that we just want to show the name and we want to actually probably show like a list right.
If I added two names we would want to see just the name maybe Bob comma space.
CHRIS comma space Julie right we want to see all the values but we want to make it in a nice friendly
visual way.
And so what we can do is on an array we can call the DOT join the function.
So go ahead and call DOT joined and you'll notice we can just join them into one giant string.
But we want to join them with a separator.
OK so called Dot joined with a separator of type string and what we can do is we can set what string
value was going to go in the middle of all of these elements in our array.
So I wanted it to be a comma and a space.
So check it out.
If I put a string there I just type comma space.
And now every element in my array is going to be separated or I guess individually pulled out separated
with a comma and space and put into one singular string.
It's really really cool actually how it works.
Now let's think about what else we need to do at this point.
We have added a name to the array.
We have updated the names label with everything in the array separated by common space.
Now what we need to do is we need to go ahead and clear out the textfield.
So a new name can be entered and we also we want to clear out the text field so we can enter a new name.
So down below what we're going to do is we're going to type self name entry textfield are ex text.
And we're going to pass in a new value but that value is just going to be an empty string because we
want to clear out the text field.
So go ahead and type on next and we're going to pass it an empty string just like I said.
So now we are passing in the names updating the label with all the names added and clearing up the text
field.
Now what we're doing is we are updating our array with the names when we add a name with the submit
button.
We are filling the label with all the text from the names array turned into a string and separated each
element with a comma and a space.
And then we are resetting the name entery textfield to be blank again so that we can continue to use
it.
Now at the very end of course since we are subscribing we need to go ahead and call add two disposable
and pass it into our dispose bags so that the memory can be properly deallocated.
Now let's go ahead and do some cleanup work here.
Let's set that down below.
This is just conventional with Eric Swift is to separate these functions on their own line.
And now all we need to do is call bind submit button from view to load.
So beneath bind textfield go ahead and call bind submit button like so now go ahead and let's us build
and run this to the simulator Let's go test to see if it works and make sure that everything looks and
works the way that we are wanting it to.
That's a great plan.
So here we go.
Our app is now open.
So when I come in here I should be able to type a name and when I press submit what's going to happen
well it should add the name down here to my label let's give it a try three to one click and it worked
it cleared out my textfield.
But I do notice a problem.
It still says hello Caleb.
Now there's a way that I can fix this and it's actually really easy.
All I need to do is to go down here and what's the name of that again.
It's called Hello label.
All I need to do is to go ahead and type self.
Hello label.
Our X-Com text on next.
And I just need to pass it.
Type your name below OK because that's the default message that's the message when the app opens.
So let's build and run this again and let's make sure that that gets updated on the label when we submit
a name.
Riego it's running looking good.
All right let's do it again Caleb.
Submit perfect.
OK let's make sure that the comma and space are working then we add more than one element.
How about Chris look at that.
That's so cool.
This is coming from our Auray which is inside of our variable.
Next let's go ahead and type Julie.
Sean this is so cool guys we are able to react and add elements in real time using reactive swift swift
reactive programming.
So so cool awesome guys will.
This app is almost done.
We're actually going to move on.
And then the next video I'm going to show you how using observables you can communicate between multiple
view controllers just like you would with a Segway or protocols you can do it with reactive programming
in a really really easy way.
And I'm really excited to show you.
So let's head over to the next video where we're going to do that and I'm really excited to show you
so let's do it.
Let's head over to the next video.