Introducing Form — Layout, styling, and event handling

Måns Bernhardt
Jun 29, 2018 · 5 min read

Building UIs for iOS applications means to layout, style and react to events. Even though UIKit provides most of what we need, there are still areas where the experience can be improved. For example, the indirection enforced by the pervasive use of delegates and selectors forces your code to be split apart. It would also be nice if we could have access to more of Swift’s expressive power such as value types and generics when working with UIKit.

With the introduction of the Flow framework we presented a fundamental programming model for working with UI events. We followed up with the Presentation framework for a more formalized way of presenting view controllers from model to result. Form, introduced in this article, concludes by focusing on the content inside our view controllers.

To showcase the main ideas behind the Form framework we will build a simple messages application based on a Message model:

The application will consist of a view listing our messages and a view for composing new messages:

Image for post
Image for post
Messages and compose views using system styling

We start out by building a form for composing new messages. We want our form to be styled and laid out as a table view. Table-like layouts are common in iOS applications, such as iOS’s general settings. However, building forms using table views can be tricky because of the indirection enforced by data sources, delegates, and cells. If we on top of that introduce some dynamism to our table’s content, this can result in some serious juggling of section and row indices.

Form provides UI components that with the help of Flow, removes this indirection by building tables using stack views laid out and styled as table views.

In our compose message example below, we extend UIViewController with a presentComposeMessage() method that adds two fields for editing the title and body of a message. The method also adds navigation items for canceling and saving, that when tapped will complete the future returned from the method to notify that we are done:

When creating the fields and bar items above we use convenience initializers that take a style parameter with a default value. The defaults used for these initializers can be globally overridden such as shown in the following screenshot:

Image for post
Image for post
Messages and compose views using custom styling

However, you can create your own styles and explicitly pass them when constructing your UI components:

While you can use forms (introduced above) for building tables with uniform row types, such as:

this would not be efficient for large tables. To solve this, Form provides utilities for rendering these using UITableViews instead. This is showcased in the view controller presenting the messages list presented below. In this example, we pass the messages as a signal. That way we can listen for changes and update the UI when the messages list is updated, for example after composing a new message:

To be able to present our Message model in a table cell, we need to describe how to create views from it and how to reuse them. This is handled by conforming your model to the Reusable protocol:

Both the messages’ and compose view’s tables, even though implemented differently, are styled using the same styles and use the same defaults.

To complete our sample app, we will show how we can add a compose button to the messages view to present the compose view and then update our messages model with the newly composed message:

If you have read the Introducing Presentation article you will recognize that it builds on the same messages example shown above. However, in that article, we focused on the presentation of view controllers and the data going in and out, whereas in this article we have focused on what goes into a view controllers view.

Even though Presentation and Form can be used independently, they were evolved and designed to work together. At iZettle, we use both frameworks throughout the iZettle app with the benefit of having a more consistent and robust code-base that is easier to reason and more fun to maintain.

In this article, we have only showcased a small part of what Form has to offer. If you want to learn more we recommend that have a look at GitHub.

iZettle Engineering

We build tools to help business grow — this is how we do it.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store