how to use Primefaces 4.0 in Liferay popup portlet

[samuel Moreno, modificado hace 9 años.]

Hi,

I've a problem with primefaces components in popup portlets. This portlet is developed with JSF 2.0 and if i open it in a normal page works fine but from popup doesn't get primefaces libs.

Any suggestion?

Thanks,
Samuel

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

samuel Moreno:

Hi,

I've a problem with primefaces components in popup portlets. This portlet is developed with JSF 2.0 and if i open it in a normal page works fine but from popup doesn't get primefaces libs.

Any suggestion?

Thanks,
Samuel

Hola Samuel,

Please can you post some source snippets (xhtml part that opens that popup and file used for popup)?

What Liferay/Liferay Faces version are you using, (so we can try to reproduce)?

Thanks

[samuel Moreno, modificado hace 9 años.]

Hola Juan,

I open the popup with next code:

<script>
		function callPortletPopUp(w, h, tipoPopup) {

			AUI()
					.use(
							'aui-base',
							'aui-io-plugin-deprecated',
							'liferay-util-window',
							'liferay-portlet-url',
							'aui-dialog-iframe-deprecated',
							function(A) {
								var url = Liferay.PortletURL.createRenderURL();
								url
										.setPortletId("[PortletName]"); 
								url.setParameter("tipoPopup", tipoPopup);
								url.setWindowState('pop_up');
								var popUpWindow = Liferay.Util.Window
										.getWindow({
											dialog : {
												centered : true,
												constrain2view : true,
												cssClass : 'main.css',
												modal : true,
												resizable : false,
												width : w,
												height : h
											}
										}).plug(A.Plugin.DialogIframe, {
											autoLoad : false,
											iframeCssClass : 'dialog-iframe',
											uri : url.toString()
										}).render();
								popUpWindow.show();
								popUpWindow.io.start();
							});

		}

		
	</script>

This code opens a portlet in a popup but don't get maven libs. I suppose there is some way to force the popup which libraries have to use, no?
Versions:
Liferay 6.2
Primefaces 4.0

Thanks

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

Hi Samuel,

When you get a chance, please provide more details about what you mean by "don't get maven libs".

When you wrote "code opens a portlet" do you see some of the PrimeFaces components rendering?

Thanks,

Neil

[samuel Moreno, modificado hace 9 años.]

Hi Neil,

The libs deployment in Maven are not important. The problems is, why potlet develops with primefaces work in a Liferay page but don't render these components in a popup.


Thanks.

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

Hola Samuel,

I've just checked with your same environment and use your snippet to open in a popup, and I see the primefaces resources are loaded properly.

Do you see any error in javascript console or server log?

[samuel Moreno, modificado hace 9 años.]

Hola Juan,

There are not errors in js console. Would you send me, for compare, the snippets that you use (the code of the portlet opened in popup window).

Thanks

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

[Moved to Liferay Faces forum]

Just a guess, but you might be specifying the wrong value for "[PortletName]" on the following lines:

13                                url
14                                        .setPortletId("[PortletName]"); 

What value are you providing?

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

Hola Samuel,

here we go:

<h:outputscript>
        function callPortletPopUp(w, h, tipoPopup) {
            AUI()
                    .use(
                            'aui-base',
                            'aui-io-plugin-deprecated',
                            'liferay-util-window',
                            'liferay-portlet-url',
                            'aui-dialog-iframe-deprecated',
                            function(A) {
                               var url = Liferay.PortletURL.createRenderURL();
                               url.setPortletId("TestPrimefacesPopup_WAR_TestPrimefacesPopupportlet");
                               url.setParameter("tipoPopup", tipoPopup);
                               url.setParameter("_facesViewIdRender","/views/popup.xhtml");
                               
                               url.setWindowState('pop_up');
                                var popUpWindow = Liferay.Util.Window
                                        .getWindow({
                                            dialog : {
                                                centered : true,
                                                constrain2view : true,
                                                cssClass : 'main.css',
                                                modal : true,
                                                resizable : false,
                                                width : w,
                                                height : h
                                            }
                                        }).plug(A.Plugin.DialogIframe, {
                                            autoLoad : false,
                                            iframeCssClass : 'dialog-iframe',
                                            uri : url.toString()
                                        }).render();
                                popUpWindow.show();
                                //popUpWindow.io.start();
                            });
               }       
   </h:outputscript>

I only added _facesViewIdRender parameter in URL for opening another xhtml, removed popUpWindow.io.start(); and changed portlet Id with my specific portlet name.

[samuel Moreno, modificado hace 9 años.]

Hola Juan,

When i add _facesViewIdRender parameter in URL get the next error:

10:37:26,509 ERROR [http-bio-8080-exec-56][render_portlet_jsp:132] null
com.sun.faces.context.FacesFileNotFoundException: /views/popup.xhtml Not Found in ExternalContext as a Resource
	at com.sun.faces.facelets.impl.DefaultFaceletFactory.resolveURL(DefaultFaceletFactory.java:231)
	at com.sun.faces.facelets.impl.DefaultFaceletFactory.resolveURL(DefaultFaceletFactory.java:287)
	at com.sun.faces.facelets.impl.DefaultFaceletFactory.getMetadataFacelet(DefaultFaceletFactory.java:208)
	at com.sun.faces.application.view.ViewMetadataImpl.createMetadataView(ViewMetadataImpl.java:113)
	at com.sun.faces.lifecycle.RestoreViewPhase.execute(RestoreViewPhase.java:233)
	at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
	at com.sun.faces.lifecycle.RestoreViewPhase.doPhase(RestoreViewPhase.java:116)
	at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:118)
	at com.liferay.faces.bridge.BridgePhaseRenderImpl.execute(BridgePhaseRenderImpl.java:185)
	at com.liferay.faces.bridge.BridgePhaseRenderImpl.execute(BridgePhaseRenderImpl.java:85)
	at com.liferay.faces.bridge.BridgeImpl.doFacesRequest(BridgeImpl.java:112)
	at javax.portlet.faces.GenericFacesPortlet.doView(GenericFacesPortlet.java:255)
	at javax.portlet.GenericPortlet.doDispatch(GenericPortlet.java:328)
	at javax.portlet.faces.GenericFacesPortlet.doDispatch(GenericFacesPortlet.java:204)
	at javax.portlet.GenericPortlet.render(GenericPortlet.java:233)
	at com.liferay.portlet.FilterChainImpl.doFilter(FilterChainImpl.java:103)
	at com.liferay.portlet.ScriptDataPortletFilter.doFilter(ScriptDataPortletFilter.java:55)
	at com.liferay.portlet.FilterChainImpl.doFilter(FilterChainImpl.java:100)
	at com.liferay.portal.kernel.portlet.PortletFilterUtil.doFilter(PortletFilterUtil.java:64)
	at com.liferay.portal.kernel.servlet.PortletServlet.service(PortletServlet.java:112)

I don't know if i have to set more configurations to use _facesViewIdRender.

Thanks,
Samuel.

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

You don't need that line.

Change the value in portletId too so it uses yours.

[samuel Moreno, modificado hace 9 años.]

Ok, I know i have to change the portletID, but the behavior is the same.

For example, if i want to use a radio component (primefaces) with ajax(faces), the popup portlet render the "radio" but it have not primefaces look&feel or behavior(ajax faces).

<p:selectoneradio id="radioFormaContacto" value="#{misDatosBean.formaContactoPreferida}" layout="lineDirection" styleclass="textoDato radios">
				<f:selectitem itemValue="#{'Correo electrónico'}" itemLabel="#{bnd['email']}" />
				<f:selectitem itemValue="#{'Teléfono móvil'}" itemLabel="#{bnd['telefono']}" />
				<f:ajax listener="#{misDatosAction.editarFormaContactoPreferida}" render="radioFormaContacto" />
</p:selectoneradio>

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

Can you post the xhtml from the opened window content?

[samuel Moreno, modificado hace 9 años.]

Here we go:

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:aui="http://liferay.com/faces/aui" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:jsf="http://xmlns.jcp.org/jsf" xmlns:portlet="http://java.sun.com/portlet_2_0" xmlns:p="http://primefaces.org/ui">

	<h:head>
		<link type="text/css" rel="stylesheet" href="/WebClientesLiferay-portlet/css/main.css">
	</h:head>

	<h:body>

	
		<h:form>

			<p:selectoneradio id="radioFormaContacto" value="#{misDatosBean.formaContactoPreferida}" layout="lineDirection" styleclass="textoDato radios">
				<f:selectitem itemValue="#{'Correo electrónico'}" itemLabel="#{bnd['email']}" />
				<f:selectitem itemValue="#{'Teléfono móvil'}" itemLabel="#{bnd['telefono']}" />
				<f:ajax listener="#{misDatosAction.editarFormaContactoPreferida}" render="radioFormaContacto" />
			</p:selectoneradio>

			


		</h:form>
	</h:body>

</f:view>

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

About primefaces appearance, there are some problems due to Liferay theme css, so you have to override some of those css to show exactly the same as a plain webapp.

I could make AJAX work without any problem. See attached portlet and check if you have everything properly configured (web.xml, faces-config.xml, etc). A good practice is to create this portlets using maven archetypes or Liferay IDE, so you don't have to worry about this configurations.

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

The reason why the PrimeFaces styling is not working is probably because the popup is a "runtime portlet" -- for more info, see the Dynamically adding JSF Portlets to Portal Pages wiki article.

[samuel Moreno, modificado hace 9 años.]

Hi Juan,

I found it, i think the problem is in the css.
If I deploy the portlet in a page without my custom theme, it will work fine, but if i do it in page under my theme we have the same problem.
I've tried it with your test portlet and it's the same.

Have you any idea about this? which css could produce the error?

thanks,
Samuel.