You will learn to develop sophisticated user interfaces for iOS, with a focus on user interface design best practices, UI animations, and responsive design. You will learn about the key UI widgets, mapping interfaces and view restoration.
UITableView with CoreData: Part 1
Loading...
From the course by University of California, Irvine
Best Practices for iOS User Interface Design
173 ratings
University of California, Irvine
173 ratings
Course 3 of 6 in the Specialization iOS Development for Creative Entrepreneurs
From the lesson
Table Views, Core Data and User Interface Integration
In week 4, we will look at table views, core data, and user interface integration. We will cover table views, table views plus core data, and you will finally learn how to put it all together. We will end the course with a peer review assignment called To Do Manager.
Meet the Instructors
Don PattersonAssociate Professor
Informatics and Computer Science
Sam KaufmanPartner at Gradient
In this lecture, what we wanna do is build on what we've already learned with
our table view, and talk about how we can use the CoreData database persistent
storage as a source for the information that's being placed in our table view.
And we're gonna connect that source of data
to our UI with an NSFetchedResultsController.
So the big picture is that we've seen that a table view can be backed by different
kinds of data.
We did it manually previously, where we just listed out, for example,
the row numbers on each one of our table elements, and
we did it with an array that was kept in memory.
Well, we can also back it by something else, a CoreData, or persistent storage.
When I say backed by it, what I mean is that there is an underlying data model,
which is informing the view, or the table view.
And this is part of an MVC-style controller
which is a popular human computer interaction programming paradigm.
You have a database, you have a view.
In this case, the database is CoreData, and our view is table view.
We're gonna connect them together with the NSFetchedResultsController.
All right, so we're gonna build it,
and our goal is to make a prototype to do list.
We're gonna work towards your peer review assignment.
And backed by CoreData.
We're gonna do a lot of this kinda quickly,
cuz we've seen some of it already.
But our steps are gonna be to create that CoreData model,
to create the user interface, to create a custom cell class, to link CoreData and
the table view to the view controller.
To implement add functionality, although this time we won't have an add button.
To implement our NSFetchedResults controller, that's kind of spelled wrong
there sorry and to implement animations because that's kind of built into this.
So that you get smooth transitions between those things.
So let's start with the Core Data model.
And let's switch to X code.
And let's make a new project.
Again this is going to be a single view application and
let's call it table view plus core data.
And we're going to make sure that core data is checked there.
And we are going to create it, and we have a previous one, so
I am going to replace the one that is there.
And we will maximize our window, and where do we sit?
All right, our first thing we are going to do is we are going to create our model.
So, we are going to go to our model builder here,
this is where we specify basically things like database tables,
if you are familiar with using MySQL or Postgres or some other database system.
We're gonna add an Entity, which is like adding a table in any other view and
any other database system.
We're gonna change the name of our entity over here to To Do.
We'll go ahead and take To Do Entity, so that we Know what we're working with.
And we're gonna add an attribute, so this is like a column in a database system.
And we'll say, this is gonna be the title.
And what we wanna do, is we wanna give it some properties.
So first of all, it can't be optional.
Every to do item has to have a title.
Right.
So, it's not optional, and we also want, anything else?
We know it's a string.
So, let's specify that it's gonna be a string, and
we want a minimum length of one.
So, it turns out that, if it's optional,
you can still have it be empty, even if it's there.
So, we want to make sure that it has some value.
Okay, so this is our core data model.
And from this, what we wanna do now, is we wanna come up here, oops,
and we're gonna wanna create an MSManaged Subclass.
So this is gonna be the code that's going to represent our class.
We're gonna leverage this in the rest of our code.
We want to manage todo entity.
That should make four files over on the left,
if everything is as it should be in the world.
All right, there we go.
Four different files that represent the code for our object.
All right, so where does that put us?
We've created a CoreData model.
In a more elaborate to do list, you might want not just a title, but
maybe a due date, or
maybe a priority, maybe a description to give more details about the to do.
But in this case, we're just gonna work with a title.
So, the next thing that I wanna do, is I wanna use with a user interface.
We're gonna create a ViewController and we're gonna drop a TableView into it.
We're gonna use that as our management, for the management of our view.
All right, so let's do that.
We'll go to our story board, and our story board is starting with a view controller.
That's great, let's just look at the hierarchy that we've got here.
That looks good, and then what I'm gonna wanna do is,
I'm gonna wanna get a text field, this is where we're gonna enter our new to-dos.
And we'll put this up here.
We will stretch it out the length of our display.
I don't want it to cover the status bar, there we go.
And let's give it some constraints.
And so I want it to be horizontally centered, and
I want the distances to be 0 0 0 0 and 3 constraints
option command equal to lay it out, and I want to give it some.
Kind of a prompt.
So I don't want it to be prefilled, but
I want it to say enter a new task, here.
Does that look okay?
Yeah. But actually,
I don't want that to be the text.
I want that to be placeholder text.
There we go.
So it should be lighter.
Enter a new task.
All right.
And let's see.
Because we're not gonna use an add button in this case, we're going to just,
you're gonna tap that text field, you're gonna enter your to-do list title.
And then when you're done on the keyboard, we're gonna enter it into your database.
So you don't have to have an extra step.
And to do that we're gonna put a word on that button in our keyboard.
And they way we do that is, over here on the right,
we can come down here to the Return key.
And we can say what we want it to say.
So it could say Go, or Google, Join, Next, Route, Search, Send, we'll go ahead and
say done.
So when you hit done, that's going to be an indicator.
It's just the word, but it's going to indicate to the user that it's
time to enter in your task.
And then we're going to put our table view.
Hold on.
All right.
And then we'll stretch it out, so it looks.
It fills up our UI, that's pretty good and
let's give it the appropriate constraints.
We'll just give it borders on all sides.
All right, command equals make sure everything's lined up, looks good.
Now we're gonna add a table view cell.
This is gonna be our prototype cell that we're gonna draw on.
Drop it in there.
All right, and good, so let's select our cell and
let's give it an identifier.
We'll call it table cell, so we can remember it's there.
And, then, what are we gonna want to put in it?
Well, we're gonna want to put into it a label.
So, we know that, because that's going to contain the text that we want.
Drop that into our cell and then we want to get the appropriate constraints.
So let's stretch it out the length of our cell, let's make it,
vertically centered not horizontally.
Well we want it horizontally centered, but we'll manage that through margins,
so vertically centered and then we'll give it zero borders.
Okay.
And option command equals to make sure it lay out okay.
Looks good.
All right, and then, on the advice of Sam,
our local expert, he recommended that we set the table selection style to none.
What this is going to do, is this is just going to mean that when we tap
our table cell, the visual appearance of that cell is not going to change.
This is in contrast to say, having it turn blue or
gray when you tap it, suggesting that some kind of action is possible.
But since this is just a list, and that when you tap it nothing happens,
we want there to be no feedback to these.
So the opposite of that feedback principle, so that they don' think that
there's something present, something should happen that isn't going to happen.
All right, so okay I feel pretty good about this.
Let's try and run it in our simulator and just see if it builds okay.
Wait for our simulator to come up.
Here it is.
There's our task, here's our table, there's nothing in it.
But if you look carefully, you can see that there are blank lines.
Enter a new task, everything is laid out.
If we click here in here to actually enter a new task.
We don't get the keyboard on our simulator.
I wonder why?
Is there a way we can ask for the.
To ask for the keyboard?
There we go, okay.
So when we manually request the keyboard and
it comes up, you can see that this button right here says Done.
And so when we click it, it executes a done task, but
we haven't wired that in yet.
Okay, make the keyboard go away.
All right, good.
[SOUND] So, so far we've created the CoreData Model and
we've created the User Interface.
The next that we're gonna do is we're gonna create a custom cell.
Explore our Catalog
Join for free and get personalized recommendations, updates and offers.
Coursera provides universal access to the world’s best education,
partnering with top universities and organizations to offer courses online.
© 2018 Coursera Inc. All rights reserved.
