问题
I am currently trying to migrate out project from RichFaces 3.0 to PrimeFaces 6.0, but I did not find some components in PrimeFaces like these.
- a4j:region
- rich:componentControl
- rich:hashParam
回答1:
Following Richfaces to PrimeFaces Migration Guide was written by me as instructions for my colleagues. It partially answer your question, but maybe can be useful for other developers with similar problem.
RichFaces 4.x to PrimeFaces 5.x migration guide
Libraries
Remove
- richafaces-core-version.jar;
- richafaces-rich-version.jar;
- richafaces-a4j-version.jar;
- cssparser-version.jar;
- guava-version.jar;
- sac-version.jar.
Add
- primefaces-version.jar.
Configuration
In web.xml remove richfaces and ajax4jsf related contextual parameters
<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>#{lookAndFeel.skin}</param-value>
<!-- blueSky, classic, DEFAULT, deepMarine, ruby, emeraldTown -->
</context-param>
<context-param>
<param-name>org.richfaces.enableControlSkinning</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.enableControlSkinningClasses</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.fileUpload.maxRequestSize</param-name>
<param-value>524288</param-value>
</context-param>
<context-param>
<param-name>org.richfaces.fileUpload.createTempFiles</param-name>
<param-value>false</param-value>
</context-param>
In web.xml add
<context-param>
<param-name>primefaces.FONT_AWESOME</param-name>
<param-value>true</param-value>
</context-param>
<!-- add context parameter for theme if non-default theme is used
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>ProperThemeNameIfUsedForExamplesunny</param-value>
</context-param>
-->
<mime-mapping>
<extension>woff</extension>
<mime-type>application/x-font-woff</mime-type>
</mime-mapping>
<mime-mapping>
<extension>woff2</extension>
<mime-type>application/x-font-woff2</mime-type>
</mime-mapping>
<!-- add primeFacesFileUploadFilter when file upload component is used -->
<filter>
<filter-name>primeFacesFileUploadFilter</filter-name>
<filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
<init-param>
<param-name>thresholdSize</param-name>
<param-value>1048576</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>primeFacesFileUploadFilter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<!-- servlet-name here should match servlet-name in servlet section -->
</filter-mapping>
XHTML
| | RichFaces (change from) | PrimeFaces (change to) |
|------------|--------------------------------------|-----------------------------------|
|Any xhtml |xmlns:a4j="http://richfaces.org/a4j" |xmlns:p="http://primefaces.org/ui" |
| |xmlns:rich="http://richfaces.org/rich"| |
|------------|--------------------------------------|-----------------------------------|
|Listener |a4j:actionListener |f:setPropertyActionListener |
|AJAX |a4j:ajax |p:ajax |
|Button |a4j:commandButton render="xyz" |p:commandButton update="xyz" |
|Link |a4j:commandLink |p:commandLink |
|JS function |a4j:jsFunction |p:remoteCommand |
|Media output|a4j:mediaOutput |p:graphicImage, ... |
|Output area |a4j:outputPanel |div or p:tab or p:outputPanel |
|Parameter |a4j:param |f:setPropertyActionListener,f:param|
|Region |a4j:region |h:panelGroup or p:fragment |
|Repeat |a4j:repeat |p:repeat |
|Status |a4j:status |p:ajaxStatus |
|------------|--------------------------------------|-----------------------------------|
|Accordion |rich:accordion |p:accordionPanel |
|Accord. item|rich:accordionItem |p:tab |
|Autocomplete|rich:autocomplete |p:autocomplete |
|Calendar |rich:calendar |p:calendar |
|Sub-table |rich:collapsibleSubTable |p:dataTable (nested) |
|Column |rich:column |p:column |
|Button |rich:commandButton |p:commandButton ajax="false" |
|Command link|rich:commandLink |p:commandLink ajax="false" |
|Control |rich:componentControl |JS function |
|Data grid |rich:dataGrid |p:dataGrid |
|Data scroll |rich:dataScroller |remove (use paginator attribute) |
|Data table |rich:dataTable |p:dataTable |
|Sub-menu |rich:dropDownMenu |p:submenu |
|Editor |rich:editor |p:editor (p:textEditor in PF 6) |
|File upload |rich:fileUpload |p:fileUpload |
|Focus |rich:focus |p:focus |
|Google map |rich:gmap (RF3) |p:gmap |
|Hot key |rich:hotKey |p:hotkey |
|Spinner |rich:inputNumberSpinner |p:spinner |
|List |rich:list |p:dataList |
|Menu item |rich:menuItem |p:menuitem |
|Message |rich:message |p:message |
|Messages |rich:messages |p:messages |
|Panel |rich:panel |p:panel |
|Panel menu |rich:panelMenu |p:panelMenu or p:menu |
|Menu item |rich:panelMenuItem |p:menuitem |
|Pick list |rich:pickList |p:pickList |
|Popup |rich:popup |p:dialog |
|Select one |rich:select |p:selectOneMenu |
|Tab |rich:tab |p:tab |
|Menu bar |rich:toolbar |p:menubar or p:toolbar |
|Menu group |rich:toolbarGroup |remove |
|Tooltip |rich:tooltip |p:tooltip |
|Tree |rich:tree |p:tree |
|Tree node |rich:treeNode |p:treeNode |
|------------|--------------------------------------|-----------------------------------|
|Label |h:outputLabel |p:outputLabel |
|Input text |h:inputText |p:inputText |
|Input secret|h:inputSecret |p:password |
|Message |h:message |p:message |
|Messages |h:messages |p:messages |
|Text area |h:inputTextarea |p:inputTextarea |
|Dropdown |h:selectOneListbox |p:selectOneMenu |
|Select one |h:selectOneMenu |p:selectOneMenu |
|Multi-select|h:selectManyListbox |p:selectManyMenu |
|Check box |h:selectBooleanCheckbox |p:selectBooleanCheckbox |
|Check boxes |h:selectManyCheckbox |p:selectManyCheckbox |
|Radio button|h:selectOneRadio |p:selectOneRadio |
|Button |h:commandButton |p:commandButton ajax="false" |
|Regular link|h:commandLink |p:commandLink ajax="false" |
|Image link |h:commandLink |p:menuitem |
|Link |h:link |p:link |
|Column |h:column |p:column |
|Spacer |<h:graphicImage value="spacer.gif" /> |p:spacer |
|------------|--------------------------------------|-----------------------------------|
|Repeat |ui:repeat |p:repeat |
|------------|--------------------------------------|-----------------------------------|
|Field set |fieldset |p:fieldset |
|------------|--------------------------------------|-----------------------------------|
CSS
RichFaces and JSF 1.x related styles should be deleted:
.msginfo {
background-image: url(../images/info-icon.gif);
background-position: top left;
background-repeat: no-repeat;
height: 20px;
padding-left: 20px;
padding-bottom: 5px;
}
.msginfo td {
height: 20px;
padding-left: 20px;
padding-bottom: 5px;
}
.msgwarn {
background-image: url(../images/warning.gif);
background-position: top left;
background-repeat: no-repeat;
height: 20px;
padding-left: 20px;
padding-bottom: 5px;
}
.msgwarn td {
height: 20px;
padding-left: 20px;
padding-bottom: 5px;
}
.msgerror {
font-weight: bold;
background-image: url(../images/error-icon.gif);
background-position: top left;
background-repeat: no-repeat;
height: 20px;
padding-left: 20px;
padding-bottom: 5px;
}
.msgerror td {
height: 20px;
padding-left: 20px;
padding-bottom: 5px;
}
.inputRequired {
background-image: url(../images/icons/input-required.gif);
background-position: top right;
background-repeat: no-repeat;
}
.rf-trn-sel {
background: #FFFFFF !important;
}
.rf-trn-ico {
height: 0px !important;
width: 0px !important;
}
.rf-trn-hnd {
background-image: url(../images/spacer.gif) !important;
}
.rf-pm-top-itm-ico {
width: 0px !important;
}
.rich-menu-item-hover {
background-color: #FFFFFF;
border-bottom: 1px solid #8DC63F;
border-top: none;
border-left: none;
border-right: none;
}
.rich-menu-group-hover {
background-color: #FFFFFF;
border-bottom: 1px solid #8DC63F;
border-top: none;
border-left: none;
border-right: none;
}
.rich-menu-list-bg {
background-color: #FFFFFF;
}
.rich-table-subheadercell {
white-space: normal;
}
.rich-list-picklist-button-content {
font-size: 12px;
}
PrimeFaces related styles can be added (if needed). In GUI following styles were redefined:
.ui-widget, .ui-widget .ui-widget {
font-size: 12px;
}
.ui-panel .ui-panel-content {
padding: 0.5em 0.5em;
}
.ui-dialog .ui-dialog-content {
padding: 5px 5px;
}
.ui-accordion .ui-accordion-content {
padding: 5px;
border: 1px solid #ccc;
}
/* baseline does not work for selectOneMenu, top or middle vertical align should be used */
.ui-selectonemenu {
vertical-align: middle;
}
input[type="text"][disabled] {
color: #000000;
}
Images and Themes
Some images can be removed: error-icon.gif, warning.gif, info-icon.gif, spacer.gif. PrimeFaces has internal images for the same purpose.
Skin.properties file can be removed, as themes in PrimeFaces configured in different way.
Java
Data model for data table should be changed to LazyLoadDataModel.
Data model for picklist should be changed to DualListModel.
Type of change event for pickList should be changed from ValueChangeEvent to TransferEvent.
来源：https://stackoverflow.com/questions/46951953/alternative-of-richfaces-components-in-primefaces