Alternative of richfaces components in primefaces

前端未结

关注

 1  567

星月不相逢 2021-02-02 03:16

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.

a4j:region

1条回答

暖寄归人 (楼主)

2021-02-02 04:04

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.

RichFaces 4.x to PrimeFaces 5.x migration guide

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


    org.richfaces.skin
    #{lookAndFeel.skin}
    


    org.richfaces.enableControlSkinning
    false


    org.richfaces.enableControlSkinningClasses
    true


    org.richfaces.fileUpload.maxRequestSize
    524288


    org.richfaces.fileUpload.createTempFiles
    false

In web.xml add


    primefaces.FONT_AWESOME
    true




    woff
    application/x-font-woff


    woff2
    application/x-font-woff2




    primeFacesFileUploadFilter
    org.primefaces.webapp.filter.FileUploadFilter
    
        thresholdSize
        1048576
    


    primeFacesFileUploadFilter
    Faces Servlet

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

0 讨论(0)