Using:
IE 8 & FF 3.6
JSF 2.0 mojarra
Tomcat 6.0.26
Problem:
It doesn't display anything at all. The screen is completely blank. There ins't any JS erros or anything in the tomcat logs.
<html xmlns ="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
</h:head>
<h:body>
<p:layout fullpage="true">
<p:layoutUnit position="north">
north
</p:layoutUnit>
<p:layoutUnit position="west">
west
</p:layoutUnit>
<p:layoutUnit position="center">
center
</p:layoutUnit>
</p:layout>
</h:body>
</html>
p:layout not displaying anything at all
Ok. I just realized the position names are different. I copied the example from the component showcase and the page shows, but it doesn't have any of the styling the showcase does. Shouldn't it have the styling in the layout like the showcase? (Missing boarders)
(FF3.6 only shows the text no boarders and it isn't positioned at all.)
(FF3.6 only shows the text no boarders and it isn't positioned at all.)
JSF 2.3.0-FCS Mojarra
Prime faces 3.0.M4
Tomcat 7.0.20
IE 8
Prime faces 3.0.M4
Tomcat 7.0.20
IE 8
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Layout is rewritten from scratch and being tested at the moment.
Basic: http://www.primefaces.org:8080/prime-sh ... utFull.jsf
Complex: http://www.primefaces.org:8080/prime-sh ... omplex.jsf
Right now, you manually need to add yui-skin-sam to your body element, we're working on to make it implicity.
Full working code: http://code.google.com/p/primefaces/sou ... Full.xhtml
Hope this helps.
Basic: http://www.primefaces.org:8080/prime-sh ... utFull.jsf
Complex: http://www.primefaces.org:8080/prime-sh ... omplex.jsf
Right now, you manually need to add yui-skin-sam to your body element, we're working on to make it implicity.
Code: Select all
<h:body class="yui-skin-sam">
Hope this helps.
Hi, at first thanx for all the nice components! We're playing around with it for a while as we like to use it for some customer projects in our company.
unfortunatly we had the same problems with p:layout but nothing you mentioned above worked for us. I think on of the problems could be a duplicated "position=center" layoutUnit.
One is rendered if no user currently is logged on, the other is displayed when a user is online. If we remove the duplicated layoutUnit, some content is displayed but in an chaotic way and not even partially at the right position. Ajax isn't working as well. Please see the template code below:
Thanx for help and apology if we did something stupid wrong, we are relative new to all the stuff.
Bye Stefan
unfortunatly we had the same problems with p:layout but nothing you mentioned above worked for us. I think on of the problems could be a duplicated "position=center" layoutUnit.
One is rendered if no user currently is logged on, the other is displayed when a user is online. If we remove the duplicated layoutUnit, some content is displayed but in an chaotic way and not even partially at the right position. Ajax isn't working as well. Please see the template code below:
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.prime.com.tr/ui">
<f:view contentType="text/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><ui:insert name="pageTitle">elni Web Flow</ui:insert></title>
<!-- Main Style -->
<link rel="stylesheet" type="text/css" href="/elniSpringWeb/layout/css/application_layout.css" />
<!-- Footer Style -->
<link rel="stylesheet" type="text/css" href="/elniSpringWeb/layout/css/footer.css" />
<!-- Header Style -->
<link rel="stylesheet" type="text/css" href="/elniSpringWeb/layout/css/header.css" />
<!-- Content Styles -->
<ui:insert name="styles"/>
</h:head>
<h:body class="yui-skin-sam">
<div id="main"><p:layout id="mainLayout" fullPage="true" >
<p:layoutUnit id="header" position="top" resizable="false" size="125"><ui:include src="../header.xhtml"/></p:layoutUnit>
<p:layoutUnit rendered="#{authentificationController.currentUser.online}" id="left" position="left"><ui:include src="../sidebar.xhtml" /></p:layoutUnit>
<p:layoutUnit rendered="#{authentificationController.currentUser.online}" id="content" position="center"><ui:insert name="content"><p>Template Content</p></ui:insert></p:layoutUnit>
<p:layoutUnit rendered="#{authentificationController.currentUser.online}" id="footer" position="bottom" size="18"><ui:include src="../footer.xhtml"/></p:layoutUnit>
<p:layoutUnit rendered="#{!authentificationController.currentUser.online}" id="contentOffline" position="center">
<p:panel>#{localtext.stdTemplate_offlineMsg}</p:panel>
</p:layoutUnit>
</p:layout></div>
</h:body>
</f:view>
</html>
Bye Stefan
Primefaces 2.0.1-SNAPSHOT
JSF 2.0.2 (mojarra)
Spring 3.0.1
Tomcat6
JSF 2.0.2 (mojarra)
Spring 3.0.1
Tomcat6
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Ooops, you can't have two layout units with same name. Try having one and apply conditional rendering for the content of center layoutunit.
ok, I replaced the part of interest with the following:
it's working, but the really blocking part was that size changed to height so the header was'n visible at all
Code: Select all
<div id="main">
<p:layout id="mainLayout" fullPage="true" >
<p:layoutUnit id="header" position="top" height="125" visible="true"><ui:include src="../header.xhtml"/></p:layoutUnit>
<p:layoutUnit rendered="#{authentificationController.currentUser.online}" id="left" position="left"><ui:include src="../sidebar.xhtml" /></p:layoutUnit>
<p:layoutUnit id="content" position="center">
<p:panel rendered="#{!authentificationController.currentUser.online}" id="contentOffline">#{localtext.stdTemplate_offlineMsg}</p:panel>
<p:panel rendered="#{authentificationController.currentUser.online}"><ui:insert name="content"></ui:insert></p:panel>
</p:layoutUnit>
<p:layoutUnit rendered="#{authentificationController.currentUser.online}" id="footer" position="bottom" height="25"><ui:include src="../footer.xhtml"/></p:layoutUnit>
</p:layout>
</div>
Primefaces 2.0.1-SNAPSHOT
JSF 2.0.2 (mojarra)
Spring 3.0.1
Tomcat6
JSF 2.0.2 (mojarra)
Spring 3.0.1
Tomcat6
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
I didn't quite understand with size changed to height? Do you still have an issue?
No sorry, everything is fine. But before your changes in Layout we used the attribute size in layoutUnit to give the component the right height. After the changes size was useless (component not visible because it had 0px height) and we had to use height instead.
Primefaces 2.0.1-SNAPSHOT
JSF 2.0.2 (mojarra)
Spring 3.0.1
Tomcat6
JSF 2.0.2 (mojarra)
Spring 3.0.1
Tomcat6
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
All of these will be documented in new user's guide and we'll be providing a migration guide as there are some components like layout that are not backward compatible.
Hi,
I'm trying to use complex layout as described in PrimeFaces showcase :
http://www.primefaces.org/showcase/ui/layoutComplex.jsf
But i have the some problem, my page doesn't have any of the styling the showcase does :s
please find bellow template page and the client : [b]complex-jsf-tempate.xhtml[/b] and jsf-templateclient.xhtml
<f:view contentType="text/html">
<h:head>
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>
<ui:insert name="title"> JSF Layout for GPI</ui:insert>
</title>
<h:outputStylesheet library="css" name="default.css"/>
<h:outputStylesheet library="css" name="cssLayout.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/syntaxhighlighter/syntaxhighlighter.css" />
<style type="text/css">
.ui-layout-north {
z-index:20 !important;
overflow:visible !important;;
}
.ui-layout-north .ui-layout-unit-content {
overflow:visible !important;
}
</style>
</h:head>
<h:body class="yui-skin-sam">
<div id="main">
<p:layout id="mainLayout" fullPage="true">
<p:layoutUnit id="header" position="top" height="125" visible="true">
<p:menubar>
<p:submenu label="File" icon="ui-icon-document">
<p:submenu label="New" icon="ui-icon-contact">
<p:menuitem value="Project" url="#" />
<p:menuitem value="Other" url="#" />
</p:submenu>
<p:menuitem value="Open" url="#" />
<p:menuitem value="Quit" url="#" />
</p:submenu>
<p:submenu label="Edit" icon="ui-icon-pencil">
<p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w"></p:menuitem>
<p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e"></p:menuitem>
</p:submenu>
<p:submenu label="Help" icon="ui-icon-help">
<p:menuitem value="Contents" url="#" />
<p:submenu label="Search" icon="ui-icon-search">
<p:submenu label="Text">
<p:menuitem value="Workspace" url="#" />
</p:submenu>
<p:menuitem value="File" url="#" />
</p:submenu>
</p:submenu>
</p:menubar>
</p:layoutUnit>
<p:layoutUnit id="left" rendered="#{blogEntryBean.user != null}" position="left">
<p:accordionPanel>
<p:tab title="Menu 1">
<br />
<p:calendar mode="inline" navigator="none"/>
<br />
</p:tab>
<p:tab title="Menu 2">
<h:outputText value="Menu 2 Content" />
</p:tab>
<p:tab title="Menu 3">
<h:outputText value="Menu 3 Content" />
</p:tab>
</p:accordionPanel>
</p:layoutUnit>
<p:layoutUnit id="content" position="center">
<p:panel rendered="#{blogEntryBean.user == null}" id="contentOffline">Vous n'etes pas en ligne</p:panel>
<p:panel rendered="#{blogEntryBean.user != null}"><ui:insert name="content"></ui:insert></p:panel>
</p:layoutUnit>
</p:layout>
</div>
</h:body>
</f:view>
[b]jsf-templateclient.xhtml[/b]
<h:body>
<ui:composition template="./templates/complex-jsf-template.xhtml">
<ui:define name="title">
GPI layout with JSF
</ui:define>
<ui:define name="content">
<h:graphicImage value="./images/nature1.jpg"/>
<h:outputText value="You are in the Main Content Section"/>
</ui:define>
</ui:composition>
</h:body>
</html>
Thanks for your help
I'm trying to use complex layout as described in PrimeFaces showcase :
http://www.primefaces.org/showcase/ui/layoutComplex.jsf
But i have the some problem, my page doesn't have any of the styling the showcase does :s
please find bellow template page and the client : [b]complex-jsf-tempate.xhtml[/b] and jsf-templateclient.xhtml
<f:view contentType="text/html">
<h:head>
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>
<ui:insert name="title"> JSF Layout for GPI</ui:insert>
</title>
<h:outputStylesheet library="css" name="default.css"/>
<h:outputStylesheet library="css" name="cssLayout.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/syntaxhighlighter/syntaxhighlighter.css" />
<style type="text/css">
.ui-layout-north {
z-index:20 !important;
overflow:visible !important;;
}
.ui-layout-north .ui-layout-unit-content {
overflow:visible !important;
}
</style>
</h:head>
<h:body class="yui-skin-sam">
<div id="main">
<p:layout id="mainLayout" fullPage="true">
<p:layoutUnit id="header" position="top" height="125" visible="true">
<p:menubar>
<p:submenu label="File" icon="ui-icon-document">
<p:submenu label="New" icon="ui-icon-contact">
<p:menuitem value="Project" url="#" />
<p:menuitem value="Other" url="#" />
</p:submenu>
<p:menuitem value="Open" url="#" />
<p:menuitem value="Quit" url="#" />
</p:submenu>
<p:submenu label="Edit" icon="ui-icon-pencil">
<p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w"></p:menuitem>
<p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e"></p:menuitem>
</p:submenu>
<p:submenu label="Help" icon="ui-icon-help">
<p:menuitem value="Contents" url="#" />
<p:submenu label="Search" icon="ui-icon-search">
<p:submenu label="Text">
<p:menuitem value="Workspace" url="#" />
</p:submenu>
<p:menuitem value="File" url="#" />
</p:submenu>
</p:submenu>
</p:menubar>
</p:layoutUnit>
<p:layoutUnit id="left" rendered="#{blogEntryBean.user != null}" position="left">
<p:accordionPanel>
<p:tab title="Menu 1">
<br />
<p:calendar mode="inline" navigator="none"/>
<br />
</p:tab>
<p:tab title="Menu 2">
<h:outputText value="Menu 2 Content" />
</p:tab>
<p:tab title="Menu 3">
<h:outputText value="Menu 3 Content" />
</p:tab>
</p:accordionPanel>
</p:layoutUnit>
<p:layoutUnit id="content" position="center">
<p:panel rendered="#{blogEntryBean.user == null}" id="contentOffline">Vous n'etes pas en ligne</p:panel>
<p:panel rendered="#{blogEntryBean.user != null}"><ui:insert name="content"></ui:insert></p:panel>
</p:layoutUnit>
</p:layout>
</div>
</h:body>
</f:view>
[b]jsf-templateclient.xhtml[/b]
<h:body>
<ui:composition template="./templates/complex-jsf-template.xhtml">
<ui:define name="title">
GPI layout with JSF
</ui:define>
<ui:define name="content">
<h:graphicImage value="./images/nature1.jpg"/>
<h:outputText value="You are in the Main Content Section"/>
</ui:define>
</ui:composition>
</h:body>
</html>
Thanks for your help
Last edited by atiyou on 21 Jun 2013, 15:27, edited 2 times in total.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 20 guests