The <rich:componentControl> allows to call JS API functions on components after defined events.
Table 6.98. rich : componentControl attributes
Attribute Name | Description |
---|---|
attachTiming | Defines an Id of a component or HTML element listened by the control component |
attachTo | Client identifier of the component or id of the existing DOM element that is a source for given event. If attachTo is defined, the event is attached on the client according to the AttachTiming attribute. If attachTo is not defined, the event is attached on the server to the closest in the component tree parent component. |
binding | The attribute takes a value-binding expression for a component property of a backing bean |
disableDefault | Disable default action for target event ( append "return false;" to javascript ) |
event | The Event that is used to trigger the operation on the target component |
for | Client identifier of the target component. |
id | Every component may have a unique id that is automatically created if omitted |
name | The optional name of the function that might be used to trigger the operation on the target component |
operation | The function of Javascript API that will be invoked. The API method is attached to the 'component' property of the root DOM element that represents the target component. The function has two parameters - event and params. See: 'params' attribute for details. |
params | The set of parameters passed to the function of Javascript API that will be invoked. The JSON syntax is used to define the parameters, but without open and closed curve bracket. As an alternative, the set of f:param can be used to define the parameters passed to the API function. If both way are used to define the parameters, both set are concatenated. if names are equals, the f:param has a priority. |
rendered | If "false", this component is not rendered |
Table 6.99. Component identification parameters
Name | Value |
---|---|
component-type | org.richfaces.ComponentControl |
component-class | org.richfaces.component.html.HtmlComponentControl |
component-family | org.richfaces.ComponentControl |
renderer-type | org.richfaces.ComponentControlRenderer |
tag-class | org.richfaces.taglib.ComponentControlTag |
To create the simplest variant on a page use the following syntax:
Example:
...
<rich:componentControl attachTo="doExpandCalendarID" for="ccCalendarID" event="onclick" operation="Expand" />
...
Example:
import org.richfaces.component.html.HtmlComponentControl;
...
HtmlComponentControl myCalendar = new HtmlComponentControl();
...
There are three ways to use the <rich:componentControl> to another component.
An example is placed below:
...
<rich:componentControl name="ffunction" for="comp_ID" operation="show"/>
...
According to this code a function with name "call" is generated. It is used in JavaScript code to trigger an operation on the target component with defined id="comp_ID".
The generated function is shown below:
function ffunction (event) {
}
An example is placed below:
...
<rich:modalPanel id="ccModalPanelID" onshow="alert(event.parameters.show)" onhide="alert(event.parameters.hide)">
...
</rich:modalPanel>
<h:commandButton value="Show Modal Panel">
<rich:componentControl for="ccModalPanelID" event="onclick" disableDefault="true" operation="show">
<f:param name="show" value="componentControl work(show)"/>
<rich:componentControl/>
</h:commandButton>
...
In the example the "for" attribute contains value of an Id of <rich:modalPanel> component. The "operation" attribute contains a name of JavaScript API function. An "event" attribute is used to trigger an operation defined with the "operation" attribute. A set of parameters is defined with <f:param> . As an alternative, the "params" attribute can be used. Thus, one of main features is that <rich:componentControl> allows to transfer parameters. The "disableDefault" attribute with "true" value is used instead of onclick="return false;" attribute for <h:commandButton> to avoid a problem with form submit and modalPanel showing.
An example is placed below:
...
<rich:calendar popup="#{componentControl.calendarPopup}" id="ccCalendarID" />
...
<f:verbatim>
<a href="#" id="doExpandCalendarID">Calendar (nextYear)</a>
</f:verbatim>
<rich:componentControl attachTo="doExpandCalendarID" for="ccCalendarID" event="onclick" disableDefault="true" operation="nextYear" />
...
In the example the "attachTo" attribute contais a value of an Id of <a> tag. The "for" attribute contains value of an Id of <rich:calendar> component. The "operation" attribute contains a name of JavaScript API function. Thus, clicking on the link represents the next year on the calendar.
<rich:componentControl> interacts with such components as:
In order to use <rich:componentControl> with another component you should place the id of this component into "for" attribute field. All operations with defined component you can find in the JavaScript API section of defined component.
Example:
...
<f:view>
<h:form>
<br>
<rich:toolTip id="toolTipFor" followMouse="false" direction="top-right" mode="ajax" value="This is button" horizontalOffset="5" verticalOffset="5" layout="block">
</rich:toolTip>
</h:form>
<h:commandButton id="ButtonID" value="Button">
<cc:componentControl for="toolTipFor" attachTo="ButtonID" operation="show" event="onclick"/>
</h:commandButton>
</f:view>
...
This is a result:
As it could be seen in the picture above, the <rich:toolTip> shows after you click the button.
<rich:componentControl> has no skin parameters and custom style classes, as the component isn't visual.