-1

I'm trying to use PrimeFaces extensions' (3.2) layout. But it's throwing me the following error: enter image description here

My code looks like this:

<ui:composition xmlns:pe="http://primefaces.org/ui/extensions">

<h:form>  
    <pe:layout resizerTip="Resize Me" togglerTipClosed="Open Me" togglerTipOpen="Close Me">  
        <pe:layoutPane position="north" size="80" closable="false">  
            North  
        </pe:layoutPane>  
        <pe:layoutPane position="center">  
            <pe:layoutPane position="north" size="50%">  
                <f:facet name="header">  
                    <h:outputText value="Center-North"/>  
                </f:facet>  
            </pe:layoutPane>  
            <pe:layoutPane position="center" minHeight="60">  
                <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%">  
                West-North  
            </pe:layoutPane>  
            <pe:layoutPane position="center" minHeight="60">  
                West-Center  
            </pe:layoutPane>  
            <pe:layoutPane position="south" size="33%" initClosed="true">  
                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>  

In the code, I state a layoutPane with center position, yet it's throwing me the error.

Additional information: I'm using,

  • PrimeFaces 4.0
  • PrimeFaces Extensions 3.2.0
  • Mojarra 2.2.7
  • JDK 7

EDIT: I've found out that the problem is because It's being inserted through a <ui:insert> from a template page. That template page is constructed by <table> and removing the <table>'s it works, but I do need the tables because that's from my main template. Is there a way to work around that, or update the table for a compatible component?

Yayotrón
  • 1,759
  • 16
  • 27
  • Search stackoverflow for a duplicate. It does exist – Kukeltje Jun 16 '15 at 15:55
  • Cannot mark it as a duplicate: http://stackoverflow.com/questions/23586165/ui-layout-initialization-error-the-center-pane-element-does-not-exist/ – Kukeltje Jun 16 '15 at 17:12
  • I already checked that question, and tried your solution. First that is a primefaces layout, and I'm using primefaces extension layout. Then I deleted everything inside the center panel and there's just text missing and its still showing the error. – Yayotrón Jun 16 '15 at 18:08
  • And I also think the combination of PF and PFE you use is **not** supported. Can you just try (try) with a newer PF release (or older PFE) – Kukeltje Jun 16 '15 at 20:53
  • After a while, I just updated PF and PFE to their last version and its still not working. I'll update the question with new information. – Yayotrón Jun 18 '15 at 15:43

1 Answers1

2

The issue is the layout is trying to use the full page for the layout with the body tag being the parent element and because there is other html it is unable to find the center panel. if you add fullpage="false to your layout tag so it would look something like below. the generated layout will create a div within the table to use as the outer layout container instead of the body tag.

<pe:layout resizerTip="Resize Me" togglerTipClosed="Open Me" togglerTipOpen="Close Me" fullpage="false" style="100%;">

Note. You will probably need to additionally add style="100%" because when the following code was used to do an include and added fullpage="false" There was an additional Initialization error of the layout panes having no height... and thus being invisible.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html style="height:100%;" xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"  xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">
<f:view locale="en">
<h:head>
    <h:outputScript library="javax.faces" name="jsf.js" />
</h:head>
<h:body style="height:100%;">
    <table style="height:100%; width:100%;">
        <tr>
            <th>Layout</th>
        </tr>
        <tr>
            <td style="height:100%;"><ui:include src="PELayoutInclude.xhtml" /></td>
        </tr>
    </table>
</h:body>
</f:view>
</html>
cboender
  • 21
  • 4