Search code examples
liferay-6jsf-2.2

Liferay Faces and remote javascript inside head

I am developing a Liferay Primefaces portlet using Primefaces 6.0 and Liferay 6.2.5 tomcat bundle. I was using the old versioning scheme of Liferay Faces.

And then i decided to switch to the current versions as seen here for 6.2, 2.2, primefaces and maven.

My problem is that i had some portlets using the primefaces gmap component, so i needed to include the google maps javascript, and i did it with the follow piece of code:

    <h:head>
        <script
            src="https://maps.google.com/maps/api/js?key=MY_KEY"
            type="text/javascript" />
    </h:head>

Even though this worked perfectly before, after my upgrade it doesn't work. In fact, i can't include any script using the code above. Any help/workarounds to include a remote javascript inside the head tag?

Solution

  • Edit: FACES-2974 has been fixed in Bridge Impl 4.1.0.

    This is a regression bug (FACES-2974) in Liferay Faces Bridge 4.0.0 (and 3.0.0 and 2.0.0).

    To workaround this issue, you can create a composite component with a name attribute. The name must end in either "css" or "js" and should probably be unique per view to ensure that it is always loaded. For example, create the following resources/workaround/headElements.xhtml file:

    <?xml version="1.0" encoding="UTF-8"?>
<ui:component xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:cc="http://xmlns.jcp.org/jsf/composite" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/2002/08/xhtml/xhtml1-transitional.xsd">

    <!-- Workaround for https://issues.liferay.com/browse/FACES-2974 -->
    <cc:interface>
        <cc:attribute name="name" required="true" />
    </cc:interface>

    <cc:implementation>
        <cc:insertChildren />
    </cc:implementation>

</ui:component>

    To use this component with the google maps script mentioned above:

    <h:head>
    <workaround:headElements name="#{view.viewId}.js">
        <script src="https://maps.google.com/maps/api/js?key=MY_KEY"
        type="text/javascript" /></script>
    </workaround:headElements>
    <!-- ... -->
</h:head>