Ruby On Rails integration / Overview

Webface.js has integration with Ruby On Rails via the webface_rails rubygem. It provides the the following functionality:

  • Helpers to create component presentation in haml
  • Helpers to create forms with components, which are inputs
  • Standard components views
  • Defaults css styles for standard component views
  • Generators for easy integration

Without any understanding of the creating component views whih are discussed in the next section, you can start using webface_rails predefined component views like this:

%h1 Webface test
= component :button, caption: "hello", type: "button"
= component :checkbox, label: "hello", name: "checkbox1"
= component :hidden_form_field, name: "hidden_field_1", value: "hidden value"
= component :numeric_form_field, name: "numeric_form_field", value: "123"

= button_link "My offers", "/offers"
= post_button_link "Delete offer", "/offers", "POST" 
= webface_form @offer do |f|
  = f.hidden :country_id, value: current_user.country_id
  = f.text :title, hint: t("hints.offer_form.custom_title"), tabindex: 2
  = f.textarea :description, hint: t("hints.offer_form.description"), tabindex: 1
  .actions
    = f.submit "Save offer"
    = f.checkbox :published


As you can see, you can create component views very easily, They even have default stylesheets provided by webface_rails. And the webface_form helper works almost the same as simple_form.

Of course, webface_rails allows you to create your own component views that you can reuse. That and the details of using webface_rails helpers will be discussed in the next sections.

Instead of writing erb/haml code for components by hand, listing all the necessary html-attributes, such as data-component-class, data-component-roles and others, webface_rails allows you to make use of special helpers which significantly ease this process.

There are 4 major helpers that you might want to use in your erb/haml code:

  • #component
  • #component_template
  • #component_part
  • #component_attr
  • #define_component (alias for #component_block)