[MUSIC] All right, it's time to take a look at some more code. What we'd like to do in this lecture is to walk you through the process of building a table view demo. And do it kinda from the ground up to give you an opportunity to see how all the pieces fit together. Because sometimes, sometimes you see tutorials on the Internet for connecting for example core data all the way to a UI table. And that's great, we'll probably have you do that in one of our peer review assignments. But before we do that it's important that you look at how this works in a more simple level so that you can understand the moving pieces before you try and build a larger system. So we want to do that. Table View is a way to show a list of data and it appears all over the place. We've touched base on this before. It does it compactly and it does it efficiently. You can show millions of lines of data. All right, you can have a way of representing millions of lines of data very efficiently if you use table view well. When you implement a table view, you have to have some code that provides functionality as both a delegate and a datasource, so there's two different bits that you have to write code for. The delegate, the code that implements the delegate work is going to implement the interface UITableViewDelegate. And the class that implements the datasource is going to implement the UITableViewDataSource interface. So the UITableViewDelegate and the UITableViewDataSource. Now, often this can be the same class, but it doesn't necessarily have to be. And what this means, is that your class has to have functions in it that iOS expects to be there. So that when a user interacts with a table you can tell iOS how you want it to represent your data. How you want it to present your data. And it's broken into delegate and datasource. So in the delegate functions, they provide information for laying out the table for what the row height should be based on the data that you have. What the row indentation should be and it responds to, it does what you want if the user selects rows. On the other hand, the data source does the work of configuring the Table View. It provides the cell for a given row, meaning it's gonna construct a cell that contains the data for a given row. It's gonna tell the iOS how many sections there are so like in, if you look at a contact book there will be sections for different letters of the alphabet and so your data source delegate is responsible for telling iOS how many sections there are. How many sections? How many? Actually that's backwards. Not how many sections per row, but how many rows per section there should be. You provide the title of the title, the title of the Table View to iOS and you provide the title for the sections. For example, letters of the alphabet for splitting up your context into groups. That data source is also responsible for inserting or deleting table rows and the reason why that's important is because when the user does some action that would add things to the table, the data source is responsible for making sure that that gets recorded and whatever the data structure is it's keeping track of the data. And finally, the data source is responsible for modifying the backing data store if the user reorders elements of the table. So the idea is that iOS is handling the touches and the taps and the movement of elements, but it's relying on the datasource to keep all the data somewhere wherever you wanna keep it, whether it's in a local in memory data structure like an array or in something more sophisticated like a core data backing store. All right. So let's build it. We're going to build a table view, to which we can add data. We're going to have it backed by an array, and we're going to animate the insertions. But we're going to do it step by step. And it's gonna take, we're gonna go through a few steps in order to get there. So the first thing that we're gonna do is we're gonna construct our interface. Okay, so I'm starting with a clean single-view application. I did not include core data in this. And what I'm gonna do is I'm gonna create the interface that we wanna work with. I'm gonna start on my main storyboard and to this storyboard I want to add a text field. We're gonna use this text field as a place to enter new elements into our table. Go ahead and place it up here in the upper left. And then I'm going to add a button which is going to be the add button that's gonna instruct iOS to add the additional item. So go ahead and put add in there, and I'm gonna stretch this out so you can put the new data in. And let's see, and let's just add the constraints that will keep it on the upper left, and in relationship to that Add button. So let's zero from the top. Zero from the left. Give it eight from the element on the right. Looks good. Got those constraints. And then the Add button, we'll put in the upper right. So, we'll make it 20 from the top and zero from the right and that should be okay, add those constraints and then we're going to control-drag from the text view to the button and we're gonna center them vertically. And we're gonna do option-control equal to reassign these frames and see how they come out. Right, so that Option control equal is the same thing as selecting an element. And then coming here, resolving auto layout issues, and selecting update frames. So if I select that, editor, resolve auto layout issues, update frames. What that does is it redraws this current frame with the constraints that I have indicated to make sure that I get what I want. All right, so that looks good. The next thing that I'm going to add is I'm going to add a button that tells the, that's gonna, we're gonna implement that's gonna sort the content. We're not gonna use this right away, but, we'll put it here for now. We'll make this the sort button and we're going to have this constrained on the top, and on the left, and on the right. We'll add those constraints. And we'll option command equal to make sure it's laid out okay. It looks good. Okay, so if that's how we're gonna add elements to our table, we actually need a table into which we're going to add this information. So let's create a table view and let's put it out here. And we're gonna anchor this down on the bottom and the left and the right. And we'll have it fill up most of the rest of the screen. And we will assign it boundaries on all the different sides. And we'll add those for constraints, and option command equals to make sure it looks okay. And let's just run it in our simulator to make sure everything's laying out the way we expect it to go. Okay, look's pretty good. I had game center running, let's go ahead and close that out. Okay, when I closed it out it stopped running. Let's go back to our simulator. Actually move it over so we see it on the screen. Close our Game Center and News and Reminders and Wallet and Photos and Health and Calendar and Maps and our previous demos. All out of there, okay great. All right, so we like the way that that was laid out, that was perfect. And so great. So now we need to think about what our next step is going to be. [MUSIC]
