Eureka Tutorial – Start Building Easy iOS Forms

The Home Stretch

You're almost at the finish line! At the bottom of viewDidLoad(), insert the following:

//1
let footer = EditToDoTableFooter(frame: .zero)
//2
footer.action = footerTapped
//3
if let tableView = tableView, viewModel.category == nil {
  tableView.tableFooterView = footer
  tableView.tableFooterView?.frame = CGRect(x: 0, y: 0, width: tableView.bounds.width, height: 50.0)
}

1. Declare an instance of EditToDoTableFooter. You pass a zero frame, because the size will be handled by constraints tied to the cell layout.
2. footer.action is triggered when the footer button is pressed, and this ensures it fires the code you defined in the footerTapped closure.
3. If the view model's category is nil, set the table view's tableFooterView property to our newly-instantiated footer. Next, set the footer's frame to the desired dimensions.

Build and run the project. Tap the large, white button with the words Add Category at the bottom of the table view. Voila! The button is replaced by the custom PushRow subclass you created.

Tap this row to choose from a selection of "emoji-fied" categories. Eureka!

Finishing Touches

The app's users should have the ability to add and delete items. Luckily, the starter project has been set up to do this, and all you have have to do is wire it up.

Open ToDoListViewController.swift and uncomment the following lines of code in addButtonPressed(_:):

  // Uncomment these lines
  //1
  let addViewModel = viewModel.addViewModel()
  //2
  let addVC = EditToDoItemViewController(viewModel: addViewModel)
  navigationController?.pushViewController(addVC, animated: true)

1. addViewModel() instantiates the view model necessary to add a new to-do item.
2. EditToDoItemViewController is instantiated with the addViewModel just created, then pushed onto the navigation stack.

Build and run. This time tap the + to generate a blank to-do item. Fill in the details, then save it. It’s about time you picked up your laundry!

If you were being adventurous, you might have noticed that tapping Back instead of Save had the same effect: the item was added. This is because the model is created as soon as you tap +.

Next, you're going to work on deletion for this case as well as to delete older items.

In EditToDoItemViewController, find deleteButtonPressed(_:) and uncomment the following lines:

//1
let alert = UIAlertController(title: "Delete this item?", message: nil, preferredStyle: .alert)
let cancel = UIAlertAction(title: "Cancel", style: .cancel)
let delete = UIAlertAction(title: "Delete", style: .destructive) { [weak self] _ in
  //2
  self?.viewModel.delete()
    _ = self?.navigationController?.popViewController(animated: true)
    }
//3   
alert.addAction(delete)
alert.addAction(cancel)
navigationController?.present(alert, animated: true, completion: nil)

The above code will be executed when the Delete button in the navigation bar is pressed.

1. Create a UIAlertController with a title, cancel and delete actions.
2. In the completion handler of the delete action, tell the view model to delete the to-do item currently being edited. Then pop the current view controller off the navigation stack.
3. Add the cancel and delete actions to the alert controller, and present the alert controller on the navigation stack.

Next, delete the following lines of code from the bottom of deleteButtonPressed(_:):

 // Delete this line
 _ = self.navigationController?.popViewController(animated: true)

This is no longer necessary as you're now handling the pop after deleting the model.

And finally, go the initialize() method and find this line of code:

let deleteButton = UIBarButtonItem(title: "Back", style: .plain, target: self, action: .deleteButtonPressed)

Change the title of the bar button item from "Back" to "Delete" so it reads as follows:

let deleteButton = UIBarButtonItem(title: "Delete", style: .plain, target: self, action: .deleteButtonPressed)

Build and run. Whether you're adding a new item or editing an existing one, tapping Save will take you back to the to-do list only if there are no validation errors (i.e., if the item title is not blank). Tapping Delete will remove the item and take you back to the to-do list.

Where To Go From Here?

The finished project can be downloaded here.

I hope this Eureka tutorial helped you gain a broad understanding of the advantages and possibilities of using Eureka. I encourage you to check out Eureka's own excellent documentation and in-depth tutorials to continue your journey:

• Eureka's Github Portal
• Eureka Community Portal
• Creating Your Own Rows For Eureka - Part 1 and Part 2

You can learn more about the Model-View-ViewModel (MVVM) architecture with the following resources:

• Introduction to MVVM
• Tutorial by Erik Cerney from RWDevCon 2016 Vault.

Please share any questions or comments in the discussion below!