DocumentViewer not working in Liferay

[PereBG]

Document viewer is not working in Liferay JSF Portlet, we have the following library versions:

primefaces-extensions 3.2.0 primefaces 5.2.7 liferay-faces-bridge-impl 3.1.4-ga5 liferay-version 6.1.2-ce-ga3

It seems that is throwing a javascript error "ReferenceError: PrimeFaces is not defined" at primefaces-extensions-source.js the line

var originalChangeTheme = PrimeFaces.changeTheme;

Same code in a normal JSF application works correctly.

[sergi-mm]

I have the same problem in a JSF Portlet and using pe:documentViewer. The problem is caused when the function "loadPdf" from viewer.html is called when rendering the iframe.

var loadPdf = function(data){
            eval(data);
            webViewerLoad();
        };

Inside this, it calls the function eval(data); which causes the exception when trying to evaluate the following data:

"PrimeFacesExt={getRequestUrlExtension:function(){return PrimeFacesExt.getUrlExtension(location.href)},getUrlExtension:function(a){return(a=a.substr(1+a.lastIndexOf("/")).split("?")[0]).substr(a.lastIndexOf("."))},getFacesResource:function(a,b,d){var c=PrimeFacesExt.getPrimeFacesExtensionsScriptURI(),c=c.replace("/primefaces-extensions.js",a),c=PrimeFacesExt.useUncompressedResources?c.replace("ln\x3d"+PrimeFacesExt.RESOURCE_LIBRARY_UNCOMPRESSED,"ln\x3d"+b):c.replace("ln\x3d"+PrimeFacesExt.RESOURCE_LIBRARY,↵"ln\x3d"+b);a=/[?&]v=([^&]*)/.exec(c)[1];c=d&&0<d.length?c.replace("v\x3d"+a,"v\x3d"+d):c.replace("v\x3d"+a,"");d=window.location.protocol+"//"+window.location.host;return 0<=c.indexOf(d)?c:d+c},getPrimeFacesExtensionsVersion:function(){if(!PrimeFacesExt.VERSION){var a=PrimeFacesExt.getPrimeFacesExtensionsScriptURI(),a=/[?&]v=([^&]*)/.exec(a);PrimeFacesExt.VERSION=a&&0<a.length?a[1]:""}return PrimeFacesExt.VERSION},getPrimeFacesExtensionsResource:function(a){var b=PrimeFacesExt.RESOURCE_LIBRARY;PrimeFacesExt.useUncompressedResources&&↵(b=PrimeFacesExt.RESOURCE_LIBRARY_UNCOMPRESSED);return PrimeFacesExt.getFacesResource(a,b,PrimeFacesExt.getPrimeFacesExtensionsVersion())},getPrimeFacesExtensionsCompressedResource:function(a){return PrimeFacesExt.getFacesResource(a,PrimeFacesExt.RESOURCE_LIBRARY,PrimeFacesExt.getPrimeFacesExtensionsVersion())},isExtensionMapping:function(){if(!PrimeFacesExt.IS_EXTENSION_MAPPING){var a=PrimeFacesExt.getPrimeFacesExtensionsScriptURI();PrimeFacesExt.IS_EXTENSION_MAPPING="."===a.charAt(a.indexOf("primefaces-extensions.js")+↵24)}return PrimeFacesExt.IS_EXTENSION_MAPPING},getResourceUrlExtension:function(){if(!PrimeFacesExt.RESOURCE_URL_EXTENSION){var a=PrimeFacesExt.getPrimeFacesExtensionsScriptURI();PrimeFacesExt.RESOURCE_URL_EXTENSION=/primefaces-extensions.js.([^?]*)/.exec(a)[1]}return PrimeFacesExt.RESOURCE_URL_EXTENSION},useUncompressedResources:function(){if(!PrimeFacesExt.USE_UNCOMPRESSED_RESOURCES){var a=PrimeFacesExt.getPrimeFacesExtensionsScriptURI();PrimeFacesExt.USE_UNCOMPRESSED_RESOURCES=-1!==a.indexOf(PrimeFacesExt.RESOURCE_LIBRARY_UNCOMPRESSED)}return PrimeFacesExt.USE_UNCOMPRESSED_RESOURCES},↵getPrimeFacesExtensionsScriptURI:function(){PrimeFacesExt.SCRIPT_URI||(PrimeFacesExt.SCRIPT_URI=$('script[src*\x3d"/'+PrimeFacesExt.RESOURCE_IDENTIFIER+'/primefaces-extensions.js"]').attr("src"),PrimeFacesExt.SCRIPT_URI||(PrimeFacesExt.SCRIPT_URI=$('script[src*\x3d"'+PrimeFacesExt.RESOURCE_IDENTIFIER+'\x3dprimefaces-extensions.js"]').attr("src")));return PrimeFacesExt.SCRIPT_URI},cw:function(a,b,d,c){PrimeFacesExt.createWidget(a,b,d,c)},createWidget:function(a,b,d,c){PrimeFacesExt.widget[a]?PrimeFacesExt.initWidget(a,↵b,d):(c&&(c=PrimeFacesExt.getPrimeFacesExtensionsResource("/"+a.toLowerCase()+"/"+a.toLowerCase()+".css"),$("head").append(c)),c=PrimeFacesExt.getPrimeFacesExtensionsResource("/"+a.toLowerCase()+"/"+a.toLowerCase()+".js"),PrimeFaces.getScript(c,function(){setTimeout(function(){PrimeFacesExt.initWidget(a,b,d)},100)}))},initWidget:function(a,b,d){PrimeFaces.widgets[b]?PrimeFaces.widgets[b].refresh(d):(PrimeFaces.widgets[b]=new PrimeFacesExt.widget[a](d),PrimeFaces.settings.legacyWidgetNamespace&&(window[b]=↵PrimeFaces.widgets[b]))},configureLocale:function(a,b){if(PrimeFacesExt.locales&&PrimeFacesExt.locales[a]&&b.locale){var d=PrimeFacesExt.locales[a][b.locale];if(d)for(var c in d)d.hasOwnProperty(c)&&(b[c]=d[c])}return b},changeTheme:function(a){$(document).trigger("PrimeFacesExt.themeChanged",a)},RESOURCE_IDENTIFIER:"javax.faces.resource",RESOURCE_LIBRARY:"primefaces-extensions",RESOURCE_LIBRARY_UNCOMPRESSED:"primefaces-extensions-uncompressed",behavior:{},widget:{},locales:{}};↵PrimeFacesExt.locales.TimePicker={};PrimeFacesExt.locales.Timeline={};PrimeFacesExt.behavior.Javascript=function(a,b){var d=null;b&&(d=b.params);return a.execute.call(this,a.source,a.event,d,b)};(function(a){var b=PrimeFaces.changeTheme;PrimeFaces.changeTheme=function(a){b(a);PrimeFacesExt.changeTheme(a)}})(window);↵PrimeFacesExt.widget.Spotlight=PrimeFaces.widget.BaseWidget.extend({init:function(a){this.id=a.id;this.blocked=a.blocked;this.content=$(PrimeFaces.escapeClientId(this.id));PrimeFacesExt.widget.Spotlight.cache=PrimeFacesExt.widget.Spotlight.cache||{};this.getMask=function(){var a=PrimeFacesExt.widget.Spotlight.cache["PrimeFacesExt.widget.Spotlight.MaskAround:"+this.id];a||(a=new PrimeFacesExt.widget.Spotlight.MaskAround(this.id),PrimeFacesExt.widget.Spotlight.cache["PrimeFacesExt.widget.Spotlight.MaskAround:"+↵this.id]=a);return(this.getMask=function(){return a})()};this.block=function(){this.blocked=!0;this.getMask().show();this.enableModality()};this.unblock=function(){this.blocked=!1;this.getMask().hide();this.disableModality()};this.blocked?this.block():this.unblock();this.removeScriptElement(this.id)},enableModality:function(){this.disableModality();this.content.bind("keydown.lightspot",function(a){if(a.keyCode===$.ui.keyCode.TAB){var d=$(":tabbable",this),c=d.filter(":f…fg.behaviors.resize;a&&a.call(this,{params:[{name:this.id+"_width",value:this.newImageWidth},{name:this.id+"_height",value:this.newImageHeight}]})}}});↵PrimeFacesExt.widget.TriStateCheckbox=PrimeFaces.widget.BaseWidget.extend({init:function(a){this._super(a);this.input=$(this.jqId+"_input");this.box=this.jq.find(".ui-chkbox-box");this.icon=this.box.children(".ui-chkbox-icon");this.itemLabel=this.jq.find(".ui-chkbox-label");this.disabled=this.input.is(":disabled");this.fixedMod=function(a,b){return(a%b+b)%b};var b=this;this.disabled||(this.box.mouseover(function(){b.box.addClass("ui-state-hover")}).mouseout(function(){b.box.removeClass("ui-state-hover")}).click(function(a){b.toggle(1);↵a.preventDefault?a.preventDefault():a.returnValue=!1}),this.itemLabel.click(function(){b.toggle(1);event.preventDefault?event.preventDefault():event.returnValue=!1}),this.box.bind("keydown",function(a){switch(a.keyCode){case 38:b.toggle(1);a.preventDefault?a.preventDefault():a.returnValue=!1;break;case 40:b.toggle(-1);a.preventDefault?a.preventDefault():a.returnValue=!1;break;case 39:b.toggle(1);a.preventDefault?a.preventDefault():a.returnValue=!1;break;case 37:b.toggle(-1);a.preventDefault?a.preventDefault():↵a.returnValue=!1;break;case 32:b.toggle(1),a.preventDefault?a.preventDefault():a.returnValue=!1}}),this.cfg.behaviors&&PrimeFaces.attachBehaviors(this.input,this.cfg.behaviors));this.input.data(PrimeFaces.CLIENT_ID_DATA,this.id)},toggle:function(a){if(!this.disabled){var b=parseInt(this.input.val());a=this.fixedMod(b+a,3);this.input.val(a);0==a?this.box.removeClass("ui-state-active"):this.box.addClass("ui-state-active");var d=this.box.data("iconstates");this.icon.removeClass(d[b]).addClass(d[a]);↵b=this.box.data("titlestates");null!=b&&0<b.length&&this.box.attr("title",b[a]);this.input.change()}}});↵PrimeFacesExt.widget.TriStateManyCheckbox=PrimeFaces.widget.BaseWidget.extend({init:function(a){this._super(a);this.outputs=this.jq.find(".ui-chkbox-box:not(.ui-state-disabled)");this.inputs=this.jq.find(":text:not(:disabled)");this.labels=this.jq.find("label:not(.ui-state-disabled)");this.fixedMod=function(a,b){return(a%b+b)%b};var b=this;this.outputs.mouseover(function(){$(this).addClass("ui-state-hover")}).mouseout(function(){$(this).removeClass("ui-state-hover")}).click(function(a){b.toggle($(this),1);↵a.preventDefault?a.preventDefault():a.returnValue=!1});this.labels.click(function(a){var b=$(this);$(PrimeFaces.escapeClientId(b.attr("for"))).parent().next().click();a.preventDefault?a.preventDefault():a.returnValue=!1});this.outputs.bind("keydown",function(a){switch(a.keyCode){case 38:b.toggle($(this),1);a.preventDefault?a.preventDefault():a.returnValue=!1;break;case 40:b.toggle($(this),-1);a.preventDefault?a.preventDefault():a.returnValue=!1;break;case 39:b.toggle($(this),1);a.preventDefault?a.preventDefault():↵a.returnValue=!1;break;case 37:b.toggle($(this),-1);a.preventDefault?a.preventDefault():a.returnValue=!1;break;case 32:b.toggle($(this),1),a.preventDefault?a.preventDefault():a.returnValue=!1}});this.cfg.behaviors&&PrimeFaces.attachBehaviors(this.inputs,this.cfg.behaviors);this.inputs.data(PrimeFaces.CLIENT_ID_DATA,this.id)},toggle:function(a,b){var d=a.prev().find(":input");if(!a.hasClass("ui-state-disabled")){var c=parseInt(d.val()),e=this.fixedMod(c+b,3);d.val(e);0==e?a.removeClass("ui-state-active"):↵a.addClass("ui-state-active");var f=a.data("iconstates");a.children().removeClass(f[c]).addClass(f[e]);c=a.data("titlestates");null!=c&&0<c.length&&a.attr("title",c[e]);d.change()}}});↵PrimeFacesExt.widget.GChart=PrimeFaces.widget.BaseWidget.extend({init:function(a){var b=this;this._super(a);this.chart=a.chart?JSON.parse(a.chart):{data:[],options:{},type:""};this.data=this.chart.data;this.type=this.chart.type;this.height=a.height;this.width=a.width;this.title=a.title;this.options=this.chart.options;this.input=jQuery(this.jqId+"_hidden");google.load("visualization","1.0",{packages:[PrimeFacesExt.widget.GChart.packages[this.type]||"corechart"]});jQuery(document).ready(function(){google.visualization?↵b.draw():google.setOnLoadCallback(function(){b.draw()})})},draw:function(){var a=google.visualization.arrayToDataTable(this.data),b=this;this.options.title=this.title;this.options.width=parseInt(this.width,10);this.options.height=parseInt(this.height,10);this.wrapper=new google.visualization.ChartWrapper({chartType:this.type,dataTable:a,options:this.options,containerId:this.id});this.cfg.behaviors&&this.cfg.behaviors.select&&google.visualization.events.addListener(this.wrapper,"select",function(a){console.log(b.wrapper.getChart().getSelection());↵jQuery(b.jqId+"_hidden").val(JSON.stringify(b.wrapper.getChart().getSelection()));b.cfg.behaviors.select.call(jQuery(b.jqId+"_hidden"))});this.wrapper.draw()}});PrimeFacesExt.widget.GChart.packages={GeoChart:"geochart",OrgChart:"orgchart"};
↵//# sourceMappingURL=https://raw.githubusercontent.com/primefaces-extensions/core/master/src/sourcemap/3.2.0/primefaces-extensions.js.map"

I don't know why the PrimeFaces property is not defined here, because the PrimeFacesExt is correctly defined. Maybe because is inside an iframe, because window.Primefaces variable inside the IFrame, is not defined, but in window.parent.PrimeFaces is correctly defined....

Later I will post more information regarding this issue.

Regards.

[sergi-mm]

I finally managed to solve this issue. I changed a bit the viewer.html file:

<script type="text/javascript">     
        var PrimeFaces = window.parent.PrimeFaces;
        //Adding l10n file
        var l10nNodeUrl = PrimeFaces.getFacesResource('/documentviewer/locale/locales.txt','primefaces-extensions','3.2.0');
        var l10nNode = window.parent.jQuery("<link rel='resource' type='application/l10n' href='" + l10nNodeUrl + "'/>").get(0);
        document.getElementsByTagName('head')[0].appendChild(l10nNode);

        var scriptUrl = PrimeFaces.getFacesResource('documentviewer/app.js','primefaces-extensions','3.2.0');

        var loadPdf = function(data){
            eval(data);
            webViewerLoad();
        };

        window.parent.jQuery(document).ready(function () {
            window.parent.jQuery.ajax({
                url: scriptUrl,
                cache:true,
                success: loadPdf,
                dataType: "script"
            });
        });
    </script>

Here I add a reference in the current window to PrimeFaces object from the parent window, because here it was where the "PrimeFaces is not defined" exceptions appeared.

var PrimeFaces = window.parent.PrimeFaces;

Then I replaced getFacesResource calls using the Primefaces object instead of PrimeFacesExt, and I use the compressed resources instead of the uncompressed (they could not be found on portlet environment). The PrimeFacesExt object seems not working much fine in a portlet environment...

PrimeFaces.getFacesResource('documentviewer/app.js','primefaces-extensions','3.2.0');

I also replaced all these calls in the file app.js in the documentviewer folder.

Could you please merge these fixes to your code in order that everybody could use the component in portlets and also in web applications?

[juangon]

Hi @francesco-strazzullo @tandraschko @sergi-mm. Seems this problem is tightly related to this one: https://code.google.com/p/primefaces/issues/detail?id=7867. I guess this line here:https://github.com/primefaces-extensions/core/blob/master/src/main/resources/META-INF/resources/primefaces-extensions/core/core.js#L37 should be changed so something like:

scriptURI = scriptURI.replace('primefaces-extensions.js', name);

(note that I removed the slash "/").

@sergi-mm please can you check if that fixes the failing resource issue?

[tandraschko]

Seems like a missing TODO from my side :D https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/357 I will fix this but not sure if this fixes your problem.

[tandraschko]

Fixed the resource loading problem. Could you please test it again?

[sergi-mm]

@tandraschko I downloaded the full sourcecode of primefaces-extensions in my workspace witth the changes proposed by @juangon (without my own fixes), and now appears the following error: TypeError: window.parent.PrimeFacesExt is undefined In the file viewer.html on the following line:

var l10nNodeUrl = window.parent.PrimeFacesExt.getFacesResource('/documentviewer/locale/locales.txt','primefaces-extensions-uncompressed','4.0.0-SNAPSHOT');

[sergi-mm]

Sorry, I'm newby in primefaces-extensions development and I think the project is not referening properly in the portlet. It is strange because the resources where imported but the javascript is not initialized....

There is any guide to debug primefaces-extensions?

[ova2]

I wrote a blog post a couple of time ago regarding debugging JavaScript in PF Extensions http://ovaraksin.blogspot.ch/2015/06/create-source-maps-at-project-build.html Debugging Java code is quite normal as you usally debug your Java code.

[tandraschko]

Don't know, sorry. I did another small fix of the resource loading but it works fine in a non-porlet environment. If you can find the reason, we will of course help to fix it but i think noone of us ever used a portlet container.

[juangon]

Hi @sergi-mm, let's we both check that issue you're talking about in portlet environment and then come back with our conclusions here. Please attach a sample portlet in Liferay forums with your latest changes so we can continue the investigation.

[tandraschko]

Similar issue but is likely another problem: https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/343

[juangon]

Same version combination (Primefaces + Primefaces Extensions) that the sample portlet attached by @sergi-mm, but in Sergio's case it doesn't use any dialog.

[sergi-mm]

@tandraschko I compiled and installed the version 4.0.0-SNAPSHOT of PrimeFaces Extensions that you modified today, and now it seems to work properly after a few tests. I will do more test to check it, but I think that with this fix the issue can be closed.

And @juangon, I just uploaded a sample code in Liferay forums using PF 5.2 and PF-Extensions 3.2.0: https://www.liferay.com/es/community/forums/-/message_boards/message/57874658

P.S: I realized that the component only works with beans of scope session and application when retreiving an streamed content, but it does not work with scope view. I don't know if it is a design decision of the component or a bug.

[juangon]

Ok @sergi-mm, thanks for the testing. So seems that your source changes weren't applied or the javascript resources were cached in your browser.

Then the sample portlet isn't needed if you tested that is working properly now.

Thanks @tandraschko for your support! It will be great to use Primefaces Extensions in portlet environments for sure!

[tandraschko]

No problem!

ViewScoped is not supported with the way how PrimeFaces/Extensions streams a StreamedContent. But you can google about it, it's the same with e.g. p:graphicImage.

[sergi-mm]

After more testing, documentViewer works fine. Thank you @tandraschko and @juangon for your support!

[juangon]

Glad it works now ;). Please report any issues you have with Primefaces extensions in Liferay forums as we didn't test that integration much.