pe:layout (strange) issue

Community Driven Extensions Project
Post Reply
herbu
Posts: 24
Joined: 09 Oct 2013, 19:13

18 Oct 2018, 15:28

Hi,

due to the fact that layout it going to disappear from primefaces I have tried to check the PE option but found a "strange" behavior that I am trying to solve for the last couple of days with no success. Namely, when the layout is refreshed I am able to LITERALLY SEE how the panes' sizes/position are calculating and "jumping" all over the page (especially when the panes contains some heavy stuff inside - than this jumping may take 3-5 secs). Of course in the showcase everything is ok (details below)

The page:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions">

    <pe:head title="PrimeFaces Extensions - ShowCase">
        <f:facet name="first">
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <meta http-equiv="pragma" content="no-cache"/>
            <meta http-equiv="cache-control" content="no-cache"/>
            <meta http-equiv="expires" content="0"/>
        </f:facet>
    </pe:head>

<body >


<h:form id="form">
    <pe:layout fullPage="true" >
        
        <pe:layoutPane position="north" size="80" closable="false" >
        </pe:layoutPane>
        <pe:layoutPane position="center">
            <pe:layoutPane position="north" size="50%" resizerTip="Resize North" togglerTipClosed="Close North" togglerTipOpen="Open North" sliderTip="Slide North">
                <f:facet name="header">
                    <h:outputText value="Center-North"/>
                </f:facet>
            </pe:layoutPane>
            <pe:layoutPane position="center" minHeight="60" resizerTip="Resize North" togglerTipClosed="Close North" togglerTipOpen="Open North" sliderTip="Slide North">
                <f:facet name="header">
                    <h:outputText value="Center-Center"/>
                </f:facet>
            </pe:layoutPane>
        </pe:layoutPane>
        <pe:layoutPane position="west" size="200">
            <pe:layoutPane position="north" size="33%" resizerTip="Resize West" togglerTipClosed="Close West" togglerTipOpen="Open West" sliderTip="Slide West">
                West-North
            </pe:layoutPane>
            <pe:layoutPane position="center" minHeight="60" resizerTip="Resize West" togglerTipClosed="Close West" togglerTipOpen="Open West" sliderTip="Slide West">
                West-Center
            </pe:layoutPane>
            <pe:layoutPane position="south" size="33%" initClosed="true" resizerTip="Resize West" togglerTipClosed="Close West" togglerTipOpen="Open West" sliderTip="Slide West">
                West-South
            </pe:layoutPane>
        </pe:layoutPane>
        <pe:layoutPane position="east" size="200" resizeWhileDragging="true">
            East
        </pe:layoutPane>
        <pe:layoutPane position="south" size="80">
            South
        </pe:layoutPane>
    </pe:layout>
</h:form>

</body>

</html>
Now, my page source:

Code: Select all


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2"><link type="text/css" rel="stylesheet" href="/asr/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" /><link type="text/css" rel="stylesheet" href="/asr/javax.faces.resource/layout/layout.css.xhtml?ln=primefaces-extensions&amp;v=6.2.9" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta http-equiv="pragma" content="no-cache" />
            <meta http-equiv="cache-control" content="no-cache" />
            <meta http-equiv="expires" content="0" /></head>

<body>
<form id="form" name="form" method="post" action="/asr/login.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="form" value="form" />
<div id="form:j_idt5" class="ui-layout-north ui-widget-content ui-corner-all pe-layout-pane-content" data-combinedposition="north"></div><div id="form:j_idt6" class="ui-layout-center ui-corner-all pe-layout-pane-withsubpanes" data-combinedposition="center"><div id="form:j_idt7" class="ui-layout-north ui-widget-content ui-corner-all" data-combinedposition="center_north"><div class="ui-widget-header ui-corner-top pe-layout-pane-header">Center-North</div><div class="ui-layout-content pe-layout-pane-content" style="border:none"></div></div><div id="form:j_idt9" class="ui-layout-center ui-widget-content ui-corner-all" data-combinedposition="center_center"><div class="ui-widget-header ui-corner-top pe-layout-pane-header">Center-Center</div><div class="ui-layout-content pe-layout-pane-content" style="border:none"></div></div></div><div id="form:j_idt11" class="ui-layout-west ui-corner-all pe-layout-pane-withsubpanes" data-combinedposition="west"><div id="form:j_idt12" class="ui-layout-north ui-widget-content ui-corner-all pe-layout-pane-content" data-combinedposition="west_north">
                West-North
            </div><div id="form:j_idt14" class="ui-layout-center ui-widget-content ui-corner-all pe-layout-pane-content" data-combinedposition="west_center">
                West-Center
            </div><div id="form:j_idt16" class="ui-layout-south ui-widget-content ui-corner-all pe-layout-pane-content" data-combinedposition="west_south">
                West-South
            </div></div><div id="form:j_idt18" class="ui-layout-east ui-widget-content ui-corner-all pe-layout-pane-content" data-combinedposition="east">
            East
        </div><div id="form:j_idt20" class="ui-layout-south ui-widget-content ui-corner-all pe-layout-pane-content" data-combinedposition="south">
            South
        </div><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="-3976525847373284923:5888258982713293879" autocomplete="off" />
</form>

<script type="text/javascript" src="/asr/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=6.2">
</script>

<script type="text/javascript" src="/asr/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=6.2"></script>
<script type="text/javascript" src="/asr/javax.faces.resource/core.js.xhtml?ln=primefaces&amp;v=6.2"></script>
<script type="text/javascript" src="/asr/javax.faces.resource/primefaces-extensions.js.xhtml?ln=primefaces-extensions&amp;v=6.2.9"></script>
<script type="text/javascript" src="/asr/javax.faces.resource/layout/layout.js.xhtml?ln=primefaces-extensions&amp;v=6.2.9"></script>

<script type="text/javascript">var pf=window.PrimeFaces;if(pf){pf.settings.locale='pl_PL';};
pf.cw("ExtLayout","widget_form_j_idt4",{id:"form:j_idt4",clientState:false,full:true,serverState:false,options:{"defaults":{"tips":{}},"north":{"spacing_closed":6,"size":"80","closable":false,"spacing_open":6,"tips":{}},"south":{"spacing_closed":6,"size":"80","spacing_open":6,"tips":{}},"west":{"spacing_closed":6,"size":"200","spacing_open":6,"tips":{},"children":{"north":{"spacing_closed":6,"size":"33%","spacing_open":6,"tips":{"Slide":"Slide West","Resize":"Resize West","Close":"Close West","Open":"Open West"}},"south":{"spacing_closed":6,"size":"33%","spacing_open":6,"initClosed":true,"tips":{"Slide":"Slide West","Resize":"Resize West","Close":"Close West","Open":"Open West"}},"center":{"minHeight":"60","spacing_closed":6,"spacing_open":6,"tips":{"Slide":"Slide West","Resize":"Resize West","Close":"Close West","Open":"Open West"}}}},"east":{"spacing_closed":6,"size":"200","spacing_open":6,"resizeWhileDragging":true,"tips":{}},"center":{"spacing_closed":6,"spacing_open":6,"tips":{},"children":{"north":{"spacing_closed":6,"size":"50%","spacing_open":6,"tips":{"Slide":"Slide North","Resize":"Resize North","Close":"Close North","Open":"Open North"}},"center":{"minHeight":"60","spacing_closed":6,"spacing_open":6,"tips":{"Slide":"Slide North","Resize":"Resize North","Close":"Close North","Open":"Open North"}}}}}});
</script></body>

</html>
Now when I compare my page source with the PE showcase what looks different is:

Code: Select all

<script type="text/javascript" src="/asr/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces&amp;v=6.2"></script>
<script type="text/javascript" src="/asr/javax.faces.resource/jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=6.2"></script>
<script type="text/javascript" src="/asr/javax.faces.resource/core.js.xhtml?ln=primefaces&amp;v=6.2"></script>
<script type="text/javascript" src="/asr/javax.faces.resource/primefaces-extensions.js.xhtml?ln=primefaces-extensions&amp;v=6.2.9"></script>
<script type="text/javascript" src="/asr/javax.faces.resource/layout/layout.js.xhtml?ln=primefaces-extensions&amp;v=6.2.9"></script>

And finally when I debug in chrome and compare with the PE showcase (preview frame) one can see that "pane jumping" (marked with red - on mine there is a phase when the layout is OK - then the form is changed again to some basics - and finally comes back to the desired original shape. In PE showcase form is not changed from the beginning):

Image


Do you have any idea where/what/etc ? Getting desperate .....
Tricks like "primefaces.MOVE_SCRIPTS_TO_BOTTOM" didn't help ...


Regards,
herbu

Checked with primefaces 6.0 ,6.2 and PE 6.2.8 and 6.2.9

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

18 Oct 2018, 15:39

So if you look in the showcase code here is what I do...

CSS

Code: Select all

html {
    overflow: auto !important;
    visibility: hidden;
}
JavaScript:

Code: Select all

var Showcase = (function() {
   return {
      /**
       * https://stackoverflow.com/questions/9550760/hide-page-until-everything-is-loaded-advanced/9551066
       */
      displayPage : function() {
         $(document).ready(function() {
         
            // show the HTML pane after everything has been adjusted
            // https://stackoverflow.com/questions/9550760/hide-page-until-everything-is-loaded-advanced/9551066
            document.getElementsByTagName("html")[0].style.visibility = "visible";
         });
      },
XHTML: The in my main layout.xhtml I call this JS on page load.

Code: Select all

<h:outputScript id="displayPage" target="body">
            Showcase.displayPage();
</h:outputScript>
Based on this stack overflow post: https://stackoverflow.com/questions/955 ... ed/9551066
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

herbu
Posts: 24
Joined: 09 Oct 2013, 19:13

18 Oct 2018, 16:41

Hi Melloware,

is this a workaround or the desired solution? (primefaces layout does not require additional "magic" - maybe I just do sth wrong?!)

Regards,
herbu

PS
if that is the part of PE layout solution - maybe should be mentioned somewhere ... like docs/showcase

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

18 Oct 2018, 18:31

I think it has to do with how both components are built. They use the same underlying Jquery plugin but the way the layout works is completely different.

I would say my solution above is a workaround.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests