RichFaces Showcase

Ajax Action

a4j:ajax

a4j:commandButton

a4j:commandLink

a4j:actionListener

a4j:jsFunction

a4j:poll

a4j:push

a4j:param

Ajax Queue

a4j:queue

a4j:attachQueue

Ajax Output/Containers

a4j:outputPanel

a4j:status

a4j:region

a4j:mediaOutput

a4j:log

Validation

Client Side Validation

rich:graphValidator

rich:message

rich:messages

rich:notify

Data Iteration

a4j:repeat

rich:dataTable

rich:extendedDataTable

rich:collapsibleSubTable

rich:dataScroller

rich:list

rich:dataGrid

Trees

rich:tree

Tree Adaptors

Output/Panels

rich:chart

rich:panel

rich:togglePanel

rich:tabPanel

rich:collapsiblePanel

rich:accordion

rich:popupPanel

rich:progressBar

rich:tooltip

Menus

rich:panelMenu

rich:toolbar

rich:contextMenu

rich:dropDownMenu

Inputs

rich:autocomplete

rich:calendar

rich:editor

rich:inputNumberSlider

rich:inputNumberSpinner

rich:inplaceInput

rich:fileUpload

Selects

rich:inplaceSelect

rich:select

rich:orderingList

rich:pickList

Drag and Drop

Miscellaneous

Standard elements skinning

rich:placeholder

RichFaces functions

rich:focus

rich:componentControl

rich:hashParam

rich:hotKey

rich:jQuery

VDL documentation
Component Reference

The rich:hashParam component allows you to group client side parameters into a hash map in order to pass them to client API functions of any RichFaces components.

In this example we are packaging all the parameters for the show() method from a component control with nested a4j:param's instead of using static values. Since the show() method accepts event and an option hash as parameters all the values except the event is grouped using rich:hashParam and passed as as single hash value

Popup panel shown using rich:componentControl and rich:hashParam

Settings applied by hashParam tag:

Width:	500
Height:	300
minWidth:	300
minHeight:	150

The panel is getting centered by using:

<a4j:param noEscape="true" name="left" value="(window.width/2)-250"/>

<a4j:param noEscape="true" name="top" value="(window.height/2)-150"/>

NOTE:

Notice that the show() api method requires an event parameter to be first according to signature. So we passed it before the hashParam.

View Source

<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">

    <rich:popupPanel id="pp" resizeable="true" header="Popup panel shown using rich:componentControl and rich:hashParam">
        <f:facet name="controls">
            <h:outputLink value="#" onclick="#{rich:component('pp')}.hide(); return false;" style="color: inherit">
                X
            </h:outputLink>
        </f:facet>
        <h:outputText value="Settings applied by hashParam tag:" />
        <h:panelGrid columns="2">
            <h:outputText value="Width:" />
            <h:outputText value="500" />
            <h:outputText value="Height:" />
            <h:outputText value="300" />
            <h:outputText value="minWidth:" />
            <h:outputText value="300" />
            <h:outputText value="minHeight:" />
            <h:outputText value="150" />
        </h:panelGrid>
        <p>The panel is getting centered by using:</p>

        <p>&lt;a4j:param noEscape="true" name="left" value="(window.width/2)-250"/&gt;</p>

        <p>&lt;a4j:param noEscape="true" name="top" value="(window.height/2)-150"/&gt;</p>
        <fieldset>
            <legend>
                <b>NOTE:</b>
            </legend>
            <p>Notice that the show() api method requires an event parameter to be first according to signature. So we
                passed it before the hashParam.</p>
        </fieldset>
    </rich:popupPanel>

    <h:commandButton value="Show popup">
        <rich:componentControl target="pp" operation="show">
            <a4j:param noEscape="true" value="event" />
            <rich:hashParam>
                <f:param name="width" value="500" />
                <f:param name="height" value="300" />
                <f:param name="minWidth" value="300" />
                <f:param name="minHeight" value="150" />
                <a4j:param noEscape="true" name="left" value="(jQuery(window).width()/2)-250" />
                <a4j:param noEscape="true" name="top" value="(jQuery(window).height()/2)-150" />
            </rich:hashParam>
        </rich:componentControl>
    </h:commandButton>

</ui:composition>