Menu
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.
801
While the amount of open issues is a bit larger in Richfaces, if we weight them by priority, about 93% of Icefaces issues are labeled as “Major”, while Richfaces exibits “just” a 64% of Major issues. On the other hand RF has recorded some more Critical issues.
In statistical terms, it seems that Richfaces and Icefaces already had their technology peak around 2009, while Primefaces is going now for the peak. Conclusions: well, at the end of this article we should emit our verdict.
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.
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.
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.
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
