PrimeFaces error in getFacesResource in Liferay

[Oleg Efimov, modificado hace 9 años.]

I'm using Liferay 6.2 + Faces Bridge 4.2.0-m1 + PrimeFaces 5.1
My JSF scenario is not trivial -- it has p:tabView with tabs added/removed dynamically, p:tab components have bindings on dynamically created UIComponents. I'm unable to say how this influences this bug, though.
The bug is that <p:commandButton> and <p:confirm> dialog components inside tab are not invoking their intended actions.

I noticed the following JS error in log:
TypeError: Cannot read property 'replace' of undefined (non-minified core.js:293, function getFacesResource)

PrimeFaces expects core script to be imported via smth like this:
<script src="<URL...>/javax.faces.resource=primefaces.js?ln=primefaces" type="text/javascript"></script>
It looks for the base script with expression: $('script[src*="/javax.faces.resource/' + PrimeFaces.getCoreScriptName() + '"]')

While what really gets imported (as seen in page source) is:
<script src="<URL...>?<liferay params...>&_<portlet>_WAR_<plugin>_javax.faces.resource=primefaces.js&_<portlet>_WAR_<plugin>_ln=primefaces" type="text/javascript"></script>
Expression mentioned above won't work here, instead works $('script[src*="javax.faces.resource=' + PrimeFaces.getCoreScriptName() + '"]')

On patching PrimeFaces' getFacesResource with my expression the problem solved (I understand that PF won't work standalone with this change).

I'm not sure if this is a PrimeFaces, Bridge or Liferay (or my own )bug, but the same scenario works fine when deployed as a simple web application.

[Juan Gonzalez, modificado hace 9 años.]

Hi Oleg,

Primefaces 5.1 had just been released. Did you check this behaviour in previous Primefaces version?

Can you post here snippets where we can see how do you create the components and xhtml?

[Oleg Efimov, modificado hace 9 años.]

Hi Juan,

In PrimeFaces 5.0 the behaviour is the same.

Composite Component alba/workbench.xhtml:

<cc:interface>
</cc:interface>
<cc:implementation>
    <div id="#{cc.clientId}">
        <p:tabview id="tabs" activeindex="#{workbench.activeTab}">
            <p:ajax event="tabChange" listener="#{workbench.onTabChange}" update=":workbench" />

            <c:foreach var="tab" items="#{workbench.tabs}">
                <p:tab binding="#{tab.uiComponent}" />
            </c:foreach>
        </p:tabview>
    </div>
</cc:implementation>

Portlet View - portlet-workbench.xhtml

<!--?xml version="1.0" encoding="UTF-8"?-->
<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" xmlns:alba="http://java.sun.com/jsf/composite/alba">
    <h:head />
    <h:body>
        <alba:workbench id="workbench" />

        <p:confirmdialog global="true" id="confirm-dialog">
            <p:commandbutton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
            <p:commandbutton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
        </p:confirmdialog>
    </h:body>
</f:view>

Dynamic Tab Content - lib123/info.xhtml

<cc:interface>
    <cc:attribute name="task" required="true" type="task.InfoTask" />
</cc:interface>
<cc:implementation>
    <div id="#{cc.clientId}">
    <h:form id="tab-form">
        <p:messages globalOnly="true" />
        <p:panel>
            <p:fieldset legend="General Info">
            </p:fieldset>
        </p:panel>
        <p:panelgrid columns="3">
            <p:commandbutton rendered="#{!cc.attrs.task.claimRequired}" value="Submit" action="#{workbench.sumbitTask(cc.attrs.task)}" update=":workbench" />
            <p:commandbutton value="Close" action="#{workbench.closeTabByTask(cc.attrs.task)}" process="@this" update=":workbench">
                <p:confirm header="Close Task" message="Close without saving?" icon="ui-icon-alert" />
            </p:commandbutton>
        </p:panelgrid>
    </h:form>
    </div>
</cc:implementation>

In WorkbenchController the following code is used to create UIComponents dynamically (passing taglibURI 'lib123' and tagName 'info'):

context.getApplication().getViewHandler().getViewDeclarationLanguage(context, context.getViewRoot().getViewId()).createComponent(context, taglibURI, tagName, attributes)

[Neil Griffin, modificado hace 9 años.]

Hi Oleg,

Thank you for reporting this issue. I looked at the PrimeFaces 5.1 source code and I see that the getFacesResource(name, library, version) assumes a webapp (non-portlet) environment for generating URLs. In order to track this issue to closure, I created FACES-2007. Please click on the "watch" link in order to monitor progress.

I searched through the source code for PrimeFaces 5.0 but I don't see the getFacesResource function there. Are you experiencing the same problem with PrimeFaces 5.0?

Kind Regards,

Neil

[Oleg Efimov, modificado hace 9 años.]

Hi Neil,

Yes, the problem is also reproduced in 5.0.

I don't see getFacesResource in 5.0 either, but e.g. createWidget function inlines the same failing approach:
http://primefaces.googlecode.com/svn/primefaces/tags/5_0/src/main/resources/META-INF/resources/primefaces/core/core.js
http://primefaces.googlecode.com/svn/primefaces/tags/5_1/src/main/resources/META-INF/resources/primefaces/core/core.js

Cheers,
Oleg.

[Oleg Efimov, modificado hace 9 años.]

I found the following workaround:

1. Add resources/js/primefaces-override.js

(function (window) {
    console.log('PrimeFaces override called');
    if (window.PrimeFaces) {
        /**
         * Builds a resource URL for given parameters.
         * Overriden as per https://www.liferay.com/community/forums/-/message_boards/message/43787391
         *
         * @param {string} name The name of the resource. For example: primefaces.js
         * @param {string} library The library of the resource. For example: primefaces
         * @param {string} version The version of the library. For example: 5.1
         * @returns {string} The resource URL.
         */
        window.PrimeFaces.getFacesResource = function (name, library, version) {
            var scriptURI = $('script[src*="javax.faces.resource=' + PrimeFaces.getCoreScriptName() + '"]').attr('src');

            scriptURI = scriptURI.replace(PrimeFaces.getCoreScriptName(), name);
            scriptURI = scriptURI.replace('ln=primefaces', 'ln=' + library);

            if (version) {
                var extractedVersion = new RegExp('[?&]v=([^&]*)').exec(scriptURI)[1];
                scriptURI = scriptURI.replace('v=' + extractedVersion, 'v=' + version);
            }

            return window.location.protocol + '//' + window.location.host + scriptURI;
        };
    } else {
        console.error('PrimeFaces override failed -- no window.PrimeFaces exists');
    }
})
(window);

2. Include it in your portlets:

    <h:head>
        <h:outputscript name="js/primefaces-override.js" />
    </h:head>

[Neil Griffin, modificado hace 9 años.]

Hi Oleg,

Thanks so much for posting the workaround! Could I ask you to please send primefaces-override.js as a pull request for FACES-2007 according to the instructions found in Contributing to Liferay Faces?

Kind Regards,

Neil

[Oleg Efimov, modificado hace 9 años.]

Hi Neil,

Sure. Where should I place it in the project structure?

Regsrds,
Oleg.

[Neil Griffin, modificado hace 9 años.]

Hi Oleg,

Please put it here in the project structure:
https://github.com/liferay/liferay-faces/tree/master/bridge-impl/src/main/resources/META-INF/resources

Thanks,

Neil

[Oleg Efimov, modificado hace 9 años.]

Created https://github.com/liferay/liferay-faces/pull/290

[Neil Griffin, modificado hace 9 años.]

Hi Oleg,

I see the pull request is now associated with FACES-2007. Further updates about merging will be found there in JIRA. Thanks again.

Neil