Child pages
  • Renderer Component Types

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

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>"
}
  • No labels