掲示板

how to use Primefaces 4.0 in Liferay popup portlet

9年前 に samuel Moreno によって更新されました。

how to use Primefaces 4.0 in Liferay popup portlet

New Member 投稿: 14 参加年月日: 13/12/19 最新の投稿
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
thumbnail
9年前 に Juan Gonzalez によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

Liferay Legend 投稿: 3089 参加年月日: 08/10/28 最新の投稿
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
9年前 に samuel Moreno によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

New Member 投稿: 14 参加年月日: 13/12/19 最新の投稿
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
thumbnail
9年前 に Neil Griffin によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

Liferay Legend 投稿: 2655 参加年月日: 05/07/27 最新の投稿
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
9年前 に samuel Moreno によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

New Member 投稿: 14 参加年月日: 13/12/19 最新の投稿
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.
thumbnail
9年前 に Juan Gonzalez によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

Liferay Legend 投稿: 3089 参加年月日: 08/10/28 最新の投稿
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?
9年前 に samuel Moreno によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

New Member 投稿: 14 参加年月日: 13/12/19 最新の投稿
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
thumbnail
9年前 に Neil Griffin によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

Liferay Legend 投稿: 2655 参加年月日: 05/07/27 最新の投稿
[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?
thumbnail
9年前 に Juan Gonzalez によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

Liferay Legend 投稿: 3089 参加年月日: 08/10/28 最新の投稿
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.
9年前 に samuel Moreno によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

New Member 投稿: 14 参加年月日: 13/12/19 最新の投稿
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.
thumbnail
9年前 に Juan Gonzalez によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

Liferay Legend 投稿: 3089 参加年月日: 08/10/28 最新の投稿
You don't need that line.

Change the value in portletId too so it uses yours.
9年前 に samuel Moreno によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

New Member 投稿: 14 参加年月日: 13/12/19 最新の投稿
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>
thumbnail
9年前 に Juan Gonzalez によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

Liferay Legend 投稿: 3089 参加年月日: 08/10/28 最新の投稿
Can you post the xhtml from the opened window content?
9年前 に samuel Moreno によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

New Member 投稿: 14 参加年月日: 13/12/19 最新の投稿
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>
thumbnail
9年前 に Juan Gonzalez によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

Liferay Legend 投稿: 3089 参加年月日: 08/10/28 最新の投稿
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.
thumbnail
9年前 に Neil Griffin によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

Liferay Legend 投稿: 2655 参加年月日: 05/07/27 最新の投稿
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.
9年前 に samuel Moreno によって更新されました。

RE: how to use Primefaces 4.0 in Liferay popup portlet

New Member 投稿: 14 参加年月日: 13/12/19 最新の投稿
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.