Rendering Issue with primefaces 6.2 and Liferay 7.1

Ehtisham Zahid, modified 7 Years ago.

New Member Posts: 14 Join Date: 9/25/18 Recent Posts

I am trying to do rendering on the basis of runtime values but it always makes issues.
First, If i render panel on the basis of above radiobutton or selectOneMenu then input values from panel comes null.
Second, I have to render three panels like from first selection second should appear and after 2nd selection third should appear.
But Issue is that when i select option from second selction the third will not appear even it doesnt call function from bean.
if I remove render from second panel then it works fine. I dont know why Liferay have this issue because its working fine in simple JSF + Primefaces project.

xhtml page :

<h:panelGroup id="milkingPanel" style="width:100%;">

                       <p:selectOneRadio id="isMilking"
                           value="#{animalBean.animalRecord.milkingstatus}"
                           rendered="#{animalBean.isMilking==1}">
                           <f:selectItem itemLabel="No" itemValue="0" />
                           <f:selectItem itemLabel="Yes" itemValue="1" />
                           <f:ajax event="change" render="milkQuantityPanel"
                               listener="#{animalBean.showQuantity}" />
                       </p:selectOneRadio>
                   </div>

<h:panelGroup id="milkQuantityPanel" style="width:100%;">

</h:panelGroup>
</h:panelGroup>

Bean Method :

public void showCow(ValueChangeEvent event) {
       long id = (long) event.getNewValue();
       try {
           AnimalCategory category = AnimalCategoryLocalServiceUtil.getAnimalCategory(id);
           if (category.getName().equals("Cow")) {
               isMilking = 1L;
           }
       } catch (PortalException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
       }

}

public void showQuantity(AjaxBehaviorEvent event) {

       if (purchasedAnimal.getorigin() == 1) {
           showMilkQuantity = 1L;
       }
   }

another xhtml page:

<?xml version="1.0"?>

<f:view xmlns="http://www.w3.org/1999/xhtml"
   xmlns:f="http://xmlns.jcp.org/jsf/core"
   xmlns:h="http://xmlns.jcp.org/jsf/html"
   xmlns:p="http://primefaces.org/ui"
   xmlns:adm="http://github.com/adminfaces">
   <h:head>
       <h:outputStylesheet library="css" name="main.css" />
   </h:head>
   <h:body>

<h:form id="form" prependId="false" enctype="multipart/form-data">

           <p:commandButton value="Save"
               actionListener="#{animalBean.saveOrUpdate}" update="@form"
               icon="fa fa-check" ajax="false" />

           <p:commandButton value="Clear" action="#{animalBean.clear}"
               process="@this" title="Clear" icon="fa fa-refresh" update="@form"
               resetValues="true">
               <f:resetValues render="form" />
           </p:commandButton>

<p:spacer width="5" />

           <p:commandButton value="Back" immediate="true"
               action="#{animalBean.redirectToViewPage}" process="@this"
               icon="fa fa-reply" />

<p:spacer width="5" />

           <p:message for="tagnumber"></p:message>
           <p:message for="tagNumberConfirmation"></p:message>
           <p:message for="gender"></p:message>
           <p:message for="animalWeight"></p:message>
           <p:message for="category"></p:message>
           <p:message for="breed"></p:message>
           <p:message for="purpose"></p:message>
           <p:message for="herdLocation"></p:message>
           <p:message for="origin"></p:message>

<p:separator></p:separator>
<div class="ui-g ui-fluid">

</div>

</p:selectOneRadio>
</div>

</div>

               <h:panelGroup id="milkingPanel" style="width:100%;">
                   <div class="ui-g-12 ui-lg-5 ui-xl-1">
                       <p:outputLabel value="#{label['animal.form.label.category']}"
                           for="category" />
                   </div>
                   <div class="ui-g-12 ui-lg-7 ui-xl-11">
                       <p:selectOneMenu id="category" required="true"
                           value="#{animalBean.animalRecord.categoryid}"
                           requiredMessage="Please fill #{label['animal.form.label.category']}"
                           valueChangeListener="#{animalBean.showCow}">
                           <f:selectItem itemLabel="Select One" itemValue="" />
                           <f:selectItems value="#{animalBean.animalCategoryList}" var="cat"
                               itemValue="#{cat.categoryid}" itemLabel="#{cat.name}" />
                           <p:ajax update="milkingPanel test2"></p:ajax>
                       </p:selectOneMenu>
                   </div>

                   <h:panelGroup id="test2" style="width:100%;"
                       rendered="#{animalBean.isMilking==1}">
                       <div class="ui-g-12 ui-lg-5 ui-xl-1">
                           <p:outputLabel
                               value="#{label['animal.form.label.milk_quantity']}"
                               for="milkQuantity" />
                       </div>
                       <div class="ui-g-12 ui-lg-7 ui-xl-11">
                           <p:inputNumber id="milkQuantity" maxValue="666666"
                               value="#{animalBean.animalRecord.avgmilkquantity}" />
                       </div>
                   </h:panelGroup>
               </h:panelGroup>

<h:panelGroup id="purchasedPanel" style="width:100%;">

</p:selectOneRadio>
</div>

</p:calendar>
</div>

</p:calendar>
</div>

</p:calendar>
</div>

</p:selectOneMenu>
</div>

</p:selectOneMenu>
</div>

</h:panelGroup>

                   <p:spacer width="10px"></p:spacer>
                   <h:outputText class="fa fa-info-circle" id="upload" />
                   <p:tooltip id="toolTipUpload" for="upload" widgetVar="dlg4"
                       value="#{message['generic.message.upload']}" position="top" />

               </div>
               <div class="ui-g-12 ui-lg-7 ui-xl-11">
                   <h:panelGrid columns="3" id="fileLoad">
                       <p:column>
                           <p:fileUpload required="true"
                               requiredMessage="Please Upload Image "
                               value="#{animalBean.file}" mode="simple" id="image"
                               sizeLimit="100000" allowTypes="/(\.|\/)(gif|jpeg|png)$/" />
                       </p:column>
                   </h:panelGrid>
               </div>

           </div>
       </h:form>
   </h:body>
</f:view>

In above page the values in panel are coming in bean as null. Again if i remove render from then and remove them from panel it works fine and getting the values.

Kindly Suggest Some solutions.
Thanks alot.

Will be looking for reply. thanks

Kyle Joseph Stiemann, modified 7 Years ago.

RE: Rendering Issue with primefaces 6.2 and Liferay 7.1

Liferay Master Posts: 760 Join Date: 1/14/13 Recent Posts

Hi Ehtisham,
Off the top of my head could you check whether making your bean @ViewScoped fixes this issue?

If that doesn’t work, please provide a much simpler code sample that reproduces the issue, such as a project generated from our PrimeFaces archetype. A simpler code sample will help us to see where the problem is, and a compilable example will allow us to test the code ourselves.

- Kyle

Ehtisham Zahid, modified 7 Years ago.

RE: Rendering Issue with primefaces 6.2 and Liferay 7.1

New Member Posts: 14 Join Date: 9/25/18 Recent Posts

Thanks For Your Reply

Bean was already @ViewScoped.
I made Another Project using your suggestions.

But the issue is still there.
If second thing is already being rendered by first thing then it doesn't update or render third.
If I remove render from 2nd then issue is solved bean method is called and it updates third panel.

Can you please have a look at this code
Thanks.
Will be looking for reply.

Graddle:

apply plugin: 'war'

repositories {
mavenCentral()
}

dependencies {
compile group: 'org.primefaces', name: 'primefaces', version: '6.2'
compile group: 'com.liferay.faces', name: 'com.liferay.faces.bridge.ext', version: '5.0.3'
compile group: 'com.liferay.faces', name: 'com.liferay.faces.bridge.impl', version: '4.1.2'
compileOnly group: "com.liferay.portal", name: "com.liferay.portal.kernel", version: "2.63.0"
compile group: 'log4j', name: 'log4j', version: '1.2.14'
runtime group: 'org.glassfish', name: 'javax.faces', version: '2.2.18'
providedCompile group: 'javax.faces', name: 'javax.faces-api', version: '2.2'
compileOnly project(":modules:testService:testService-api")
compileOnly project(":modules:testService:testService-service")
}

Bean :

package com.test.bean;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.component.UIOutput;
import javax.faces.event.AjaxBehaviorEvent;
import javax.faces.event.ValueChangeEvent;
import javax.faces.view.ViewScoped;

import com.service.model.Book;
import com.service.model.BookDetails;
import com.service.model.BookSale;
import com.service.service.BookDetailsLocalServiceUtil;
import com.service.service.BookLocalServiceUtil;
import com.service.service.BookSaleLocalServiceUtil;

@ManagedBean(name = "testBean")
@ViewScoped
public class TestBean implements Serializable {

private static final long serialVersionUID = 1L;

   private BookSale bookSale = null;
   private List<BookDetails> bookDetailsList = null;
   private List<Book> bookList = null;
   private Long showBookPanel = 0L;
   private Long showBookDetailsPanel = 0L;

   @PostConstruct
   public void init() {
       bookSale = BookSaleLocalServiceUtil.getInstance();
       bookDetailsList = new ArrayList<BookDetails>();
       bookDetailsList = BookDetailsLocalServiceUtil.getBookDetailses(-1, -1);
       bookList = new ArrayList<Book>();
       bookList = BookLocalServiceUtil.getBooks(-1, -1);
   }

   public void showBooks(AjaxBehaviorEvent event) {
       bookSale.setConfirmation(new Long((String) ((UIOutput) event.getSource()).getValue()));
       if (bookSale.getConfirmation() == 1) {
           showBookPanel = 1L;
       }
   }

public void showBookDetails(ValueChangeEvent event) {

showBookDetailsPanel = 1L;

}

   public void save() {
       bookSale.setSaleid(new Long((long) Math.random()));
       BookSaleLocalServiceUtil.addBookSale(bookSale);
   }

   public BookSale getBookSale() {
       return bookSale;
   }

   public void setBookSale(BookSale bookSale) {
       this.bookSale = bookSale;
   }

   public List<BookDetails> getBookDetailsList() {
       return bookDetailsList;
   }

   public void setBookDetailsList(List<BookDetails> bookDetailsList) {
       this.bookDetailsList = bookDetailsList;
   }

   public List<Book> getBookList() {
       return bookList;
   }

   public void setBookList(List<Book> bookList) {
       this.bookList = bookList;
   }

   public Long getShowBookPanel() {
       return showBookPanel;
   }

   public void setShowBookPanel(Long showBookPanel) {
       this.showBookPanel = showBookPanel;
   }

   public Long getShowBookDetailsPanel() {
       return showBookDetailsPanel;
   }

   public void setShowBookDetailsPanel(Long showBookDetailsPanel) {
       this.showBookDetailsPanel = showBookDetailsPanel;
   }

}

xhtml Page :

<?xml version="1.0"?>

<h:form id="form" prependId="false" enctype="multipart/form-data">

<p:commandButton value="Save" actionListener="#{testBean.save}"
update="@form" icon="fa fa-check" ajax="false" />

<p:separator></p:separator>

</p:selectOneRadio>
</div>

<h:panelGroup id="bookPanel" style="width:100%;">

                       </p:selectOneMenu>
                   </div>
               </h:panelGroup>

</h:panelGroup>

</h:form>
</h:body>
</f:view>

service.xml :

<?xml version="1.0"?>
<!DOCTYPE service-builder PUBLIC "-//Liferay//DTD Service Builder 7.0.0//EN" "http://www.liferay.com/dtd/liferay-service-builder_7_0_0.dtd">

<service-builder package-path="com.service">
<namespace>TestService</namespace>

</service-builder>

BookSaleLocalServiceImpl :

public class BookSaleLocalServiceImpl extends BookSaleLocalServiceBaseImpl {

   public BookSale getInstance() {
       BookSale bookSale = new BookSaleImpl();
       bookSale.setNew(true);
       bookSale.setPrimaryKey(0);
       return bookSale;
   }
}

and Database Script :

-- --------------------------------------------------------
-- Host: 127.0.0.1
-- Server version: 5.7.21-log - MySQL Community Server (GPL)
-- Server OS: Win64
-- HeidiSQL Version: 9.5.0.5196
-- --------------------------------------------------------

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET NAMES utf8 */;
/*!50503 SET NAMES utf8mb4 */;
/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */;
/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO' */;

-- Dumping database structure for gr
DROP DATABASE IF EXISTS `gr`;
CREATE DATABASE IF NOT EXISTS `gr` /*!40100 DEFAULT CHARACTER SET utf8 */;
USE `gr`;

-- Dumping structure for table gr.book
DROP TABLE IF EXISTS `book`;
CREATE TABLE IF NOT EXISTS `book` (
`bookid` bigint(20) NOT NULL,
`name` varchar(50) DEFAULT NULL,
`description` varchar(50) DEFAULT NULL,
PRIMARY KEY (`bookid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_general_ci;

-- Dumping data for table gr.book: ~2 rows (approximately)
/*!40000 ALTER TABLE `book` DISABLE KEYS */;
INSERT INTO `book` (`bookid`, `name`, `description`) VALUES
(1, 'Harry', 'Harry Potter'),
(2, 'Dreams', 'Good');
/*!40000 ALTER TABLE `book` ENABLE KEYS */;

-- Dumping structure for table gr.bookdetails
DROP TABLE IF EXISTS `bookdetails`;
CREATE TABLE IF NOT EXISTS `bookdetails` (
`detailsid` bigint(20) NOT NULL,
`reference` varchar(50) DEFAULT NULL,
`bookid` bigint(20) DEFAULT NULL,
PRIMARY KEY (`detailsid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- Dumping data for table gr.bookdetails: ~2 rows (approximately)
/*!40000 ALTER TABLE `bookdetails` DISABLE KEYS */;
INSERT INTO `bookdetails` (`detailsid`, `reference`, `bookid`) VALUES
(1, 'Movie', 1),
(2, 'From Reality', 2);
/*!40000 ALTER TABLE `bookdetails` ENABLE KEYS */;

-- Dumping structure for table gr.booksale
DROP TABLE IF EXISTS `booksale`;
CREATE TABLE IF NOT EXISTS `booksale` (
`saleid` bigint(20) NOT NULL,
`bookid` bigint(20) DEFAULT NULL,
`detailsid` bigint(20) DEFAULT NULL,
`dateonsold` datetime DEFAULT NULL,
`confirmation` tinyint(4) DEFAULT NULL,
PRIMARY KEY (`saleid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- Dumping data for table gr.booksale: ~0 rows (approximately)
/*!40000 ALTER TABLE `booksale` DISABLE KEYS */;
/*!40000 ALTER TABLE `booksale` ENABLE KEYS */;

/*!40101 SET SQL_MODE=IFNULL(@OLD_SQL_MODE, '') */;
/*!40014 SET FOREIGN_KEY_CHECKS=IF(@OLD_FOREIGN_KEY_CHECKS IS NULL, 1, @OLD_FOREIGN_KEY_CHECKS) */;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

Kindly suggest solution for this.
Thanks

Kyle Joseph Stiemann, modified 7 Years ago.

RE: Rendering Issue with primefaces 6.2 and Liferay 7.1

Liferay Master Posts: 760 Join Date: 1/14/13 Recent Posts

Hi Ehtisham,
Can you attach a .zip file of your project so I can build it locally with gradle?

- Kyle

Ehtisham Zahid, modified 7 Years ago.

RE: Rendering Issue with primefaces 6.2 and Liferay 7.1

New Member Posts: 14 Join Date: 9/25/18 Recent Posts

Hi Kyle
Thanks for your reply
I attached a .zip file for my project including database script, a JSF project and service builder module.
kindly get the attached file
Thanks

Kyle Joseph Stiemann, modified 7 Years ago.

RE: Rendering Issue with primefaces 6.2 and Liferay 7.1

Liferay Master Posts: 760 Join Date: 1/14/13 Recent Posts

Hi Ehtisham,
I'm having trouble building your project. Are there missing settings.gradle files or is anything missing? Could you provide explicit instructions on how to reproduce the issue (including steps to build and deploy your project from the unzipped project)?

- Kyle

Ehtisham Zahid, modified 7 Years ago.

RE: Rendering Issue with primefaces 6.2 and Liferay 7.1

New Member Posts: 14 Join Date: 9/25/18 Recent Posts

Hi Kyle

There is nothing extra or special edited in settings.gradle its just as default.

First you need to create a Liferay Workspace project 7.1
then simply import the testService into modules.

There is file named ext-spring.xml in service module i made that to connect it with my external db. maintain that as per your requirements.

file path is : testService-service/src/main/resources/META-INF/spring/ext-spring.xml
I am using 'ba.gr' as jdbc default you can see that in that file. you will need to change that

<property name="propertyPrefix" value="jdbc.bagr." />

<alias alias="gr" name="liferayDataSource" />

you also need to edit the `portal-ext.properties`

`jdbc.bagr.driverClassName=com.mysql.jdbc.Driver<br> jdbc.bagr.url=jdbc:mysql://localhost/gr?useUnicode=true&characterEncoding=UTF-8&useFastDateParsing=false<br> jdbc.bagr.username=root<br> jdbc.bagr.password=root`

Change that if you need. or just copy into your `portal-ext.properties` file

build service then build and finally deploy service
Run the attached Script in mySQL Server.
It will create database named as 'gr'.
Test is a Liferay JSF Project put that into wars folder.
Finally build and deploy the jsf project .
Run the portlet
You can see a radio button selection. select one it should display an selectOneMenu.
Select any option from that selectOneMenu and it should appear the third one.
Thats the issue it doesn't render the third one.
and also i find a bug if one thing is being rendered it doesn't call bean and doesn't store any value in variable.

I Hope this finds you well.

DB script is for your comfort. it will make a db with name of 'gr' and tables inside it.
The tables are defined in testService module to make entities and use them in JSF project (Test).

I am also attaching full Liferay Workspace project.
If you just import it into running eclipse then it should work fine. but you have to edit ext-spring.xml file according to your setting

Here is the full Liferay Workspace project that include a service builder in modules and a liferay JSF project in wars.

Hierarchy file is also attached.
Kindly get the attached file

Thanks Looking for solution

Ehtisham Zahid, modified 7 Years ago.

RE: Rendering Issue with primefaces 6.2 and Liferay 7.1

New Member Posts: 14 Join Date: 9/25/18 Recent Posts

Hi Kyle

Its been 3 days since I am waiting for your reply.

Can you please give solution for mentioned problem.

Thanks

Kyle Joseph Stiemann, modified 7 Years ago.

RE: Rendering Issue with primefaces 6.2 and Liferay 7.1

Liferay Master Posts: 760 Join Date: 1/14/13 Recent Posts

Hi Ehtisham,
Looks like you are using the @ViewScoped annotation of javax.faces.<strong>view</strong>.ViewScoped which is designed for use with CDI. Since your project is not using CDI, the bean is being re-created on every request (see point #3 of BalusC’s StackOverflow answer). Instead you should use javax.faces.<strong>bean</strong>.ViewScoped:

import&nbsp;javax<span class="hljs-preprocessor">.faces</span><span class="hljs-preprocessor">.<strong>bean</strong></span><span class="hljs-preprocessor">.ViewScoped</span><span class="hljs-comment">;</span>

Please let us know if that works for you.

- Kyle

Ehtisham Zahid, modified 7 Years ago.

RE: Rendering Issue with primefaces 6.2 and Liferay 7.1

New Member Posts: 14 Join Date: 9/25/18 Recent Posts

Hi Kyle,

It Worked fine now. The issue is solved by changing the import of @ViewScoped to javax.faces.bean.ViewScoped; 

Thanks for your help.

Kyle Joseph Stiemann, modified 7 Years ago.

RE: Rendering Issue with primefaces 6.2 and Liferay 7.1

Liferay Master Posts: 760 Join Date: 1/14/13 Recent Posts

Glad it's working for you, Ehtisham! Thanks for using Liferay Faces!

Community

Company

Feedback

Ask Questions and Find Answers

Important:

Ask is now read-only. You can review any existing questions and answers, but not add anything new.

But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:

discuss.liferay.com