Custom scope of a ManagedBean in JSF2.0 with PrimeFaces 3.5 - jsf-2

Question

Following is my requirement-
Here I have a p:panelGrid which can add & delete the row of table. The grid contains some p:inputText and various other PrimeFaces components along with a p:fileUpload component in each row. The component p:fileUpload is set with mode="advanced" auto="true" attributes, which automatically uploads the file and hide itself after completing the successful upload.
The whole p:panelGrid is in #ViewScoped, hence working fine. I kept p:fileUpload component in #RequestScoped since for each upload request it has to upload the file but after adding new row, the previous state is not persisted anymore. so the p:fileUpload is starting visible in previous rows also. That's what I don't want. Do I need to write any custom scope for it?
Below is the view-|
<h:form>
<p:panel id="agentForm" header="#{msg.AGENTS_INFORMATION}"
style="overflow:auto; margin-bottom: 2px">
<div align="center" style="margin-top: 20px; margin-bottom: 2px">
<ui:repeat value="#{agent.scenarioList}" var="c">
<p:panelGrid>
<p:row>
<p:column>
<p:inputText id="ipaddress" value="#{c.machineIpAddress}"
style="width:90%">
<p:watermark for="ipaddress" value="#{msg.MACHINE_IP_ADDRESS}" />
</p:inputText>
</p:column>
<p:column>
<p:inputText id="username" value="#{c.machineUsername}"
style="width:90%">
<p:watermark for="username" value="#{msg.MACHINE_USERNAME}" />
</p:inputText>
</p:column>
<p:column>
<p:password id="passwd" value="#{c.machinePassword}">
<p:watermark for="passwd" value="#{msg.MACHINE_PASSWORD}" />
</p:password>
</p:column>
<p:column id="fileUpload">
<p:fileUpload rendered="#{!fileUploadController.hidden}"
label="Upload Script" style="font-size: 100% !important;"
showButtons="false"
fileUploadListener="#{fileUploadController.upload}"
mode="advanced" auto="true" sizeLimit="100000"
allowTypes="/(\.|\/)(py|txt)$/"
update="fileUpload, outPanel, :message" />
<p:outputPanel id="outPanel">
<!-- Below outputLabel will be linked to uploaded file, so that User can see the file -->
<p:outputLabel style="cursor: pointer" value="View uploded Script"
label="View Script" rendered="#{fileUploadController.hidden}" />
</p:outputPanel>
</p:column>
<p:column>
<p:inputText id="testname" value="#{c.testName}"
style="width:90%">
<p:watermark for="testname" value="#{msg.TEST_NAME}" />
</p:inputText>
</p:column>
<p:column>
<p:spinner id="threads" value="#{c.threads}" min="1" max="500"
size="8">
<p:tooltip for="threads" value="#{msg.TEST_NAME}"
showEffect="slide" hideEffect="slide" />
</p:spinner>
</p:column>
<p:column>
<p:selectBooleanCheckbox id="chkSelected" value="#{c.selected}">
<p:tooltip for="chkSelected" value="#{msg.CHECKBOX}"
showEffect="slide" hideEffect="slide" />
</p:selectBooleanCheckbox>
</p:column>
</p:row>
</p:panelGrid>
</ui:repeat>
<p:toolbar style="margin-top: 10px;">
<p:toolbarGroup align="right">
<p:commandButton value="#{msg.ADD_IT}"
update=":message, agentForm"
actionListener="#{agent.addComponent()}" />
<p:commandButton value="#{msg.DELETE_IT}"
update=":message, agentForm"
actionListener="#{agent.deleteComponent()}" />
</p:toolbarGroup>
</p:toolbar>
</div>
</p:panel>
</h:form>
My managed bean which is in #ViewScoped look like this-
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import org.ravij.performance.model.Scenario;
#ManagedBean(name = "agent")
#ViewScoped
public class AgentInfo implements Serializable {
private static final long serialVersionUID = 1L;
List<Scenario> scenarioList;
#PostConstruct
public void initBean() {
this.scenarioList = new ArrayList<Scenario>();
this.scenarioList.add(new Scenario());
}
public void addComponent() {
if (this.scenarioList != null) {
this.scenarioList.add(new Scenario());
} else {
this.initBean();
}
}
public void deleteComponent() {
List<Scenario> itemsToDelete = new ArrayList<Scenario>();
if (this.scenarioList != null) {
for (Scenario b : this.scenarioList) {
if (b.isSelected()) {
itemsToDelete.add(b);
}
}
this.scenarioList.removeAll(itemsToDelete);
}
}
public List<Scenario> getScenarioList() {
return scenarioList;
}
public void setScenarioList(List<Scenario> scenarioList) {
this.scenarioList = scenarioList;
}
}
The Scenario object contains all the information of a row. Below is the code-
package org.ravij.performance.model;
import java.io.Serializable;
public class Scenario implements Serializable {
private String machineIpAddress;
private String machineUsername;
private String machinePassword;
private String uploadedFilePath;
private String testName;
private int threads = 1;
private boolean selected = false;
//Below are the getters and setter w.r.t all the above variables
//I am not putting it, to make the code short
}
The managed bean FileUploadController is in #RequestScoped

Answer 1

You should simply keep your hidden attribute with the other values in your #ViewScoped bean. Your current code has a single hidden attribute shared with all your <p:fileUpload components which is probably not what you want.
The behavior looks good because you are only updating the current fileUpload but according to your code all the others <p:fileUpload component are supposed to be hidden.
You should also put your <h:form into your <ui:repeat so that you can know the current line which is concerned by the file being uploaded by putting something like an index (which you can get from the <ui:repeat using varStatus attribute) or any other identifier to match the current line in an hidden input.
From #{fileUploadController.upload} the easiest manner to get the hidden parameter is to get the response from FacesContext as explained here : How to get parametrs to BackingBean from jsf page in <ui:repeat>
UPDATE
It was a bit harder than expected, the problem is that <p:fileUpload will send everything in the enclosing form (didn't try to play with process attribute) and thus it will be hard to know what row is concerned by the file upload.
Also I didn't knew that you couldn't put <h:form in your <ui:repeat but the behavior of your delete button is blocking as it expects to get everything in one form.
I made a working POC using dialog to put the fileupload outside, here is how :
The trivial Scenario.java :
public class Scenario implements Serializable {
private String machineIpAddress;
private String machineUsername;
private String machinePassword;
private String uploadedFilePath;
private String testName;
private int threads = 1;
private boolean selected = false;
private boolean hidden = false; // This is new
// + Getters/Setters
}
A few changes in the AgentInfo.java :
#ManagedBean(name = "agent")
#ViewScoped
public class AgentInfo implements Serializable {
private List<Scenario> scenarioList;
private Scenario currentScenario; // This is new
// I removed the #PostConstruct which I rarely use
public void addComponent() {
if (this.scenarioList != null) {
this.scenarioList.add(new Scenario());
}
}
public void deleteComponent() {
if (this.scenarioList == null) {
return;
}
List<Scenario> itemsToDelete = new ArrayList<Scenario>();
for (Scenario scenario : this.scenarioList) {
if (scenario.isSelected()) {
itemsToDelete.add(scenario);
}
}
this.scenarioList.removeAll(itemsToDelete);
}
// This is new, it must be called before opening the upload dialog
// in order to keep a pointer on the current scenario you are working on
public void prepareUpload(Scenario scenario) {
this.currentScenario = scenario;
}
// I put the upload method here
public void upload(FileUploadEvent event) {
// Do what you need to do here
this.currentScenario.setHidden(true);
RequestContext.getCurrentInstance().execute("uploadDialogWidget.hide()");
}
public List<Scenario> getScenarioList() {
if (this.scenarioList == null) {
this.scenarioList = new ArrayList<Scenario>();
this.scenarioList.add(new Scenario());
}
return scenarioList;
}
public void setScenarioList(List<Scenario> scenarioList) {
this.scenarioList = scenarioList;
}
public Scenario getCurrentScenario() {
return currentScenario;
}
public void setCurrentScenario(Scenario currentScenario) {
this.currentScenario = currentScenario;
}
}
The most changes are in the view, I put a <h:commandButton to open the dialog in the form. I also added the dialog, and added the redisplay attribute for your password fields (which is necessary to have if you want to keep the value after form submission).
Note that I removed references to a component with message id which was not gave, don't forget to reintroduce it.
the .xhtml :
<h:form id="agentForm">
<p:panel header="#{msg.AGENTS_INFORMATION}"
style="overflow:auto; margin-bottom: 2px">
<div align="center" style="margin-top: 20px; margin-bottom: 2px">
<ui:repeat value="#{agent.scenarioList}" var="c">
<p:panelGrid>
<p:row>
<p:column>
<p:inputText id="ipaddress" value="#{c.machineIpAddress}"
style="width:90%">
<p:watermark for="ipaddress" value="#{msg.MACHINE_IP_ADDRESS}" />
</p:inputText>
</p:column>
<p:column>
<p:inputText id="username" value="#{c.machineUsername}"
style="width:90%">
<p:watermark for="username" value="#{msg.MACHINE_USERNAME}" />
</p:inputText>
</p:column>
<p:column>
<p:password id="passwd" value="#{c.machinePassword}" redisplay="true">
<p:watermark for="passwd" value="#{msg.MACHINE_PASSWORD}" />
</p:password>
</p:column>
<p:column id="fileUpload">
<p:commandButton icon="ui-icon-arrowthick-1-n" value="Upload"
actionListener="#{agent.prepareUpload(c)}"
update=":uploadDialog"
oncomplete="uploadDialogWidget.show()"
rendered="#{!c.hidden}" />
<p:outputPanel id="outPanel">
<!-- Below outputLabel will be linked to uploaded file, so that User can see the file -->
<p:outputLabel style="cursor: pointer" value="View uploded Script"
rendered="#{c.hidden}" />
</p:outputPanel>
</p:column>
<p:column>
<p:inputText id="testname" value="#{c.testName}"
style="width:90%">
<p:watermark for="testname" value="#{msg.TEST_NAME}" />
</p:inputText>
</p:column>
<p:column>
<p:spinner id="threads" value="#{c.threads}" min="1" max="500"
size="8">
<p:tooltip for="threads" value="#{msg.TEST_NAME}"
showEffect="slide" hideEffect="slide" />
</p:spinner>
</p:column>
<p:column>
<p:selectBooleanCheckbox id="chkSelected" value="#{c.selected}">
<p:tooltip for="chkSelected" value="#{msg.CHECKBOX}"
showEffect="slide" hideEffect="slide" />
</p:selectBooleanCheckbox>
</p:column>
</p:row>
</p:panelGrid>
</ui:repeat>
<p:toolbar style="margin-top: 10px;">
<p:toolbarGroup align="right">
<p:commandButton value="#{msg.ADD_IT}" update="agentForm"
actionListener="#{agent.addComponent()}" />
<p:commandButton value="#{msg.DELETE_IT}" update="agentForm"
actionListener="#{agent.deleteComponent()}" />
</p:toolbarGroup>
</p:toolbar>
</div>
</p:panel>
</h:form>
<p:dialog id="uploadDialog" widgetVar="uploadDialogWidget" header="File upload">
<h:form rendered="#{!empty agent.currentScenario}">
<p:fileUpload
label="Upload Script" style="font-size: 100% !important;"
showButtons="false"
fileUploadListener="#{agent.upload}"
mode="advanced" auto="true" sizeLimit="100000"
allowTypes="/(\.|\/)(py|txt)$/"
update=":agentForm">
</p:fileUpload>
<p:commandButton value="Cancel" onclick="uploadDialogWidget.hide();" onstart="return false;" />
</h:form>
</p:dialog>
You should consider to move from <p:panelGrid to a <p:dataTable which has a built in mechanism to work with row selection.