Git Product home page Git Product logo

formotion's Introduction

Formotion

Build Status

Make this:

Complex data form

using this:

@form = Formotion::Form.new({
  sections: [{
    title: "Register",
    rows: [{
      title: "Email",
      key: :email,
      placeholder: "[email protected]",
      type: :email,
      auto_correction: :no,
      auto_capitalization: :none
    }, {
      title: "Password",
      key: :password,
      placeholder: "required",
      type: :string,
      secure: true
    }, {
      title: "Password",
      subtitle: "Confirmation",
      key: :confirm,
      placeholder: "required",
      type: :string,
      secure: true
    }, {
      title: "Remember?",
      key: :remember,
      type: :switch,
    }]
  }, {
    title: "Account Type",
    key: :account_type,
    select_one: true,
    rows: [{
      title: "Free",
      key: :free,
      type: :check,
    }, {
      title: "Basic",
      value: true,
      key: :basic,
      type: :check,
    }, {
      title: "Pro",
      key: :pro,
      type: :check,
    }]
  }, {
    rows: [{
      title: "Sign Up",
      type: :submit,
    }]
  }]
})

@form_controller = Formotion::FormController.alloc.initWithForm(@form)
@window.rootViewController = @form_controller

And after the user enters some data, do this:

@form.render
=> {:email=>"[email protected]", :password=>"password", 
    :confirm=>"password", :remember=>true, :account_type=>:pro}

Installation

gem install formotion

In your Rakefile:

require 'formotion'

Usage

Initialize

You can initialize a Formotion::Form using either a hash (as above) or the DSL:

form = Formotion::Form.new

form.build_section do |section|
  section.title = "Title"

  section.build_row do |row|
    row.title = "Label"
    row.subtitle = "Placeholder"
    row.type = :string
  end
end

Then attach it to a Formotion::FormController and you're ready to rock and roll:

@controller = Formotion::FormController.alloc.initWithForm(form)
self.navigationController.pushViewController(@controller, animated: true)

Data Types

See the visual list of support row types.

To add your own, check the guide to adding new row types.

Formotion::Form, Formotion::Section, and Formotion::Row all respond to a ::PROPERTIES attribute. These are settable as an attribute (ie section.title = 'title') or in the initialization hash (ie {sections: [{title: 'title', ...}]}). Check the comments in the 3 main files (form.rb, section.rb, and row.rb for details on what these do).

Setting Initial Values

Forms, particularly edit forms, have default initial values. You can supply these in the :value attribute for a given row. So, for example:

{
  title: "Email",
  key: :email,
  placeholder: "[email protected]",
  type: :email,
  auto_correction: :no,
  auto_capitalization: :none,
  value: '[email protected]'
}

Setting values for non-string types can be tricky, so you need to watch what the particular field expects. In particular, date types require the number of seconds from the beginning of the epoch as a number.

Retrieve

You have form#submit, form#on_submit, and form#render at your disposal. Here's an example:

class PeopleController < Formotion::FormController
  def viewDidLoad
    super

    self.navigationItem.rightBarButtonItem = UIBarButtonItem.alloc.initWithBarButtonSystemItem(UIBarButtonSystemItemSave, target:self, action:'submit')
  end

  def submit
    data = self.form.render

    person.name = data[:name]
    person.address = data[:address]
  end
end

Why would you use form#on_submit? In case you want to use type: :submit. Ex:

@form = Formotion::Form.new({
  sections: [{
  ...
  }, {
    rows: [{
      title: "Save",
      type: :submit
    }]
  }]
})

@form.on_submit do |form|
  # do something with form.render
end

form#submit just triggers form#on_submit.

Persistence

You can easily synchronize a Form's state to disk using the persist_as key in conjunction with the persist method. When your user edits the form, any changes will be immediately saved. For example:

@form = Formotion::Form.persist({
  persist_as: :settings,
  sections: ...
})

This will load the form if it exists, or create it if necessary. If you use Formotion::Form.new, then the form will not be loaded and any changes you make will override existing saved forms.

Your form values and state are automatically persisted across application loads, no save buttons needed.

To reset the form, persist it and call reset, which restores it to the original state.

View the Persistence Example to see it in action.

Callbacks

Row objects support the following callbacks:

row.on_tap do |row|
  p "I'm tapped!"
end

row.on_delete do |row|
  p "I'm called before the delete animation"
end

row.on_begin do |row|
  p "I'm called when my text field begins editing"
end

row.on_enter do |row|
  p "I'm called when the user taps the return key while typing in my text field"
end

Forking

Feel free to fork and submit pull requests! And if you end up using Formotion in your app, I'd love to hear about your experience.

Todo

  • Not very efficient right now (creates a unique reuse idenitifer for each cell)
  • Styling/overriding the form for custom UITableViewDelegate/Data Source behaviors.

formotion's People

Contributors

clayallsopp avatar mordaroso avatar sxross avatar gantman avatar ddrscott avatar andyw8 avatar dennismajor1 avatar dougpuchalski avatar julienxx avatar rmoriz avatar matsu911 avatar toufique avatar toamitkumar avatar colinta avatar dlongmuir avatar jaimeiniesta avatar macfanatic avatar rpmoore avatar tkadauke avatar lldong avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.