Wrong Prime Faces layout with RichFaces

Kuba P. · 09 Jan 2010, 22:43

Hi,

At the beginning I want to congratulate great set of JSF components.

I need to use Prime Faces layout with RichFaces (JSF 1.2) but on the page only WEST and CENTER panels are rendered:

This is my xhtml page code:

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:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:p="http://primefaces.prime.com.tr/ui">
<head>
	<p:resources />
</head>
<body>
<f:view>
	<h:form id="mainForm">

		<p:layout fullPage="true">

			<p:layoutUnit position="top" height="50">
				<h:outputText value="Application name"
					style="font-weight:bold; font-size:16px;" />
			</p:layoutUnit>

			<p:layoutUnit position="bottom" height="50">
				<h:outputText value="Compamy name" />
			</p:layoutUnit>


			<p:layoutUnit position="west" size="250">
				<rich:panel style="height:100%">
					<f:facet name="header">
						<h:outputText value="Right panel" />
					</f:facet>
				</rich:panel>
			</p:layoutUnit>

			<p:layoutUnit position="center">
				<rich:panel style="height:100%">
					<f:facet name="header">
						<h:outputText value="Center panel" />
					</f:facet>
				</rich:panel>
			</p:layoutUnit>

			<p:layoutUnit position="left" width="200">
				<rich:panel style="height:100%">
					<f:facet name="header">
						<h:outputText value="Left panel" />
					</f:facet>
				</rich:panel>
			</p:layoutUnit>

		</p:layout>

	</h:form>
</f:view>
</body>
</html>

My libraries:

Code: Select all

common-annotations.jar
commons-beanutils.jar
commons-collections.jar
 commons-digester.jar
commons-logging.jar
jsf-api-1.2_09.jar
jsf-facelets-1.1.14.jar
jsf-impl-1.2_09.jar
jsf-tlds.jar
jstl-1.2.jar
jstl.jar
primefaces-1.0.0.RC.jar
richfaces-api-3.2.2.SR1.jar
richfaces-impl-3.2.2.SR1.jar
 richfaces-ui-3.2.2.SR1.jar
 standard.jar

Interested, that I can see all required content in page source in Firebug:

Code: Select all

<form id="mainForm" name="mainForm" method="post" action="/SplitterDemo/demo2.jsf;jsessionid=360BEA8D030C219EC66344F3F232783F" enctype="application/x-www-form-urlencoded">
19<input type="hidden" name="mainForm" value="mainForm" />
20<script type="text/javascript">jQuery(document).ready(function() {
21mainForm_j_id4_widget = new PrimeFaces.widget.Layout('body', {top: {paneSelector:'#mainForm\\:j_id5'},bottom: {paneSelector:'#mainForm\\:j_id7'},west: {paneSelector:'#mainForm\\:j_id9',size:250},center: {paneSelector:'#mainForm\\:j_id12'},left: {paneSelector:'#mainForm\\:j_id15'}});});
22</script><div id="mainForm:j_id5"><span style="font-weight:bold; font-size:16px;">Application name</span></div><div id="mainForm:j_id7">Compamy name</div><div id="mainForm:j_id9"><div class="dr-pnl rich-panel " id="mainForm:j_id10" style="height:100%"><div class="dr-pnl-h rich-panel-header " id="mainForm:j_id10_header">Right panel</div><div class="dr-pnl-b rich-panel-body " id="mainForm:j_id10_body"></div></div></div><div id="mainForm:j_id12"><div class="dr-pnl rich-panel " id="mainForm:j_id13" style="height:100%"><div class="dr-pnl-h rich-panel-header " id="mainForm:j_id13_header">Center panel</div><div class="dr-pnl-b rich-panel-body " id="mainForm:j_id13_body"></div></div></div><div id="mainForm:j_id15"><div class="dr-pnl rich-panel " id="mainForm:j_id16" style="height:100%"><div class="dr-pnl-h rich-panel-header " id="mainForm:j_id16_header">Left panel</div><div class="dr-pnl-b rich-panel-body " id="mainForm:j_id16_body"></div></div></div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id1" />
23</form>

Thanks for help
Kuba

Kuba P. · 10 Jan 2010, 00:47

Hi,

I solved this issue. In Reference Guide Build 30.11.2009 on the page 166 is:

Code: Select all

<p:layout fullPage="true">
<p:layoutUnit position="top" header="TOP" height="50">
<h:outputText value="Top content." />
</p:layoutUnit>
<p:layoutUnit position="bottom" header="BOTTOM" height="100">
<h:outputText value="Bottom content." />
</p:layoutUnit>
<p:layoutUnit position="left" header="LEFT" width="300">
<h:outputText value="Left content" />
</p:layoutUnit>
<p:layoutUnit position="right" header="RIGHT" width="200">
<h:outputText value="Right Content" />
</p:layoutUnit>
<p:layoutUnit position="center" header="CENTER">
<h:outputText value="Center Content" />
</p:layoutUnit>
</p:layout>

Should be:

Code: Select all

<p:layout fullPage="true">
<p:layoutUnit position="north" header="TOP" height="50">
<h:outputText value="Top content." />
</p:layoutUnit>
<p:layoutUnit position="south" header="BOTTOM" height="100">
<h:outputText value="Bottom content." />
</p:layoutUnit>
<p:layoutUnit position="west" header="LEFT" width="300">
<h:outputText value="Left content" />
</p:layoutUnit>
<p:layoutUnit position="east" header="RIGHT" width="200">
<h:outputText value="Right Content" />
</p:layoutUnit>
<p:layoutUnit position="center" header="CENTER">
<h:outputText value="Center Content" />
</p:layoutUnit>
</p:layout>

Anyway problem is solved
Kuba

11 Jan 2010, 12:51

We will fix the error in user's guide, thanks for sharing this.

Wrong Prime Faces layout with RichFaces

Who is online