I have a index.xhtml as a primefaces.
and 2 other pages.xhtml,
I want 2 links in header, when I clicc on this links i still in the same page and content of 2 pages display on the center of pages 'p:layoutUnit position="center"'
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>PrimeFaces</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
<ui:include src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
Footer
<p:layoutUnit position="center">
i want 2 other pages.xhtml page be just here
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
Related
How to fit height datatable to container?
i want datatable at 100% of layoutUnit container and vertical scroll only rows, not header.
With this code, table fit, but vertical scroll all table (rows and header).
<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"
xmlns:of="http://omnifaces.org/functions">
<h:head>
</h:head>
<h:body>
<p:layout id="fullPage" fullPage="true" widgetVar="mainLayout">
<p:layoutUnit position="north" size="300" closable="false"
collapsible="true" gutter="0"
style="padding: 0px; border:0px;border-bottom: 1px solid #EF7C00;border-radius: 0px;">
</p:layoutUnit>
<p:layoutUnit position="center" gutter="0"
style="padding: 5px; border:0px;border-radius: 0px;background: #e9eaed;min-width:900px;"
id="centerID">
<p:layout id="layoutCorpoId" style="padding: 0px; border:0px;"
widgetVar="layoutCorpo">
<p:layoutUnit id="layoutCorpoWest" position="west" gutter="5"
resizable="true" size="30%" collapsible="true" closable="false"
styleClass="layoutCorpoWest panelBox">
<h:form id="validateFormId">
<p:dataTable var="elementVal" value="#{testController.players}"
id="dataTableId" rowKey="#{elementVal.playerId}"
rowIndexVar="idx" scrollable="true" resizableColumns="true" scrollHeight="100%">
<p:column headerText="Name">
<h:outputText value="#{elementVal.playerName}" />
</p:column>
<p:column headerText="Position">
<h:outputText value="#{elementVal.playerPosition}" />
</p:column>
<p:column headerText="Age">
<h:outputText value="#{elementVal.playerAge}" />
</p:column>
</p:dataTable>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="layoutCorpoCenter" position="center" gutter="0"
collapsible="true" styleClass="layoutCorpoCenter panelBox">
</p:layoutUnit>
</p:layout>
</p:layoutUnit>
<p:layoutUnit gutter="0" id="bottom" position="south" size="300"
collapsible="true" styleClass="">
</p:layoutUnit>
</p:layout>
</h:body>
</html>
I add an immage that represents this:
after scroll:
pf 5.3
You can use stickyHeader attribute of p:dataTable for that purpose. See showcase example:
<p:dataTable var="car" value="#{dtStickyView.cars}" stickyHeader="true">
...
</p:dataTable>
I have a problem.
I'm making a website with the layout of PrimeFaces, which loads a page in the center when I click on any menu item on the left, but when I use the theme of BootsFaces (<bnu: panel ....> </bnu: panel>, page load in the center but it is not another load, when I do not use the theme, everything works fine but the panel shown in plain text without style look = "success" for example.
<?xml version='1.0' encoding='UTF-8' ?>
<!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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:bnu="http://bootsfaces.net/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Page</title>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="false" closable="false" collapsible="false" >
<h1>PAGE</h1>
</p:layoutUnit>
<p:layoutUnit position="west" size="195" header="Panel" resizable="true" closable="false" collapsible="true" >
<h:form id="form" >
<p:menu>
<p:menuitem id="abc" value="Inicio" action="#{bean.page0()}" update=":content:pcenter" />
<p:submenu label="ABC" >
<p:menuitem id="X1" value="CC1" action="#{bean.page1()}" update=":content:pcenter"/>
<p:menuitem id="X2" value="CC2" action="#{bean.page2()}" update=":content:pcenter"/>
<p:menuitem id="X3" value="CC3" action="#{bean.page3()}" update=":content:pcenter"/>
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" header="Welcome user" >
<h:form id="content">
<p:panel id="pcenter">
<ui:include src="#{bean.page}.xhtml" />
</p:panel>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="false" closable="false" collapsible="false">
<h:outputText value="South unit content." />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
I try this and not show the style look="success" but show the title
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:bnu="http://bootsfaces.net/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<bnu:panel id="pdata" title="User data" collapsible="true" look="success">
<p:outputLabel value="Name" for="txt_name"/>
<p:inputText id="txt_name" label="Name" required="true">
</p:inputText>
</bnu:panel>
</html>
I try this, and the same
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<bnu:panel id="pdata" title="User data" collapsible="true" look="success">
<p:outputLabel value="Name" for="txt_name"/>
<p:inputText id="txt_name" label="Name" required="true">
</p:inputText>
</bnu:panel>
</ui:composition>
And try this, working but after not load the pages in the center when click elements of left menu
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:bnu="http://bootsfaces.net/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<head>
</head>
<bnu:panel id="pdata" title="User data" collapsible="true" look="success">
<p:outputLabel value="Name" for="txt_name"/>
<p:inputText id="txt_name" label="Name" required="true">
</p:inputText>
</bnu:panel>
</html>
Actually, each of the three versions work. I've created a project based on your XHTML pages, and it runs flawlessly. Both with and without the PrimeFaces Bootstrap theme. So my best guess is there's a problem with your project setup.
I recommend you check out my example from https://github.com/stephanrauh/BootsFaces-Examples/tree/master/PrimeFacesLayout and try to find the difference to your project.
I have a layout with layoutUnit west and layoutUnit center, west side have a menu that calls another pages that render in the center side, the problem is that all layout is refreshed(west and center side) when another page rendered in center. I have follow code:
<p:layout style="width: 100%; height: 450px" >
<p:layoutUnit position="west" size="230" collapsible="false" >
<h:form>
<p:menu style="font-size: 14px; width: 95%;height: 420px " >
<p:submenu label="MENU">
<p:menuitem value="Students" icon="ui-icon-arrowthick-1-n" url="pantallas/students.xhtml" />
<p:menuitem value="Teachers" icon="ui-icon-refresh" url="pantallas/teacher.xhtml" />
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="layout1" position="center" >
<h:form>
<ui:insert name="content" ></ui:insert>
</h:form>
</p:layoutUnit>
</p:layout>
And student.xhtml like:
<ui:composition template="../administracion.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:define name="content">
<h:head>
<h:outputStylesheet library="css" name="styles2.css"/>
<title>Facelet Title</title>
</h:head>
<h:body>
<p:panel header="Student" style="width: 90%; margin: auto auto">
<h:form id="forma1">
<p:panel style="text-align: center">
<p:inputText placeholder="Students" value="#{datosCT.cct}"/>
<p:commandButton value="buscar" actionListener="#{controlCTAlumnos.traeInfo()}" update="panel1">
<f:ajax listener="#{controlCTAlumnos.mostrarPanel(e)}" render="panel1" />
</p:commandButton>
</p:panel>
</h:form>
</p:panel>
</h:body>
</ui:define>
I saw and tried some many ways to refresh only layoutUnit center but doesn´t work in this case.
can someone help me??
thanks in advance.
You can do the partial update on form component inside your layout unit from your content page.
<p:layoutUnit id="layout1" position="center" >
<h:form id="form>
<ui:insert name="content" ></ui:insert>
</h:form>
</p:layoutUnit>
student.xhtml
<p:commandButton value="buscar" update=":form"/>
every time if an error occurs, I get the following error message in the error page.
This is my page.xhtml :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>Esprit4Olap</title>
</f:facet>
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />
<style type="text/css">
.nestedUnit {
border:0px none !important;
}
.ui-layout-center .ui-layout-resizer {
border:1px solid #A8A8A8 !important;
}
.ui-tree-item span {
float:left !important;
}
.ui-tree {
border:0px none !important;
}
.ui-tabs {
border:0px none !important;
}
</style>
</h:head>
<h:body>
<p:layoutUnit position="west" size="200" resizable="true" collapsible="true" header="TreeNode">
<h:form>
<p:tree value="#{SchemaMan.shemaBoxses}" var="SchemaMan" selectionMode="Singel" selection="#{SchemaMan.shemaBoxse}" style="width:170px">
<p:treeNode icon="ui-icon-mail-closed">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="i" icon="ui-icon-mail-closed">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="s" icon="ui-icon-transfer-e-w">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="t" icon="ui-icon-trash">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="j" icon="ui-icon-alert">
<h:outputText value="SchemaMan"/>
</p:treeNode>
</p:tree>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<p:layout>
<p:layoutUnit position="north" size="50%" resizable="true" styleClass="nestedUnit">
<p:tabView>
<p:tab title="Schema">
<h:form>
<p:panelGrid columns="2">
<p:inputText id="Schemaname" required="true" label="SchemaName" size="40" value="#{SchemaMan.nameSchema}" />
<p:inputText id="DescSchema" required="true" label="DescSchema" size="40" value="#{SchemaMan.descSchema}" />
<p:inputText id="RoleSchema" required="true" label="RoleSchema" size="40" value="#{SchemaMan.roleSchema}" />
<p:inputText id="CaptionSchema" required="true" label="CaptionSchema" size="40" value="#{SchemaMan.captionSchema}" />
</p:panelGrid>
<p:commandButton value="Add" type="button" ></p:commandButton>
</h:form>
</p:tab>
</p:tabView>
</p:layoutUnit>
</p:layout>
</p:layoutUnit>
</h:body>
</f:view>
</html>
The error itself, however, is not related to javax.faces.component.UIOutput. It can be just any error in one of the managed beans.
and i got this erros exception:
javax.servlet.ServletException: javax.faces.component.UIOutput cannot be cast to org.primefaces.component.layout.Layout
javax.faces.webapp.FacesServlet.service(FacesServlet.java:606)
Any help is appreciated.
Thanks,
i make it like you told me :
<h:body>
<p:layout>
<p:layoutUnit position="west" size="200" resizable="true" collapsible="true" header="TreeNode">
<h:form>
<p:tree value="#{SchemaMan.shemaBoxses}" var="SchemaMan" selectionMode="Singel" selection="#{SchemaMan.shemaBoxse}" style="width:170px">
<p:treeNode icon="ui-icon-mail-closed">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="i" icon="ui-icon-mail-closed">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="s" icon="ui-icon-transfer-e-w">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="t" icon="ui-icon-trash">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="j" icon="ui-icon-alert">
<h:outputText value="SchemaMan"/>
</p:treeNode>
</p:tree>
</h:form>
</p:layoutUnit>
</p:layout>
<p:layout>
<p:layoutUnit position="center">
<p:layoutUnit position="north" size="50%" resizable="true" styleClass="nestedUnit">
<p:tabView>
<p:tab title="Schema">
<h:form>
<p:panelGrid columns="2">
<p:inputText id="Schemaname" required="true" label="SchemaName" size="40" value="#{SchemaMan.nameSchema}" />
<p:inputText id="DescSchema" required="true" label="DescSchema" size="40" value="#{SchemaMan.descSchema}" />
<p:inputText id="RoleSchema" required="true" label="RoleSchema" size="40" value="#{SchemaMan.roleSchema}" />
<p:inputText id="CaptionSchema" required="true" label="CaptionSchema" size="40" value="#{SchemaMan.captionSchema}" />
</p:panelGrid>
<p:commandButton value="Add" type="button" ></p:commandButton>
</h:form>
</p:tab>
</p:tabView>
</p:layoutUnit>
</p:layoutUnit>
</p:layout>
</h:body>
but i get this exception now :
exception
javax.servlet.ServletException: JBAS011048: Failed to construct component instance
javax.faces.webapp.FacesServlet.service(FacesServlet.java:606) !!
You have two p:layout ? Every p:layoutUnit should be inside a whole p:layout. Take into account that you can nest a p:layout inside a p:layoutUnit to make more complex layouts (and of course, every p:layout HAS to have a p:layoutUnit position="center":
<p:layout>
<p:layoutUnit position="west" size="200">
...
</p:layoutUnit>
<p:layoutUnit position="center">
<p:layout>
<p:layoutUnit position="north" size="100">
...
</p:layoutUnit>
<p:layoutUnit position="center">
...
</p:layoutUnit>
</p:layout>
</p:layoutUnit>
...
</p:layout>
Remember that if you use a p:layout for your whole page, you might be better off with p:layout fullPage="true". Cheers!
I'm using PF 4.0 and I'm trying to use templating and dialog. This is my template:
<?xml version="1.0" encoding="UTF-8"?>
<!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></h:head>
<h:body>
<p:growl for="message" id="msg" showDetail="true" />
<p:layout id="page" fullPage="true">
<!-- North -->
<p:layoutUnit position="north" size="150px" style="border: none !important">
<h:form id="menutoolbar">
<p:toolbar>
[...]
</p:toolbar>
</h:form>
</p:layoutUnit>
<!-- Center -->
<p:layoutUnit position="center" style="border: none !important">
<ui:insert name="content">Center of page</ui:insert>
</p:layoutUnit>
<!-- South -->
<p:layoutUnit position="south" collapsible="false" gutter="0">
<ui:insert name="status"></ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
I'm using the template to render another page:
<?xml version="1.0" encoding="UTF-8"?>
<!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></h:head>
<h:body>
<f:metadata>
<f:viewParam name="id_file" value="#{csvDetalleBean.idFile}" />
</f:metadata>
<ui:composition template="./baseTemplate.xhtml">
<ui:define name="content">
<h:form id="tableform" prependId="false">
<p:dataTable id="detalle" value="#{csvDetalleBean.tableModel}" var="row" selection="#{csvDetalleBean.selectedRows}">
[...columns definition...]
</p:dataTable>
</h:form>
</ui:define>
<ui:define name="status">
<h:form id="statusform">
<p:panel id="panel" header="Status" style="margin-bottom:10px;">
[...controls definitions...]
</p:panel>
<p:poll interval="20" async="true" update="panel" />
</h:form>
</ui:define>
<p:dialog header="Dialog" widgetVar="respuestasDialog" resizable="false" appendToBody="true">
<p:dataTable id="respuestas" value="#{transactions.rows}" var="trRow">
<p:column headerText="Confirmation number">
<h:outputText value="#{trRow.get('confirmation_nm')}" /> hola
</p:column>
</p:dataTable>
</p:dialog>
</ui:composition>
</h:body>
</html>
The point is that I cannot show the dialog because it is not rendered at all. I think the point is the composition tag, I've already tried to put the dialog outside the composition, with same results.
What's the correct way to put components outside the layout? Of course don't want to put the dialog inside the template.
Thank you very much!