Building apps with FunctionalTableData (Part 2)

Small view controllers, and cell actions.

Previously, we learned a bit about what FunctionalTableData is and how to create a better UITableViewCell. Now, let’s turn our attention to the view controller. Applying what we learned will dramatically reduce the amount of boilerplate code and will leave our View Controllers nice and tidy.

In part 2, we are going to completely build the screen and some cell interactions. If you want to skip the whole article you can find the source code to the final project at the bottom. Otherwise, continue reading 😉.

Making our first view controller

Since we are going to use a few of these, let’s make a subclass of UIViewController with the requirements from FunctionalTableData. You will be surprised how small it’s going to be.

Yup, sometimes you wonder how does this even work 😉.

Now that our View Controller knows about FunctionalTableData, let’s give it the state information to display. Using the code from the previous article we can implement the movie description screen, which looks something like this.

(Figure 1) Displaying the description of Toy Story.

Cell actions

Just one movie is pretty boring, let’s create a new screen that displays a list of movies. This will be a perfect example to introduce CellActions, another argument in our belovedCellConfigType that allows us to perform all sorts of operations on a cell. From 3D touch, to knowing when a cell comes into the user’s viewport, and more.

Let’s create an example where we take a list of movies, transform them into cells, and when selected they present the screen we previously developed. Doing this with FunctionalTableData is super trivial, and it looks like this.

selectionAction is just one of the many possibly things your cells can perform.

The selectionAction is pretty straightforward, a simple callback when the user taps on that given cell which returns an enum indicating if the cell should remain selected or not.

Passing the array of cells to renderAndDiff, the end result is something like this.

(Figure 2) selectionAction presenting our MovieViewController

That’s all we need to do to make our cells react to when the users are tapping on them. But let’s keep adding things to see the full power of CellActions.

UITableViewRowAction, no book keeping

Row actions are a nice way to add additional contextual UI to the cells, thankfully FunctionalTableData makes this super easy as well. Let’s say we want to add a little action when we swipe left on our little list of movies. It’s literally just these two things

rowActions in CellActions is very simple

Yup, simply create the actions you want and send them along in the rowActions arguments and off you go. Let’s see how that single line of code looks in our app.

(Figure 3) Our rowAction ready for usage

Conclusion

That is pretty much it, we now have a functioning app that we can play around with in the simulator. There are more arguments to CellActions, download the project below and add a few of your own to get a sense of the possibilities.

Now that you have the basics of FunctionalTableData worked out, in part 3 we are going to focus on creating a more dynamic list of movies to see the magic of renderAndDiff, and more complex layouts using composition.

Find the full Xcode project below with all the sample code discussed in part 1 and 2.

raulriera/technical-articles

Continue to part 3 >