RubyMotion Tutorial for Beginners: Part 2

Updating the Start Timer Button

The title of timer_button changes depending on the state of the button. It would be nice to polish your app a little further and change the background color of the button when it's selected.

To add this custom behavior, you'll create a new subclass of UIButton that can indicate a selected state. Can you guess where this new custom view class should go?

If you said "the app/views directory", you'd be right!

Create the following file using Terminal:

touch app/views/selectable_button.rb

Open selectable_button.rb add the following code:

class SelectableButton < UIButton

  def selected=(bool)
    super.tap do
      self.backgroundColor = bool ? UIColor.pomo_red_color : UIColor.pomo_green_color
    end
  end

end

In the above code, selected= takes a boolean parameter, calls super's selected= method, then sets backgroundColor to red if bool is true, and to green if it's false.

Note: You're calling super here, but there's no method named selected= defined in UIButton. What's going on?

Naming setters as set[Something] is a C-style idiom. In Ruby, the preference is to name setters like [something]= instead. RubyMotion cleverly offers support for both idioms and aliases them as well so you can choose to use one or the other as you see fit.

Ruby also offers method aliases in the form of [something]? for methods named is[Something].

Modify app/views/main_view.rb to use your new SelectableButton class instead of UIButton as shown below:

def timer_button
  @timer_button ||= SelectableButton.buttonWithType(UIButtonTypeCustom).tap do |button|
    button.styleId = 'timer_button'
    button.setTitle('Start Timer', forState: UIControlStateNormal)
    button.setTitle("Interrupt!" , forState: UIControlStateSelected)
    button.addTarget(nextResponder, action: 'timer_button_tapped:',
      forControlEvents: UIControlEventTouchUpInside)
  end
end

Run rake to build and launch your app; tap Start Timer and you'll see the button background turn to red like so:

Once the timer reaches zero, the button background returns to green.

Alerting the User

Your app is really starting to take shape — but there's a little more functionality to implement. One of the key principles of the Pomodoro Technique is that you should take a five minute break after your 25 minute block of work is over. You should suggest this to your user so they don't slip back into their old habits. UIAlertController is the perfect tool for this.

Add the following property method to main_view_controller.rb:

def alert_controller
  @alert_controller ||= UIAlertController.alertControllerWithTitle("Pomodoro Complete!",
    message: "Time to take a short break.",
    preferredStyle: UIAlertControllerStyleAlert).tap do |alert|
      ok_action = UIAlertAction.actionWithTitle("OK",
        style:UIAlertActionStyleDefault,
        handler: nil)
      alert.addAction(ok_action)
  end
end

You'll want to show this alert once the timer has finished counting down to zero, so pomodoro_timer_did_finish would be a perfect place to call this method.

Add the following line to pomodoro_timer_did_finish:

self.presentViewController(alert_controller, animated: TRUE, completion: nil)

Run rake to build and launch your app, then tap Start Timer; wait ten seconds and you should see your new alert controller make an appearance like so:

And that's it — you've completed your first RubyMotion application!

Where to Go From Here?

Hopefully you enjoyed working through this tutorial, and can appreciate the value RubyMotion provides, not just in time saved, but also in the emotional and mental energy you save by working with a friendlier, easier to use syntax.

If you would like to view the completed project, you can download a copy of it here.

To build and launch your RubyMotion app on a physical device, you can use the rake device command which you can learn more about here.

There are loads of great RubyMotion resources online; I'd recommend you check out RubyMotion Dispatch - A weekly newsletter as well as the developer documentation on the RubyMotion website.

If you have any questions or comments, feel free to join the discussion below!