Eureka

15 Dec 2015

Previously on The iOS Times Advent Calendar we had a look at Static a library to generate static table views, which is something that every iOS developer will have to do in their career.

And you know what’s something else that sooner or later we will all have to write? A form.

Eureka is a form building framework that empowers developers with a comprehensive suite of inputs, and a relatively simple API.

Let’s see how we can build a simple login form.

import UIKit
import Eureka

class ViewController: FormViewController  {

  override func viewDidLoad() {
    super.viewDidLoad()

    addLoginForm(toForm: form)
  }

  private func addLoginForm(toForm form: Form) {
    form +++ Section("Login Form")
      <<< TextRow() { $0.placeholder = "Username" }
      <<< PasswordRow() { $0.placeholder = "Password" }
      <<< ButtonRow() {
        $0.title = "Login"
        $0.onCellSelection { cell, row in
          self.presentAlert(message: "Will login")
        }
    }
  }
}

You got the idea right? I like how descriptive Eureka allows us to be. Yes it might not be as easy to visualise as a Storyboard, but when it comes to make changes which do you think will be easier?

As you will have noticed Eureka uses fancy custom operators +++ and <<<. In my opinion unless the operator is a defacto standard like += it is always more confusing than beneficial to use them.

The same could be rewritten without operators like this:

let section = Section("Login Form")

section.append(TextRow() { $0.placeholder = "Username" })
section.append(PasswordRow() { $0.placeholder = "Password" })
section.append(
	ButtonRow() {
		$0.title = "Login"
		$0.onCellSelection { cell, row in
			self.presentAlert(message: "Will login")
		}
	}
)

form.append(section)

Which one is better is up to you and your team to decide.

Eureka has a lot more to offer, let’s see two other examples

Multiple choice forms

form +++ Section("Multiple Choices")
  <<< MultipleSelectorRow<String>() {
    $0.title = "Favourite Foods"
    $0.options = ["🍝", "🍟", "🍕", "🍚"]
    $0.value = ["🍝", "🍕" ]
}

This will add a row to your form that when selected will push to a new screen with a table view listing all the options.

Hiding form fields using a switch

let switchRowTag = "switch_row"
let setStartDateRowTag = "set_start_date_time"
let setEndDateRowTag = "set_end_date_time"

let switchRow = SwitchRow(switchRowTag) {
  $0.title = "All Day Event"
  $0.value = true
}

let hiddenCondition = Condition.Function([switchRowTag]) { form in
  guard let switchCell = form.rowByTag(switchRowTag) as? SwitchRow else {
    return false
  }

  return switchCell.value == true
}

form +++ Section()
  <<< switchRow
  <<< DateTimeInlineRow(setStartDateRowTag) {
    $0.title = "Starts"
    $0.value =  NSDate.oneHourFromNow()
    $0.hidden = hiddenCondition
}
  <<< DateTimeInlineRow(setEndDateRowTag) {
    $0.title = "Ends"
    $0.value =  NSDate.hoursFormNow(4)
    $0.hidden = hiddenCondition
}

In the snipped above we created a row with a switch, and defined a hiddenCondition function that reads the value of the switch. The other rows in the form have their hidden property set with hiddenCondition, this way depending on the state in which the switch is the rows will be either visible or not.

Next Steps

It might take a bit of effort to get familiar with Eureka’s APIs, but once you will be, you’ll draw advanced forms in no time. Perfect for rapid prototyping.

There are a lot of form fields for you to use, head over to the project repo on GitHub for a fully documented list, or do a git clone of the example project for this tutorial to have some code you can play with.

That’s it for today. See you tomorrow with a library to manage the Keychain in Swift style. Subscribe to the email list to avoid missing out.

If you found this post useful and want to support the Advent Calendar please consider sharing it on your favourite social network. Thanks 🎅

The iOS Times

Eureka

How to build a login form with Eureka

Multiple choice forms

Hiding form fields using a switch

Next Steps