Renderer Component Types
The Renderer categorizes component into different types depending on the nature of the data that is to be rendered. Different component types will have different fields, but in general, the tree for a component will contain either the actual data or a reference to a data model containing the data (see Renderer Data Binding for more information). The component types are not stated explicitly in the object, but the type is inferred by the Renderer based on the presence of the require fields.
The following tables describe the different types of components and the fields used by each component. In these tables, field names shown in bold text are the definitive fields that will indicate which type of component is being described.
Bound A control which holds a single value
field |
type |
description |
|---|---|---|
|
string |
Rendering id of the component, which pairs up with the |
|
string/boolean/Array of string |
The value held in the bound component |
|
string |
An expression language (EL) expression representing the path within any bound data model that the value is to be associated with. |
|
boolean |
Marks this component out as performing input as well as output (not yet fully supported) |
|
string |
|
Examples:
{
ID: "myParagraph",
value: "This is some text."
},
{
ID: "myInputField",
valuebinding: myModel.inputs.value
}
Link A reference to a URL
field |
type |
description |
|---|---|---|
|
string |
Rendering id of the component, which pairs up with the |
|
string |
The URL (href/src, etc) which is the target of this link component. |
|
string |
The text value (if any) associated with this link - for example, for an anchor tag, will appear as the link body. |
Examples:
{
ID: "myAnchorTag",
target: "http://fluidproject.org"
},
{
ID: "linkToAnchor",
target: "#internalAnchor",
linktext: "See more information below"
}
Select A selection control where a user chooses either one or many options from a set of alternatives. May be rendered as a set of checkboxes or a <select> tag.
field |
type |
description |
|---|---|---|
|
string |
Rendering id of the component, which pairs up with the |
|
Bound (string or list) |
The actual user selection made from the list of alternatives |
|
Bound (list) |
The list of available choices for the selection |
|
Bound (list) |
The same list of choices, rendered as user-facing strings |
Example:
{
ID: "myDropDown",
selection: "med",
optionlist: ["xs, "s", "med", "l", "xl"]
optionnames: ["Extra Small", "Small", "Medium",
"Large", "Extra Large"]
},
{
ID: "myBoxes",
selection: ["fri", "sat"],
optionlist: ["fri, "sat", "sun"]
optionnames: ["Friday", "Saturday", "Sunday"]
}
SelectChoice An isolated choice from a parent Select control
Note that these objects will always be used in conjuction with a Select object.
field |
type |
description |
|---|---|---|
|
string |
Rendering id of the component, which pairs up with the |
|
integer |
|
|
string |
|
|
string |
|
Example:
{
ID: "myRadioButtonGroup",
selection: "true",
optionlist: ["true, "false"]
optionnames: ["Yes", "No"]
},
{
ID: "myRadioChoice:",
choiceindex: 0
},
{
ID: "myRadioChoice:",
choiceindex: 1
}
InitBlock A script block containing a single function call
field |
type |
description |
|---|---|---|
|
string |
Rendering id of the component, which pairs up with the |
|
string |
The name of the Javascript function to be invoked by the rendered init block |
|
Array of string(able) |
A list of arguments to be passed to the rendered function |
Example:
{
ID: "alertBox",
functionname: "alert",
arguments: ["Hello, world!"]
},
{
ID: "myScript",
functionname: "fluid.inlineEdit",
arguments: [
".editContainer",
{submitOnEnter: true}
]
}
Container A component that contains other components in a free-form way
field |
type |
description |
|---|---|---|
|
string |
Rendering id of the component, which pairs up with the |
|
Array |
The list of contained components in the container |
|
string |
Disambiguates multiple Container components with the same branch ID (will be used to compute the full ID of the component when rendered, if required) |
Example:
{
ID: "myRow:",
children: [
{ID: "col1", value: "Field"},
{ID: "col2", value: "Type"},
{ID: "col3", value: "Description"}
]
}
Joint Container A point in the component tree representing a forced branch in the template, between two tags given different IDs
field |
type |
description |
|---|---|---|
|
string |
Rendering id of the component, which pairs up with the |
|
string |
The component represents a "forced branch" between the current location in the template with id of ID and a different location (perhaps in a different template) with id |
Example:
{
ID: ""
}
Message A component that encapsulates the data needed to resolve a localised message
field |
type |
description |
|---|---|---|
|
string |
Rendering id of the component, which pairs up with the |
|
string/Array of string |
Message key(s) to be resolved to a bundle |
|
Array of string(able) |
Arguments to be interpolated into the message format |
Example:
{
ID: "myKey",
messagekey: "errMsg.mandarin"
}
Verbatim A text node in the resulting document, to be output without any escaping
field |
type |
description |
|---|---|---|
|
string |
Rendering id of the component, which pairs up with the |
|
string |
The body of the peering tag will be replaced with the unescaped text held as |
Example:
{
ID: "myBox",
markup: "<p>This is a paragraph</br>with a line break.</p>"
}