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
`ID`	string	Rendering id of the component, which pairs up with the `rsf:id` field in the template, if selector-based rendering is not being used
`value`	string/boolean/Array of string	The value held in the bound component
`valuebinding`	string	An expression language (EL) expression representing the path within any bound data model that the value is to be associated with.
`willinput`	boolean	Marks this component out as performing input as well as output (not yet fully supported)
`submittingname`	string

Examples:

{
  ID: "myParagraph",
  value: "This is some text."
},
{
  ID: "myInputField",
  valuebinding: myModel.inputs.value
}

Link A reference to a URL

field	type	description
`ID`	string	Rendering id of the component, which pairs up with the `rsf:id` field in the template, if selector-based rendering is not being used
`target`	string	The URL (href/src, etc) which is the target of this link component.
`linktext`	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
`ID`	string	Rendering id of the component, which pairs up with the `rsf:id` field in the template, if selector-based rendering is not being used
`selection`	Bound (string or list)	The actual user selection made from the list of alternatives
`optionlist`	Bound (list)	The list of available choices for the selection
`optionnames`	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
`ID`	string	Rendering id of the component, which pairs up with the `rsf:id` field in the template, if selector-based rendering is not being used
`choiceindex`	integer
`parentRelativeID`	string
`submittingname`	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
`ID`	string	Rendering id of the component, which pairs up with the `rsf:id` field in the template, if selector-based rendering is not being used
`functionname`	string	The name of the Javascript function to be invoked by the rendered init block
`arguments`	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
`ID`	string	Rendering id of the component, which pairs up with the `rsf:id` field in the template, if selector-based rendering is not being used
`children`	Array	The list of contained components in the container
`localID`	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
`ID`	string	Rendering id of the component, which pairs up with the `rsf:id` field in the template, if selector-based rendering is not being used
`jointID`	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 `jointID`

Example:

{
  ID: ""
}

Message A component that encapsulates the data needed to resolve a localised message

field	type	description
`ID`	string	Rendering id of the component, which pairs up with the `rsf:id` field in the template, if selector-based rendering is not being used
`messagekey`	string/Array of string	Message key(s) to be resolved to a bundle
`args`	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
`ID`	string	Rendering id of the component, which pairs up with the `rsf:id` field in the template, if selector-based rendering is not being used
`markup`	string	The body of the peering tag will be replaced with the unescaped text held as `markup`

Example:

{
  ID: "myBox",
  markup: "<p>This is a paragraph</br>with a line break.</p>"
}