MasterDetailLevel onshow

[dobe]

Hi,

I'm using a MasterDeatailLevel where in the first level users upload a profile picture, then when the picture is uploaded, we detect the face and compute the bounding box. Now in the second MasterDetailLevel, we use a pe:imageSelectArea so that users can crop the picture as they wish. The crop area should be initialised before the user clicks in the image. The code we have so far: Please note the <!-- comments -->

Code: Select all

<pe:masterDetailLevel level="1">
    <p:panel header="#{firstTabPanelHeader}">
       <h:form id="uploadForm" enctype="multipart/form-data">
             <p:fileUpload
                   ....
                   <! -- Line below does not execute or too early?? -->
                   oncomplete="PF('ias').setSelection(#{imagecropperbb.iasStr});PF('ias').update();"/>
        </h:form>
    </p:panel>
</pe:masterDetailLevel>

<pe:masterDetailLevel level="2">
     <p:graphicImage value="#{sessionManager.tmpStreamedContent}" id="imgToCrop"
                  height="#{imagecropperbb.newHeight}" width="#{imagecropperbb.newWidth}"
                  cache="false"/>
     <!-- Click button below initialises the crop area -->                   
     <p:commandButton type="button" onclick="PF('ias').setSelection(#{imagecropperbb.iasStr});PF('ias').update();"/>

      <pe:imageAreaSelect for="imgToCrop" handles="true"
             imageHeight="#{imagecropperbb.orgHeight}" imageWidth="#{imagecropperbb.orgWidth}"
             aspectRatio="#{asRat}" widgetVar="ias" show="true" >
             <p:ajax event="selectEnd" listener="#{imagecropperbb.selectEndListener}"/>
      </pe:imageAreaSelect>
</pe:masterDetailLevel>

So basically, I think the the oncomplete of the fileUpload is called too early, because when the code is executed on a button click when the imageSelectArea is already renders, it works as expected. How can I make that code (PF('ias').setSelection(#{imagecropperbb.iasStr});PF('ias').update();) run at the correct time? Is there something like an onshow for pe:masterDetailLevel or pe:imageSelectArea? Thanks!

[dobe]

I added this to the second masterDetailLevel now after the pe:selectImageArea:

Code: Select all

<h:outputScript>
  setTimeout(function()
      {
        PF('ias').setSelection(#{imagecropperbb.iasStr});
        PF('ias').update();;
      }
     , 1000);
</h:outputScript>

So when that loads, it waits for a second (probably a shorter time would also work) and then runs the setSeletion() stuff.

It seems to work, but if anyone could come up with a cleaner solution, please post it.

[Oleg]

Why do you need setTimeout? Simple place this JS code within the second MasterDetail level AFTER pe:imageAreaSelect

Code: Select all

<script type="text/javascript">
    $(document).ready(function () {
        var iasWidget = PF('ias');
        iasWidget .setSelection(#{imagecropperbb.iasStr});
        iasWidget .update();
    });
</script>

When the second level gets updated, the script block will be executed.

[dobe]

Why do you need setTimeout?

That was kinda my question, but it doesn't work without. I tried it with smaller values than 1000ms though and it works, but without any setTimeout, it simply doesn't work, don't know why..

[andoherrera]

Does this minimal setTimeout influences the performance?

[dobe]

No noticeably, when I put it to values higher than 250, then maybe you can see the face picture for a split second without the imageSelectArea, but then it immediately jumps into place. I tried it with a value of 100 and it worked and the delay is not noticeable (at least by me). I left it at 250 though, because I wasn't sure if it will work on slow computers too with such a short delay. Does that make sense? Could that value depend on how fast the computer is? I have no idea i which order the javascript is executed, things being added to the DOM and the latency between.