⁠Chapter 19. Functionality extension

19.1. <rich:componentControl>
19.1.1. Basic usage
19.1.2. Passing parameters to API methods
19.1.3. Reference data
19.2. <rich:focus>
19.2.1. Placement
19.2.2. Applying Focus
19.2.3. Validation-Aware
19.2.4. Preserving Focus
19.2.5. Delaying Focus
19.2.6. Focus Manager
19.2.7. Reference data
19.3. <rich:hotKey>
19.3.1. Basic usage
19.3.2. Event processing
19.3.3. Event handlers
19.3.4. Reference data
19.4. <rich:hashParam>
19.4.1. Basic usage
19.4.2. Reference data
19.5. <rich:placeholder>
19.5.1. Reference data
19.5.2. Style classes and skin parameters
Read this chapter for details on miscellaneous components that provide extended functionality to web applications.

⁠19.1. <rich:componentControl>

The <rich:componentControl> behavior allows JavaScript API functions to be called on target components. The functions are called after defined events are triggered on the component to with the <rich:componentControl> behavior is attached. Initialization variants and activation events can be customized, and parameters can be passed to the target component.

⁠19.1.1. Basic usage

The operation attribute is required to attach JavaScript functions to the parent component, along with either the target or selector attributes. Use the operation attribute to specify the JavaScript API function to perform. Use the target attribute to define the id identifier of the target component, or use the selector attribute to define a number of target components through the use of valid jQuery selectors.
Use the event attribute to specify the event that triggers the JavaScript API function call if it is different from the default triggering event for the parent component.
⁠

Example 19.1. <rich:componentControl> basic usage

​<h:commandButton value="Show Modal Panel">
​    <!--componentControl is attached to the commandButton-->
​    <rich:componentControl target="ccModalPanelID" event="click" operation="show"/> 
​</h:commandButton>
The example contains a single command button, which when clicked shows the modal panel with the identifier ccModalPanelID.

⁠19.1.2. Passing parameters to API methods

The operation can receive parameters through nested <f:param> elements.
⁠

Example 19.2. Using parameters

​<rich:componentControl event="click" target="modalPanel" operation="show">
​   <f:param value="width" name="500"/>
​</rich:componentControl>
To group multiple parameters for a function, use the <rich:hashParam> component to create a hash map. Refer to Section 19.4, “<rich:hashParam>” for details.

⁠19.1.3. Reference data

  • client-behavior-renderer-type: org.richfaces.behavior.ComponentControlBehavior
  • behavior-id: org.richfaces.behavior.ComponentControlBehavior
  • handler-class: org.richfaces.taglib.ComponentControlHandler
  • behavior-class: org.richfaces.component.behavior.ComponentControlBehavior
  • client-behavior-renderer-class: org.richfaces.renderkit.html.ToggleControlRenderer