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

The focus of this tutorial will mainly be on viewing the todo items when selected. I will also show you how to update the todo status. This will require us to use interface builder. When you are completed, you will be able to edit todos through an interface similar to this:

Bringing Your Code Up To Speed

For this tutorial, we will need to get the last variable from the todo database. This is of course being the status variable. If you recall, it’s a boolean value (1 for complete, 0 for in progress). We need to get it from the database and associate it with the todo object. First let’s create a property to hold this value. Open todo.h and add the following code:

So a few changes here…First there is the added NSInteger status. This will be the property we associate with the status (complete or not) of the todo. We also create a property from it. Next, there is a BOOL property called “dirty”. We will use this object to signify when a todo has been altered. You will see how this comes into play when we implement the dehydrate method. Also, I have added 3 method signatures. updateStatus will be the method called when we want to update our status variable. Similarly, the updatePriority method will be called to update the priority. Finally, we have added a dehydrate method. This method should be familiar (or confusing) if you have messed with Apple’s books example. Basically, it will be used to save the state of the todo to the database. We will be calling this method on each todo item when the program exits. I will show you how to do this in a little bit.

Be sure to add the status variable to the synthesize line. Also, as we did before, we need to create a static sqlite3_stmt to hold the compiled dehydration statement. Add the following code to Todo.m:

Now let’s implement the methods. Add the following code:

The first two methods (udpateStatus and updatePriority) are pretty strait forward. They update the status and the priority of the todo and then set the “dirty” property to 1. This signifies that the todo has been altered and will need to be saved to the database.

Finally, there is the dehydrate method… We will call this method on each todo upon termination of the program. If the todo is “dirty” meaning the dirty property was set to YES, we will need to save the new data to the database. The database code should look pretty similar to code in previous tutorials. First, we check to see if the dehydrate_statement is equal to nil. If you recall, this will only happen the first time this method gets called. Next we create the update statement and then bind our variables to each of the “?”‘s. Notice the ordering. The numbers represent the question marks from left to right (1 being the first, 2 being the second, 3 being the third). It took me quite some time to figure this out. Finally, we execute the sqlite statement by calling sqlite3_step and then reset the statement.

The last thing we need to do to Todo.m is change the SELECT statement in the initWithPrimaryKey method to grab the ‘complete’ field. Update the code to look like the screenshot below:

There are not really many changes. The first change is the added status to the synthesize line. Next, the sql statement was updated to read

SELECT text,priority,complete FROM todo WHERE pk=?

This allows us to get the “complete” field from the database. Finally, there is the line “self.status = sqlite3_column_in(init_statement,2);”. This is assigning the status property to the data at index 2 in the sql data array. We can now use this field.

One thing we need to do for the navigation to function properly is add a title to our main view. Open up rootViewController.m and add the following code to the viewDidLoad method:

Create the Todo Detail View

Now we are going to create the view that will display when the user selects the todo in the UITableView. Go ahead and open up Interface Builder by selecting one of you existing nib (.xib) files. Once it’s open add a new View by clicking File -> New and select View. Drag the following controls.

• UITextView
• UISegmentedControl – For this you will need to set the number of segments to 3. You will also see a dropdown menu below this option. Select each segment and fill in one of the priorities for the title. Here is a screenshot. You should give a title to each (Low , Medium, High).

  

• UILabel – This will be used to display the status
• UIButton – Users will click this button to update the status (Mark as complete)

When you are done, your interface should look something like this (but probably better):

I know that my interface doesn’t look the coolest. I’m a programmer not a graphic designer… Ok save this view by pressing Command-S. Make sure you are in your current projects directory. Name it TodoViewController and press Save.

It will then ask you if you want to add it to your project. Check the box next to the word todo and click Add.

Now close Interface Builder. Next, we are going to add the viewController class and set up variables to interface with this view.

Create TodoViewController Class Files

Click File -> New File… Select UIViewController Subclass and click Next.

Name the file TodoViewController and make sure that the box that says “Also create TodoViewController.h” is checked and click Finish.

Open up TodoViewController.h and add the following code.

Basically, we are setting up Interface Builder Outlets for each of the UI components to be connected to. Notice, the UIButton has an IBOutlet. This is because we will need to update the text on the button depending on whether or not the todo is completed. Also, I have an IBAction called updateStatus. We will be connecting this to the button we created. It will toggle the status (pending/complete) of a todo item. Finally, we see the updatePriority method. This method will be called when the user selects one of the priority segments in the UISegmentedControl. Next, open up TodoViewController.m and add the following synthesize code:

This will allow us to get and set these variables.

Before we connect this code to the Interface, we need to implement the methods that will be called when the user presses the button to mark a todo as complete as well as when the user presses a segment in the UISegmentedControl. Inside of TodoViewController add the following methods.

Let’s go through this. First we see the updateStatus method. This gets called when a user presses the button to alter the status. We basically check the current status of the todo (whether or not it’s completed) and depending on that, change the text to be displayed on the UIButton. So, if the todo is not complete (in progress) and this button is pressed, the text will be changed from “Mark As Complete” to “Mark As In Progress”. Finally, we call the updateStatus of the todo and pass the new value (1 or 0) to it.

Next we see the updatePriority method. It simply reads the value of the UISegmentedControl by calling the selectedSegmentIndex method on it. The next part looks a little messy. There are 2 reasons that reason we can’t just pass the value of the UISegmentedControl directly to the method. The first is, the UISegmentedControl is ordered in acending order (1, 2, 3…), but our priorities are in descending order (3 = low, 2 = medium, 1 = high). This is where the “2 – priority” comes from. Next, UISegmented controls are “0 indexed” meaning the indices start at 0 and increment from there. So we need to add a “+1″ to the index as our todo priorities start at 1.

Now we need to connect the UI Components in Interface Builder to this code. Double click on TodoViewController.xib to open it in Interface Builder.

Connecting UI Components To Code

We first need to associate this view with the class we just created. In the Interface Builder, click on the File’s Owner object. Next click Tools -> Identity Inspector. You should see a drop-down next to class. Select TodoViewController from this list and you will see the variables we just created appear in the boxes below.

This is what the Identity window should look like after you have selected TodoViewController.

Now that the class is associated, we can begin connecting the components. We will start by connecting the view. Click on the top of your view window to select the view itself (make sure you haven’t selected any of the UI components). Click Tools -> Connections Inspector. Next to where is says “New Referencing Outlet” click in the circle and drag it to the “File’s Owner” object and release it. The word “view” should pop up. Click on the word view. It should now look like this.

Now repeat these steps for each of the components (UITextView, UISegmentedControl, UILabel, UIButton) connecting each to the “File’s Owner Object”. Instead of the word “view” popping up, you should see the variable name for the corresponding variable that you want to connect the component to. So for the UITextView, you should see the word “todoText” appear when you drag it to the File’s Owner object.

We need to connect the UIButton to the updateStatus method we created. To do this click inside the “Touch up inside” circle and drag it to the “File’s Owner” object. You should see the text “updateStatus” appear. Click on it. If all goes well it should look like this.

The last thing we need to do inside of Interface Builder is connect the UISegmentedControl. Click on it in your view and then click Tools -> Connections Inspector… Click on the circle next to the “Value Changed” method and drag it to the “File’s Owner” object. You will see the method updatePriority popup. Go ahead and click on it. Your window for the UISegmentedControl should now look like this:

Now, let’s display this view when a row is selected. Close Interface Builder and open up RootViewController.h and add the following code:

We need a variable to associate with the TodoViewController that we will be transitioning to. Next, open up RootViewController.m and add the following code to synthesize this property.

Keeping the UITableView Up To Date

Whenever a todo item is altered (status or priority) the UITableView needs to be updated with the new changes. Add the following code to the viewWillAppear.

The line [self.tableView reloadData] reloads the table data every time the view appears (or reappears). This will ensure that our table is always up to date.

Now add the following code to the didSelectRowAtIndex method:

This is quite a bulky method with a lot of familiar code. First, we get a handle to the appDelegate and the todo object that was selected. Next, we push the todoView (the view you created in interface builder) on to the viewController stack to transition to it. After that, we are setting some of the properties of the view. The title is set to the text of the todo (it will get truncated if it is too long) and the UITextView is also set to the todo text. Next, we are translating our priority to an index for the UISegmentedView. I explained why this was necessary above. Then the index of the UISegmentedControl is set by using the setSelectedSegmentIndex method. Finally, we set the text of the button and label based on the status of the todo.

The very last thing we need to do is tell the application to save itself when it closes. Open up todoAppDelegate.m and add the following code to the applicationWillTerminate method:

If you ask me, this is some freakin sweet functionality. The method “makeObjectsPerformSelector” is a built in method on an NSArray. It basically loops over every object in the array, calling the method you pass in to it on each one. It’s like doing a for loop and calling the todo[x].dehydrate method for each todo. Only this is much cleaner. So, to reiterate, this method will call the dehydrate method on each todo. If the todo is “dirty” meaning it was altered, it will be saved to the database, otherwise the dehydrate method will do nothing.

* One thing to note. The applicationWillTerminate method will not be called if you quit the simulator while the application is running. To make sure it gets called (and the todo data gets saved) make sure you press the home button on the simulator after you make alterations to the todos. If you simply press Apple-q and quit the simulator while inside of the todo program, no data will be saved and you will post angry comments on my site telling me that my tutorial is wrong.

Click Build and Go and just sit back and enjoy the magic of rock! I mean XCode…

When you select a todo item, your screen should look something like this:

Well, that concludes part 3 of our series. Join me next time, when I will show you how to add and delete todos from the SQLite database. If you have any comments or questions, feel free to leave them in the comments section. I would love to hear them. Please subscribe to the RSS feed if you want to be automatically notified of new tutorials. If you get lost at any point, you can download the sample code for this tutorial here.

Happy iCoding!

]]> http://icodeblog.com/2008/09/10/iphone-programming-tutorial-creating-a-todo-list-using-sqlite-part-3/feed/ 68 http://icodeblog.com/2008/07/29/iphone-programming-tutorial-beginner-interface-builder-hello-world/ http://icodeblog.com/2008/07/29/iphone-programming-tutorial-beginner-interface-builder-hello-world/#comments Tue, 29 Jul 2008 15:29:12 +0000 http://icodeblog.com/?p=71 UITableView Hello World I said that there are many ways to write a “Hello World” tutorial for the iPhone. Here is one using Interface Builder. Last time, I demonstrated a simple way to populate one cell in a UITableView with some text. Today’s tutorial is even simpler. I will show you how to work with Interface Builder to create a simple layout for you application. In fact, you won’t ...]]>

In my last tutorial UITableView Hello World I said that there are many ways to write a “Hello World” tutorial for the iPhone. Here is one using Interface Builder. Last time, I demonstrated a simple way to populate one cell in a UITableView with some text. Today’s tutorial is even simpler. I will show you how to work with Interface Builder to create a simple layout for you application. In fact, you won’t write any code at all! In my next tutorial, I will detail how to interface with your UI components in code.

In this tutorial you will learn:

• Create a New View Based Project
• Opening the iPhone Simulator
• Adding UI Elements to your home screen
• Executing the code

Create a New View Based Project

Let’s start by opening up XCode and Creating a new View-Based Application. Do this by clicking on
File > New Project. Make sure that Application is highlighted under iPhone OS and select View-Based Application. Name this project HelloWorldViews.

So at this point, Apple has added some default files to get us started. They have added the main window for us to edit along with the code to launch the window. Now in iPhone terms, each window is called a View. Since you can only see one view at a time, you will need to create a new view for each screen in your application. In this tutorial, we will be sticking to editing the view Apple has provided us. In later tutorials, I will go into how to add new views and transition between them. Go ahead and click Build and Go.

Opening the iPhone Simulator

The program should compile and launch the iPhone Simululator. Your screen should look something like this.

Not very interesting right? Excuse my crappy screenshot. So let’s add some UI components to our view to make it more interesting. To do this we will be editing HelloWorldViewsViewController.xib . A file with the .xib extension is known as a nib file. These files open with Interface Builder and are where you define the look and feel of your application. Apple is nice enough to have provided us with one.

Adding UI Elements to You Home Screen

Once you open Interface Builder, you should see a few different windows… You should see a blank window that has the same dimentions as the iPhone that says View up in the top. If not click the View icon in the smaller box. This is the main window we will be editing.

To the right, you should see a tool box that contains many different UI components. Most of them should look familiar if you have ever used an iPhone application. So let’s add a few of them to our view. Just click on the one’s you want and drag them on to your view. Make sure you at least use a Label. For this tutorial, I have used a Label, Search Bar, and a Tab Bar. Notice when you drag the search bar and tab bar onto the view, they size correctly to the screen. Also, if you move the items around, you will see blue lines that guide you. These are in place to help you line up components and center them.

After you have added the label, click on it. Now let’s open the Attributes Inspector to change the text of the label. To do this click Tools > Attributes Inspector. At the top of the Attributes Inspector you should see a box labeled Text. If you don’t click on the label again to select it. Put whatever you would like the label to say in that box. I put “Hello World”. You can update other properties of the label including color and font using the Attributes Inspector. You may need to resize the Label to accommodate your new text. To do this click on the label and you will see little boxes around it that you can drag to resize the text area.

After you are done, your interface should look something like this:

Now press Apple-S to save this file. We are done with Interface Builder so you can close it. Your application should now be ready to execute.

Executing the Code

Go ahead and click Build and Go again to launch the iPhone Simulator. Your screens should look something like this:

There you have it! A simple iPhone application without writing a line of code. If you click in the search box, the iPhone will automatically pull up the keyboard. Thank you for reading this tutorial and I hope that you have learned something. In my next tutorial, I will show you how to use code to interface with our UI components. If you have any questions, feel free to leave them in the comments. Happy iCoding!