primefaces 中的richfaces 组件的替代方案 [英] Alternative of richfaces components in primefaces
问题描述
我目前正在尝试将项目从 RichFaces 3.0 迁移到 PrimeFaces 6.0，但我没有在 PrimeFaces 中找到类似这样的组件.
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.
推荐答案
Following Richfaces to PrimeFaces Migration Guide 是我写的，作为对我同事的说明.它部分回答了您的问题，但可能对遇到类似问题的其他开发人员有用.
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.
图书馆
删除
-richafaces-core-version.jar;
-richafaces-rich-version.jar;
-richafaces-a4j-version.jar;
- cssparser-version.jar;
- 番石榴-版本.jar;
- sac-version.jar.
Remove
- richafaces-core-version.jar;
- richafaces-rich-version.jar;
- richafaces-a4j-version.jar;
- cssparser-version.jar;
- guava-version.jar;
- sac-version.jar.
添加
- primefaces-version.jar.
Add
- primefaces-version.jar.
配置
在 web.xml 中删除 richfaces 和 ajax4jsf 相关的上下文参数
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>
在 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 相关样式:
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 相关样式可以添加(如果需要).在 GUI 中重新定义了以下样式:
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;
}
图片和主题
可以删除一些图像:error-icon.gif、warning.gif、info-icon.gif、spacer.gif.PrimeFaces 具有用于相同目的的内部图像.
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 文件可以删除，因为 PrimeFaces 中的主题以不同的方式配置.
Skin.properties file can be removed, as themes in PrimeFaces configured in different way.
Java
数据表的数据模型应该改为LazyLoadDataModel.
Data model for data table should be changed to LazyLoadDataModel.
选择列表的数据模型应更改为DualListModel.
Data model for picklist should be changed to DualListModel.
pickList 的更改事件类型应从 ValueChangeEvent 更改为 TransferEvent.
Type of change event for pickList should be changed from ValueChangeEvent to TransferEvent.
这篇关于primefaces 中的richfaces 组件的替代方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
