primefaces中richfaces组件的替代

Question

我目前正在尝试将项目从 RichFaces 3.0 迁移到 PrimeFaces 6.0，但我没有在 PrimeFaces 中找到这些组件。

Answer 1

Following Richfaces to PrimeFaces Migration Guide 是我为我的同事编写的指南。它部分回答了您的问题，但可能对遇到类似问题的其他开发人员有用。

RichFaces 4.x 到 PrimeFaces 5.x 迁移指南

图书馆

移除
- richafaces-core-版本.jar;
- richafaces-rich-版本.jar;
- richafaces-a4j-版本.jar;
- cssparser-版本.jar;
-番石榴-版本.jar;
- sac-版本.jar.

添加
- primefaces-版本.jar.

配置

在web.xml中删除richfaces和ajax4jsf相关的上下文参数

<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>

在web.xml中添加

<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 和 JSF 1.x 相关样式应删除：

.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 相关样式（如果需要）。在 GUI 中重新定义了以下样式：

.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;
}

图像和主题

部分图片可以删除：error-icon.gif, warning.gif, info-icon.gif, spacer.gif. PrimeFaces 有用于相同目的的内部图像。

Skin.properties 文件可以删除，因为 PrimeFaces 中的主题以不同的方式配置。

Java

数据 table 的数据模型应更改为 LazyLoadDataModel。

选项列表的数据模型应更改为 DualListModel。

pickList 的更改事件类型应从 ValueChangeEvent 更改为 TransferEvent。

primefaces中richfaces组件的替代

Alternative of richfaces components in primefaces

richfaces

primefaces

RichFaces 4.x 到 PrimeFaces 5.x 迁移指南