Primefaces Dialog Framework Liferay - primefaces

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).

Related

Primefaces poll cause other form to expire

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>

JSF Primefaces Mobile navigation

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>

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

Primefaces p:tree when loaded dynamically

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.

Primefaces Slider does not call setter

I have a primefaces (version 3.4.2) slider and an inputText for output value of the slider value.
The problem is that a change of the slider update the displayed value of the inputText, but the setter bind to the inputText is not called.
Here is my slider:
<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:a4j="http://richfaces.org/a4j">
<h:head>
<title>Zinsrechner</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="1" style="margin-bottom:10px">
<p:inputText id="x" value="#{zinsrechner.monatlicherBeitrag}" />
<p:slider minValue="0" maxValue="150" for="x" />
</h:panelGrid>
</h:form>
</h:body>
</html>
And this is my Setter, which is NOT called:
public void setMonatlicherBeitrag( Double beitrag ) {
monatlicherBeitrag = beitrag;
}
The Getter IS called:
public Double getMonatlicherBeitrag() {
return GuiParameter.getSpareinlageProMonat();
}
Adding a <p:ajax> inside your Slider will to the trick.
Example:
<p:slider minValue="0" maxValue="150" for="x">
<p:ajax event="slideEnd" process="x" />
</p:slider>
I was facing the same problem, but in my case the thing was that I was setting the <p:inputNumber .../> label as read only. I removed that attribute and everything worked.