JBoss.orgCommunity Documentation
Based on RichFaces Users Forum
Copyright © 2008 Red Hat
Most important links for RichFaces can be found here.
There are two places where you can find binary/source distribution:
This wiki article helps you to find an answer.
Download and install Maven if you have not it yet installed. Follow the instruction at http://maven.apache.org/download.html.
Open <Maven-Root>/conf/settings.xml file to edit
Add into the
<profile>section:
<id>RichFaces</id>
<repositories>
<repository>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>false</enabled>
<updatePolicy>never</updatePolicy>
</snapshots>
<id>repository.jboss.com</id>
<name>Jboss Repository for Maven</name>
<url>
http://repository.jboss.com/maven2/
</url>
<layout>default</layout>
</repository>
<repository>
<releases>
<enabled>false</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
<updatePolicy>always</updatePolicy>
</snapshots>
<id>maven2-snapshots.jboss.com</id>
<name>Jboss Repository for Maven Snapshots</name>
<url>http://snapshots.jboss.com/</url>
<layout>default</layout>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>maven2-snapshots.jboss.com</id>
<name>Jboss Repository for Maven Snapshots</name>
<url>http://snapshots.jboss.com/</url>
<releases>
<enabled>false</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
<updatePolicy>always</updatePolicy>
</snapshots>
</pluginRepository>
<pluginRepository>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>false</enabled>
<updatePolicy>never</updatePolicy>
</snapshots>
<id>repository.jboss.com</id>
<name>Jboss Repository for Maven</name>
<url>
http://repository.jboss.com/maven2/
</url>
<layout>default</layout>
</pluginRepository>
</pluginRepositories>
Add into the
<activeProfiles>section:<activeProfile>RichFaces</activeProfile>
RichFaces repository structure overview can be found here.
How to build and how to use richfaces-samples applications in Eclipse is described here.
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.
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.
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 for the problem here.
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.
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.
Examples of validation in <rich:modalPanel> could be found in the Wiki article and on the RichFaces Users Forum.
To solve this problem you should use the latest versions of RichFaces.
Most important links for RichFaces can be found here.
Main demo of RichFaces is a facelets based application. Full Facelets support is one of the main features. Hence, the answer is yes.
<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.
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" .
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.
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.
You can pass your parameters during modalPanel opening or closing. This passing could be performed in the following way:
Example:
Richfaces.showModalPanel('panelId', {left: auto}, {param1: value1});
Thus, except the standard modalPanel parameters you can pass any of your own parameters.
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 ...>
...
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.
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.
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>
...
For necessary information you can see discussion about this problem on the RichFaces Users Forum.
For necessary information you can see RichFaces Users Forum.
To catch the value of the inputNumberSlider from the JavaScript, 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>
...
The answer could be found here.
For necessary information you can see discussion about this problem on the RichFaces Users Forum
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;
}
The answer could be found here.
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.
The answer could be found on the RichFaces Users Forum:
The answer could be found here.
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>
...
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.
A problem with tab height occurs in IE 7. The tab height is correct in Firefox and IE 6. This is IE's 7 bug. As a temporary solution you can try to change doctype declaration from:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
to:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<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.
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.)
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;
}
...