Unleash Your Inner App Developer - Putting Your Skills to the Test

Do you have an idea for an app but lack the programming knowledge to begin building it? In this weekly blog series, I will take you, the non-programmer, step by step through the process of creating apps for the iPhone, iPod touch, and iPad. Join me each week on this adventure, and you will experience how much fun turning your ideas into reality can be! This is Part 23 of the series. If you are just getting started, check out the beginning of the series here.

When I left you last, I had handed out a homework assignment to put iOS app development skills you have learned so far to the test. Your goal was to covert the My Reviews and Review scenes in the iAppsReview app from prototypes to fully functioning views. In this post, I'll go through the steps for you and I recommend comparing them to the steps you took in completing the homework assignment.

Figure 1 shows how the two scenes will look after completing the steps in this post.

Figure 1 - The completed My Reviews and Review scenes at run time

If you need the latest version of the iAppsReview project, you can download it from this link. If you run into any troubles along the way, you can get the completed project for this post at this link.

Let's get started.

Converting the My Reviews Scene

The first step in converting My Reviews scene to a fully functioning scene, is to change the table view from static to dynamic cells.

1. In Xcode, open the iAppsReview scene.

2. In the Project Navigator, select the MainStoryboard.storyboard file.

3. Scroll to the My Reviews scene in the storyboard.

4. Click in the gray area below the table view to select the table view.

5. Go to the Attributes Inspector, and change the Content type to Dynamic Prototypes.

6. Since all the cells in this table view have the same style, we can delete all the cells except the first cell. To do this, click on the second cell, hold the Shift key down, then click on third, fourth, and fifth cells. With the last four cells selected, press the Delete key. This leaves one cell remaining as shown in Figure 2.

Figure 2 - Leave just one cell remaining.

7. With the remaining cell in the table selected, go to the Attributes Inspector and set the cell's Identifier attribute to ReviewCell (Figure 3).

Figure 3 - Set the cell's Identifier to ReviewCell.

Creating the My Reviews Table View Controller

For our next step, we need to create a table view controller that we can use in conjunction with the My Reviews scene to fill and manage the table view.

1. In the Project Navigator, right click the iAppsReview group, and select New File... from the popup menu.

2. On the left side of the New File dialog under the iOS section, select Cocoa Touch. On the right side of the dialog, select the Objective-C class template (Figure 4), and then click the Next button.

Figure 4 - Create a new Objective-C class.

3. In the next step of the New File dialog, set the Class to MyReviewsViewController and set the Subclass of to UITableViewController (Figure 5).

Figure 5 - Create a new MyReviewsTableViewController class as a subclass of UITableViewController

4. In the Save File dialog, click the Create button. This adds the new class files to the Project Navigator (Figure 6).

Figure 6 - The new table view controller files

5. As soon as you create a new table view controller, you should immediately associate it with the scene (because it's easy to forget). To do this, go to the Project Navigator and click on the MainStoryboard file. Then go to the My Reviews scene and click on the status bar at the very top of the scene to select the table view controller. Next, go to the Identity Insepctor (the third button from the left in the Inspector toolbar) and change the Class to MyReviewsViewController (Figure 7).

Figure 7 - Set the view controller class to MyReviewsViewController.

Now we're ready to add code to the new class to fill and manage the My Reviews scene's table view.

Setting Up the Table View Controller

We are going to need the services of the Review business controller class to retrieve ReviewEntity objects from the database, so let's start there.

1. In the Project Navigator, select the MyReviewsViewController.m file.

2. At the top of the MyReviewsViewController.m file, add the import statements shown in Figure 8.

Figure 8 - Add these import statements.

3. We need a place to store the Review business controller object and the ReviewEntity objects that are retrieved from the database, so add the instance variables shown in Figure 9.

Figure 9 - Add these instance variables.

4. Next, add the code shown in Figure 10 to the bottom of the viewDidLoad method (you can delete all existing comments in viewDidLoad first).

Figure 10 - Add this code to the viewDidLoad method.

Next, we need to implement the table view data source methods in the view controller.

1. In the numberOfSectionsInTableView: method, delete the #warning declaration and add the code shown in Figure 11.

Figure 11 - Add this code to the numberOfSectionsInTableView: method.

2. In the tableView:numberOfRowsInSection: method, delete the #warning declaration and add the code shown in Figure 12.

Figure 12 - Add this code to the tableView:numberOfRowsInSection: method.

3. In the tableView:cellForRowAtIndexPath: method, change the code as shown in Figure 13.

Figure 13 - Add this code to the tableView:cellForRowAtIndexPath: method

Testing the My Reviews Scene

Now we're ready to check out our code to see how it works.

1. Click Xcode's Run button.

2. When the app appears in the Simulator, first tap the Write a Review option to create a review and post it.

3. Next, in the main iAppsReview scene, select the Read Your Reviews option, and you should see all of the reviews that you have added so far (Figure 14). 

Figure 14 - The My Reviews scene at run time.

You have met with success!

Converting the Review Scene

Before leaving the My Reviews scene in the Simulator, click on one of your reviews in the list and you will be taken to the Review scene. This scene is still a prototype and displays static information about the Doodle Jump app. 

1. Click Xcode's Stop button.

2. In the Project Navigator, select the MainStoryboard file and scroll to the Review scene. All of the UI controls we need have been placed on the scene and are ready to accept live data. There's nothing else we need to do to the user interface of this scene right now. I just wanted you to take a look at it before we begin.

Creating the Review View Controller

For many of the other scenes we have converted, we created an associated table view controller. However, since this scene doesn't contain a table view, we can create just a plain view controller.

1. In the Project Navigator, right-click the iAppsReview node and select New File... from the popup menu. 

2. On the left side of the New File dialog under the iOS section, select Cocoa Touch.

3. On the right side of the dialog, select Objective-C class template and click the the Next button.

4. In the next step of the dialog, set the Class to ReviewViewController and set Subclass of to UIViewController (notUITableViewController) as shown in Figure 15.

Figure 15 - Create a new ReviewViewController class.

5. Click the Next button, and in the Save File dialog, click the Create button. This adds two new class files to the Project Navigator (Figure 16).

Figure 16 - New view controller files

6. Now let's associate the new view controller with the Review scene. In the Project Navigator, select the MainStoryboard file. Afterwards, click the status bar at the top of the Review scene, then go to the Identity Inspector and set the Class to ReviewViewController (Figure 17).

Figure 17 - Set the Class to ReviewViewController.

Setting Up the Review View Controller

Let's start out by adding outlets to the user interface controls so we can access them from the view controller.

1. Turn on the Assistant Editor by going to the top of the Xcode window and clicking the center button in the Editor button group.

2. Click on the Review scene in the storyboard. If the ReviewViewController.h file is not automatically displayed in the Assistant Editor, go to the jump bar at the top of the Assistant Editor, click the Manual button and select Automatic > ReviewViewController.h.

3. At the top of the ReviewViewController.h file, add the import statement shown in Figure 18.

Figure 18 - Import mmStarRating.h.

4. Click on the Doodle Jump label in the Review scene to select it, hold the Control key down and then click and drag down into the ReviewViewController.h file as shown in Figure 19.

Figure 19 - Create an outlet for the label.

5. When you see the Insert Outlet or Outlet Collection popup, let go of the mouse button and Control key.

6. In the Create Connection popup, set the Name to lblAppName and then click Connect. This adds a new outlet property to the code file as shown in Figure 20.

Figure 20 - The new outlet property

7. Now create an outlet for the other controls in the scene. Give the outlets the following names:

• Entertainment label - lblCategory
• Five Star Rating control - starRating
• Comments text view - tvwComments
• Image view - imgThumbnail

When you're finished, the ReviewViewController.h should look like Figure 21.

Figure 21 - The completed outlet properties

Passing Data to the Review View Controller

In a previous post, I discussed how to pass data between view controllers. The scenario with the Review view controller is a little easier, because we only need to pass data one way. We need to pass the currently selected review's information from the My Reviews scene to the Review scene. However, since the Review scene doesn't allow editing, we don't need to pass any information back.

By way of review, here are the three main steps we need to perform to pass data to a view controller.

1. Create a property on the destination view controller to hold the data being passed by the source view controller.

2. Configure the segue between the source and destination view controllers.

3. In the source view controller, implement the prepareForSegue: method and add code that stores the data to be passed to the destination view controller's property.

In this scenario, it makes sense to pass a ReviewEntity object from the My Reviews view controller to the Review view controller.

1. Close the Assistant Editor by clicking the left button in the Editor button group at the top of the Xcode window.

2. In the Project Navigator, select the ReviewController.h file and add the import statement and property declaration shown in Figure 22.

Figure 22 - Add the import statement and property declaration.

3. In the Project Navigator, select the ReviewController.m file and add the code shown in Figure 23 to the viewDidLoad method. Notice we left out the code that stores information in the image view control and the category label. This requires some special code, so we'll get to these items in a future post!

Figure 23 - Add this code to the viewDidLoad method.

Our next step is to configure the segue between the My Reviews and Review scenes.

1. In the Project Navigator, select the MainStoryboard file.

2. Click on the segue between the My Reviews and Review scene. Notice that when you do this, Xcode highlights the Doodle Jump row in the table view (if it doesn't, you have the wrong segue selected). This is because the segue is currently hard-coded to this specific row. Now that we are converting the app from a prototype, we need to delete this segue and create a new one.

3. Press the Delete key to delete the segue.

4. Click the status bar of the My Reviews scene to select the table view controller. 

5. Hold the Control key down, and then in the scene dock below the My Reviews scene, click the view controller icon on the left. Drag your mouse pointer to the Review scene until the scene is highlighted in blue.

6. In the segue popup, select Push.

7. Click on the segue in the storyboard to select it, and then go to the Attributes Inspector and set the Identifier to ReviewSegue as shown in Figure 24.

Figure 24 - Set the segue Identifier to ReviewSegue.

Now let's to the source view controller and implement the prepareForSegue method.

1. In the Project Navigator, select the MyReviewsViewController.m file.

2. At the top of the code file add the import statement shown in Figure 25.

Figure 25 - Import ReviewViewController.h

3. Add the prepareForSegue method shown in Figure 26 directly below the viewDidLoad method.

Figure 26 - Add this prepareForSegue method to the ReviewViewController.m file.

4. Now scroll to the bottom of the code file. Delete all of the existing comments from the tableView:didSelectRowAtIndexPath: method and replace it with the code shown in Figure 27. This code triggers the segue when the user taps a row in the table view.

Figure 27 - Add this code to the tableView:didSelectRowAtIndexPath: method.

That's it! You have added all the code you need to pass data from the My Reviews view controller to the Review view controller.

Testing the Review Scene

Now we're ready to take it for a spin.

1. In Xcode, click the Run button.

2. When the app appears in the Simulator, select the Read Your Reviews row.

3. Select one of the rows from the list and you should see its information displayed in the Review scene as shown on the right side of Figure 1 at the beginning of this post!

I recommend that you add several reviews with different ratings, comments, and so on, then come back to the My Reviews scene and check them out. REMEMBER, as the app stands right now, you won't see a change in the Category or the image, but we'll address this in a future post.

Conclusion

So how did you do? It's amazing what you can learn when you take off the training wheels and try it on your own. If you're a little foggy on the steps outlined here, I recommend going through them a few times until they make sense. As always, you can ask any questions you have in the comments for this post!