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
bar() View Source (macro)
Defines an element with the :bar
tag.
Examples
Empty element:
bar()
With a block:
bar do
bar()
end
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])
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])
chart() View Source (macro)
Defines an element with the :chart
tag.
Examples
Empty element:
chart()
chart(attributes) View Source (macro)
Defines an element with the :chart
tag and the given attributes.
Examples
chart(key: value)
column() View Source (macro)
Defines an element with the :column
tag.
Examples
Empty element:
column()
With a block:
column do
bar()
end
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])
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])
element(tag, attributes_or_children) View Source
element(tag, attributes, children) View Source
label() View Source (macro)
Defines an element with the :label
tag.
Examples
Empty element:
label()
With a block:
label do
bar()
end
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])
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])
panel() View Source (macro)
Defines an element with the :panel
tag.
Examples
Empty element:
panel()
With a block:
panel do
bar()
end
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])
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])
render(canvas, attrs, children, render_fn) View Source
row() View Source (macro)
Defines an element with the :row
tag.
Examples
Empty element:
row()
With a block:
row do
bar()
end
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])
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])
sparkline() View Source (macro)
Defines an element with the :sparkline
tag.
Examples
Empty element:
sparkline()
sparkline(attributes) View Source (macro)
Defines an element with the :sparkline
tag and the given attributes.
Examples
sparkline(key: value)
table() View Source (macro)
Defines an element with the :table
tag.
Examples
Empty element:
table()
With a block:
table do
bar()
end
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])
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])
table_cell() View Source (macro)
Defines an element with the :table_cell
tag.
Examples
Empty element:
table_cell()
table_cell(attributes) View Source (macro)
Defines an element with the :table_cell
tag and the given attributes.
Examples
table_cell(key: value)
table_row() View Source (macro)
Defines an element with the :table_row
tag.
Examples
Empty element:
table_row()
With a block:
table_row do
bar()
end
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])
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])
text() View Source (macro)
Defines an element with the :text
tag.
Examples
Empty element:
text()
text(attributes) View Source (macro)
Defines an element with the :text
tag and the given attributes.
Examples
text(key: value)
tree() View Source (macro)
Defines an element with the :tree
tag.
Examples
Empty element:
tree()
With a block:
tree do
bar()
end
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])
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])
tree_node() View Source (macro)
Defines an element with the :tree_node
tag.
Examples
Empty element:
tree_node()
With a block:
tree_node do
bar()
end
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])
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])
view() View Source (macro)
Defines an element with the :view
tag.
Examples
Empty element:
view()
With a block:
view do
bar()
end
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])
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])