primefaces pagelayout not working

Question

<html 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"
      xmlns:p="http://primefaces.org/ui" >

     <p:layout fullPage="true">
       <p:layoutUnit position="north" size="50">
          <h:outputText value="Top content." />
       </p:layoutUnit>
       <p:layoutUnit position="south" size="100">
         <h:outputText value="Bottom content." />
       </p:layoutUnit>
       <p:layoutUnit position="west" size="300">
         <h:outputText value="Left content" />
       </p:layoutUnit>
       <p:layoutUnit position="east" size="200">
         <h:outputText value="Right Content" />
       </p:layoutUnit>
       <p:layoutUnit position="center">
         <h:outputText value="Center Content" />
       </p:layoutUnit>
     </p:layout>
 </html>

The objective of the above code is to create a web page with 5 layouts as west, east, north, south, center using primefaces 5.0. I got only the outputtext one below the another not the panel units. I'm using ecplise, javaee iee luna, primefaces 5.0.jar, other primefaces components like textbox are working fine.

wittakarn wittakarn · Accepted Answer · 2014-10-17T13:52:21

You must use JSF Standard tags(h:head, h:body), which I give an example below.

<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<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">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="Content-Type" 
                  content="text/html; charset=UTF-8" />
            <meta name="viewport" 
                  content="user-scalable=no, 
                  width=device-width, 
                  initial-scale=1.0, 
                  maximum-scale=1.0"/>
        </f:facet>

        <title>layout</title>
    </h:head>

    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="north" size="50">
                <h:outputText value="Top content." />
            </p:layoutUnit>
            <p:layoutUnit position="south" size="100">
                <h:outputText value="Bottom content." />
            </p:layoutUnit>
            <p:layoutUnit position="west" size="300">
                <h:outputText value="Left content" />
            </p:layoutUnit>
            <p:layoutUnit position="east" size="200">
                <h:outputText value="Right Content" />
            </p:layoutUnit>
            <p:layoutUnit position="center">
                <h:outputText value="Center Content" />
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

primefaces pagelayout not working

1 Answers