iPhone Programming Tutorials » sqlite3

iPhone Programming Tutorial – Creating a ToDo List Using SQLite Part 4

brandontreb — Mon, 22 Sep 2008 23:47:39 +0000

This is the final installment of our 4 part series of creating a Todo list for the iPhone. In this tutorial, I will detail how to add and delete new todo objects from the SQLite database. Make sure that you have completed the following tutorials before you begin this one:

When you have completed this tutorial, you should have a main screen that looks something like this:

Let’s get started…

The first thing we need to do is add the UIBarButtonItem items to the NavigationBar so that we get the “Edit” and “Add” button. Open up RootViewController.m and add the following code to the viewDidLoad method.

The first thing we see is the line that sets the leftBarButtonItem to self.editButtonItem. This automatically adds the “Edit” button to the NavigationController. Also, it sets up the functionality that allows the “delete” buttons to be displayed when the button is pressed. You can see this functionality if you do a “Build and Go” at this step. Next, I have manually created a UIBarButtonItem and added it to the navigationbar. This can be done in Interface Builder, but I wanted to show you how to do it manually and assign an action to it (I’m sure you will require this functionality in a future program). Here is a break down of the parameters:

initWithTitle – The text to be displayed on the button
style – How the button will look
target – The class object that handles the messages sent from this button
action – The method to be called when the button is passed. We can use @selector and give it the name of the function to call.

Finally, we assign this button to the rightBarButtonItem. If you do a Build and Go, it should error since we haven’t created the addTodo method. We will do that in a bit. Now, let’s create a method inside of our Todo object that will add new Todos to the database.

Open up Todo.h and add the following code:

So in addition to the insertNewTodoIntoDatabase method, we also see the deleteFromDatabase method signature. I have just added this so I don’t have to come back to it later. We will be implementing this when I show you how to delete todos from the database. One thing to note about the insertNewTodoIntoDatabase method is it has a “+” rather than a “-” sign. This means that it is a static method. Static methods are associated with the class not the instance meaning we can call this method without instanciating this class. So we can do stuff like Todo.insertNewTodoIntoDatabase. Now we will implement this method.

Before we can do this, we must declare a few more static sqlite3_statement’s. Add the following statements to the top of Todo.m

Nothing new here…Now implement the following method:

This is similar to our update method. Notice that we are inserting default values into the database. This is so we don’t run into any problems with null or nil values. The most important part of this method is the fact that it returns the primary key of the newly created todo object. This will be used later so we can immediately transition to the todo when the “Add” button is pressed. The last thing we need to do to the todo object is update the dehydrate method so that the todoText gets saved if it gets changed. Update the dehydrate method to look like this:

There are only a few minor changes here. First we see the “text = ?” part added to the sql statement. This is simply so we can update the text of the todo. The other change is we bound the self.text property to the 1st question mark in the sql statement. One thing to notice is we call [self.text UTF8String]. This is because sqlite3_bind_text takes a (char *). This will convert an NSString to an acceptable format.

Now we need to add a method inside of our RootViewController to add a todo. This is the method that will be called when the user presses the “Add” button. Inside of RootViewController.m add the following code:

First, we get a reference to the appDelegate object. This is because we need to call its addTodo method. Next, we instantiate the TodoViewController if it has not already been instantiated. We need this around because we will push it on to the view stack and transition to it after we create our new todo object. After this is done, we call the addTodo method of the appDelegate. It will return the newly created todo object and the view will be transitioned to its detail screen in order to update its details. Now we need to implement the method addTodo inside of our appDelegate. Open up todoAppDelegate.h and add the following code to create the method signature.

Now, let’s implement this method. Open up todoAppDelegate.m and add the following code:

First, we are calling the insertNewTodoIntoDatabase method of the Todo object. Notice that we are simply calling the method without first building an instance of a todo object. As I said in tutorial 3, this is because that method is static and gets called without building an instance of the class. Next, we insatiate the todo object that was just created by calling its initWithPrimaryKey method. This will give us reference to the new todo object. Finally, we append this todo to the end of our todos array. Since our UITableView is updated with this array, it will automatically include the new todo object. The last line just returns this todo object.

Remember is the last tutorial we made it so the users could update the status and the priority of a todo? Well, now we also need to give them the ability to update the text of the todo. So open up TodoViewController.h and add the following code:

Ok, so I’m guessing you are wondering why the UITextView for the todoText object has been changed to a UITextField. Well, I will tell you. UITextView doesn’t have the methods that we need to save the text with our current design. We will also be changing this on our Interface inside of Interface Builder. So for now, just believe me and anywhere it says UITextView, change it to UITextField. The only additional code we added here is the method signature for the updateText method. It’s an IBAction that will get called when the user presses the “Done” button on the keyboard after setting the text for the todo. Next, we need to implement this method. Open up TodoViewController.m and add the following code:

All this does is update the text of the todo to the text that the user entered inside of the UITextField. The last thing we need to do in order to add a todo is to replace the UITextView with a UITextField and connect it to our updateText method. Double click on your TodoViewController.xib file to open it in Interface Builder.

Now click on the UITextView on your interface and press the delete key on your keyboard to delete it. Now, drag a UITextField from the library and drop it onto your interface. Resize it to fit. When you have completed that, your interface should look something like this:

Now we need to connect this component. Make sure it is selected and click Tools -> Connections Inspector to open up the connections inspector. Drag from the circle next to the method “Did End On Exit” to the “File’s Owner” object. The words udpateText should pop up. Click on them to make the connection. Next, click in the circle next to “New Referencing Outlet” and drag it to the “File’s Owner” object. Select todoText when it pops up. The Connections Inspector should look like this:

Now we are done with Interface Builder. Go ahead and close it. We are now able to add todos. The last thing we need to do is give the ability to delete todos from the list as well as our database. This is all done in code, and we won’t need interface builder for this.

Let’s start by adding the methods to the appDelegate to handle the deletion of todos. Open up todoAppDelegate.h and add the following code:

All we see here is a signature for the removeTodo method. Also, be sure to add a #import “Todo.h” statement to the top of this file so that we can interface with the todo objects. Now let’s implement the removeTodo method. Open up todoAppDelegate.m and add the following code:

The first line looks up the todo in the todos NSArray. It returns the index in the array of the todo to be deleted. Then, we call the deleteFromDatabase method on the todo object and then remove it from the todos array. Since the UITableView is updated via this array, it will automatically remove the todo without any additional code on our part.

Now, let’s create the removeTodo method for the todo object. We have already written the method signature in Todo.h in a previous step, so open up Todo.m and add the following code:

Remember the delete_statement variable is a static sqlite3_stmt that we declared in a previous step. First, we check to see if it is nil. If it is we compile the statement using the sqlite3_prepare statement. Next, we bind the primary key of the current todo to the “?” in the sqlite3 statement. Next, we just step the statement to execute it and reset it. The last thing we need to do to delete todos from the database is to specify what happens when the user presses the “delete” button. Open up RootViewController.m and add the following code:

The first step (like the first step of many functions) is to get a reference to the appDelegate. Next, we check to see if we are currently editing. If so, call the removeTodo method on appDelegate. The next line, removes the row from the UITableView at the given indexPath.

Now click Build and Go! You should now be able to add and delete todo items from the database. This concludes our four part series of creating a todo list for the iPhone. As always, if you have any questions feel free to leave them in the comments section. If you get lost at any time you can download the sample code here.

Happy iCoding!

iPhone Programming Tutorial – Creating a ToDo List Using SQLite Part 2

brandontreb — Tue, 02 Sep 2008 17:35:46 +0000

This tutorial is part 2 in our series of creating a to-do list. I will assume that you have completed the following tutorial and its prequisites.

iPhone Programming Tutorial – Creating a ToDo List Using SQLite Part 1

I will be using the code produced from that tutorial as a base for this one. When you are finished with this tutorial, your application will look something like this:

In this section, I will not only teach you how to display the SQL data in UITablewView, but I will be detailing how to display it in multiple columns with images and text. For this tutorial, you will need to download the following images.

We will be using these images to denote the priority (Green = low, Yellow = medium, Red = high).

Bring Your Code Up To Speed

Before we begin, we need to add some code to the Todo.h and Todo.m class to support the priority field in the database. Open up Todo.h and add the following code:

All that is new here is the added NSInteger priority property. We will be using this to get and set the priority for a given todo object. Next, open Todo.m and add the following code.

The first line that has changed is the synthesize line. We added our priority property to allow XCode to create the getter and setter methods for it. Next, you will notice that the sql statement has changed slightly. We are now getting the priority in addition to the text from the todo table. Finally, we set self.priority property to the selected priority value from the todo table. This is done by using the sqlite3_column_int method. We pass the init_statement and the number 1. 1 being the index of the sql array for which the priority data is contained.

Add Images to Your Project

Download the images above and save them to your project directory. Inside of your project, right click (control-click) on the Resources folder and click Add -> Existing Files… Browser for the images, select all of them and click Add. Check the box that sais “Copy items into destination group’s folder (if needed)”. Click Add. The image files should now appear inside of your Resources folder.

Create a UITableViewCell Subclass

To display data in columns within a UITableView, we have to create our own cell class that defines the type of data we want to display. By default, Apple provides us with a simple cell object that can only display one column of text. Normally, this is fine as it will work for a wide variety of applications. Since we require 3 columns for this tutorial, we need to wrap our own cell object.

Click File -> New File… and select UITableViewCell. Click Next.

Name this file TodoCell and make sure this that the box that sais “Also create TodoCell.h” is checked.

This will create a “barebones” UITableViewCell object with some basic methods already filled out. Let’s add some properties to this class. Open up TodoCell.h and add the following code.

Let’s take this line by line…

First, we see a Todo object being declared. Each cell will know which Todo item is associated with it. This will help out when updating the data in each cell. Next, we see 2 UILabels and a UIImageView. To understand why these components are needed, here is a screenshot of how each cell will look.

We see the “Green Dot” which is an image being rendered by a UIImageView. The word “low” and “Take out the trash” are both UILabels. After they are declared, we simply create them as properties. Notice that we are NOT creating a property for the Todo object. We will not be synthesizing it either. This is because we want this variable to be private. Setting this variable requires some additional code so we don’t want any code writer to simply be able to say cell.todo = foo; You will see why this is so further on in this tutorial.

Below this are some method declarations. First we see the method “imageForPriority”. We will be using this method to decide which image (green, red, yellow) gets displayed for a given priority. Next, we see the “getter and setter” methods for the todo object. As I explained above, the setter will contain additonal code besides assigning the todo object.

Now open up TodoCell.m. We will be writing quite a bit of code in here so I will break it up the best I can. First, add the following code to create some of the initialization:

Ok, some new stuff here. First, we see 3 static UIImages. These will hold reference to each of the three images (red, green, yellow). Since we only need to allocate them once, we make them static. Static means that they will be associated with the class not the instance. So we can make as many TodoCells as we want but only 3 UIImages will be created. On the next line there is a private interface. This allows us to declare a private method that no one else can use except this class. Following this is the synthesize line. Notice again that we are NOT synthesizing the todo object.

Looking at the initialize method… All that is going on here is we are intanciating each of our UIImages with the correct image for a given priority. This initialize method will get called once when the first instance of the todocell class is built. Moving on… Add the following code: (Note: it might be small and hard to read. If this is the case, click on the image to open it and the text will be full size)

This is the initialiazation method for any UITableViewCell. First, we need to call the super classe’s (UITableViewCell) initWithFrame to ensure that the underlying components of the cell get set up properly. Next, we get a reference to the contentView. The contentView is the view for each cell. We will be adding all of our UI components to this view.

The next 3 lines initialize a UIImageView and add it to our view. Notice that we are populating it with the priority1Image. This will just be a dummy placeholder until we update it.

Following this, we initialize the todoTextLabel. This label will display what it is we need “to do” such as “Take out the trash”. There is a method that we will be calling called “newLabelWithPrimaryColor”. This is a method I will detail a little further down. What it will do is build a new label with the attributes that we specify when we call it. This method was taken directly from Apple’s “Seismic XML” sample code. It’s pretty handy. After this gets called, we simply add the new label to our view and these steps get repeated for the todoPriorityLabel.

Finally, the method “bringSubviewToFront” is called on the priority UIImageView. This method is used in case there is text that gets near the image. It will cause the image to appear above the text. You can use this for layering your UI components.

Still with me? Good… now let’s add the following “getter” and “setter” methods for the todo object.

The first method todo is simple. All it does is return our todo object. The setTodo is a little more involved…

First, we set the incoming (newTodo) to our classe’s todo object. Next, we update the UITextLabel so we can display the detailed todo information. Following this we set the image of our UIImageView by calling the method imageforPriority. I will detail this method further down in this tutorial but all it does is return an image for a given priority. Last, we have a switch statement. The syntax of a switch statement is the same in objective C as it is in most languages. If you don’t know what a switch statement is Google it. Based on the priority of the newTodo, the priority label gets updated with one of three words (High, Medium, Low). The [self setNeedsDisplay] tells the cell to redisplay itself after this todo has been set.

Now, let’s add the code that lays out the cell.

This method gets called automatically when a UITableViewCell is being displayed. It tells the UITableView how to display your cell. The define statements are similar to define statements in C. The reason we are coding like this is because we can tweak these variables to get the display to our liking. First, we call the layoutSubviews of the super class. Next, we get a reference to the contentView.bounds. This variable will allow us to figure out how much drawing area we have and allow us to line objects up properly.

The if(!self.editing) part is not neccessary but is good practice. You would use this if you allowed editing of your cells. This code is a little tough to explain by typing, but I will do the best that I can. First, we declare our right-most column. This is done by making a frame to hold the content. This column will hold the text of the todo item. Most of the code here is just positioning. You can play with these numbers and see how it moves stuff around. Once all of the positioning code is completed, the frame of our todoTextLabel gets set to this newly created frame. This is done for each of our UI components. You can lay them out however you like, as I may not have the best layout.

We have one more method to override. It’s the setSelected method. Go ahead and add the following code.

This method gets called when the user taps on a given cell. We need to tell the cell how to behave when it gets tapped on. This method should look pretty straight forward. First, we call the setSelected method of the super class. Next, we update the background color depending on whether or not the cell was selected. Finally, the labels get set to a white color if the cell gets selected. This is to contrast the blue color that the background becomes when the cell is selected.

This last 2 methods that I want to talk about are the helper methods that we used earlier in the code. Add the following methods to your code.

newLabelWithPrimaryColor

This method got called when we were initializing our UILabels. It takes a few parameters that should be pretty self explanatory. Looking through the code, we first see the font being initialized with the size that we specified. If bold was specified this is also accounted for. Next, we instantiate a new UILabel and give it some properties. Finally, this newly created UILabel gets returned.

imageForPriority

This method is actually quite simple. It simply takes a priority and returns the UIImage that is associated with that priority. Notice the default clause. I decided to handle it like this instead of doing “case 1″ to handle all other cases. For whatever reason, if there is ever a priority that is not 1,2 or 3 it will, by default, have low priority.

Now that we have created our UITableViewCell, we need to display it in the table. Open up RootViewController.m and add the following import statement. This will allow us to use our TodoCell object.

Now find the numberOfRowsInSection method and add the following code

I’m not going to really go over this, as this is almost the exact same code as in the Fruits example. Basically, we are returning the number of todo items.

Now for the magic…We will now add our TodoCell to allow it to be displayed. Find the cellForRowAtIndexPath method and add the following code.

This code is fairly similar to the default code that Apple has provided us. The first change is we are instantiating our TodoCell object. We are creating it with the initWithFrame method and passing our identifier to it. Next, we get reference to the application’s appDelegate and use it to look up the todo item at the given index. This should be familiar. Finally, we set the todo item of the cell to the todo item at the row index and return the cell. That’s it! Go ahead and click the Build and Go icon and see your todo list come to life. Here is a screenshot of what your app should look like.

That concludes part 2 of this tutorial. Join me next time as I show you how to display detailed todo info using some new UI controls that we haven’t seen yet. As always, post your questions and comments in the comments section of the blog. Download The Sample Code

Happy iCoding!