I have to write P:contextMenu inside P:layout tag
The ContextMenu in first P:layout is not rendering.
My page is as follows:
<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"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:body>
<h:form id="statementsOfAccountForm">
<p:layout id="playout" style="min-width:400px;min-height:200px;">
<p:layoutUnit position="west" resizable="true" size="100"
minSize="40" maxSize="200" collapsible="true">
<h:form id="statementsOfAccountLeftForm">
<p:contextMenu>
<p:menuitem value="Account Summary"
/>
<p:menuitem value="Mini Statement"
/>
</p:contextMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" id="centerPage" collapsible="true">
<h:form id="statementsOfAccountCenterForm">
<div align="center">hi</div>
</h:form>
</p:layout>
</h:form>
Here Is my code,
!I see output as follows : Context Menu is not displayed in proper format. Page only displays plain links. What is wrong ?Please help.see the screen shot here
The update attribute likely cannot find a component with the id of centerPage and thus is not rendering.
Temporarily remove the update attribute from the menuItem's and then evaluate the client source for the generated client id of the components within the centerPage layoutUnit that you would like to update. You can then refer to these specifically by clientId.
One problem however is that the layoutUnit component likely does not generate a client side component for you to reference, so you will probably have to reference a component within this layoutUnit directly.
...
<p:menuitem value="Account Summary" update=":statementsOfAccountForm:centerPageGroup"
...
<p:layoutUnit position="center" id="centerPage" collapsible="true">
<h:panelGroup layout="block" id="centerPageGroup"><ui:include
src="#{helloBean.pageName}.xhtml" /></h:panelGroup>
</p:layoutUnit>
This is an example of how you can reference an id specifically using the update attribute.
I've tried your example (removed the references to the backing beans though) and it works as expected:
<h:form id="statementsOfAccountForm">
<p:layout id="playout" style="min-width:400px;min-height:200px;">
<p:layoutUnit position="west" resizable="true" size="100"
minSize="40" maxSize="200" collapsible="true">
<p:contextMenu>
<p:menuitem value="Account Summary" update="centerPage" />
<p:menuitem value="Mini Statement" update="centerPage" />
</p:contextMenu>
</p:layoutUnit>
<p:layoutUnit position="center" id="centerPage" collapsible="true">
<div align="center">
</div>
</p:layoutUnit>
</p:layout>
</h:form>
Result:
I suggest you try exactly the same thing as I did. After verifying that this works, add more code.
Your layout is residing within a single h:form. You should actually have a h:form within each layout unit. So try the following:
<p:layout id="playout" style="min-width:400px;min-height:200px;">
<p:layoutUnit position="west" resizable="true" size="100"
minSize="40" maxSize="200" collapsible="true">
<h:form id="statementsOfAccountLeftForm">
<p:contextMenu>
<p:menuitem value="Account Summary" update="centerPage"
actionListener="#{helloBean.changeCenterPage('accountSummary')}" />
<p:menuitem value="Mini Statement" update="centerPage"
actionListener="#{helloBean.changeCenterPage('miniStatement')}" />
</p:contextMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" id="centerPage" collapsible="true">
<h:form id="statementsOfAccountCenterForm">
<div align="center"><ui:include
src="#{helloBean.pageName}.xhtml" /></div>
</h:form>
</p:layoutUnit>
</p:layout>
</h:form>
Primefaces 3.3 User's Guide, page 245, says:
When working with forms and full page layout, avoid using a form that
contains layoutunits as generated dom may not be the same. So
following is invalid.
<p:layout fullPage="true">
<h:form>
<p:layoutUnit position="west" size="100">
<h:outputText value="Left Pane" />
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Right Pane" />
</p:layoutUnit>
</h:form>
</p:layout>
A layout unit must have it’s own form instead, also avoid trying to
update layout units because of same reason, update it’s content
instead.
Primefaces menus have a little problem when used inside layoutUnits. To overcome this issue you can use this CSS snippet:
<style type="text/css">
.ui-layout-unit-center {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
}
.ui-layout .ui-layout-noscroll div.ui-layout-bd {
overflow: visible;
}
</style>
or you can try another approach if the above doesn't work:
<style type="text/css">
.ui-layout-west {
z-index:20 !important;
overflow:visible;
}
.ui-layout-west .ui-layout-unit-content {
overflow:visible;
}
</style>
Related
<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.
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>
I saw on richfaces showcase that the best way to use rich:tabPanel with dynamic tabs is with a4j:repeat, but this doesn't work in my application.
This is my code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Java EE 6 Starter Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</h:head>
<h:body>
<h:form>
<div id="topArea">
<ui:insert name="topArea"/>
</div>
<div id="mainArea">
<ui:insert name="mainArea"/>
</div>
<div id="footerArea">
<ui:insert name="footerArea"/>
</div>
</h:form>
</h:body>
</html>
In topArea, I have this menu:
<rich:panelMenu>
<rich:panelMenuItem label="Clienti" name="Clienti" action="#{tabsBean.addTab()}" render="tabsPanel" />
</rich:panelMenu>
in mainArea, I have this tabPanel:
<rich:tabPanel id="tabsPanel" switchType="client" activeItem="#{tabsBean.activeTab}" >
<a4j:repeat value="#{tabsBean.tabs}" var="tab">
<rich:tab name="#{tab.name}">
<f:facet name="header">#{tab.name}</f:facet>
<h:form>
<h:outputText value="Enter Name:" />
<h:inputText id="input" />
<h:outputText value="Enter you interests:" />
<h:inputTextarea cols="17" rows="3" />
<h:outputText value="Choose your favourite color" />
<h:selectOneMenu>
<f:selectItem itemLabel="Red" itemValue="0" />
<f:selectItem itemLabel="Black" itemValue="1" />
<f:selectItem itemLabel="Green" itemValue="2" />
<f:selectItem itemLabel="White" itemValue="3" />
</h:selectOneMenu>
</h:form>
</rich:tab>
</a4j:repeat>
</rich:tabPanel>
My troubles are:
The tabs are not created
Why does the showcase use a nested form? Won't nested forms cause trouble?
Thanks
Dynamic tabs with a4j:repeat are supported since 4.3.0.Final only, refer here for more details:
http://www.bleathem.ca/blog/2013/01/dynamic-panels-with-a4jrepeat.html
For earlier versions c:forEach items="#{tabsBean.tabs}" var="tab" can be used.
The title really sucks but I can't find a more concise one.
I have my app that contains really one JSF page using Primefaces and JSF 2.x. I'm using the Primefaces Layout tag to construct a header, footer, navigation, and content. Pretty simple stuff. The navigation is using a PF Tree component that when I click on a node, the content displays for that node. I use render= for all of the possible content. Currently, each content is included so I could make the main page easier to read. The content is data table that displays the records returned from the database and selecting each of them displays the values for that selection. Think of it as Layout inside of a Layout. The inner layout contains a datatable and then the panel grid to view the data selected. I can add, update, and delete with no issues.
My issue is I tried to use Facelets to include the content dynamically instead of resorting to setting render=. The code to do that is:
<?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">
<ui:composition template="inc-templates/main-template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<ui:define name="centerContent">
<ui:include src="/#{UtilBean.contentPage}.xhtml"/>
</ui:define>
</ui:composition>
The UtilBean sets the contentPage when the node in the tree is clicked. I have 2 nodes right now - graphic messages and email templates.
graphicMessage.xhtml
<?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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition>
<p:layout id="graphicMessageLayout"
style="height: 100%;width: 100%;">
<p:layoutUnit id="gmDataTableLU" position="west" size="270"
header="Graphic Messages" closable="false" collapsible="true"
resizable="true">
<h:form id="dataTableForm">
<p:dataTable id="gmDataTable" var="graphicMessage"
value="#{GraphicMessageBean.graphicMessages}"
paginatorPosition="bottom" widgetVar="gmDataTableVar"
rowKey="#{graphicMessage.graphicMessageUID}"
selection="#{GraphicMessageBean.selectedGraphicMessage}"
selectionMode="single"
style="background: #5d8bba !important; color: white !important;">
<pe:paginator
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
pageLinks="3"
rows="20"/>
<p:ajax event="rowSelect" update=":centerForm:ogrid"/>
<p:column id="messageId" sortBy="#{graphicMessage.messageId}"
style="width: 25%; text-align: left; white-space: nowrap; padding-left: 5px; padding-right: 5px;"
headerText="Message Id">
<h:outputText value="#{graphicMessage.messageId}" style="white-space: nowrap;"/>
</p:column>
</p:dataTable>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:form id="centerForm" prependId="false">
<div id="outerpanel"
style="margin-left: auto; margin-right: auto; margin-top: 50px; width: 470px">
<p:panelGrid id="ogrid" styleClass="gmGrid">
<f:facet name="header">
<p:row>
<p:column colspan="2">Graphic Message Properties</p:column>
</p:row>
</f:facet>
<p:row>
<p:column>
<h:outputText value="Message Id:"/>
</p:column>
<p:column>
<p:inputText
disabled="#{GraphicMessageBean.disabled or GraphicMessageBean.update}"
value="#{GraphicMessageBean.messageId}"/>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="Description:"/>
</p:column>
<p:column>
<p:inputText disabled="#{GraphicMessageBean.disabled}"
value="#{GraphicMessageBean.description}"/>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="URL:"/>
</p:column>
<p:column>
<p:inputText disabled="#{GraphicMessageBean.disabled}"
value="#{GraphicMessageBean.graphicURL}"/>
</p:column>
</p:row>
<p:row>
<p:column>
<h:outputText value="Image Source:"/>
</p:column>
<p:column>
<p:selectOneMenu id="selectMenu" value="#{GraphicMessageBean.imageSrc}"
effect="fade"
valueChangeListener="#{GraphicMessageBean.viewImageSrc}"
disabled="#{GraphicMessageBean.disabled}">
<f:selectItem itemLabel="Select One" itemValue=""/>
<f:selectItems value="#{GraphicMessageBean.imageSrcItems}"/>
<p:ajax update="imagesrc"/>
</p:selectOneMenu>
</p:column>
</p:row>
<p:row>
<p:column id="imageSrcColumn" colspan="2">
<div class="imgWrap">
<h:panelGroup id="imagesrc">
<h:graphicImage
value="http://localhost/media/ep2demo/banners/#{GraphicMessageBean.imageSrc}"
height="150px"/>
</h:panelGroup>
</div>
</p:column>
</p:row>
<f:facet name="footer">
<p:row id="buttonRow">
<p:column colspan="2" style="text-align: center;">
<p:commandButton value="Add" rendered="#{GraphicMessageBean.add}"
actionListener="#{GraphicMessageBean.addGraphicMessage}"
update="ogrid"/>
<p:commandButton value="Edit" rendered="#{GraphicMessageBean.edit}"
actionListener="#{GraphicMessageBean.editGraphicMessage}"
update="ogrid"/>
<p:commandButton value="Delete" rendered="#{GraphicMessageBean.delete}" onstart="alert('Are you sure?');"
actionListener="#{GraphicMessageBean.deleteGraphicMessage}"
update="ogrid :dataTableForm:gmDataTable"/>
<p:commandButton value="Update" rendered="#{GraphicMessageBean.update}"
actionListener="#{GraphicMessageBean.updateGraphicMessage}"
update="ogrid gmMessages"/>
<p:commandButton value="Save" rendered="#{GraphicMessageBean.save}"
actionListener="#{GraphicMessageBean.saveGraphicMessage}"
update="ogrid :dataTableForm:gmDataTable"/>
<p:commandButton value="Cancel" rendered="#{GraphicMessageBean.cancel}"
actionListener="#{GraphicMessageBean.cancelGraphicMessage}"
update="ogrid"/>
</p:column>
</p:row>
</f:facet>
</p:panelGrid>
<p:messages id="gmMessages"/>
</div>
</h:form>
</p:layoutUnit>
</p:layout>
</ui:composition>
</h:body>
</html>
Now the client code works because if I swap out the code for graphicMessage.xhtml with just a Hello header, I can swap content with no problem. emailTemplate is pretty much the same thing as graphicMessage.xhtml. To make things simple, I replaced each page with just a generic Hello! text(one at a time so one page has the full content and the other has a simple Hello text) and it doesn't work. If I swap both out with just plain text, it works. So the issue is in the main content somehow with all of the JSF components. I debugged the life cycle and it never gets past the first phase.
NOTE: One last thing I did was to tear the content out piece by piece until it works and I narrowed the issue to the p:ajax tags. Any use of them in the layout cause the life cycle to break. I need that tag so I can populate the properties based on the row selected in the data table. I also need it to display the image selected in the select one menu. Any ideas? I don't see much on the use of the PF ajax tag, and nothing I can see I'm doing wrong. This code works if I include it and set the render attribute.
I'm working with JSF2 and I want to display a map with the object gmap. As I saw, gmap object doesn't exist anymore with richfaces 4.x, so I tried to import the gmap4jsf.jar to render my map...
To have an exemple I took a part of my code from the Richfaces demo here : Richfaces live demo
The map is displayed well, but if I want to control it (change the type, zoom,...) with the jsf elements from the rich:panel, I get an error in Firebug : "map is undefined"...
Can somebody help me to find out the problem please because I didn't find the answer in other thread...
Here is my code:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:m="http://code.google.com/p/gmaps4jsf/"><h:head><title>JSF 2.0: Ajax Support</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=myPersonnalKeyIsWrittenHere"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style>.optionList {height: 30px;}</style></h:head><h:body>
<div id="container">
<ui:include src="tpl/menu.xhtml" />
<h1>Gmap4Jsf</h1>
<div align="center">
<f:view contentType="text/html">
<h:panelGrid columns="2">
<h:form id="mapform" prependId="false">
<m:map var="map" mapVar="map" gmapKey="#{gmapBean.gmapkey}" id="map" />
</h:form>
<h:panelGroup>
<h:form>
<rich:tabPanel switchType="ajax" width="350" height="400">
<rich:tab label="Using Google Map API">
<h:panelGrid columns="2" columnClasses="optionList">
<h:outputText value="Controls:" />
<h:panelGroup>
Hide
Show
<br />
</h:panelGroup>
<h:outputText value="Zoom:" />
<rich:inputNumberSlider id="zoom" showInput="false"
minValue="1" maxValue="18" value="#{gmapBean.zoom}"
onchange="map.setZoom(this.value)" />
<h:outputText value="Map Type:" />
<h:panelGroup>
<a href="javascript: void 0"
onclick="map.setMapType(G_NORMAL_MAP)">Normal</a>
<a href="javascript: void 0"
onclick="map.setMapType(G_SATELLITE_MAP)">Satellite</a>
<a href="javascript: void 0"
onclick="map.setMapType(G_HYBRID_MAP)">Hybrid</a>
<br />
</h:panelGroup>
</h:panelGrid>
</rich:tab>
<rich:tab label="Using Ajax with JSON">
<rich:dataGrid var="place" value="#{gmapBean.point}"
columns="2">
<h:graphicImage onclick="showPlace('#{place.id}')"
style="cursor:pointer" value="resource://#{place.pic}" />
</rich:dataGrid>
</rich:tab>
</rich:tabPanel>
</h:form>
</h:panelGroup>
</h:panelGrid>
</f:view>
</div>
</div>
Ok I found it out...
I had to define the name of the Javascript variable generated by JSF.
So, I just added the attribut "jsVariable" to my gmap element.
<m:map jsVariable="map" var="map" mapVar="map" gmapKey="#{gmapBean.gmapkey}" id="map" />
Bye
I have been getting this error. I added id's to all the components and also changed the session scope after reading a few other suggestions on stackOverflow.
I am trying to create a collapsible panel which contains tabs.
tabbb.xhtml
<cc:implementation>
<h:panelGroup layout="block" styleClass="collapsiblePanel-header">
<h:commandButton id="toggleButton"
action="#{cc.attrs.bean1.togglePanel}"
styleClass="collapsiblePanel-img"
image="#{cc.attrs.bean1.collapsed ? '/resources/images/plus.png' : '/resources/images/minus.png'}" />
</h:panelGroup>
<h:panelGroup layout="block" rendered="#{cc.attrs.bean1.collapsed}"
styleClass="collapsiblePanel-img2">
<cc:renderFacet name="tabs">
<js:forEach items="#{cc.attrs.bean2.tabBean}">
<h:outputText>"${cc.attrs.bean2.tabBean}"</h:outputText>
<li><h:commandLink
value="#{cc.attrs.bean2.tabBean.description}">
<f:param name="tabIndex" value="#{cc.attrs.bean2.randomNum}" />
<f:ajax event="click" render=":contentForm"
listener="#{bean2.handleTabChange}" />
</h:commandLink>
</li>
</js:forEach>
</cc:renderFacet>
</h:panelGroup>
<cc:insertChildren />
<h:outputStylesheet library="css" name="components.css" />
</cc:implementation>
using page: tabbedcollapsible.xhtml
<h:body>
<h:form id="testform">
<h:outputText value="Tabbed collapsible panel test page" />
<jl:tabbb bean1="${collPanel}" bean2="${tabbBean}">
<f:facet name="tabs">
<h:outputText value="This Is Cool" />
</f:facet>
</jl:tabbb>
</h:form>
</h:body>
Both the beans collPanel and tabbBean are request scoped.
Also the form does not render the tabs. I am new to JSF and I have been stuck with this for a long time. Thanks.