RichFaces

# FAQ

## Where are binary/source distribution for RichFaces 3.1.0 release?

Most important links for RichFaces can be found here.

## How to build RichFaces snapshot manually?

This wiki article helps you to find an answer.

## What is the structure of RichFaces SVN repository?

RichFaces repository structure overview can be found here.

## How to build richfaces-samples applications?

How to build and how to use richfaces-samples applications in Eclipse is described here.

## Where could I find a demo for RichFaces 3.1.0 components?

Online demo Web applications that show the most important functionality of RichFaces components are available here.

War file of a nightly build can be found here.

Source Code (SVN) can be found here.

See also how to prevent richfaces-demo deployment failed.

## How to use Skinnability?

Here is an article that explains the Skinnability basics.

For information you can also see discussion about this problem on the RichFaces Users Forum

Also, the effect of predefined skins on the application whole look-and-feel could be seen here.

## Why does a problem with prototypes in RichFaces 3.1.0 happen? The Prototype.Browser() function can't be found.

RichFaces 3.1.0 has been released with the latest Prototype 1.5.1.1. The conflict happens because on your page an older version of prototypes that can be added from Tomahawk 1.1.6 is used. See the solution to the problem here.

## Why RichFaces library contains <rich:dataTable> component, though there is the standard <h:dataTable>?

The article about <rich:dataTable> flexibility can be found here.

Source code (SVN) could be found here.

Online demo for a Web application is available here.

## How to organize wizards using the <rich:modalPanel> component?

It's necessary to put <a4j:include> inside the <rich:modalPanel> and perform navigation inside it, as it's shown in the example below:

Example:

    ...
            <f:verbatim>
                    <a href="javascript:Richfaces.showModalPanel('_panel',{left:'auto', top:'auto'})">Show Modal Panel</a>
            </f:verbatim>
            <rich:modalPanel id="_panel">
                    <a4j:outputPanel id="view" >
                            <a4j:include viewId="/pages/included1.xhtml"></a4j:include>
                    </a4j:outputPanel>
            </rich:modalPanel>
    ...

    faces-config.xml:
    ...

            <navigation-rule>
                    <from-view-id>/pages/included1.xhtml</from-view-id>
                    <navigation-case>
                            <from-outcome>included2</from-outcome>
                            <to-view-id>/pages/included2.xhtml</to-view-id>
                    </navigation-case>
            </navigation-rule>
    ...

    included1.xhtml:
    ...
            <h:form>
                    <h:outputText value="Go to the step 2"/>
                    <a4j:commandButton value="next" action="included2" reRender="view"/>
            </h:form>
    ...

    included2.xhtml

    ...
            <h:form>
                    <h:outputText value="Close window"/>
                    <h:commandButton type="button" value="Close" onclick="javascript:Richfaces.hideModalPanel('_panel')"/>
            </h:form>
    ...

The discussion about <a4j:include> and navigation rules can be found on the Ajax Users Forum.

## How to prevent modalPanel from closing when the validation inside fails?

Examples of validation in <rich:modalPanel> could be found in the Wiki article and on the RichFaces Users Forum.

## Why when I use suggestionBox inside the modalPanel content the popup suggestion list doesn't show since it is behind the modalPanel.

To solve this problem you should use the latest versions of RichFaces.

Most important links for RichFaces can be found here.

## Does RichFaces work with facelets?

Main demo of RichFaces is a facelets based application. Full Facelets support is one of the main features. Hence, the answer is yes.

## Is it possible to create dynamic menu using <rich:dropDownMenu> component?

<rich:dropDownMenu> is a standard JSF component. Thus, creation of the menu dynamically from the Java Script code is the same as for any other jsf component.

For more information follow the link.

## Is it possible to customize the look of dataScroller (the forward/back buttons) and replace them with an images?

The answer is yes.

Component provides two controllers groups for switching:

- Page numbers for switching onto a particular page
- The controls of fast switching: "first", "last", "next", "previous", "fastforward", "fastrewind"

The controls of fast switching are created adding the facets component with the corresponding name:

Example:

     ...
        <rich:datascroller for="table" maxPages="10">
            <f:facet name="first">
                <h:outputText value="First"/>
            </f:facet>
            <f:facet name="last">
                <h:outputText value="Last"/>
            </f:facet>
        </rich:datascroller>
    ...

There are also facets used to create the disabled states: "first_disabled", "last_disabled", "next_disabled", "previous_disabled", "fastforward_disabled", "fastrewind_disabled".

## How to place simple links inside menu?

If you want to navigate outside, when application uses an external URL, you should use the following approach:

Example:

    ...
            <rich:dropDownMenu>
            ...
                    <rich:menuItem submitMode="none"
                                    onclick="document.location.href='http://labs.jboss.com/jbossrichfaces/'">
                            <h:outputLink value="http://labs.jboss.com/jbossrichfaces/">
                                            <h:outputText value="RichFaces Home Page"></h:outputText>
                            </h:outputLink>
                    </rich:menuItem>
            ...
            </rich:dropDownMenu>
    ...

Also online demo <rich:dropDownMenu> component is available here.

## Can I use dropDownMenu as context menu?

The <rich:dropDownMenu> is designed keeping in mind that it should not be used for a contextMenu purpose. We have a <rich:contextMenu> component in the TODO list. However, it is not schedule for the nearest versions.

## How to pass own parameters during a modalPanel opening or closing?

The answer could be found in the "Details of usage" of <rich:modalPanel> component.

## How to add a simple link to the tree node?

Simple code is placed below:

Example:

    ...
            <rich:tree ...>
                    ...
                    <rich:treeNode submitMode="none"
                                                    onclick="document.location.href='http://labs.jboss.com/jbossrichfaces/'">
                            <h:outputLink value="http://labs.jboss.com/jbossrichfaces/">
                                    <h:outputText value="RichFaces Home Page"></h:outputText>
                            </h:outputLink>
                    </rich:treeNode>
                    ...
    </rich:tree ...>
    ...

## Is it possible to place tabs upright in the tabPanel?

It's not possible to place tabs upright in the tabPanel. For this purporse use togglePanel. Toggle controls can be placed anywhere in the layout.

## How to get a commandButton working within the modalPanel?

Simple code is placed below:

Example:

    ...
            <rich:modalPanel>
                    <f:facet name="header">
                            <h:outputText value="Test" />
                    </f:facet>
                    <f:facet name="controls">
                            <h:commandLink value="Close" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mp')" />
                    </f:facet>
                    <h:form>
                            <t:commandButton value="Test" action="#{TESTCONTROLLER.test}" />
                    </h:form>
            </rich:modalPanel>
    ...

Note:

Two rules are important for modalPanel:

- modalPanel must have its own form if it has form elements (input or/and command components) inside (as it was shown in the example above)
- modalPanel must not be included into the form (on any level up) if it has the form inside.

## How to define the currently selected tab?

Simple code is placed below:

Example:

    ...
            <rich:tabPanel selectedTab="t2">
                    <rich:tab label="tab 1" name="t1">
                            <h:outputText value="tab 1" />
                    </rich:tab>
                    <rich:tab label="tab 1"  name="t2">
                            <h:outputText value="tab 2" />
                    </rich:tab>
                    <rich:tab label="tab 1"  name="t3">
                            <h:outputText value="tab 3" />
                    </rich:tab>
            </rich:tabPanel>
    ...

## How to remember the current selected tab?

For necessary information you can see discussion about this problem on the RichFaces Users Forum.

## How to navigate from one tab to another using buttons (apart from tabPanel functionality)?

For necessary information you can see RichFaces Users Forum.

## How to retrieve the current value from the inputNumberSlider?

To catch the value of the inputNumberSlider from the JavaScrip, use the following approach:

Example:

    ...
            <rich:inputNumberSlider width="500" step="20"
                                    onchange="someFunctionCall(this.input.value)"
                                    minValue="0"
                                    maxValue="500"
                                    value="0"
                                    showInput="false"
                                    showToolTip="false"
                                    showBoundaryValues="false"/>
            ...
            <script>
                    function someFunctionCall(value) {
                             alert(value);
                    }
            </script>
    ...

## How to apply skins to the standard input components?

The answer could be found here.

## Is there a way to capture the rowdata of dataTable and subTable?

For necessary information you can see discussion about this problem on the RichFaces Users Forum

## Is it possible to use datascroller without its table border and styles (to show only links)?

It' necessary to redefine rich* classes for example like this:

Example:

    .rich-datascr-button {
    border: 0px;
    }
    .rich-dtascroller-table {
    border: 0px;
    }
    .rich-datascr-button {
    background-color: transparent;
    }

## How to use subTable in combination with dataTable?

The answer could be found here.

## How to do correct pagination using datascroller (load a part of data from database)?

The answer could be found on the RichFaces Users Forum.

How to use <rich:dataTable> and <rich:dataScroller> in a context of Extended Data Model see here.

## How to make html scrollbars in modalPanel?

The answer could be found on the RichFaces Users Forum:

- http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4062877#4062877
- http://www.jboss.com/index.html?module=bb&op=viewtopic&t=105412

## How to expand/collapse tree nodes from code?

The answer could be found here.

## How to use JavaScript API?

The simple code is placed below:

Example:

    ...
             <a4j:form id="form">
                    <h:panelGroup id="test" columns="2" style="width: 300px">
                            <h:selectBooleanCheckbox value="#{bean.check}">
                                    <a4j:support event="onchange" reRender="test" />
                                    <f:selectItem itemValue="true" itemLabel="Show" />
                                    <f:selectItem itemValue="false" itemLabel="Hide" />
                            </h:selectBooleanCheckbox>
                            <rich:calendar popup="true"
                                            rendered="#{!bean.check}" value="#{bean.date}" id="c"/>
                                    <a onclick="$('form:c').component.doExpand()" href="#">Show</a>
                    </h:panelGroup>
            </a4j:form>
    ...

## How to load the Scriptaculous library?

To load the whole Scriptaculous library shipped with RichFaces use <a4j:loadScript> tag.

Example:

    ...
    <a4j:loadScript src="resource://scriptaculous.js" />
    ...

Thus, this command allows loading an integrated version of the library that includes all existing scriptaculous files except unittest.js.

If you don't want to load the whole library, but only the particular file, for example, effect.js, use the following line:

Example:

    ...
    <a4j:loadScript src="resource://scriptaculous/effect.js" />
    ...

Remember, it does not make sense to load the particular file if you already load the whole version.

For more information see RichFaces Users Forum.

## How to save <rich:effect> status?

<rich:effect> component has several callback methods such as beforeStart, afterFinish. You can use them to save the status.

See also core effects in scriptaculous.

## How to send an additional parameter to server working with <rich:suggestionbox>?

An example is placed below:

    ...
                    <rich:suggestionbox width="200" height="200" for="test" suggestionAction="#{bean.autocomplete}" var="cap">
                            <h:column>
                                    <f:facet name="header">
                                            <h:outputText value="Sometext"></h:outputText>
                                    </f:facet>
                                    <h:outputText value="#{cap.text}"></h:outputText>
                            </h:column>
                            <a4j:support event="onselect" action="#{bean.action}">
                                    <f:setPropertyActionListener value="#{cap.label}" target="#{bean.property1}" />
                            </a4j:support>
                    </rich:suggestionbox>
    ...

In the example "onselect" event is used for sending selected value to the server. It's also possible to pass additional fields of selected object (which don't belong to "fetchvalue" attribute.)

## How to set <rich:dataTable> border to 0px?

Add the following code to your css file:

    ...
                    .rich-table, .rich-table-header,.rich-table-headercell, .rich-table-cell,
                            .rich-subtable-cell, .rich-table-footercell, .rich-subtable-footercell {
                                    border-width:0px;
                    }
    ...

## How to create <rich:suggestionBox> dynamically?

This is a working example:

    ...
                    org.apache.myfaces.component.html.ext.HtmlInputText searchBox = new org.apache.myfaces.component.html.ext.HtmlInputText();
            searchBox.setId( "inputQuery" );
            bar.getChildren().add( searchBox );

            org.richfaces.component.html.HtmlSuggestionBox suggestions = new org.richfaces.component.html.HtmlSuggestionBox();
            suggestions.setId( "sugg" );
            suggestions.setFor( "inputQuery" );
            suggestions.setTokens( ",[" );
            suggestions.setRules( "none" );

            javax.faces.el.MethodBinding mb = app.createMethodBinding( "#{suggestionBox.autocomplete}", new Class[] { Object.class } );
            suggestions.setSuggestionAction( mb );
            suggestions.setVar( "result" );

            suggestions.setRows( 0 );
            suggestions.setFirst( 0 );
            suggestions.setMinChars( "#{suggestionBox.minchars}" );
            suggestions.setShadowOpacity( "4" );
            suggestions.setBorder( "1" );
            suggestions.setWidth( "200" );
            suggestions.setHeight( "150" );
            suggestions.setShadowDepth( "4" );
            suggestions.setCellpadding( "2" );

                org.apache.myfaces.custom.column.HtmlSimpleColumn column = new org.apache.myfaces.custom.column.HtmlSimpleColumn();
                    column.setId( "col1" );
                    org.apache.myfaces.component.html.ext.HtmlOutputText text = new org.apache.myfaces.component.html.ext.HtmlOutputText();
                    text.setId( "text1" );

                    javax.faces.el.ValueBinding vb = app.createValueBinding( "#{result.text}" );
                    text.setValueBinding( "value", vb );
                    column.getChildren().add( text );
                suggestions.getChildren().add( column );
            bar.getChildren().add( suggestions );
    ...

See also RichFaces User Forum.

## What should I change on the server side?

As it was mentioned before, the list of zones to be reRendered can be specified as EL expression. But there is a question that must be specified more exactly.

The list of Ids is formed during beforePhase of RENDER_RESPONSE. Therefore, in this case one can point reRender to the Set type Bean's property and fill the Set during a tracking request.

It's the way to form a list of updatable areas dynamically.

## How to check sending request conditions? Custom JavaScript before request "OnSubmit" attribute.

To check on the client some terms of request sending, the "onSubmit " attribute is added to all components, which may cause the request.

Example:

    <h:inputText id="i" value="#{beanText.kennung}">
                <a4j:support event="onfocus" onsubmit="doSomething();" reRender="panelToReRender"/>
    </h:inputText>

So in this case "doSomething()" function is executed before the Ajax request.

Besides, if this function returns "false", Ajax request isn't fired.

Note:

Behavior of our "onsubmit" slightly differs from the standard one. Do not return "true" if you want to fire the request - because <xxx><a4j:support event="onclick" onsubmit="return true;"> is transformed into <xxx onclick="return true; A4J.Submit(.... );" > and the request isn't fired also in this case (but the standard event processing fired). You must only return "false" if your conditions weren't completed or perform some actions (if needed) without any returns in case you need to fire it.

## What is differences of "onCompelete" attribute after release 1.0?

To avoid differences with other JavaScript attributes, a function placement in a JavaScript call is changed, instead of simple inserting of attribute content (..oncomplete :anotherFunction(this)..), it places (oncomplete: function(){anotherFunction(this);}..) in anonymous function, to allow put "chain" of statements in attribute.

Since, "this" keyword will point to a parameters map instead of a control element as it was before. You may use document.findElementById() to get references to this object after a request is processed as when a page is updated in Ajax you will have reference to a control, removed from a DOM tree.

Or, if you are sure that your element is not updated, you can add "onsubmit" in <a4j:support> (or onclick in <a4j:commandLink/Button> ) to place reference to known variable ( <a4j:commandLink onclick="var myControl=this;" oncomplete="anotherFunction(myControl)"/> ).

New:

The onComplete syntax now is:

    	<someAjaxActionComponent ...oncomplete="myFunc(req,event,data)".../>

where the event is a variable where the JS event copy that fires the request is placed into. One may use it to get the element instead of this. and data is a variable that contains deserialized value from the data attribute.

## Is it possible to use InvokeOnComponent with JSF 1.2?

RichFaces currently does not use invokeOnComponent because of the 2 reasons:

- Compatibility with JSF 1.1 and MyFaces applications is kept, due to a big amount of code used in corporate applications.
- InvokeOnComponent works with already known clientId, and works fine for communication between widget and backed component, or updates content of already rendered component. But there are some troubles to use this method for more complex use-cases implemented in RichFaces, as there is a choice for updatable components in application logic, where it's necessary to navigate in a components tree by the native id, with findComponent() methods.

Thus, for example, only entire dataTable can be updated in response (but all Ajax core action components inside table work properly).

## How to avoid generating exception for "keepAlive" component?

To avoid exception, don't forget that the component stores beans in serialized view, but your bean should implement java.io.Serializable.

## Why form isn't submitted or setter isn't called after AJAX request?

This situation could happen because of conversion/validation errors on form submission. In order to verify this, it's necessary to place this updating via an Ajax error message inside a form:

Example:

    <a4j:outputPanel ajaxRendered="true">
       <h:messages/>
    </a4j:outpurPanel>

## How to create "a4j delayed render zone"?

The <a4j:support> component has a "requestDelay" attribute where you can define the delay.

More information about this problem could be found on the Ajax4Jsf Users Forum.

## How to stop "a4j:poll"?

More information about this problem could be found on the Ajax4Jsf Users Forum.

## How to use IgnoreDupResponses and requestDelay?

The "IgnoreDupResponses" attribute appeared from 1.0.4 RC1 version and is used on the client for response ignoring after an Ajax request if a newer request has been already sent.

The additional information could be found here.

"RequestDelay" attribute also defines the client behavior. It sets the time delay, after which another request could be sent, all other requests are taken away from a queue except the last one.

## How to refresh an image using <a4j:support> component?

More information about this problem could be found on the Ajax4Jsf Users Forum.

## How to use "EventQueue" attribute?

The "EventQueue" attribute defines the query name where the requests are saved before their sending to the server. The queue is created for redundant requests deleting during frequent events, which call several requests forming one after another. The queue cuts redundant requests and send only the last one. The queue is created in any case and named on default, the attribute usage only re-defines this name.

## Is <a4j:page> component required or not?

<4j:page> is a component used for solving of incompatibility problems in early Ajax4jsf and MyFaces versions. The component encodes the full html page structure.

More information about this problem could be found on the Ajax4Jsf Users Forum.

## Can I have several <a4j:status> components on one page?

Yes, you can. More information about this problem could be found on the JBoss RichFaces Online Demos.

## Can I use <a4j:region> within <a4j:repeat>?

<a4j:region> can't work inside iteration components like <h:dataTable> and <a4j:repeat>.

The details could be found here.

## Why custom Ajax request does not work?

More information about this problem could be found on the Ajax4Jsf Users Forum.

## How to reRender single dataTable column?

More information about this problem could be found on the Ajax4Jsf Users Forum.

## How to disable skinability?

There is possibility to use special skin with name "plain". It doesn't have any parameters. It's necessary for embedding RichFaces components into existing projecst which have its own styles.

For information you can see discussion about this problem on the Ajax4Jsf Users Forum.

## Why does reRendering fail? Hide/Show components using rendered.

During "show/hide" functionality implementation the main error happens because of the "reRender" attribute of some Ajax core Action Component is set on a component that depends on rendered properties, i.e. a component that is to be hidden/rendered is tried to be updated. The problem is that if rendered="false" in this moment, the component isn't in the DOM tree and can't be updated because of the general limitations described in the Ajax Processing chapter.

The correct variant of functionality implantation:

1. With the rendered attribute wrap the component that is to be hidden or rendered on Ajax in a wrapper component (e.g. a4j:outputPanel)

2. Set reRender of an Ajax core Action component on this wrapper component instead of the component itself.

Example:

    ...
    <a4j:outputPanel id="panel">
    	<h:panelGroup rendered="#{bean.rendered}">
    		<!--Some nested content to be hidden/shown depending on bean.rendered -->
    	</h:panelGroup>
    </a4j:outputPanel>
    ...
    <a4j:commandButton action=".." value=".." reRender="panel"/>
    ...

In this case the wrapper component always presents in the DOM tree and its inner content could be updated dynamically on AJAX.

## How to prevent duplicate reRendering when using <a4j:poll>?

For information you can see discussion about this problem on the Ajax4Jsf Users Forum.

## Why does JavaScript call don't work in <a4j:include>?

More information about this problem could be found on the Ajax4Jsf Users Forum.

## How to use <a4j:include> and navigation rules?

For information you can see discussion about this problem on the Ajax4Jsf Users Forum.

## What does ResourceNotRegistered Exception mean?

RichFaces registers its resources (scripts, images) after an application is accessed and then accesses it via a generated URL. During an application development when a developer constantly updates it on the server, it could happen that RichFaces re-registers its resources after every server restart and a browser tries to access them via cashed URL.

The problem is solved with browser cash update (e.g. CTRL+F5).

## How to reRender only particular row(s) of table?

If you use dataTable then you may use "ajaxKeys" attribute to bind the rowKeys to be reRendered there. After you need to point reRender on the specific rows. See also "Iteration components Ajax attributes section".