how to set layoutUnit header with f:facet. the following code is not working!
thanks
<p:layoutUnit position="west" resizable="true" closable="true" collapsible="true">
<f:facet name="header">my header</f:facet>
</p:layoutUnit>
use
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:pe="http://primefaces.org/ui/extensions">
<pe:layout>
<pe:layoutPane id="navigator-pane" >
<f:facet name="header">
</f:facet>
</pe:layoutPane>
</pe:layout>
from primefaces-extensions library
<dependency>
<groupId>org.primefaces.extensions</groupId>
<artifactId>primefaces-extensions</artifactId>
<version>1.2.1</version>
</dependency>
In primefaces the header of the layoutUnit is defined by the property header like that:
<p:layoutUnit position="west" header="HEADER" resizable="true" closable="true" collapsible="true">
</p:layoutUnit>
So, if you were using primeface-extensions then yes could change the header that way submitted by you.
Related
I have this piece of code:
<h:body>
<h:form id="form1">
<p:menuButton value="#{msgs.settingsMenuButton}">
<p:menuitem value="#{msgs.accountsMenuItem}" url="#" update=":dlgEdit" oncomplete="_dlgEdit.show()"/>
</p:menuButton>
<p:commandButton value="Accounts" icon="ui-icon-gear"
update=":dlgEdit"
oncomplete="_dlgEdit.show()"/>
</h:form>
<p:dialog id="dlgEdit" widgetVar="_dlgEdit" modal="true" closable="true" header="Accounts">
<h:form id="frmEdit" >
<p:panelGrid id="pnlEdit" columns="2">
<p:outputLabel id="lblName" for="eName" value="Name"/>
<p:inputText id="eName" value="#{tasksBean.selectedLocation}"/>
</p:panelGrid>
</h:form>
</p:dialog>
</h:body>
The dialog is not displayed when the menuItem is selected but it works when the commandButton is pressed.
The behaviors for both are the same...
Can you support me please?
Thanks,
Andrei
Try:
oncomplete="PF('_dlgEdit').show();"
I tried using the example of showcase tuts from primefaces.org. I copied exactly the same text in my xhtml file as well as TreeBean.java
But The tree structure never appears in the browser(m using IE9). An empty block appears instead of the tree. Is there anything I need to keep in mind when using tree nodes?
!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 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">
Header
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
Footer
</p:layoutUnit>
<p:layoutUnit position="west" size="175" header="Left" collapsible="true">
<h:form id="form">
<p:tree value="#{treeBean.root}" var="node" id="tree">
<p:treeNode id="treeNode">
<h:outputText value="#{node}" id="lblNode"/>
</p:treeNode>
</p:tree>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
Welcome to PrimeFaces
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
You have to create and copy a TreeBean class too. It is avaible for every example on primefaces showcase site, next to xhtml's source code. To make it visible for EL you have to additionally annotate it #Named or #ManagedBean, and give it some reasonable lifecycle scope.
//EDIT:
#Named
#javax.enterprise.context.SessionScoped
public class TreeBean { ... }
I'm trying to get that code working:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="/templates/default.xhtml">
<ui:define name="content">
<h:form id="form">
<p:dataTable id="clienti" var="c" value="#{clientiController.clienti}" rowKey="#{c.id}">
<p:column headerText="Ragione sociale">
<h:outputText value="#{c.ragioneSociale}" />
</p:column>
<p:column headerText="Codice fiscale">
<h:outputText value="#{c.codiceFiscale}" />
</p:column>
<p:column style="width:4%">
<p:commandButton
update=":formDialog:clienteEditDialogTable"
oncomplete="clienteEditDialog.show()"
value="Modifica"
title="Modifica">
<f:setPropertyActionListener value="#{c}" target="#{clientiController.clienteSelezionato}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:commandButton value="Aggiorna" actionListener="#{clientiController.aggiorna}" update=":form:clienti" icon="ui-icon-arrowrefresh-1-n" />
<p:commandButton value="Nuovo Cliente" actionListener="#{clientiController.nuovo}" update=":formDialog:clienteEditDialogTable" oncomplete="clienteEditDialog.show()" />
</h:form>
<p:dialog
header="Modifica Cliente"
widgetVar="clienteEditDialog"
id="clienteEditDialog"
showEffect="fade"
hideEffect="explode"
closable="true"
modal="true"
appendToBody="true">
<h:form id="formDialog">
<h:panelGrid id="clienteEditDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">
<p:outputLabel for="fieldNome" value="Ragione Sociale:" />
<p:inputText id="fieldNome" value="#{clientiController.clienteSelezionato.ragioneSociale}" />
<p:outputLabel for="fieldCodice" value="Codice:" />
<p:inputText id="fieldCodice" value="#{clientiController.clienteSelezionato.codiceFiscale}" required="true" requiredMessage="Codice fiscale obbligatorio" />
</h:panelGrid>
<p:commandButton
value="Conferma modifiche"
actionListener="#{clientiController.modifica}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id!=null}" />
<p:commandButton
value="Conferma nuovo cliente"
actionListener="#{clientiController.crea}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id==null}" />
</h:form>
</p:dialog>
</ui:define>
</ui:composition>
By clicking on "Nuovo Cliente" I get a javascript console error:
TypeError: 'undefined' is not a function (evaluating
'clienteEditDialog.show()')
It's a naming container misunderstanding of course.
Can you help me give the right ids?
In older primefaces version one could not assign the same name for widgetVar and id of a p:dialog
Try changing id="clienteEditDialog" into id="clienteEditDialogId"
You are referencing clienteEditDialogTable from different naming container. Actual id is
:formDialog:clienteEditDialogTable, so try with it. Id can be different but I can tell you more after you give the template source code.
I am new to Primefaces and also to SWF. I have setup sauch page:
<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:p="http://primefaces.org/ui">
<h:head>
<title>Welcome to OTV_JSF_Spring_Hibernate_Project</title>
</h:head>
<h:body>
<f:view>
<h:form>
<p:panel header="Keyboard Demo">
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="USERs : "/>
<p:inputText id="name" value="#{sampleBean.jmeno}"/>
<p:selectOneRadio id="customRadio">
<f:selectItem itemLabel="Option 1" itemValue="1"/>
<f:selectItem itemLabel="Option 2" itemValue="2"/>
<f:selectItem itemLabel="Option 3" itemValue="3"/>
</p:selectOneRadio>
<h:outputText value="Basic QWERTY: "/>
<p:keyboard value="#{sampleBean.zadavanaHodnota}" layout="qwertyBasic"/>
<h3>Inline</h3>
<p:calendar size="21" value="#{sampleBean.datum}" id="inlineCal" mode="popup"
showOn="focus"/>
<p:commandButton action="pokracuj" value="Prechod na druhou stranku"/>
<p:dataTable rendered="false"/>
</h:panelGrid>
</p:panel>
<p:dialog widgetVar="dialog" showEffect="fade" hideEffect="fade" header="Values">
<h:panelGrid columns="2" id="display" cellpadding="5">
<h:outputText value="Value2:"/>
<h:outputText value="#{sampleBean.zadavanaHodnota}"/>
</h:panelGrid>
</p:dialog>
</h:form>
</f:view>
<p:spinner/>
</h:body>
</html>
According to documentation it schould be OK, but when I run it on any AS (JBoss, WL), it outputs error in JS:
Primefaces not defined. The start of generated page looks like this:
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/blank-web-1.0.0-SNAPSHOT/*/javax.faces.resource/theme.css?ln=primefaces-ui-lightness" /><link type="text/css" rel="stylesheet" href="/blank-web-1.0.0-SNAPSHOT/*/javax.faces.resource/primefaces.css?ln=primefaces" /><link type="text/css" rel="stylesheet" href="/blank-web-1.0.0-SNAPSHOT/*/javax.faces.resource/keyboard/keyboard.css?ln=primefaces" /><script type="text/javascript" src="/blank-web-1.0.0-SNAPSHOT/*/javax.faces.resource/jquery/jquery.js?ln=primefaces"></script><script type="text/javascript" src="/blank-web-1.0.0-SNAPSHOT/*/javax.faces.resource/primefaces.js?ln=primefaces"></script><script type="text/javascript" src="/blank-web-1.0.0-SNAPSHOT/*/javax.faces.resource/keyboard/keyboard.js?ln=primefaces"></script>
Problem is obvious - static resources - Primefaces.js, themes.js are not found. I have tried various configuration of SWF but I didnt succeed. For example my current conf regarding resource reading is this:
<faces:resources />
<!--<mvc:resources location="/, classpath:/META-INF/resources/, classpath:/META-INF/" order="1" mapping="/resources/**" />-->
<mvc:resources mapping="/javax.faces.resource/**" location="/, classpath:/META-INF/resources/" />
I also tried resource servlet, but it didnt work neither.
ResourceServlet
org.springframework.js.resource.ResourceServlet
1
ResourceServlet
/resources/*/
Thanks for any help.
Try it without mvc:resources tag. Also make sure Primefaces JAR gets deployed to your server.
I'm using the primefaces layout component and have a center and a right layoutUnit. I would like to have a link/button in the center layout that expands the right layoutUnit as I default the right layout to collapsed state when I first load the page. I'm using a boolean expression on the right layoutUnit and I update it from my link. Everything works except that the right layoutUnit doesn't get ajaxed updated from my link. If I refresh the page the right layoutUnit is expanded.
page:
<h:form prependId="false">
<p:layout fullPage="true">
<p:layoutUnit id="right" position="right" width="350" header="Marker Details" resizable="true" closable="true" collapsible="true" collapsed="#{mapBean.rightCollapsed}">
<h:outputText value="#{mapBean.text}" />
</p:layoutUnit>
<p:layoutUnit position="center">
<p:commandLink actionListener="#{mapBean.showDetail}" update="right" value="Expand Right Layout"/>
</p:layoutUnit>
</p:layout>
</h:form>
Bean:
public class MapBean implements Serializable {
private boolean rightCollapsed=true;
public void showDetail(ActionEvent e){
rightCollapsed=false;
}
//getter/setter for rightCollapsed
See the following forum post about using the <p:layout> component with the fullPage=true attribute.
http://primefaces.prime.com.tr/forum/viewtopic.php?f=3&t=4766
You cannot wrap the layout component in a form like this, each <p:layoutUnit> needs its own nested form. You can still update the components of the other forms by setting the form id and referring to component ids correctly as another answer had suggested. Try something like this:
<p:layout fullPage="true">
<p:layoutUnit id="right" position="right" width="350" header="Marker Details" resizable="true" closable="true" collapsible="true" collapsed="#{mapBean.rightCollapsed}">
<h:form id="rightForm" prependId="false">
<h:outputText id="mapBeanTextOutputText" value="#{mapBean.text}" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:form id="centerForm" prependId="false">
<p:commandLink actionListener="#{mapBean.showDetail}" update="mapBeanTextOutputText" value="Expand Right Layout"/>
</h:form>
</p:layoutUnit>
</p:layout>
The problem is maybe that you have not update the layout. You can give the h:form a id ,and use this id replace the commandbutton's update id name ,like this:
<h:form id="layoutForm" prependId="false">
<p:layout fullPage="true">
<p:layoutUnit id="right" position="right" width="350" header="Marker Details" resizable="true" closable="true" collapsible="true" collapsed="#{mapBean.rightCollapsed}">
<h:outputText value="#{mapBean.text}" />
</p:layoutUnit>
<p:layoutUnit position="center">
<p:commandLink actionListener="#{mapBean.showDetail}" update="layoutForm" value="Expand Right Layout"/>
</p:layoutUnit>
</p:layout>
</form>