componentControl

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

## Creating the Component with a Page Tag

To create the simplest variant on a page use the following syntax:

Example:

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

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlComponentControl;
    ...
    HtmlComponentControl myCalendar = new HtmlComponentControl();
    ...

## Details of Usage

There are three ways to use the <rich:componentControl> to another component.

- Defining a name of a function that is generated (definition is similar to a definition of <a4j:jsFunction> ). An "event" argument is passed to this function.

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) {
    }

- Attaching to a parent component (usage is similar to <a4j:support> component).

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.

- Attaching with "attachTo" attribute.

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:

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

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:

<rich:toolTip> shows with the help of <rich:componentControl> .

As it could be seen in the picture above, the <rich:toolTip> shows after you click the button.

## Look-and-Feel Customization

<rich:componentControl> has no skin parameters and custom style classes, as the component isn't visual.

## Relevant Resources Links

Here you can see an example of <rich:componentControl> usage and sources for the given example.

Here you can found some additional information about <f:param> component.