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 attach the <rich:componentControl> to another component.

- Defining a name of a function that is generated. 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" params="show:'componentControl work(show)'" />
        </h:commandButton>
    ...

In the example is shown a possibility to manage <rich:modalpanel> component via <h:commandButton> . The "for" attribute contains value of an Id of <rich:modalpanel> component. The "operation" attribute contains a name of JavaScript API function. 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 is shown a possibility to manage the <rich:calendar> component. 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.

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