MasterDetailLevel onshow

Community Driven Extensions Project
Post Reply
dobe
Posts: 41
Joined: 29 Jul 2012, 16:15

14 Jun 2014, 14:59

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!
PrimeFaces 5.0, PrimeFacesExtensions 2.0.0, Mojarra 2.2.6, WildFly 8.1, Atmosphere 2.1.6

dobe
Posts: 41
Joined: 29 Jul 2012, 16:15

14 Jun 2014, 17:46

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.
PrimeFaces 5.0, PrimeFacesExtensions 2.0.0, Mojarra 2.2.6, WildFly 8.1, Atmosphere 2.1.6

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

18 Jun 2014, 10:48

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.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

dobe
Posts: 41
Joined: 29 Jul 2012, 16:15

06 Jul 2014, 17:45

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..
PrimeFaces 5.0, PrimeFacesExtensions 2.0.0, Mojarra 2.2.6, WildFly 8.1, Atmosphere 2.1.6

andoherrera
Posts: 1
Joined: 08 Jul 2014, 12:30

08 Jul 2014, 12:42

Does this minimal setTimeout influences the performance?
contact php software development company in case you need to develop a project

dobe
Posts: 41
Joined: 29 Jul 2012, 16:15

11 Jul 2014, 18:31

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.
PrimeFaces 5.0, PrimeFacesExtensions 2.0.0, Mojarra 2.2.6, WildFly 8.1, Atmosphere 2.1.6

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests