【问题标题】:Alternative of richfaces components in primefacesprimefaces中richfaces组件的替代
【发布时间】:2018-04-07 16:42:48
【问题描述】:

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

【问题讨论】:

  • 使用h:panelGroup 代替a4j:region
  • @Kukeltje 感谢您的建议。我已经链接了文件供您参考。
  • @Kukeltje 谢谢。您的建议已包含在答案中。
  • rich:componentControl 可以用JS函数代替。例如<a4j:commandButton><rich:componentControl target="popup" operation="show" /></a4j:commandButton> => <p:commandButton oncomplete="PF('popup').show()" />

标签: primefaces richfaces


【解决方案1】:

从 Richfaces 到 PrimeFaces 迁移指南是我编写的,作为对我同事的指导。它部分回答了您的问题,但可能对其他有类似问题的开发人员有用。


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

删除
- richafaces-core-版本.jar;
- richafaces-rich-版本.jar;
- richafaces-a4j-版本.jar;
- cssparser-版本.jar;
- guava-版本.jar;
- sac-版本.jar.

添加
- primefaces-版本.jar。

配置

web.xml中删除richfacesajax4jsf相关的上下文参数

<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.gifwarning.gifinfo-icon.gifspacer .gif。 PrimeFaces 具有用于相同目的的内部图像。

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

Java

数据表的数据模型应改为LazyLoadDataModel

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

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

【讨论】:

  • 谢谢,这是一个写得很好的文件。
猜你喜欢
  • 1970-01-01
  • 2014-07-30
  • 1970-01-01
  • 2014-04-27
  • 1970-01-01
  • 2014-04-27
  • 2011-04-21
  • 2019-02-11
  • 2012-02-11
相关资源
最近更新 更多