Page Comparison

Excerpt
The Renderer categorizes components 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 proto-tree for a component

the values of the fields will contain either the actual data or a reference to a data model containing the data.

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 particular 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.

Type

Description

Format

Example

Bound

A control which holds a single value, such as headers, labels, etc.

Code Block

	javascript
	javascript

componentID: { fieldName: valueOrBinding }

Code Block

	javascript
	javascript

var protoTree = {
    mainHeader: "Carving Woods",
    sectionHeader1: "Sassafras",
    sectionHeader1: "Butternut",
    sectionHeader1: "Basswood"
};

Array of Bound

repeated Bound fields

Code Block

	javascript
	javascript

componentID: { fieldName: [valueOrBinding1,
                           valueOrBinding2,
                          ...] }

Code Block

	javascript
	javascript

var protoTree = {
    mainHeader: "Carving Woods",
    sectionHeaders: ["Sassafras",
                     "Butternut",
                     "Basswood"]
};

Selection

A selection control where a user chooses either one or many options from a set of alternatives, such as a drop-down, radio buttons or checkboxes

Code Block

	javascript
	javascript

componentID: {
    selection: valueOrBinding,
    optionlist: [array of internal values],
    optionnames: [array of display strings]
}

For information on how to create trees for radio buttons and checkboxes, see Renderer Component Tree Expanders.

Code Block

	javascript
	javascript

var protoTree = {
    contact-addressType1: {
        selection": "${fields.addressType1}",
        optionlist": ["Home", "Work"],
        optionnames": ["home", "work"]
    }
};

Link

A reference to a URL, such as a hyperlink

Code Block

	javascript
	javascript

componentID: {
    selectiontarget: mySelectionValuedestinationUrl,
    optionlistlinktext: [array of internal values],
    optionnames: [array of display strings]
stringToDisplay
}

Code Block

	javascript
	javascript

var protoTree = {
    contact-addressType1: {
        selection"target: "http://company.com/help/${fieldstopic.addressType1url}",
        optionlist"linktext: ["Home", "Work"],
        optionnames": ["home", "work"]
"${topic.name}"
    }
};

Container

A component that contains other components in a free-form way

Code Block

	javascript
	javascript

componentID: {
    children: [array of other protocomponents]
}

Message

A component that encapsulates the data needed to resolve a localised message. Similar to a Bound, but the value is a key into a string bundle

Code Block

	javascript
	javascript

componentID: {
    messageKey: key,
    args: [array of arguments to
           be interpolated into
           the message format]
}

See fluid.formatMessage for more information about message formatting.

Code Block

	javascript
	javascript

var protoTree = {
    instructions: {
        messageKey: "instructionKey",
        args: ["thing", 3, "%path1"]
    }
};

Versions Compared

Old Version 1

New Version Current

Key