Basic View Helpers

The Jasper::Helpers library provides a common set of helper methods that can simplify the development of the views.

Links

A link_to helper is available:

== link_to "Home", "/"

Produces the following HTML

<a href="/">Home</a>

Buttons

A button_to helper is available:

== button_to "Logout", "/logout"

Produces the following HTML

<form action="/logout" class="button" method="post">
  <button type="submit">Logout</button>
</form>

For more complex forms, see section below.

Forms

The form helpers listed below are very basic helpers that are included by default. For a more complete form building experience we strongly recommend using FormBuilder.cr

The following methods provide simple HTML form elements:

• form

• text_field

• label

• hidden_field

• select_field

• text_area

• check_box

• submit

Use amber generate scaffold [Resource] [field:type] ... to get the most up-to-date examples of using helpers for resources.

form

== form(action: "/posts", method: :post) do
  == csrf_tag
  == submit("Create Post")

/ When using `method: :patch`, it add the hidden '_method' field for you
== form(action: "/posts", method: :patch) do
  == csrf_tag
  == submit("Update Post")

Produces the following HTML

<form action="/posts" method="post">
  <input type="hidden" name="<csrf-name-here>" value="<csrf-token-here>" />
  <input type="submit" value="Create Post" id="create_post">
</form>

<form action="/posts" method="post">
  <input type="hidden" name="_method" id="_method" value="patch">
  <input type="hidden" name="<csrf-name-here>" value="<csrf-token-here>" />
  <input type="submit" value="Update Post" id="update_post">
</form>

text_field

== text_field name: "title", value: "", placeholder: "Title"

Produces the following HTML

<input type="text" name="title" id="title" value="" placeholder="Title">

label

== label :title

Produces the following HTML

<label for="title" id="title_label">Title</label>

text_area

== text_area name: "body", content: "", placeholder: "Body", size: "30x10"

Produces the following HTML

<textarea name="body" id="body" placeholder="Body" cols="30" rows="10"></textarea>

hidden_field

== hidden_field name: "secret", content: "Super Secret"

Produces the following HTML

<input type="hidden" name="secret" id="secret" content="Super Secret">

select_field

/ Array of Arrays
== select_field name: "ranking", collection: [[1, "First"], [2, "Second"]], selected: 1

/ Array of Hashes
== select_field name: "ranking", collection: [{ 1 => "First" }, { 2 => "Second" }], selected: 1

/ Hash
== select_field name: "ranking", collection: { 1 => "First", 2 => "Second" }, selected: 1

All the previous code samples produce the following HTML

<select name="ranking">
  <option value="1" selected="selected">First</option>
  <option value="2">Second</option>
</select>

check_box

== check_box(:published, checked: false)

Produces the following HTML

<input type="checkbox" name="published" id="published" value="1" checked="false">

All together

== form(action: "/posts", method: :post) do
  == csrf_tag

  == hidden_field name: "secret", content: "Super Secret"

  == label :title
  == text_field name: "title", value: "", placeholder: "Title"

  == label :body
  == text_area name: "body", content: "", placeholder: "Body", size: "30x10"

  == label :ranking
  == select_field name: "ranking", collection: [[1, "First"], [2, "Second"]], selected: 1

  == label(:published)
  == check_box(:published, checked: false)

  == submit("Create Post")

Produces the following HTML

<form action="/posts" method="post">
  <input type="hidden" name="<csrf-name-here>" value="<csrf-token-here>" />

  <input type="hidden" name="secret" id="secret" content="Super Secret">

  <label for="title" id="title_label">Title</label>
  <input type="text" name="title" id="title" value="" placeholder="Title">

  <label for="body" id="body_label">Body</label>
  <textarea name="body" id="body" placeholder="Body" cols="30" rows="10"></textarea>

  <label for="ranking" id="ranking_label">Ranking</label>
  <select name="ranking">
    <option value="1" selected="selected">First</option>
    <option value="2">Second</option>
  </select>

  <label for="published" id="published_label">Published</label>
  <input type="hidden" name="published" id="published" value="0"><input type="checkbox" name="published" id="published" value="1" checked="false">
  <input type="submit" value="Create Post" id="create_post">
</form>