Components
One of Riots most notably features is the possibility to edit content right on the website via the Riot toolbar. This editable content is stored in so-called components. The term “component” may refer to two different (but related) things: first, the generic data-structure that is used to store the content and second a FreeMarker view which renders the data.
The component views are located in webapp/WEB-INF/view/components. A basic, very simple view might look like this:
This component will render a H1 tag with the text "Headline". The inplace.text macro tells Riot to make the text inplace-editable via the text-tool.
Each component has its own private data scope. You can think of a component as persistent map that can contain arbitrary values keyed by strings. The key parameter in the example above instructs Riot to store the content of the H1 tag under the key "headline" in the component's data map.
In order to use this component, it has to be added to a so-called component-list. First of all we need to specify where the component-list should be stored. The easiest and most common option is to store the list in the content-container of the current page. This is done by the outer pages.use tag:
<@inplace.componentList key="content"
valid=["headline","paragraph", "image"] />
</@pages.use>
The inner inplace.componentList tag does two things. First it specifies under which key the list should be stored. Second it defines all valid component types that can be inserted.