Hi again in our last lesson we saw how we could use a date picture of you.
And in this assembly we're going to see Hollywood expand on that and use a picture of you to pick almost
anything a number out of a set of numbers and name other set of names or even an image out of a set
of images.
Now pick your views even though they are not the most useful outlet out there.
They're actually very fundamental to our learning process because a lot of this stuff that we learn
in here are comparable to those that we use in UI.
Table views as well as UI collection views and they're actually very different than the things we have
done so far.
So to me the sanctuary one of our more important lessons even though it is actually simple.
So let's go ahead and tweak scored and see how you're going to do all of these.
And when I go in here and say I have a picture view app and I'm able to my storyboard and add a picture
of you I'm going to go in here and say Give me a picture of you and the picture view is is essentially
a way for you to go through the event items by scrolling and choose one of them.
And I'm gonna get started with a very simple one and then one step at a time I'm going to make it more
complicated.
So let's add all of our constraints add missing constraint and then go to our assistant window and in
here I'm only going to add one thing in here and that is that picture view itself.
I'm going to say my picture view and that's all I'm going to do for now.
I'm going to say there's only one outlet in here.
That's my picture view.
And then we have to go back into our coding interface.
And here is where things are a little bit different than what we have seen so far.
Pick your views.
They need a V to essentially populate the items let's say on items are going to be the names of some
countries.
So doesn't want to be calling that let's call it country is array.
Going to be an array of strings and that is actually some countries Canada let's say U.S. let's say
Mexico let's say India are not like that.
India let's say Brazil.
I'm going to have to.
I can't think of anything Poland.
So I've got some countries other than here and that's the area that they want to be using for my picture
of you.
Now so far in everything that we had done we had a system of saying for instance my picture view dot
elements or dot components are these.
But now things are a little bit different and the VBA to do it is using something called a data source.
Let's see high data source essentially work.
And when I go in here I'm to say my picture view dot data source is actually using something called
you a picture view data source.
I'm going to say that the source is self.
Now you might be wondering this guy was asking for a UI data peak that a picture of your data source
how are you assigning it to self undoing it just like the way we do with delegations.
I'm going to say this is a self but then myself conforms to UI data.
Pick that are you I picture view data source.
So I'm saying the data source for picture view is in here.
And then when I do that it's going to say well there are a few elements of this protocol that there
must be.
You can't skip them.
I'm going to say at those stops.
Show me the ones that I need to use.
And it says these two things are absolutely necessary.
You must have something in them.
One of them is you have to decide how many components you have in your picture view.
The other one is how many rows you have in each of the components.
Now I know this system seems a little bit strange and perhaps it's the first time you're seeing it but
this is something you have to get a really really comfortable with simply because this is the way we
do a lot of different outlets UI table views your collection goes most notably and those two alone are
like the fundamental part of most apps.
So evade works is this once again to do a quick recap.
It says this picture view finds its data from here from self the view controller and the view controller
feeds the data to this view using these two functions at least.
And there are other functions that we have to implement as well.
But these two functions they return the value is that we need one of them returns.
Let me format this properly.
One of them returns how many components are there and the components are essentially how you break this
into two vertical you know columns or three vertical columns.
And that's something that we're going to be talking about in a while now.
But for now I'm going to assume there's only one component so it returns one only one component would
be in this picture view off line.
Again the next thing is it saying how many elements you have in each of these components since I only
have one component.
I don't need to worry about the component itself.
I just have to return the value and the value of it is return countries array that count.
So how many components I have as many objects as there are in my countries every now.
If we run this application right now it will know how many components it should have.
It also knows how many elements should be in the component but doesn't know what should be there in
each of these rows or each of these elements.
Now to fix that what they have to do is this I have to rely on another function that is actually from
your IP care of your data.
Get that is gonna show me the specific value that they want on their role.
So this one knows how many components are there.
This one tells me how many roads are there.
And then I have another one that tells me in each of the rows what you should show.
And for that I need the you I picture view delegate protocol.
I'm willing to stack all of them properly.
So we have their view controller and then we have the picture view data source and picture view delegate.
And since I'm using the delegation I have to go in here and say my picture view DOD delegate also becomes
a self.
Now my picture of delegate it has a function that shows me the title of each role.
Let's go ahead and find that I'm going to go to the definition.
I am here in the definition.
I'm going to say that is actually called title for a role and it's an optional one simply because you
may not have it.
Maybe you just want to use the view for Adderall which is a you I view and you can attach things such
as images to it.
But for now I want to use the title for a role.
I'm going to come back in here and say
title for role.
Let's stack things properly format them.
He's asking me so you have X number of components and X number of rows.
What do you want to show in each of those rows in each of those components.
Since I only have one component I'm not gonna worry about this part.
I'm only worried about this what it's saying.
What do you want to show in that role.
And I'm gonna say that value is a return countries array.
Let me copy it and show me they have one at 2 draw.
So if you're at the raw 0 show me countries are a zero.
If you're either or 1 show me countries are at 1.
So on and so forth.
Let's run this application once the application load.
You can see that now we have all of these elements.
U.S. Canada Mexico India Brazil and so on and so forth.
They're all here and we can you know go through them state the way you are expecting it to work.
Now this was like a basic way of adding components as well as adding rose but the principle of it is
very important.
Understanding that you use the data source and delegate to populate your picture of you.
I'm going to now copy out of these or actually cut all of this.
Put them at the very bottom.
Let's say about here.
And what they wanted do is two things.
One of them is I want to break this to have two components.
Imagine we have countries and then for each country we have some cities.
And also I want to know what happens when I tap on one of them when I change the value.
Then I switch this to Mexico.
How would I know it has switched to something.
So let's go ahead and work on these two.
Now here is the next very important thing which is actually different than what we had seen before.
In the past we would use this outlet and we would use a value a changed event to actually change it.
But the problem is the value change event in here doesn't work.
We have to use a built in function which is called did select the raw so no coming here and say did
select raw.
And this is a function that says well in this particular picture of you you have selected a role that
is at this particular location in this particular component.
So it essentially gives us an address.
It says you found that this particular one if you're very near and you switch this to India it would
say in component zero you have chosen raw number three and that's very very useful.
And I'm going actually print that's a print
you select that.
And the one I want I say selected is this I want to say you select the role you selected that say no
of that in this play and print the components you selected that number in the component.
And I'm also going to show its value.
I'm going to say print
its value is.
And the value is this is going to be countries array
and index all.
So let's see if that works the way I'm hoping it will work.
If it does every time that we change a value we select some roll it should tell us exactly what we have
done.
So let me show my concern.
And in here I do want to see that here.
It says you selected number one in component zero and its value is a U.S..
Let me do another one.
Brazil.
It says the value is Brazil.
And that's exactly the way I want it.
Now the next thing I want to do is this.
I want to go ahead and break this into two components.
The first part of it should be self-explanatory number of components too.
Now here is the problem.
If the number of components are true then the picture of you number of rows in components should then
be countries.
Because right now it is returning the same value for both of the components.
Let me actually show you what happens if we run this application.
Now we should see two components side by side that they both showed the exact same thing.
They are both exactly the same thing.
And when we change one of them it says you select that number five.
Let me move this for some reason dissimilar to sometimes doesn't move.
That was actually a much worse thing.
Okay so here it says you selected 5 in 0.
And when I changed that one it says you select that number two in one eye as value is Mexico.
So everything is working but obviously this is not really useful.
So we have to have different type of content for the two components.
So I'm going to come up here and say well I have the countries array and I'm going to have to have some
cities array some say variable cities all right.
That's to be array of strings.
But the problem is I don't know which cities I have to show cities for Canada.
It is where us.
Is what makes the call which one is the one I'm trying to show I'm going to make this an empty one at
the very beginning now to simplify my life I'm actually going to cut down on the number of the countries
I'm going to only stick to two of them because those are the ones I can remember some cities from and
I'm gonna say that.
Let's call this one.
Chan cities Canadian cities.
That's going to become these let's say Vancouver and Toronto and Iowa.
If that's how you spell it.
I hope so.
I'm not going to say I have another hour that is called the U.S. cities and that's going to become New
York and Los Angeles.
So I have these two and actually I don't need the two of them to be valuable because I'm not going to
change their values anymore so I'm going to be keeping them the way they are.
So I could actually make them let.
So let Canadian cities let us cities.
I actually could make my countries to be a let us vote because we're not changing any of these values.
My cities are however does that change.
So because of that I'm gonna say since at the very beginning we are in Canada.
Let's make the cities right in view.
Did Lord to be Canadian cities.
So that part is taking care of our default cities are the Canadian cities.
Now we also have two sets of components and I'm gonna come in here for the rose in the component.
I'm going to say if we are in the first component if you're on the left side then return country's array.
For some reason this country is a dozen autocomplete.
I'm not sure what's happening countries a rate that count so the left side is the number of the countries.
Else return.
Cities are right because the right side is the cities that count.
So left and right are going to show the right number of objects.
Now I think I have to actually change these two to a little bit different numbers as well.
Maybe I add one more value in here as well.
So we have more in one of them and less in the other one.
It doesn't really theoretically matter but just for the sake of the presentation.
So you might pick your view and the number of rows depends on the component for one component is the
country's The other component is the cities.
Now you can imagine the very same thing applies to here to the actual title for the role.
If we are on the left side we should see the name of the countries.
If you on the right side we should see the name of the cities.
So I'm actually going to copy that say here.
If component is 0 return countries array the value that you have for role.
This is essentially giving us an address.
It's saying in this picture view in this particular component this particular role.
What would you like to show.
I'm saying if component is 0.
Then show the country's if component is 1 which is the else in here then show cities roll just like
that.
Now obviously this needs to be an else if situation.
But I only have two components so I don't care about that.
Also you might want to check for your picture of you but they also again have only one picture view.
So it doesn't really matter in this case then let's keep it up to here and run the application by now
we should see the right thing on the left and the right thing on the right.
But then there's still something missing.
So Canada is showing the cities.
And if I go in here and I touch that it says you select that number one in one by sprinting the wrong
values in here it's a still saying yes.
And also if I switch this to us I should expect to see the U.S. cities to populate the right side of
the component.
So that's not happening either.
Let's fix that.
I'm going to come in here and say in my bid select from this gets rid of all of these.
Now let's think about this for a second.
What should happen when we change a roll when we select a roll.
If we change a roll in the component that is this one the left one the zero component.
Then these cities should change.
Otherwise we should just print what's the value.
So I'm going to say if component is zero then we have to change these cities else.
So let me write that comment.
Change cities.
Else we have to print.
So how should we change it in here.
So that really depends if we changed it to a road that is zero.
We should see the Canadian cities.
So I'm going to say within the components zero if role was zero as well that means Canadian.
That's right.
Canadian.
Else it means us.
Now if we selected in component zero rows zero say citizenry becomes Canadian cities.
If we select the U.S. One say cities array because the U.S. cities I don't need any of that comments
I'm actually going to go ahead and reformat everything getting control and I but if you were in the
other component which is in here I'm just gonna say print the value print you select that.
And what I want to see is the city's array and I want to show the role from it.
So if you're in the other component not component zero.
If we select that something we want to see which one we selected.
Now before I run the application there's one more thing I still have to do and that is in year in component
zero.
When we change the values we manually change the arrays.
We didn't actually implement that change in the picture view so I'm gonna see my picture view.
Or you could use picture view because you're inside the function dot reload component.
I'm going to say a reload component to one because component zero changes the values on component 1.
Now let's go ahead and run this application and if it all works well we should be able to see both of
the components properly relating to the content that they need to have currently viewing counter that
we see the Canadian cities image zoom into it.
I go through us we see the US cities we go to Canada it shows back again the Canadian cities.
And if I select the city from the right component it says you select a funnel and if I go back to us
and I select one it says you selected New York and that's pretty much all we have for that.
The one thing I did tell you about that the design of this application is not really the right way.
You probably want to do this you want to get your content placed them in a dictionary because imagine
right now we only have a few different cities from different countries.
If these were like 10 of them things would become very difficult to find out which one you are doing
for which.
And also there is no way right now to print the country.
I can guess that we are in component 1 and for that component 1 I could get the selected the raw but
again is not a very good approach.
So you probably want to put all of your data inside a different system maybe a class or maybe at least
a dictionary with arrays and names and cheese.
So that's about that very important lesson on data sources as well as delegates and how to populate
things such as picker views our table views collection views not directly but he's saying my picture
view dot something right there by saying these are the different functions that help populating the
values in those items based on a number of components number of rows title for them as well as a delegate
method such as when you select something what should happen if you don't use the value changed we use
the built in functions of the delegation let's keep it up to here and let's move on to our next lesson.