Child pages
  • Renderer Decorators

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin

...

Section
Column

Excerpt

Decorators allow users of the Renderer to attach various things, such as functions, class names, etc., to the components at render time. A number of different types of decorators are currently supported.

Using Decorators

To use a decorator, include it in the component tree for the component in question, using the decorators field. This field contains an array of objects providing configuration information for the desired decorators. The contents of each object will vary based on the decorator type. For example, the addClass decorator will specify a string of class names, the jQuery decorator will specify a function name and a list of parameters.

Decorators are specified using a notation similar to that of Subcomponents in an options structure. They include a type field and whatever other fields are necessary, based on the type:

Code Block
javascript
javascript
{
  ID: "my-id",
  value: aValue,
  decorators: [
      {type: "typeName",
       field: value,
       field: value
      }
  ]
}
Column
width30%
solid
Panel
borderStyle
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
borderStylesolid
titleOn This Page
Table of Contents
toc
maxLevel
5
minLevel2
maxLevel5
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
borderStylesolid
titleSee Also
borderStylesolid
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
borderStylesolid
titleStill need help?
borderStylesolid

Join the fluid-talk mailing list and ask your questions there.

...

The following table provides an overview of the currently-supported decorators. The sections that follow discuss each decorator in turn.

{style}
Wiki Markup
CSS Stylesheet
/* copied from Confluence main-actions.css */
.mytable, .mytable td, .mytable th {
  border:1px solid #CCCCCC;
  padding:3px 4px;
  vertical-align:top;
  border-collapse: collapse;
  }
.mytable th {
background-color: #eee;
}
.duckrow {
  background-color: #f6f6f6;
  }
{style}

...

HTML
<table class="mytable">
<tr>
<th>Decorator <code>type</code></th><th>Field name</th><th>Field type</th><th>Field Description</th><th>Example</th></tr>

<tr class="duckrow"><td rowspan="2"><code>jQuery</code> / <code>$</code></td>
<td><code>func</code></td><td><code>string</code></td><td>jQuery function to be invoked</td><td rowspan="2"><pre>decorators: [
    {type: "jQuery",
     func: "click",
     args: function() { $(this).hide(); }
    }]</pre></tr>

<tr><td><code>args</code></td><td>(array of) <code>object</code></td><td>Arguments to the jQuery function</td></tr>

<tr class="duckrow"><td><code>addClass</code></td><td><code>classes</code></td><td><code>string</code></td><td>
Space-separated list of CSS class names</td><td><pre>decorators: [
    {type: "addClass",
     classes: "fl-widget fl-centred"
    }]</pre></td></tr>

<tr class="duckrow"><td><code>removeClass</code></td><td><code>classes</code></td><td><code>string</code></td><td>
Space-separated list of CSS class names</td><td><pre>decorators: [
    {type: "removeClass",
     classes: "fl-hidden"
    }]
</pre></td></tr>

<tr class="duckrow"><td rowspan="4"><code>fluid</code></td>
<td><code>func</code></td><td><code>string</code></td><td>global function name to be invoked</td><td rowspan="4"><pre>decorators: [{
    type: "fluid",
    func: "fluid.componentName",
    container: container,
    options: options
   }]</pre></td>
</tr>

<tr><td><code>container</code></td><td>jQuery-able</td><td>Designator for the container node at which to base the component</td></tr>
<tr><td><code>options</code></td><td>free <code>Object</code></td><td>Configuration options for the component</td></tr>

<tr><td><code>args</code></td><td><code>Array</code></td><td>raw argument list to override <code>container</code> and <code>options</code></td></tr>

<tr class="duckrow"><td><code>identify</code></td><td><code>key</code></td><td><code>string</code></td><td>The key, or nickname for the decorated node - its allocated id will be stored in <code>idMap</code> under this key</code></td><td><pre>decorators: [
    {type: "identify",
     key: "mySpecialName"
    }]</pre></td></tr>

<tr class="duckrow"><td><code>attrs</code></td><td><code>attributes</code></td><td><code>object</code></td><td>The attribute map to be applied to the rendered node</td><td><pre>decorators: [
    {type: "attrs",
     attributes: ""
    }]</pre></td></tr>

<tr class="duckrow"><td rowspan="2"><code>event</code></td>
<td><code>event</code></td><td><code>string</code></td><td>Name of event handler to be bound</td><td rowspan="2"><pre>decorators: [
    {type: "event",
     event: "click",
     handler: myHandler
    }]
</pre></tr>

<tr><td><code>handler</code></td><td><code>function</code></td><td>Handler function to be bound</td></tr>
</table>
{html}

jQuery decorator

Perhaps the most frequently used decorator is the jQuery decorator. This will accept any jQuery function and its arguments, and invoke that function, as the rendered markup is placed into the document. Here is an example of specifying a UILink component together with a jQuery-bound click() handler:

...