How to implement PDF.js in portlet?

[Ngocha Haobam，修改在8 年前。]

How to implement PDF.js in portlet?
In normal application it is working fine but in liferay the JS file we include in each file is not getting properly.

[Sergi Marti，修改在8 年前。]

I'm also interested in using PDF.js in a Liferay portlet.
I develop the portlets using JSF 2.1 and Primefaces, and I also use Primefaces Extensions which contains a component called p:documentViewer which wraps the PDF.js: http://www.primefaces.org/showcase-ext/sections/documentviewer/basic.jsf

The error says "ReferenceError: PrimeFaces is not defined" and it has been reported to Primefaces Extensions issue tracker: https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/352

[Jan Tošovský，修改在8 年前。]

'Primefaces is not defined' signals it is not properly loaded into page. Do you have <h:head> tag in your JSF page? It is a must for proper inclusion.

[Sergi Marti，修改在8 年前。]

Jan Tošovský:

'Primefaces is not defined' signals it is not properly loaded into page. Do you have <h:head> tag in your JSF page? It is a must for proper inclusion.

Yes, it is a complex page with other Primefaces components and the rest of the page works fine. It's a very strange error and I will try to debug the Javascript code to find the error....

[Jan Tošovský，修改在8 年前。]

If there are multiple JSF portlets on a single page also ensure all of them use the same PF version.
If you migrated your app to a newer version of PF, verify if your final WAR contains only the last version of the library. I'd also suggest removing your plugin from LR as redeployment only adds a new stuff. If there are two version of PF, clashes are inevitable.
Before JavaScript debugging also clear your browser cache.

[Vernon Singleton，修改在8 年前。]

Hi Sergi

Sergi Marti:

Yes, it is a complex page with other Primefaces components and the rest of the page works fine. It's a very strange error and I will try to debug the Javascript code to find the error....

Another thing that could end up being helpful if you have several JSF portlets on the same page, and you need more control over what javascript gets into the head section of the page, you can follow this ComponentResource/ComponentResourceFactory pattern here, which is now available in our ga6 release.

Hope that helps,
Vernon

[Sergi Marti，修改在8 年前。]

Vernon Singleton:

Hi Sergi
Another thing that could end up being helpful if you have several JSF portlets on the same page, and you need more control over what javascript gets into the head section of the page, you can follow this ComponentResource/ComponentResourceFactory pattern here, which is now available in our ga6 release.

Hope that helps,
Vernon

Hi Vernon,

I tried deploying a single war (with only one version of Primefaces 5.2) in Liferay and putting only a single portlet in a page and the error still continues...and by simply placing the component in a view causes the error.

I will continue investigating.

Sergi

[Juan Gonzalez，修改在8 年前。]

Hola Sergi,

please can you attach a sample portlet and steps to reproduce? I would like to confirm my suspicions.

Thanks!

[Sergi Marti，修改在8 年前。]

Juan Gonzalez:

Hola Sergi,

please can you attach a sample portlet and steps to reproduce? I would like to confirm my suspicions.

Thanks!

Hi Juan,

I finally managed to solve this issue. The problem was in the pe:documentVierwer component, which in rendering time tries to get some resources using javascript with the PrimeFacesExt object instead the PrimeFaces object and it could not could not found them properly. Also, the error "PrimeFaces is not defined" was solved by referencing the parent window object (because this component is rendered inside an iframe which is a diferent window).

Check the issue link for more details: https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/352

Thank you everybody for your support.

Sergi

[Juan Gonzalez，修改在8 年前。]

Hi Sergi,

Sergi Marti:

The problem was in the pe:documentVierwer component, which in rendering time tries to get some resources using javascript with the PrimeFacesExt object instead the PrimeFaces object and it could not could not found them properly.

I would bet this problem is the same as https://code.google.com/p/primefaces/issues/detail?id=7867

Please, can you check if my suggestion here: https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/352#issuecomment-134862072 works?

Sergi Marti:

Also, the error "PrimeFaces is not defined" was solved by referencing the parent window object (because this component is rendered inside an iframe which is a diferent window).

Maybe this is related to the previous one, can you check if my previous comment fixes this issue too?

Thanks!

[Sergi Marti，修改在8 年前。]

Hola Juan,

I attatch a source code of an example portlet with this issue. Hope this will help to solve this issue.

Thx, Sergi

[Meera Prince，修改在8 年前。]

HI
try this it may be useful

http://www.liferaysavvy.com/2013/11/liferay-document-viewer-plugin-portlet.html

Regards,
Meera Prince

[Juan Gonzalez，修改在8 年前。]

For future reference, this issue was fixed by Primefaces Extensions team.

After some testing, seems the problem was a wrong resource loading from javascript in portlet environments, as I mentioned in a previous comment.

More info here:

https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/352 and https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/357

[Juan Gonzalez，修改在8 年前。]

Moved to Liferay Faces category