RichFaces Component Control is a universal component that allows to call JS API functions on the components after defined events.

In this simple example componentControl components are used to open and close modal panel. The component is attached to links and calls "show" and "hide" functions on Modal Panel.

Component Control with modal panel example

Modal Panel

This panel is called using Component Control Component Closure link (X) works also through Component Control

Show Modal Panel

HideView Source

<f:subview xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"> 
    <rich:modalPanel id="panel" width="350" height="100">
        <f:facet name="header">
            <h:panelGroup>
                <h:outputText value="Modal Panel"></h:outputText>
            </h:panelGroup>
        </f:facet>
        <f:facet name="controls">
            <h:panelGroup>
                <h:graphicImage value="/images/modal/close.png" styleClass="hidelink" id="hidelink"/>
                <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
            </h:panelGroup>
        </f:facet>
        <h:outputText value="This panel is called using Component Control Component"></h:outputText>
        <br/>
        <h:outputText value="Closure link (X) works also through Component Control"></h:outputText>
    </rich:modalPanel>
    <h:outputLink value="#" id="link">
        Show Modal Panel 
        <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
    </h:outputLink>
</f:subview>

<<Hide Source

Main component attributes:

• for - specifies client identifier of the target component.
• attachTo - specifies client identifier of the component or id of the existing DOM element that is a source for a given event. If attachTo is not defined, the event is attached on the server to the closest in the component tree parent component.
• event - is used to trigger the operation on the target component
  Note: the component could use "oncontextmenu" event to call the JS API on right click event. But in this case this component should be defined via for attribute rather than using a4j:support style. In case of support-like definition, the component will not work properly, as many of the components don't encode this event.
• operation - name of the javascript function that will be invoked on a target component. 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.
• params - a 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, a set of f:param can be used to define the parameters passed to the API function.

Thus, one of the main features is that Component Control component allows to transfer parameters to managed components.

You may put f:param components as nested to component control component (instead of params attribute usage) and all the parameters that are defined will be available from target component.

In the next example, component control is used inside rich:dataTable component. Component control is defined with two parameters which have the current row values. Hence the rich:contextMenu component that called by this Component Control will take this parameters and will be able to display them in its items values.

Click at any table row to see the context menu that generated individually for every row using parameters.

Component Control with rich:dataTable example

Make Model Price Ford Taurus 54997 GMC Sierra 28957 Chevrolet Malibu 33442 Toyota Camry 30750 Chevrolet Malibu 24693 Chevrolet Corvette 37567 Chevrolet Malibu 38941 Ford Taurus 20715 Ford Explorer 43062 Toyota Camry 20587

Last Menu Action

HideView Source

<f:subview xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich" id="subview"> 
    <style>
    .cur{
        cursor: pointer; 
    }
    .top{
        vertical-align: top;
    }
    </style>
    <h:form id="form">
        
        <rich:contextMenu attached="false" id="menu" submitMode="ajax">
            <rich:menuItem ajaxSingle="true">
                <b>{car} {model}</b> details
                <a4j:actionparam name="det" assignTo="#{ddmenu.current}" value="{car} {model} details"/>
            </rich:menuItem>
            <rich:menuGroup value="Actions">  
                <rich:menuItem ajaxSingle="true">
                    Put <b>{car} {model}</b> To Basket
                    <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Put {car} {model} To Basket"/>
                </rich:menuItem>
                <rich:menuItem value="Read Comments" ajaxSingle="true">
                    <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Read Comments"/>
                </rich:menuItem>                
                <rich:menuItem ajaxSingle="true">
                    Go to <b>{car}</b> site
                    <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Go to {car} site"/>
                </rich:menuItem>
            </rich:menuGroup>
        </rich:contextMenu> 

        <h:panelGrid columns="2" columnClasses="top, top">

        <rich:dataTable value="#{dataTableScrollerBean.tenRandomCars}" var="car" id="table"
        onRowMouseOver="this.style.backgroundColor='#F8F8F8'"
        onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" rowClasses="cur">
            <rich:column>
                <f:facet name="header">
                    Make
                </f:facet>
                    <h:outputText value="#{car.make}"/>
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    Model
                </f:facet>
                    <h:outputText value="#{car.model}"/>
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    Price
                </f:facet>
                    <h:outputText value="#{car.price}" />
            </rich:column>

            <rich:componentControl event="onRowClick" for="menu" operation="show">
                <f:param value="#{car.model}" name="model"/>
                <f:param value="#{car.make}" name="car"/>
            </rich:componentControl>

        </rich:dataTable>
    
        <a4j:outputPanel ajaxRendered="true">
            <rich:panel>
                <f:facet name="header">Last Menu Action</f:facet>
                <h:outputText value="#{ddmenu.current}"></h:outputText>
            </rich:panel>       
        </a4j:outputPanel>
        </h:panelGrid>
    </h:form>           
</f:subview>

<<Hide Source