Primefaces p:tree when loaded dynamically - primefaces

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.

Related

Primefaces selectCheckboxMenu erratic behavior when deselecting individual checkboxes

In an application based on jsf 2.1 and Primefaces 6.1.5, I have difficulties implementing a <p:selectCheckboxMenu
I simplified the code according to the instructions here How to create a Minimal, Complete, and Verifiable example
My code now looks quite similar to the code in the Primefaces Showcase.
Primefaces Showcase
After much analyzing, I can describe 'erratic' a bit better. When deselecting an item, the item following it is affected. The last item is not affected at all. And the first item can never be deselected. It seems like a bug in the use of indices.
Can anyone confirm this and perhaps suggest a Workaround?
Here is the xhtml:
<?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">
<h:form id="form">
<p:panel>
<p:selectCheckboxMenu id="testSCM"
value="#{myForm.testList}"
multiple="true"
label="Choose item..."
updateLabel="true">
<f:selectItems var="s" value="#{myForm.testItems}" itemLabel="#{s}" />
</p:selectCheckboxMenu>
</p:panel>
<p:commandButton value="Submit" update="displayItems" oncomplete="PF('itemDialog').show()" style="margin-top:10px;" />
<p:dialog header="Selected Items" modal="true" showEffect="fade" hideEffect="fade" widgetVar="itemDialog" width="250">
<p:outputPanel id="displayItems">
<p:dataList value="#{myForm.statusList}" var="item" emptyMessage="No items selected">
<f:facet name="header">
Status
</f:facet>
#{item}
</p:dataList>
</p:outputPanel>
</p:dialog>
</h:form>
</ui:composition>
And this is the form:
#Named("myForm")
#SessionScoped
public class MyForm implements Serializable {
private String[] testList;
private List<String> testItems;
public String[] getTestList() {
return testList;
}
public void setTestList(String[] testList) {
this.testList = testList;
}
public List<String> getTestItems() {
return testItems;
}
public void setTestItems(List<String> testItems) {
this.testItems = testItems;
}
public void reset() {
testItems = new ArrayList<>();
testItems.add("Item1");
testItems.add("Item2");
testItems.add("Item3");
testItems.add("Item4");
testItems.add("Item5");
testItems.add("Item6");
}
}
The problem was caused by a bug in Primefaces version 6.1.5. The code works fine when downgrading to Version 6.0 or upgrading to Version 6.1.8, which is what I chose to do.
The problem is described in Primefaces issue tracker on github

How to include many pages dynamically using ui:include Primefaces?

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.

Primefaces datatable and ViewScoped

I'm using primefaces 5.0 on wildfly 8.2.0 (mojarra 2.2.8).
I tried to use a simple primefaces datatable with expansion but each time I expand a row, my backed bean #PostConstruct is triggered (which reloads the data which nullifies the use of #ViewScoped in the first place).
I've seen other questions on stackoverflow about this problem but no solution worked for me:
I'm using JSF 2.2+
I'm not using any JSTL tags
I disabled partial state saving in web.xml
I tried using different #ViewScoped (bean, view and even omnifaces'one)
My bean:
#Named
#javax.faces.view.ViewScoped
#SuppressWarnings("serial")
public class TestBean implements Serializable {
private List<String> things;
#PostConstruct
public void initialize() {
System.out.println("initializing...");
this.things = Arrays.asList("michael", "david", "paul");
}
public List<String> getThings() {
return this.things;
}
}
My template:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Test</title>
</h:head>
<h:body>
<p:dataTable value="#{testBean.things}" var="thing">
<p:column>
<p:rowToggler />
</p:column>
<p:column>
<h:outputText value="#{thing}" />
</p:column>
<p:rowExpansion>
<h:outputText value="#{thing}" />
</p:rowExpansion>
</p:dataTable>
</h:body>
</html>
To work, <p:dataTable> has to be inside a <h:form>.

Primefaces Dialog Framework Liferay

Primefaces Dialog Framework opens the same portlet page instead of required page.
<p:commandButton value="Dialog" process="#this" icon="ui-icon-extlink" actionListener="#{controller.viewDialog}" />
Bean:
public void viewDialog() {
Map<String,Object> options = new HashMap<String, Object>();
options.put("modal", true);
options.put("draggable", false);
options.put("resizable", true);
options.put("contentHeight", 320);
RequestContext.getCurrentInstance().openDialog("viewDialog", options, null);
viewDialog.xhtml:
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
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"
xmlns:portlet="http://java.sun.com/portlet_2_0">
<h:head />
<h:body styleClass="jsf2-portlet">
<f:event type="preRenderView" listener="#{dialog.initController}" />
</h:body>
if not then add Navigation Rule for "viewDialog" in your faces-config.xml which references viewDialog.xhtml.
<application>
<action-listener>org.primefaces.application.DialogActionListener</action-listener>
<navigation-handler>org.primefaces.application.DialogNavigationHandler</navigation-handler>
<view-handler>org.primefaces.application.DialogViewHandler</view-handler>
</application>
<navigation-rule>
<from-view-id>*</from-view-id>
<navigation-case>
<from-outcome>viewDialog</from-outcome>
<to-view-id>{path}/viewDialog.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
This is caused by a bug described at the Liferay forum and the issue
FACES-2168.
I was not able to only use the corrected faces-impl with the old liferay (6.1.1).

p:selectOneMenu and p:selectBooleanCheckBox values are not binding in nested p:tabview

This is my xhtml with the main tabview is set dynamic="true" and cache="false"
<?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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</h:head>
<h:body>
<h:form id="form">
<p:commandButton id="save" value="save"
action="#{nestedTabviewTestBean.savePersonValues}" process="#form"
update="#form" />
<p:tabView activeIndex="#{nestedTabviewTestBean.activeIndex}" dynamic="true" cache="false"
value="#{nestedTabviewTestBean.tabsList}" var="tab">
<p:ajax event="tabChange" listener="#{nestedTabviewTestBean.tabChangeListener}" update="#form"></p:ajax>
<p:tab title="#{tab.title}">
<p:tabView activeIndex="0">
<p:tab title="testingNestedTabs">
<p:selectOneMenu id="selectOneMenu" value="#{nestedTabviewTestBean.activePerson.title}">
<f:selectItem itemLabel="Mr" itemValue="mr" ></f:selectItem>
<f:selectItem itemLabel="Misses" itemValue="misses" ></f:selectItem>
<f:selectItem itemLabel="Miss" itemValue="miss" ></f:selectItem>
</p:selectOneMenu>
<p:inputText id="name" value="#{nestedTabviewTestBean.activePerson.name}"></p:inputText>
<p:selectBooleanCheckbox id="majorOrMinor"
value="#{nestedTabviewTestBean.activePerson.isMajor}"></p:selectBooleanCheckbox>
</p:tab>
</p:tabView>
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>
This is my view scoped bean
public class NestedTabviewTestBean {
private List<Tab> tabsList = new ArrayList<>();
private Integer activeIndex = 0;
private List<Person> personsList = new ArrayList<>();
private Person activePerson;
#PostConstruct
public void load() {
Tab tab1 = new Tab();
tab1.setId("tab1");
tab1.setTitle("tab1");
tabsList.add(tab1);
Tab tab2 = new Tab();
tab2.setId("tab2");
tab2.setTitle("tab2");
tabsList.add(tab2);
personsList.add(new Person("mr", "Srikanth", true));
personsList.add(new Person("mr", "Madhu", false));
activePerson = personsList.get(activeIndex);
}
public void tabChangeListener(TabChangeEvent event) {
System.out.println("save start");
activePerson = personsList.get(activeIndex);
System.out.println("title :"+activePerson.getTitle()+": Name:"+activePerson.getName()+" :major :"+activePerson.getIsMajor());
System.out.println("save End");
}
public void savePersonValues() {
System.out.println("save start");
System.out.println("title :"+activePerson.getTitle()+": Name:"+activePerson.getName()+" :major :"+activePerson.getIsMajor());
System.out.println("save End");
}
}
On page load first tab content is loaded by default. Now if I click on save button the drop down values is being set to null and the checkbox value is being set to false always.
If I navigate to the last tab in main tabview and click on save button the values are properly binded.
This is kind of strange issue which I couldn't figure out.
I am using primefaces 4.0 and mojarra jsf 2.2.4
Primefaces tabview is currently a little bit broken (I'm using version 5.1). Try to avoid it or satisfy with dirty workarounds like this one:
Primefaces TabView does not maintain selectOneMenu Values