Ratatouille v0.2.0 Ratatouille.Renderer.View View Source

In Ratatouille, a view is simply a tree of elements. Each element in the tree holds an attributes map and a list of zero or more child nodes. Visually, it looks like something this:

%Element{
  tag: :view,
  attributes: %{},
  children: [
    %Element{
      tag: :row,
      attributes: %{},
      children: [
        %Element{tag: :column, attributes: %{size: 4}, children: []},
        %Element{tag: :column, attributes: %{size: 4}, children: []},
        %Element{tag: :column, attributes: %{size: 4}, children: []}
      ]
    }
  ]
}

View DSL

Because it's a bit tedious to define views like that, Ratatouille provides a DSL to define them without all the boilerplate.

Now we can turn the above into this:

view do
  row do
    column(size: 4)
    column(size: 4)
    column(size: 4)
  end
end

While the syntax is more compact, the end result is exactly the same. This expression produces the exact same %Element{} struct as defined above.

To use the DSL like this, we need to import all the functions:

import Ratatouille.View

Alternatively, import just the ones you need:

import Ratatouille.View, only: [view: 0, row: 0, column: 1]

Forms

All of the possible forms are enumerated below.

Element with tag foo:

foo()

Element with tag foo and attributes:

foo(size: 42)

Element with tag foo and children as list:

foo([
  bar()
])

Element with tag foo and children as block:

foo do
  bar()
end

Element with tag foo, attributes, and children as list:

foo(
  [size: 42],
  [bar()]
)

Element with tag foo, attributes, and children as block:

foo size: 42 do
  bar()
end

Empty Elements

Similar to so-called "empty" HTML elements such as <br />, Ratatouille also has elements for which passing content doesn't make sense. For example, the leaf node text stores its content in its attributes and cannot have any child elements of its own.

In such cases, the block and list forms are unsupported.

Link to this section Summary

Functions

Defines an element with the :bar tag

Defines an element with the :bar tag and either

Defines an element with the :bar tag and the given attributes and child elements

Defines an element with the :chart tag

Defines an element with the :chart tag and the given attributes

Defines an element with the :column tag

Defines an element with the :column tag and either

Defines an element with the :column tag and the given attributes and child elements

Defines an element with the :label tag

Defines an element with the :label tag and either

Defines an element with the :label tag and the given attributes and child elements

Defines an element with the :panel tag

Defines an element with the :panel tag and either

Defines an element with the :panel tag and the given attributes and child elements

Defines an element with the :row tag

Defines an element with the :row tag and either

Defines an element with the :row tag and the given attributes and child elements

Defines an element with the :sparkline tag

Defines an element with the :sparkline tag and the given attributes

Defines an element with the :table tag

Defines an element with the :table tag and either

Defines an element with the :table tag and the given attributes and child elements

Defines an element with the :table_cell tag

Defines an element with the :table_cell tag and the given attributes

Defines an element with the :table_row tag

Defines an element with the :table_row tag and either

Defines an element with the :table_row tag and the given attributes and child elements

Defines an element with the :text tag

Defines an element with the :text tag and the given attributes

Defines an element with the :tree tag

Defines an element with the :tree tag and either

Defines an element with the :tree tag and the given attributes and child elements

Defines an element with the :tree_node tag

Defines an element with the :tree_node tag and either

Defines an element with the :tree_node tag and the given attributes and child elements

Defines an element with the :view tag

Defines an element with the :view tag and either

Defines an element with the :view tag and the given attributes and child elements

Link to this section Functions

Defines an element with the :bar tag.

Examples

Empty element:

bar()

With a block:

bar do
  bar()
end
Link to this macro

bar(attributes_or_children) View Source (macro)

Defines an element with the :bar tag and either:

  • given attributes and an optional block
  • a list of child elements

Examples

Passing attributes:

bar(key: value)

Passing attributes and a block:

bar(key: value) do
  bar()
end

Passing list of children:

bar([elem1, elem2])
Link to this macro

bar(attributes, children) View Source (macro)

Defines an element with the :bar tag and the given attributes and child elements.

Examples

bar([key: value], [elem1, elem2])

Defines an element with the :chart tag.

Examples

Empty element:

chart()
Link to this macro

chart(attributes) View Source (macro)

Defines an element with the :chart tag and the given attributes.

Examples

chart(key: value)

Defines an element with the :column tag.

Examples

Empty element:

column()

With a block:

column do
  bar()
end
Link to this macro

column(attributes_or_children) View Source (macro)

Defines an element with the :column tag and either:

  • given attributes and an optional block
  • a list of child elements

Examples

Passing attributes:

column(key: value)

Passing attributes and a block:

column(key: value) do
  bar()
end

Passing list of children:

column([elem1, elem2])
Link to this macro

column(attributes, children) View Source (macro)

Defines an element with the :column tag and the given attributes and child elements.

Examples

column([key: value], [elem1, elem2])
Link to this function

element(tag, attributes_or_children) View Source

Link to this function

element(tag, attributes, children) View Source

Defines an element with the :label tag.

Examples

Empty element:

label()

With a block:

label do
  bar()
end
Link to this macro

label(attributes_or_children) View Source (macro)

Defines an element with the :label tag and either:

  • given attributes and an optional block
  • a list of child elements

Examples

Passing attributes:

label(key: value)

Passing attributes and a block:

label(key: value) do
  bar()
end

Passing list of children:

label([elem1, elem2])
Link to this macro

label(attributes, children) View Source (macro)

Defines an element with the :label tag and the given attributes and child elements.

Examples

label([key: value], [elem1, elem2])

Defines an element with the :panel tag.

Examples

Empty element:

panel()

With a block:

panel do
  bar()
end
Link to this macro

panel(attributes_or_children) View Source (macro)

Defines an element with the :panel tag and either:

  • given attributes and an optional block
  • a list of child elements

Examples

Passing attributes:

panel(key: value)

Passing attributes and a block:

panel(key: value) do
  bar()
end

Passing list of children:

panel([elem1, elem2])
Link to this macro

panel(attributes, children) View Source (macro)

Defines an element with the :panel tag and the given attributes and child elements.

Examples

panel([key: value], [elem1, elem2])
Link to this function

render(canvas, attrs, children, render_fn) View Source

Defines an element with the :row tag.

Examples

Empty element:

row()

With a block:

row do
  bar()
end
Link to this macro

row(attributes_or_children) View Source (macro)

Defines an element with the :row tag and either:

  • given attributes and an optional block
  • a list of child elements

Examples

Passing attributes:

row(key: value)

Passing attributes and a block:

row(key: value) do
  bar()
end

Passing list of children:

row([elem1, elem2])
Link to this macro

row(attributes, children) View Source (macro)

Defines an element with the :row tag and the given attributes and child elements.

Examples

row([key: value], [elem1, elem2])

Defines an element with the :sparkline tag.

Examples

Empty element:

sparkline()
Link to this macro

sparkline(attributes) View Source (macro)

Defines an element with the :sparkline tag and the given attributes.

Examples

sparkline(key: value)

Defines an element with the :table tag.

Examples

Empty element:

table()

With a block:

table do
  bar()
end
Link to this macro

table(attributes_or_children) View Source (macro)

Defines an element with the :table tag and either:

  • given attributes and an optional block
  • a list of child elements

Examples

Passing attributes:

table(key: value)

Passing attributes and a block:

table(key: value) do
  bar()
end

Passing list of children:

table([elem1, elem2])
Link to this macro

table(attributes, children) View Source (macro)

Defines an element with the :table tag and the given attributes and child elements.

Examples

table([key: value], [elem1, elem2])

Defines an element with the :table_cell tag.

Examples

Empty element:

table_cell()
Link to this macro

table_cell(attributes) View Source (macro)

Defines an element with the :table_cell tag and the given attributes.

Examples

table_cell(key: value)

Defines an element with the :table_row tag.

Examples

Empty element:

table_row()

With a block:

table_row do
  bar()
end
Link to this macro

table_row(attributes_or_children) View Source (macro)

Defines an element with the :table_row tag and either:

  • given attributes and an optional block
  • a list of child elements

Examples

Passing attributes:

table_row(key: value)

Passing attributes and a block:

table_row(key: value) do
  bar()
end

Passing list of children:

table_row([elem1, elem2])
Link to this macro

table_row(attributes, children) View Source (macro)

Defines an element with the :table_row tag and the given attributes and child elements.

Examples

table_row([key: value], [elem1, elem2])

Defines an element with the :text tag.

Examples

Empty element:

text()
Link to this macro

text(attributes) View Source (macro)

Defines an element with the :text tag and the given attributes.

Examples

text(key: value)

Defines an element with the :tree tag.

Examples

Empty element:

tree()

With a block:

tree do
  bar()
end
Link to this macro

tree(attributes_or_children) View Source (macro)

Defines an element with the :tree tag and either:

  • given attributes and an optional block
  • a list of child elements

Examples

Passing attributes:

tree(key: value)

Passing attributes and a block:

tree(key: value) do
  bar()
end

Passing list of children:

tree([elem1, elem2])
Link to this macro

tree(attributes, children) View Source (macro)

Defines an element with the :tree tag and the given attributes and child elements.

Examples

tree([key: value], [elem1, elem2])

Defines an element with the :tree_node tag.

Examples

Empty element:

tree_node()

With a block:

tree_node do
  bar()
end
Link to this macro

tree_node(attributes_or_children) View Source (macro)

Defines an element with the :tree_node tag and either:

  • given attributes and an optional block
  • a list of child elements

Examples

Passing attributes:

tree_node(key: value)

Passing attributes and a block:

tree_node(key: value) do
  bar()
end

Passing list of children:

tree_node([elem1, elem2])
Link to this macro

tree_node(attributes, children) View Source (macro)

Defines an element with the :tree_node tag and the given attributes and child elements.

Examples

tree_node([key: value], [elem1, elem2])

Defines an element with the :view tag.

Examples

Empty element:

view()

With a block:

view do
  bar()
end
Link to this macro

view(attributes_or_children) View Source (macro)

Defines an element with the :view tag and either:

  • given attributes and an optional block
  • a list of child elements

Examples

Passing attributes:

view(key: value)

Passing attributes and a block:

view(key: value) do
  bar()
end

Passing list of children:

view([elem1, elem2])
Link to this macro

view(attributes, children) View Source (macro)

Defines an element with the :view tag and the given attributes and child elements.

Examples

view([key: value], [elem1, elem2])