Editable Datatable using a Dialog in JSF 2.0 - jsf

I am currently running my web application in JSF 2.0, It also is using Primefaces 2.2RC2.
I know that primefaces gives you the ability to have editable rows, but for my project I would prefer if a user clicks on a commandButton within the table that a dialog is displayed prepopulated with that particular rows values and the user can edit the row that way.
The only way I have gotten this to work is to in the column that contains the commandButton, pass that rows contents as params like the example below:
<p:dataTable var="car" value="#{myBean.cars}" id="carList">
<h:column>
<h:inputText value="#{car.id}" style="width:100%"/>
</h:column>
<h:column>
<h:inputText value="#{car.name}" style="width:100%"/>
</h:column>
<h:column>
<h:commandButton actionListener=#{myBean.updateRow} onsuccess="editCardDialog.show()" >
<f:param name="carId" value=#{car.id} />
<f:param name="carName" value=#{car.name} />
</h:commandButton>
</h:column>
...
</p:dataTable>
So my Question is this, currently the only way I have gotten this to work is to in my backing bean create dummy temp global variables to set the params to so when my dialog opens it can reference the values like this
//myBean.java
private String tempCarId;
private String tempCarName;
public void setTempCarId(String tempCarId) {
this.tempCarId = carId;
}
public String getTempCarId() {
return tempCarId;
}
public void setTempCarName(String tempCarName) {
this.tempCarName = carName;
}
public String getTempCarName() {
return tempCarName;
}
public void updateRow(ActionEvent event) {
String carId = FaceContext...getParameterMap("carId");
String carName = FacesContext...getParameterMap("carName");
setTempCarId(carId);
setTempCarName(carName);
}
Then in the dialog I will just reference those temp variables
<p:dialog>
<h:inputText value=#{myBean.tempCarId} />
<h:inputText value=#{myBean.tempCarName} />
</p:dialog>
I am not sure if this is the correct way of doing it. My gut is telling me its not because it seems extremely redundant to have to create temp variables in my Bean just so I can pass them to the dialog. Does anyone know of a better more concise way of doing this so I dont have to create a million temporary variables in my backing bean?

Just replace the outputTexts in dialog below with inputTexts;
http://www.primefaces.org/showcase/ui/datatableRowSelectionByColumn.jsf
or
http://www.primefaces.org/showcase/ui/datatableRowSelectionInstant.jsf

Related

How to pass the selected values from selectcheckBoxMenu to my bean?

I'm using JSF 2.2.8 and primefaces 6.0, and i have a selectCheckBoxMenu i want to retrieve the selected values in my bean.
The selectCheckboxMenu is filled from the database but when i select the attributes and I save nothing happens it does not call the save function
Here is my selectCheckBoxMenu
<p:outputLabel for="ressource" value="Ressource"/>
<h:panelGroup >
<p:selectCheckboxMenu id="ressource" label="Ressource" value="#{affectationBean.selectedRessource}" multiple="true">
<f:selectItems value="#{affectationBean.ressources}" var="r" itemLabel="#{r.nom}" itemValue="r.idt_ressource" />
</p:selectCheckboxMenu>
</h:panelGroup>
<p:commandButton icon="ui-icon-save" actionListener="#{affectationBean.save}" value="Save" update="#affectation" ajax="false" style="display:inline-block;margin-top:5px"/>
Here is the the declaration of the selectedRessource and the actionListener save
private Long [] selectedRessource;
// Getters setters and Construct
public void save(){
for(int i=0 ;i<selectedRessource.length;i++){
system.out.println("id ===> " + selectedRessource[i]);
}
My suggestion would be:
First make sure everything is inside the h:form tag.
don't need to multiple = true as this tag does not take this attribute
i tested with below modification and got the selected multiple value in my bean. The only difference is i am using same value for itemLabel and itemValue but in your case it is object. i am using primefaces 6 also and dont even need to change actionListner to action. It is working as it is.sample xhtml
sample ResourceBean.java
<p:outputLabel for="ressource" value="Ressource"/>
<h:panelGroup >
<p:selectCheckboxMenu id="ressource" label="Ressource" value="#{resourceBean.selectedRessource}">
<f:selectItems value="#{resourceBean.ressources}" var="r" itemLabel="#{r}" itemValue="#{r}" />
</p:selectCheckboxMenu>
</h:panelGroup>
<p:commandButton icon="ui-icon-save" actionListener="#{resourceBean.save}" value="Save" ajax="false" style="display:inline-block;margin-top:5px"/>
The problem is in your p:commandButton, you have 3 options
change your method:
public void save(ActionEvent actionEvent){...}
change your action listener value:
actionListener="#{affectationBean.save()}"
or change your button to use action
action="#{affectationBean.save}"
DISCLAIMER: This is a workaround. It is not intended to be a permanent solution but will allow you to use selectCheckboxMenu and keep working.
There is an issue with this component that prevents it from passing values to the backing bean upon submit.
For some reason the array that should contain the selected values gets cleared out upon submit. Therefore I made an extra array that I did not declare in the tag, and updated in on every change event. Then on submit the values were still there. See below:
BackingBean.java
private String[] sCodes;
private String[] sCodes2; //extra array, not in form.xhtml
public void updateCodes()
{
sCodes2 = sCodes; //keeps the values in the other array
}
public void doSend() throws IOException
{
log.trace("selected codes: {} selected codes2 length: {}", sCodes.length, sCodes2.length);
}
form.xhtml
<p:selectCheckboxMenu id="codeCtl" value="#{bean.SCodes}" label="Codes" filter="true" filterMatchMode="startsWith" panelStyle="width:250px">
<f:selectItems value="#{bean.menuCodes}" />
<p:ajax event="change" listener="#{bean.updateCodes()}" />
</p:selectCheckboxMenu>
<p:commandButton value="submit" actionListener="#{bean.doSend}" id="ctlSubmit" update="appform"/>

JSF get table rows data inside managed bean [duplicate]

I have the following dataTable:
<h:form>
<h:dataTable id = "notTable" value="#{editCategoryBean.allNotifications}" var="notification">
<h:column>
<f:facet name="header">Key</f:facet>
<h:inputText id = "notkey" value="#{notification.key}" />
</h:column>
<h:column>
<f:facet name="header">Lang</f:facet>
<h:inputText id = "notlanguage" value="#{notification.language}"/>
</h:column>
<h:column>
<f:facet name="header">Value</f:facet>
<h:inputText id = "notvalue" value="#{notification.value}"/>
</h:column>
</h:dataTable>
<h:commandButton action ="#{editCategoryBean.save()}" value = "Save" > </h:commandButton>
I want to edit my notifications from the allNotifications List in the datatable and save all changes with one button click. How can I iterate through the datatable from the editCategoryBean? Or how can I implement this behaviour otherwise?
JSF has already updated the model behind value="#{editCategoryBean.allNotifications}" with the submitted values the usual way. So, all you basically need to do is to pass it through to the service layer for save:
public void save() {
yourNotificationService.save(allNotifications);
}
Otherwise, if you really insist in iterating over it yourself for some reason, maybe to print the submitted values for testing purposes, then just do it the usual Java way:
public void save() {
for (Notification notification : allNotifications) {
System.out.println(notification.getKey());
System.out.println(notification.getLanguage());
System.out.println(notification.getValue());
}
}

How to read data from Datatable in primefaces jsf? [duplicate]

I have the following dataTable:
<h:form>
<h:dataTable id = "notTable" value="#{editCategoryBean.allNotifications}" var="notification">
<h:column>
<f:facet name="header">Key</f:facet>
<h:inputText id = "notkey" value="#{notification.key}" />
</h:column>
<h:column>
<f:facet name="header">Lang</f:facet>
<h:inputText id = "notlanguage" value="#{notification.language}"/>
</h:column>
<h:column>
<f:facet name="header">Value</f:facet>
<h:inputText id = "notvalue" value="#{notification.value}"/>
</h:column>
</h:dataTable>
<h:commandButton action ="#{editCategoryBean.save()}" value = "Save" > </h:commandButton>
I want to edit my notifications from the allNotifications List in the datatable and save all changes with one button click. How can I iterate through the datatable from the editCategoryBean? Or how can I implement this behaviour otherwise?
JSF has already updated the model behind value="#{editCategoryBean.allNotifications}" with the submitted values the usual way. So, all you basically need to do is to pass it through to the service layer for save:
public void save() {
yourNotificationService.save(allNotifications);
}
Otherwise, if you really insist in iterating over it yourself for some reason, maybe to print the submitted values for testing purposes, then just do it the usual Java way:
public void save() {
for (Notification notification : allNotifications) {
System.out.println(notification.getKey());
System.out.println(notification.getLanguage());
System.out.println(notification.getValue());
}
}

<p:inputText> value not updated in model on change

I have a form that lets me edit a list of beans (one at a time), using buttons I can switch between the beans.
Keeping it simple :
public class MyBean {
private String text;
}
public class MyController {
private List<MyBean> availableBeans = new ArrayList<MyBean>(); // has five MyBeans with random text
private MyBean selectedBean; // initialized with first element of list
private int index = 0;
public void nextBean() { index++; }
public void previousBean() { index--; }
private void refreshBean() { selectedBean = availableBeans.get(index); }
}
For the html part I have something like
<h:form id="someForm">
<!-- stuff -->
<p:inputText value="#{myController.selectedBean.text}" />
<p:inplace editor="true" label="#{myController.selectedBean.text}" >
<p:inputText value="#{myController.selectedBean.text}" />
</p:inplace>
<!-- more stuff-->
</h:form>
If I change the text inside the inplace tag, the variable in myBean will be updated just fine, but If I only use inputText the bean will still have the old value, even if I change it on the webpage. Why is that?
Its because the p:inplace editor="true" implicitly submits the value to the server while <p:inputText does not do it implicitly,
You can solve it in several ways
1) add submit button like <p:commandButton to submit the value from p:inputText
2) use p:ajax event="keyup" or event="change",inside p:inputText
also take a look at the showcase p:ajax enables ajax features on supported components.
p.s , remove the value attribute from the p:inplace (there is no such attribute in p:inplace)
Lets give your components ids:
<h:form id="someForm">
<p:inputText id="first" value="#{myController.selectedBean.text}" />
<p:inplace id="second" editor="true" value="#{myController.selectedBean.text}">
<p:inputText id="third" value="#{myController.selectedBean.text}" />
</p:inplace>
</h:form>
According to the Primefaces Documentation 3.5 the component p:inplace has no attribute called value.
Do you submit the form someForm when changing the value of first? Otherwise the updated values from first won't be passed to MyController and MyBean. p:inplace submits the values automatically whereby you have to do it yourself it you use the standard p:inputText.

JSF datatable: adding and removing rows clear rows values

I have a h:datatable showing a list of rows, and the fields of each row are input fields.
I render an "Add Row" button before the table, and a "Remove Row" button on each row of the table.
The baking bean is viewScoped, and the buttons add/remove elements from the java list in the backing bean, and then return to the same view.
I set the immediate attribute to "true" in the buttons in order to not validate the input fields when I add or remove a row.
Everything works ok but one thing: the values of the input fileds are cleared. I thought that the view kept the values beacuse the bean is viewScoped.
How can I achieve adding/removing rows without triggering validations and keeping the values that were already typed by the user in the form?
My view:
<h:form>
<h:commandButton value="Añadir Fila" immediate="true" action="#{tablaController.addRowAction}" />
<h:dataTable value="#{tablaController.lista}" var="fila" cellpadding="0" cellspacing="0" border="1">
<f:facet name="header">TABLA</f:facet>
<h:column>
<f:facet name="header"><h:outputLabel value="NOMBRE" /></f:facet>
<h:inputText id="nom" value="#{fila.nombre}" />
<h:message for="nom" class="msjError" />
</h:column>
<h:column>
<f:facet name="header"></f:facet>
<h:commandButton value="Quitar Fila" immediate="true" action="#{tablaController.removeRowAction(fila)}" />
</h:column>
</h:dataTable>
</h:form>
My backing bean:
#ManagedBean(name="tablaController")
#ViewScoped
public class TablaController {
private List<Fila> lista;
...
public TablaController() { }
...
#PostConstruct
public void init() {
this.lista = new ArrayList<Fila>();
for (int i=0; i<5; i++) {
Fila fila = new Fila();
fila.setNombre("");
this.lista.add(i,fila);
}
}
...
public String addRowAction () {
Fila fila = new Fila();
fila.setNombre("");
this.lista.add(fila);
return "";
}
public String removeRowAction (Fila f) {
boolean exito = this.lista.remove(f);
return "";
}
...
}
UPDATE --> MY SOLUTION:
I write here my solution if someone is interested.
The problem is that I use immediate="true" to skip validations, but this makes to skip the update_model_values too, so that the values entered by the user in the form are lost after clicking the add/remove buttons and re-redenring the page.
As I use "JSR-303 bean validation", my solution was to skip validations using the f:validateBean to enable/disable them. Depending on the button I click, if I want the validations to execute, I enable the bean validation (for example in a "submit" button), and if I want to skip them, I disable bean validation (like in the add/remove row buttons). But anyway the update_model_values always executes, so the values are not lost.
Here's the view:
<h:form>
<f:validateBean disabled="#{!empty param['disableValidation']}">
<h:commandButton value="Añadir Fila" action="#{tablaController.addRowAction}">
<f:param name="disableValidation" value="true" />
</h:commandButton>
<h:dataTable value="#{tablaController.lista}" var="fila" cellpadding="0" cellspacing="0" border="1">
<f:facet name="header">TABLA</f:facet>
<h:column>
<f:facet name="header"><h:outputLabel value="NOMBRE" /></f:facet>
<h:inputText id="nom" value="#{fila.nombre}" />
<h:message for="nom" class="msjError" />
</h:column>
<h:column>
<f:facet name="header"></f:facet>
<h:commandButton value="Quitar Fila" action="#{tablaController.removeRowAction(fila)}">
<f:param name="disableValidation" value="true" />
</h:commandButton>
</h:column>
</h:dataTable>
<h:commandButton value="Submit" action="#{tablaController.saveData}" />
</f:validateBean>
</h:form>
The backing bean:
#ManagedBean(name="tablaController")
#ViewScoped
public class TablaController {
private List<Fila> lista;
...
public TablaController() { }
...
#PostConstruct
public void init() {
this.lista = new ArrayList<Fila>();
for (int i=0; i<5; i++) {
Fila fila = new Fila();
fila.setNombre("fila "+i);
this.lista.add(i,fila);
}
}
...
public String addRowAction () {
Fila fila = new Fila();
fila.setNombre("");
this.lista.add(fila);
return "";
}
public String removeRowAction (Fila f) {
this.lista.remove(f);
return "";
}
...
public String saveData () {
...
//processes the valid data
//for example, calls to a service method to store them in a database
...
return "";
}
...
}
I set the immediate attribute to "true" in the buttons in order to not validate the input fields when I add or remove a row.
immediate="true" is the wrong tool for the job. It should be used to prioritize validation, not to enable/disable validation. The difference is rather huge as you encountered yourself.
You want to trigger validation conditionally. In case of e.g. required="true" that'd be as easy as
<h:inputText ... required="#{saveButtonPressed}" />
where #{saveButtonPressed} evaluates true when the save button is pressed. E.g. when its client ID is present in request parameter map.
In case of JSR 303 bean validation, that'd be a matter of
<f:validateBean disabled="#{not saveButtonPressed}">
<h:inputText ... />
</f:validateBean>
or with OmniFaces <o:validateBean> which allows controlling that on a per-command basis.
<h:commandButton id="add" ...>
<o:validateBean disabled="true" />
</h:commandButton>
I had exactly the same problem. In short, you can NOT use immediate for action that update data table(UIData) or facelet repeat. Short explanation:submitted values are not kept for re-display if inputs in UIData do not go through validation. Long explanation can be found here: long explanation and a related bug in Mojarra

Resources