topic Re: AlfDocumentPreview / PdfJs Problem in Alfresco Archive

AlfDocumentPreview / PdfJs Problem

christianjanker — Sat, 06 Dec 2014 12:56:07 GMT

Hi guys,I have tried to build a sample from Dave's blogpost (http://blogs.alfresco.com/wp/developer/2014/11/20/aikau-using-the-alfdocumentpreview/)Just wanted to create a preview-dialog on a pdf-file, which should open when a button is clicked.The AlfrescoDocumentPreview.js requires the "alfresco/pr

Re: AlfDocumentPreview / PdfJs Problem

ddraper — Mon, 08 Dec 2014 14:14:47 GMT

Hi Christian… quick question - are you doing this within the Share application? E.g. as an extension to Share? The reason I ask is that we're currently doing some rather "interesting" prototype manipulate to get the PDFjs previewer working in Aikau which currently relies on it running within the context of the Share application. We're going to breaking this dependency in the future.

A bit more information on the context in which you're using this code would be useful to help debug the problem.

Thanks,
Dave

Re: AlfDocumentPreview / PdfJs Problem

christianjanker — Tue, 09 Dec 2014 08:32:00 GMT

Thx for answering dave!

Omg, I've just narrowed my examle to post it here and now it's working like a charm.

In first place I've tried to extend the Inbox example from Paolo Predonzani with a Preview-Dialog (https://github.com/softwareloop/alfresco-inboxes). I will try to track down the error and post it here.

Even though this code example of a Preview-Diaolog is working:


model.jsonModel = {
  services: ["alfresco/services/ContentService",
            "alfresco/services/DocumentService",
            "alfresco/dialogs/AlfDialogService"],
  widgets: [
    {
      name: "softwareloop/preview/Preview"
    }
  ]
};
‍‍‍‍‍‍‍‍‍‍‍‍


define([
    'dijit/_TemplatedMixin',
    'dijit/_WidgetBase',
    'dojo/_base/declare',
    'dojo/text!./templates/Preview.html',
    "dojo/date/locale",
    "alfresco/core/Core",
    "dojo/_base/lang",
    "dojo/window"
], function (TemplatedMixin, WidgetBase, declare, template, locale, Core, lang, win ) {
    return declare([WidgetBase, TemplatedMixin, Core], {
        templateString: template,


        payload: null,
        buildRendering: function () {
        
            this.inherited(arguments);
        },

        previewAction: function () {
           
           console.log("Within Preview try");
           
           var vs = win.getBox();
           
           var nodeRef = "workspace://SpacesStore/" + "1a0b110f-1e09-4ca2-b367-fe25e4964a4e";
           
           this.payload = {
                    contentWidth: (vs.w*0.7) + "px",
                    contentHeight: (vs.h-64) + "px",
                    handleOverflow: false,
                    dialogTitle: "PreviewTitle",
                    additionalCssClasses: "no-padding",
                    widgetsContent: [
                       {
                          name: "alfresco/documentlibrary/AlfDocument",
                          nodeRef: nodeRef,
                          config: {
                             widgets: [
                                {
                                   name: "alfresco/preview/AlfDocumentPreview"
                                }
                             ]
                          }
                       }
                    ],
                    widgetsButtons: [
                       {
                          name: "alfresco/buttons/AlfButton",
                          config: {
                             label: "close",
                             publishTopic: "NO_OP"
                          }
                       }
                    ],
                    publishOnShow: [
                       {
                          publishTopic: "ALF_RETRIEVE_SINGLE_DOCUMENT_REQUEST",
                          publishPayload: {
                             nodeRef: nodeRef
                          }
                       }
                    ]
           };
           
           this.alfPublish("ALF_CREATE_DIALOG_REQUEST", this.payload);
           
        }
        
    });
});

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍


<div class="inboxes-item">
     <button class="inboxes-item-button" data-dojo-attach-event="click:previewAction">Preview</button>
</div>
‍‍‍‍‍

Re: AlfDocumentPreview / PdfJs Problem

christianjanker — Tue, 09 Dec 2014 12:01:00 GMT

Now i was able to reconstruct the error.

I added a Container-Dojo, which dynamically "requires" the Preview Widget.

Container.js


define([
    'dijit/_TemplatedMixin',
    'dijit/_WidgetBase',
    'dojo/_base/declare',
    'dojo/text!./templates/Container.html',
    "dojo/date/locale",
    "alfresco/core/Core",
    "dojo/_base/lang",
    "dojo/window"
], function (TemplatedMixin, WidgetBase, declare, template, locale, Core, lang, win ) {
    return declare([WidgetBase, TemplatedMixin, Core], {
        templateString: template,


        payload: null,
        buildRendering: function () {
            this.inherited(arguments);
        },

        postCreate: function () {
            var containerNode = this.containerNode;
            containerNode.innerHTML = "…";
            
            require(["softwareloop/preview/Preview"], lang.hitch(this, function (Preview) {
               var previewItem = new Preview();
               
               previewItem.placeAt(containerNode).startup();
            }));
        }
        
    });
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Preview:


define([
    'dijit/_TemplatedMixin',
    'dijit/_WidgetBase',
    'dojo/_base/declare',
    'dojo/text!./templates/Preview.html',
    "dojo/date/locale",
    "alfresco/core/Core",
    "dojo/_base/lang",
    "dojo/window"
], function (TemplatedMixin, WidgetBase, declare, template, locale, Core, lang, win ) {
    return declare([WidgetBase, TemplatedMixin, Core], {
        templateString: template,


        payload: null,
        buildRendering: function () {
        
            this.inherited(arguments);
        },

        previewAction: function () {
           
           console.log("Within Preview try");
           
           var vs = win.getBox();
           
           var nodeRef = "workspace://SpacesStore/" + "1a0b110f-1e09-4ca2-b367-fe25e4964a4e";
           
           this.payload = {
                    contentWidth: (vs.w*0.7) + "px",
                    contentHeight: (vs.h-64) + "px",
                    handleOverflow: false,
                    dialogTitle: "PreviewTitle",
                    additionalCssClasses: "no-padding",
                    widgetsContent: [
                       {
                          name: "alfresco/documentlibrary/AlfDocument",
                          nodeRef: nodeRef,
                          config: {
                             widgets: [
                                {
                                   name: "alfresco/preview/AlfDocumentPreview"
                                }
                             ]
                          }
                       }
                    ],
                    widgetsButtons: [
                       {
                          name: "alfresco/buttons/AlfButton",
                          config: {
                             label: "close",
                             publishTopic: "NO_OP"
                          }
                       }
                    ],
                    publishOnShow: [
                       {
                          publishTopic: "ALF_RETRIEVE_SINGLE_DOCUMENT_REQUEST",
                          publishPayload: {
                             nodeRef: nodeRef
                          }
                       }
                    ]
           };
           
           this.alfPublish("ALF_CREATE_DIALOG_REQUEST", this.payload);
           
        }
        
    });
});

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

preview.get.js


model.jsonModel = {
  services: ["alfresco/services/ContentService",
            "alfresco/services/DocumentService",
            "alfresco/dialogs/AlfDialogService"],
  widgets: [
    {
      name: "softwareloop/preview/Container"
    }
  ]
};
‍‍‍‍‍‍‍‍‍‍‍‍

Container.html


<div class="inboxes-results" data-dojo-attach-point="containerNode">
</div>
‍‍‍‍

Preview.html


<div class="inboxes-item">
     <button class="inboxes-item-button" data-dojo-attach-event="click:previewAction">Preview</button>
</div>
‍‍‍‍‍

Any ideas on that? It seems the dynamic require within the postConstruct of the Container-Dojo mess up everything….

Re: AlfDocumentPreview / PdfJs Problem

christianjanker — Tue, 09 Dec 2014 15:29:30 GMT

Moving the dynamic require into the define of the Container.js solved my problem.


define([
    'dijit/_TemplatedMixin',
    'dijit/_WidgetBase',
    'dojo/_base/declare',
    'dojo/text!./templates/Container.html',
    "dojo/date/locale",
    "alfresco/core/Core",
    "dojo/_base/lang",
    "dojo/window",
    "softwareloop/preview/Preview"
], function (TemplatedMixin, WidgetBase, declare, template, locale, Core, lang, win, Preview ) {
    return declare([WidgetBase, TemplatedMixin, Core], {
        templateString: template,


        payload: null,
        buildRendering: function () {
            this.inherited(arguments);
        },

        postCreate: function () {
            var containerNode = this.containerNode;
            containerNode.innerHTML = "…";
            
               var previewItem = new Preview();
               
               previewItem.placeAt(containerNode).startup();
        }
        
    });
});

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Can someone explain me that?
Seems to be an AMD-Loader issue that i don't really understand
Thx in advance