PhotoAlbum Application Download Support Developer Guide
Skins:
Resources/Beans Handling
Ajax Miscellaneous
Usage
Tag Information

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
Show Modal Panel


View 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
NissanMaxima32524
Toyota4-Runner34408
FordTaurus21104
GMCYukon39113
GMCSierra27985
ChevroletTahoe45459
ChevroletCorvette23036
GMCSierra45069
ToyotaCamry49694
ToyotaAvalon44436
Last Menu Action



View Source
RichFaces Wiki RichFaces Project Site