Ruby On Rails integration / Standard components views

Just like Webface.js provides standard components (javascript code), webface_rails provides component views (haml + scss) for those components. Because webface_rails gem is implemented as a rails engine, it automatically loads those into your path, so you can use them without any additional configuration.

Loading scss styles

The only thing you need to add manually are stylesheets. If you're using scss (sass), just add this to your app/assets/application.scss:

@import "webface_components";

and it will load all the stylessheets necessary to properly display components in your Rails app.

Using component views

Here's a list of component views you can use by calling the #component helper:

= 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"
= component :password_form_field, name: "password_form_field", value: "hello"
= component :radio, collection: ["hello", "world"]
= component :textarea_form_field, value: "Lot's of text"
= component :select, collection: { hello: "world", hi: "hello" }

/ This one generates a :hint component view and a trigger for it
/ so you don't have to write it manually.
= component :hint_with_trigger, id: "hint1", content: "hint content"
= component :hint_with_trigger, id: "hint2" do
  This is a hint content

/ These are templates, so let's hide them.
%div(style: "display: none")
  = component_template :dialog_window
  = component_template :simple_notification
  = component_template :modal_window

It is recommended to try adding this code and experimenting with the options. There really isn't much to explain here, it is all pretty self-explanatory. If you want to actually explore the haml in those views, refer to the source code for the component views.

Button helpers

Buttons are so widely used that it made sense to devise a separate helpers specifically for ButtonComponent. There are two of those.

  • The #button_link generates a special button that looks like a button and works like a button (lock animation etc.), but is actually just a link, so when you click you go to a different page. This helper works pretty much like Rails link_to helper does:
    = button_link "My Offers", offers_path
  • The #post_button_link works much the same way, except that this button is capable of sending POST, PATCH, PUT and DELETE requests. It's very useful when, say, you want a button that sends a REST destroy request to one of your controllers:
    = button_link "Delete this offer", offers_path, {}, "DELETE"

    Third argument here is your regular options argument which can be used to pass html attributes, but most of the time you'd want it blank. Last argument defaults to POST by default, but in this case we had to specify DELETE.

    The way it works Under the hood, this helper constructs a small form which is submitted when the button is clicked.