bmichotte / ProMotion-XLForm

ProMotion-XLForm is a ProMotion plugin for XLForm
MIT License
20 stars 21 forks source link

Add support for selecting a keyboard type #32

Closed admpsktt closed 8 years ago

admpsktt commented 8 years ago

Perhaps I'm going about my particular problem the wrong way, but it seems to me that one should be able to, for example, specify a field be of type :password and, when clicked, pop up the :integer type keyboard. Is keyboard type selection on a per-screen basis part of RedPotion?

Is there an option I'm missing for each item in my cells array that achieves this?

admpsktt commented 8 years ago

This issue can be closed; I re-visited this today and came up with a solution. Here it is for anyone struggling with this, too:

# app/screens/pin_entry_screen.rb
#
class PinEntryScreen < PM::XLFormScreen

  stylesheet PinEntryScreenStylesheet

  title 'Login'

  form_options required:  :asterisks,
               on_save:   :'submit_pin:'

  def on_appear
    find(UITextField).apply_style(:pin_entry_input)
    find(UITextField).focus
  end

  def submit_pin(values)
    dismiss_keyboard
    #
    if values.fetch('pin') == '1111'
      App.alert("PIN-entry successful") do
        open_tab_bar HomeScreen.new(nav_bar: true), ConfigScreen.new(nav_bar: false)
      end
    else
      App.alert("PIN-entry failed") do
        on_appear
      end
    end
  end

  def form_data
    [
      title: nil,
      cells: [
        {
          name:        :pin,
          type:        :password,
          placeholder: 'Enter your 4-digit PIN',
          required:    true
        },
        {
          title:    'Submit',
          name:     :save,
          type:     :button,
          on_click: -> (cell) {
            on_save(nil)
          }
        },
      ]
    ]
  end

end

# app/stylesheets/pin_entry_screen_stylesheet.rb
#
class PinEntryScreenStylesheet < ApplicationStylesheet

  def pin_entry_input(st)
    st.text_alignment = :center
    st.keyboard_type  = :number_pad
  end

end

Here's a brief explanation of how this works: you specify a :password field-type to ensure what's entered is hashed-out for security. By default, this will pop up the default keyboard (UIKeyboardTypeDefault) but since, in my case, I needed UIKeyboardTypeNumberPad*, I had to override this in a custom stylesheet (see above).

As far as I can make out, PM::XLFormScreen sub-classes PM::Screen, making #on_appear* available. This provides a perfect place to apply styles (and focus) to the input on-screen.

* see a full list of keyboard-types provided by RMQ here;

Note: this also includes a solution to another issue I posted here recently.

bmichotte commented 8 years ago

I think :keyboard_type could be very cool indeed. I'll reopen your issue to implement this feature very soon

admpsktt commented 8 years ago

:+1:

bmichotte commented 8 years ago

keyboard_type is now available, see https://github.com/bmichotte/ProMotion-XLForm#keyboard