I am beginner.
I am doing a project using Primefaces.
I need to include many pages dynamically when triggering the p:menuitem.
I already tried but the dynamic pages are not included properly when clicked on p:menuitem and that page only show when refresh of the page(browser).
Sample Code
<p:menu>
<p:menuitem action="..." value="Page1"/>
<p:menuitem action="..." value="Page2"/>
<p:menuitem action="..." value="Page3"/>
</p:menu>
<p:outputPanel>
<ui:include src="#{Pages.dynamicaPagesInclude}"/>
</p:outputPanel>
I do not know where I did mistake.
Any Idea?
Please, try this:
index.xhtml:This file is the "main" page, the page which contains the menu to select the dynamic pages to load.
When you press over the menuItem, the page attribute is set to the selected page value. Then, an ajax request invokes to changePage method which is in charge to set the page to load. We say to menuItem that we need to update the outputPanel which contains the new page load to show it on the browser.
<!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:p="http://primefaces.org/ui">
<h:head>
<title>Test Prime</title>
</h:head>
<h:body>
<h:form id="formulario">
<p:menu>
<p:menuitem value="Page1" actionListener="#{pages.changePage(1)}" update="outputPanel "/>
<p:menuitem value="Page2" actionListener="#{pages.changePage(2)}" update="outputPanel"/>
</p:menu>
<p:outputPanel id="outputPanel">
<ui:include src="#{pages.dynamicaPagesInclude}" />
</p:outputPanel>
</h:form>
</h:body>
</html>
page1.xhtml:Dummy page which represents a new page.
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h2>PAGE 1</h2>
</ui:composition>
page2.xhtml:Dummy page which represents a different page.
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h2>PAGE 2</h2>
</ui:composition>
Pages.java:This java class is the ManagedBean for controlling the view. It contains a string field called dynamicaPagesInclude with the path of the page to load.
The method changePage gets the attribute page which was set by the menuitem. Depending its value, chooses a page or other.
import javax.faces.bean.ManagedBean;
import javax.faces.event.ActionEvent;
#ManagedBean
public class Pages {
private String dynamicaPagesInclude;
public String getDynamicaPagesInclude() {
return dynamicaPagesInclude;
}
public void setDynamicaPagesInclude(String dynamicaPagesInclude) {
this.dynamicaPagesInclude = dynamicaPagesInclude;
}
public void changePage(int itemSelected ) {
if (itemSelected == 1) {
dynamicaPagesInclude = "page1.xhtml";
} else {
dynamicaPagesInclude = "page2.xhtml";
}
}
}
Sorry for my English level.
Related
I'm trying what I call a "dynamic tooltip" - I have a inputNumber field with a button and on button click I want to show tooltip if value is not poositive.
Page
<?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:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags" xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
<p:growl id="msgs" showDetail="true" />
<h:form>
<p:outputLabel value="Enter positive integer" />
<p:inputNumber id="val" value="#{dynamicTooltipView.val}" decimalPlaces="0" />
<p:tooltip id="tooltip" for="val" value="Test" />
<p:commandButton value="Validate" actionListener="#{dynamicTooltipView.validate}" update="val" process="val"/>
</h:form>
</h:body>
</html>
Bean
package com.codenotfound.primefaces.model;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
#Named
#ViewScoped
public class DynamicTooltipView {
Integer val;
boolean isValid;
public void validate() {
isValid = val != null && val > 0;
}
public Integer getVal() {
return val;
}
public void setVal(Integer val) {
this.val = val;
}
public boolean isValid() {
return isValid;
}
public void setValid(boolean isValid) {
this.isValid = isValid;
}
}
The problem is, that when I click the validate button, tooltip is lost and I do not understand why and how to fix it...
Problem seems to be in process="val", when I specified this, my actionListener (#{dynamicTooltipView.validate}) is not called anymore (but I'd like to understand why)...
Additionally, update="val tooltip" is not working too, I had to specify update="#form" to make it work, but this is not exactly what I wanted...
I ended up with this solution (I used p:fragment without update on button):
<?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:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
xmlns:sec="http://www.springframework.org/security/tags" xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<style>
span.invalid>input {
border-color: orange;
}
</style>
</h:head>
<h:body>
<p:growl id="msgs"/>
<h:form>
<p:fragment autoUpdate="true">
<p:outputLabel value="Enter positive integer" />
<p:inputNumber id="val" value="#{dynamicTooltipView.val}" decimalPlaces="0" styleClass="#{dynamicTooltipView.isValid() ? '' : 'invalid'}"/>
<p:tooltip id="tooltip" for="val" value="Entered value is not positive integer ;-)" rendered="#{dynamicTooltipView.isValid() == false}" />
<p:commandButton value="Validate" actionListener="#{dynamicTooltipView.validate}" />
<p:outputLabel value="#{dynamicTooltipView.isValid()}" />
</p:fragment>
</h:form>
</h:body>
</html>
p:outputLabel is there for debugging only...
I have a PrimeFaces <p:commandButton update=":messages" which doesn't display p:messages after sending the form, but if I use update="#all" instead it does update p:messages and I can see the messages displayed.
I've tried many other combinations such as update="messages", update="NewRegistryForm:messages", update="#form :messages", render=":messages"... but nothing else seems to work. Any idea why this might be happening?
On RegistryInputNewBean.processRequest I simply update the messages component like this:
FacesContext.getCurrentInstance().addMessage(
null,
new FacesMessage(FacesMessage.SEVERITY_ERROR, "", "error_processing_request")
);
mytemplate.xhtml, containing p:messages, is something like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
lang="en"
>
<f:view contentType="text/html" encoding="UTF-8" locale="en">
<h:head>
<title>test</title>
</h:head>
<h:body id="pageBody">
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" showSummary="false"/>
<ui:insert name="content" />
</h:body>
</f:view>
</html>
myform.xhtml is like this:
<!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"
>
<ui:define name="content">
<ui:composition template="mytemplate.xhtml">
<h:form id="NewRegistryForm">
<p:commandButton
id="sendButton"
type="submit"
action="#{registryInputNewBean.processRequest}"
update="#all"
style="display:none" />
</h:form>
</ui:composition>
</ui:define>
</html>
The p:messages is not inside a form, that is why the button is not going to update the component alone, only if you put #all, which refresh all the components in the page.
If you put another form that contain the p:message inside, you will be able to update the component with an update="fooForm:fooMessages"
you can update on the bean
Like
RequestContext rc = RequestContext.getCurrentInstance();
rc.update("id");
I have two pages of jsf. dashboard.xhtml has a <p:poll /> tag that updates "form1" every second, while input.xhtml is just a basic crud page that updates display in dashboard.xhtml. I'm wondering because when the dashboard.xhtml is open on a different tab or a second window of browser, input.xhtml keeps losing its state and causes the view to expire ViewExpiredException. When I tried to put <o:enableRestorableView /> in template_2.xhtml, the ViewExpiredException is gone but my input values is resetting when I submit the form. The resetting is not occuring when dashboard.xhtml is not open. When it's open, the input resets randomly.
What I want to accomplish is when I input some data in the input.xhtml, I want it to display in dashboard.xhtml in realtime. Anybody knows how to do this without (ViewExpiredException)? The application runs in WebSphere 8.5(MyFaces 2.0), Primefaces 6.0, OmniFaces 1.8.3
dashboard.xhtml:
<ui:composition template="/WEB-INF/template_1.xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:o="http://omnifaces.org/ui">
<ui:define name="content">
<h:form id="form1">
<p:poll interval="1" listener="#{dashboardBacking.updateValues}" update="form1"
global="false" />
<!-- dashboard content -->
</h:form>
</ui:define>
</ui:composition>
input.xhtml:
<ui:composition template="/WEB-INF/template_2.xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:o="http://omnifaces.org/ui">
<ui:define name="content">
<h:form id="form2">
<p:panelGrid>
<p:row>
<p:column>
<p:inputText value="#{inputBacking.values.description}" />
</p:column>
</p:row>
<p:row>
<p:column>
<p:commandButton id="#{inputBacking.save}" update="form2"/>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
</ui:define>
</ui:composition>
Backing bean (dashboard.xhtml):
#ManagedBean
#ViewScoped
public class DashboardBacking {
#EJB
private Dashboard dashboard;
private DashboardValues values;
#PostConstruct
public void postConstruct(){
values = new DashboardValues();
updateValues();
}
public void updateValues(){
DashboardValues newValues = dashboard.getValue();
if(!newValues.exactlyEqual(values)){
values = newValues;
}
}
public DashboardValues getValues(){
return values;
}
}
Backing bean (input.xhtml):
#ManagedBean
#ViewScoped
public class InputBacking {
#EJB
private DashboardDao dao;
private DashboardValues values;
public void save(){
dao.save(values)
}
//Getters and Setters
}
Dashboard singleton class:
#Singleton
#Startup
public class Dashboard {
#EJB
private DashboardDao dao;
private DashboardValue value;
#Schedule(second="*/5") //update dashboard value every 5 seconds
private void updater(){
value = dao.getLatest();
}
public DashvoardValue getValue(){
return value;
}
}
template_1.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<f:view contentType="text/html">
<f:metadata>
<o:enableRestorableView />
</f:metadata>
<h:head>
</h:head>
<h:body>
<ui:insert name="content"/>
</h:body>
</f:view>
</html>
template_2.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<f:view contentType="text/html">
<h:head>
</h:head>
<h:body>
<ui:insert name="content"/>
</h:body>
</f:view>
</html>
The scenario is a mobile page developed with JSF and Primeface Mobile.
I want to navigate in the same xhtml page between multiple pages. When I click a button in the main page the content must be loaded from managed bean in the second page. I followed this example http://www.primefaces.org/showcase/mobile/navigation.xhtml , but I can't navigate, I have the follow message 'No navigation case match for viewId mobile.xhtml, action #{myManagedBean.gotoSecond} and outcome pm:second'.
Here the xhtml code
<!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:p="http://primefaces.org/ui"
xmlns:pm="http://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE" />
<h:head>
</h:head>
<h:body>
<pm:page id="first">
<pm:header title="Page 1"></pm:header>
<pm:content>
<h:form>
<p:commandButton value="Ajax Action" action="#{myManagedBean.gotoSecond}"/>
</h:form>
</pm:content>
</pm:page>
<pm:page id="second">
<pm:header title="Page 2"></pm:header>
<pm:content>
<p>Page 2 content.</p>
<p:button outcome="pm:first" value="Go Back" />
<h:form>
#{myManagedBean.hello}
</h:form>
</pm:content>
</pm:page>
</h:body>
</html>
And the managed bean method
public String gotoSecond(){
return "pm:second";
}
You need this in your faces config file:
<application>
<navigation-handler>
org.primefaces.mobile.application.MobileNavigationHandler
</navigation-handler>
</application>
I'm using p:tree inside a xhtml which is included dynamically into a tabview of another xhtml. When we change tabs alternatively tree expansion does not work. I'm unable to expand tree by clicking the icon beside the node.
Note: Alternatively it doesn't work. Problem occurs only when dynamic="true" and cache="false" for the tabview in index.xhtml. Complete code is below using which the scenario is easily reproducible.
As I'm using p:tree in many places of my project, I request anybody to provide at least a temporary workaround if this is a bug. I already posted this in primefaces forum. I'm using Primefaces 3.5 with JSF on Tomcat 7.0
index.xhtml
<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:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<p:tabView dynamic="true" cache="false">
<p:tab title="One">
<ui:include src="/one.xhtml" />
</p:tab>
<p:tab title="two" />
</p:tabView>
</h:body>
</html>
one.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:tree widgetVar="treeStructure" value="#{treeBean.root}" var="node" selectionMode="single" id="tree">
<p:treeNode>
<h:outputText value="#{node}" />
</p:treeNode>
</p:tree>
</h:body>
</html>
TreeBean.java
#ManagedBean
#SessionScoped
public class TreeBean {
private TreeNode root;
public TreeNode getRoot() {
return root;
}
public void setRoot(TreeNode root) {
this.root = root;
}
public TreeBean() {
root = new DefaultTreeNode("Root", null);
TreeNode node0 = new DefaultTreeNode("Node 0", root);
TreeNode node00 = new DefaultTreeNode("Node 0.0", node0);
}
}
Found the solution. It's simple and obvious but struggled though. Remove <h:head></h:head> tag in one.xhtml which is not necessary and is reloading the required js files which are already loaded and very much available. Just keep <h:head></h:head> tag in main page always. Here it's index.xhtml.