6.14.1. < rich:componentControl > available since 3.0.0

### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.14.1. < rich:componentControl > available since 3.0.0

expand all

#### 6.14.1.1. Description

The <rich:componentControl> allows to call JavaScript API functions on components after defined events.

#### 6.14.1.2. Key Features

- Management of components JavaScript API

- Customizable initialization variants

- Customizable activation events

- Possibility to pass parameters to the target component

#### 6.14.1.3. Details of Usage

<rich:componentControl> is a command component, that allows to call JavaScript API function on some defined event. Look at the example:

    ...

    <rich:componentControl attachTo="doExpandCalendarID" event="onclick" operation="Expand" for="ccCalendarID" />

    ...

In other words it means "clicking on the component with ID `doExpandCalendarID` expands the component with ID `ccCalendarID`". It can be said, that <rich:componentControl> makes interact two components with the help of JavaScript API function.

The ID of the component the event that invokes JavaScript API function is applied, is defined with "attachTo" attribute (see the exapmle above). If "attachTo" attribute is not specified, the <rich:componentControl> is supposed to be attached to it's parent.

    <h:commandButton value="Show Modal Panel">

          <!--componentControl is attached to the commandButton-->

          <rich:componentControl for="ccModalPanelID" event="onclick" operation="show"/>

    </h:commandButton>

It is possible to invoke the <rich:componentControl> handler operation as usual JavaScript function. For this purpose it is necessary to specify the name of the JS function with the help of the "name" attribute:

Example:

    function func (event) {
    }

    <rich:componentControl name="func" event="onRowClick" for="menu" operation="show" />

An important <rich:componentControl> feature, is that it allows transferring parameters, with the help of special attribute "params" :

    ...

    <rich:componentControl name="func" event="onRowClick" for="menu" operation="show" params="#{car.model}"/>

    ...

The alternative way for parameters transferring uses <f:param> attribute. As the code above, the following code will represent the same functionality:

    ...

    <rich:componentControl event="onRowClick" for="menu" operation="show">

          <f:param value="#{car.model}" name="model"/>

    </rich:componentControl>

    ...

With the help of the "attachTiming" attribute you can define the page loading phase when <rich:componentControl> is attached to source component. Possible values are:

- `immediate` — attached during execution of <rich:componentControl> script

- `onavailable` — attached after the target component is initialized

- `onload` — attached after the page is loaded

<rich:componentControl> interacts with such components as: <rich:contextMenu> , <rich:toolTip> , <rich:modalPanel > , <rich:listShuttle> , <rich:orderingList> , <rich:calendar>

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.

    <h:form>

          <rich:toolTip id="toolTip" mode="ajax" value="and then just touch me." direction="top-right" />

    </h:form>

    <h:commandButton id="ButtonID" value="Push me">

          <rich:componentControl attachTo="ButtonID" event="onmouseover" operation="show" for="toolTip" />

    </h:commandButton>

This is a result:

Figure 6.176. <rich:toolTip> is shown with the help of <rich:componentControl> .

#### 6.14.1.4. Reference Data

Table of <rich:componentControl> attributes.

Table 6.245. 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

#### 6.14.1.5. Relevant Resources Links

Visit the ComponentControl page at RichFaces LiveDemo for examples of component usage and their sources.

Information on JSF <f:param> component You can find at <f:param> TLD reference in Java Server Faces technology section at Sun portal.

- Prev6.14. Rich Miscellaneous
- Top of page
- Front page
- Next6.14.2. <rich:effect> available since ...