Primefacesのrichfacesコンポーネントの代替
現在、プロジェクトをRichFaces3.0からPrimeFaces6.0に移行しようとしていますが、PrimeFacesにこのようなコンポーネントが見つかりませんでした。
Richfaces to PrimeFaces移行ガイドは、同僚への指示として私が作成したものです。それはあなたの質問に部分的に答えますが、おそらく同様の問題を抱えている他の開発者にとって役立つかもしれません。
RichFaces4.xからPrimeFaces5.xへの移行ガイド
ライブラリ
削除する
-richafaces-core-version。jar;
-richafaces-rich-version。jar;
-richafaces-a4j-version。jar;
-cssparser-version。jar;
-guava-version。jar;
-sac-version。jar。
追加
-primefaces-version。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およびJSF1.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
データテーブルのデータモデルをLazyLoadDataModelに変更する必要があります。
選択リストのデータモデルをDualListModelに変更する必要があります。
PickListの変更イベントのタイプをValueChangeEventからTransferEventに変更する必要があります。