I have a problem with adding selectonemenu component of Primefaces at runtime.
I added the selectonemenu but it doesnt display the name or attrbt of the objects , it shows references of them.
Thank you for your time .
<ui:composition template="/pages/admin/admin.xhtml"
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">
<ui:define name="center">
<h:form id="openposition">
<h:panelGrid id="openpanelposition" columns="1">
<p:outputLabel value="#{menu['menu.admin.openposition.name']}"/>
<p:selectOneMenu id="positiontype" value="#{openPositionController.position}" converter="#{positionConverter}" panelStyle="width:180px"
effect="fade" var="u" style="width:160px" filter="true" filterMatchMode="startsWith">
<f:selectItems value="#{openPositionController.positionList}" var="position" itemLabel="#{position.name}" itemValue="#{position}" />
<p:column>
<h:outputText value="#{u.name}" />
</p:column>
</p:selectOneMenu>
<h:panelGrid id="unitgroup" columns="1">
<p:selectOneMenu id="higherunit" value="#{openPositionController.unit}" converter="#{unitConverter}" panelStyle="width:180px"
effect="fade" var="unit" style="width:160px" filter="true" filterMatchMode="startsWith"
valueChangeListener="#{openPositionController.selectunit}">
<f:selectItems value="#{openPositionController.unitList}" var="unit" itemLabel="#{unit.unitName}" itemValue="#{unit}" />
<p:ajax update="#this"/>
<p:column>
<h:outputText value="#{unit.unitName}" />
</p:column>
</p:selectOneMenu>
</h:panelGrid>
</h:panelGrid>
</h:form>
</ui:define>
</ui:composition>
package tr.com.innova.hrm.web.controller.menucontroller;
/**
* Created by mcan on 22/01/2015.
*/
import org.primefaces.component.selectonemenu.SelectOneMenu;
import org.primefaces.context.RequestContext;
import tr.com.innova.hrm.model.entity.Position;
import tr.com.innova.hrm.model.entity.Unit;
import tr.com.innova.hrm.service.api.business.PositionService;
import tr.com.innova.hrm.service.api.business.UnitService;
import tr.com.innova.hrm.web.converter.UnitConverter;
import javax.annotation.PostConstruct;
import javax.el.ELContext;
import javax.el.ExpressionFactory;
import javax.el.ValueExpression;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.ViewScoped;
import javax.faces.component.UISelectItems;
import javax.faces.component.html.HtmlPanelGrid;
import javax.faces.component.html.HtmlPanelGroup;
import javax.faces.context.FacesContext;
import java.io.Serializable;
import java.util.List;
#ManagedBean(name = "openPositionController")
#ViewScoped
public class OpenPositionViewController implements Serializable{
private Position position;
private Unit unit;
private List<Position> positionList;
private List<Unit> unitList;
#ManagedProperty("#{positionService}")
private PositionService service;
#ManagedProperty("#{unitService}")
private UnitService unitService;
public UnitService getUnitService() {
return unitService;
}
public void setUnitService(UnitService unitService) {
this.unitService = unitService;
}
public Unit getUnit() {
return unit;
}
public void setUnit(Unit unit) {
this.unit = unit;
}
public List<Unit> getUnitList() {
return unitList;
}
public void setUnitList(List<Unit> unitList) {
this.unitList = unitList;
}
public Position getPosition() {
return position;
}
public void setPosition(Position position) {
this.position = position;
}
public List<Position> getPositionList() {
return positionList;
}
public void setPositionList(List<Position> positionList) {
this.positionList = positionList;
}
public PositionService getService() {
return service;
}
public void setService(PositionService service) {
this.service = service;
}
#PostConstruct
public void init()
{
positionList = service.loadAll();
unitList = unitService.getAllUnit();
FacesContext.getCurrentInstance().getViewRoot();
}
public void selectunit()
{
HtmlPanelGrid component = (HtmlPanelGrid) FacesContext.getCurrentInstance().getViewRoot().findComponent(":openposition:unitgroup");
SelectOneMenu oneMenu = new SelectOneMenu();
oneMenu.setRendered(true);
oneMenu.setConverter(new UnitConverter());
UISelectItems items = new UISelectItems();
ValueExpression expr = getValueExpression("#{openPositionController.unitList}");
items.setValueExpression("value", expr);
oneMenu.getChildren().add(items);
component.getChildren().add(oneMenu);
RequestContext context = RequestContext.getCurrentInstance();
context.update("openposition");
context.update("openposition:unitgroup");
}
private ValueExpression getValueExpression(String expression) {
ExpressionFactory expressionFactory = FacesContext.getCurrentInstance().getApplication().getExpressionFactory();
ELContext expressionContext = FacesContext.getCurrentInstance().getELContext();
return expressionFactory.createValueExpression(expressionContext, expression, Object.class);
}
}
Here is my answer for the future generations...
This is the way i've created a SelectOneMenu of PrimeFaces programmatically:
// Get context and expression factory
FacesContext context = FacesContext.getCurrentInstance();
ExpressionFactory ef = context.getApplication().getExpressionFactory();
// Create panel grid
HtmlPanelGrid grid = new HtmlPanelGrid();
grid.setColumns(2);
// Create the select label
OutputLabel comboLabel = new OutputLabel();
comboLabel.setValue(obj.getNameFilter());
comboLabel.setFor(cmpName);
grid.getChildren().add(comboLabel);
// The biding expression of the select
ValueExpression comboExpr = ef.createValueExpression(context.getELContext(),
"#{MbDinamicReports.valueCombo}", String.class);
// Create the select
SelectOneMenu comboBox = new SelectOneMenu();
comboBox.setId(cmpName);
comboBox.setValueExpression("value", comboExpr);
// Here the items are added
for (int i = 0; i < 3; i++) {
UISelectItem item = new UISelectItem();
item.setItemLabel("Label" + i);
item.setItemValue("value" + i);
comboBox.getChildren().add(item);
}
grid.getChildren().add(comboBox);
Related
I have a drop down (p:selectOneMenu) as the input field in the Primefaces 8.0 datatable row, after I select the value in the drop down, if I sort it the selected value can be kept after ajax submit. However if I input a filter that filter 0 rows, and then I clear the filter, the selected value in the drop down disappear:
updated base on Kukeltje's request for adding input text:
Select the drop down value
input the filter so that all the rows are filter out
clear the filter, the selected value disappear
My backing bean:
package sample;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;
#Named
#SessionScoped
public class SampleBean implements java.io.Serializable {
/**
*
*/
private static final long serialVersionUID = 5307652891294044974L;
private static final Map<String, String> dropDown = new HashMap<>();
static {
dropDown.put("K1", "K1");
dropDown.put("K2", "K2");
dropDown.put("K3", "K3");
}
public Map<String, String> getDropDown() {
return dropDown;
}
private List<TableObject> tableObjects = Arrays.asList(new TableObject[] {new TableObject(), new TableObject()});
public List<TableObject> getTableObjects() {
return tableObjects;
}
public void setTableObjects(List<TableObject> tableObjects) {
this.tableObjects = tableObjects;
}
public static class TableObject
{
private String dd;
private String inputText;
public String getDd() {
return dd;
}
public void setDd(String dd) {
this.dd = dd;
}
public String getInputText() {
return inputText;
}
public void setInputText(String inputText) {
this.inputText = inputText;
}
}
}
My facelet:
<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:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<h:head>
<title>Hello World JSF 2.3</title>
</h:head>
<h:body>
<h:form>
<p:dataTable var="item" value="#{sampleBean.tableObjects}"
widgetVar="itemTable">
<p:ajax event="sort" process="#this" update="#this"
skipChildren="false" />
<p:ajax event="page" process="#this" update="#this"
skipChildren="false" />
<p:ajax event="filter" process="#this" update="#this" global="false"
skipChildren="false" />
<p:column headerText="Dropdown" sortBy="#{item.dd}"
filterBy="#{item.dd}" filterMatchMode="contains">
<p:selectOneMenu id="Dropdown" value="#{item.dd}" required="false"
label="Dropdown" style="width: 90%">
<f:selectItem itemValue="#{null}" itemLabel="" />
<f:selectItems value="#{sampleBean.dropDown.entrySet()}"
var="entry" itemValue="#{entry.value}" itemLabel="#{entry.key}" />
</p:selectOneMenu>
</p:column>
<p:column id="InputTextHeader" headerText="Input Text"
sortBy="#{item.inputText}" filterBy="#{item.inputText}"
filterMatchMode="contains">
<p:inputText id="InputText" value="#{item.inputText}" />
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
I push my testing project to github, in case you want to test it
git clone https://github.com/saycchai/jsf-test.git
cd jsf-test
chmod +x *.sh
./buildAndRun.sh
for payara server:
browse: http://localhost:8080/index.xhtml
for other server:
http://localhost:8080/jsf-test/index.xhtml
Finally I found a work around solution as follows:
I added a phase listener, if the filter submit 0 row (pass as a request parameter, please see the onstart part in the facelet), then backup the Dd value to previousDd before the APPLY_REQUEST_VALUES phase and set the backup value previousDd back to Dd before the RENDER_RESPONSE phase, code as follows:
Backing Bean
package sample;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;
import javax.persistence.Transient;
#Named
#SessionScoped
public class SampleBean implements java.io.Serializable {
/**
*
*/
private static final long serialVersionUID = 5307652891294044974L;
private static final Map<String, String> dropDown = new HashMap<>();
static {
for(int i=1; i<10; i++) {
dropDown.put("K"+i, "K"+i);
}
}
public Map<String, String> getDropDown() {
return dropDown;
}
private List<TableObject> tableObjects = Arrays.asList(new TableObject[] {new TableObject(), new TableObject(), new TableObject(), new TableObject()});
public List<TableObject> getTableObjects() {
return tableObjects;
}
public void setTableObjects(List<TableObject> tableObjects) {
this.tableObjects = tableObjects;
}
public static class TableObject
{
private String dd;
private String inputText;
public String getDd() {
return dd;
}
public void setDd(String dd) {
this.dd = dd;
}
public String getInputText() {
return inputText;
}
public void setInputText(String inputText) {
this.inputText = inputText;
}
#Transient
private String previousDd;
public String getPreviousDd() {
return previousDd;
}
public void setPreviousDd(String previousDd) {
this.previousDd = previousDd;
}
}
}
Facelet
<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"
>
<h:head>
<title>Hello World JSF 2.3</title>
</h:head>
<h:body>
<h:form id="form">
<p:dataTable id="itemTable" var="item" value="#{sampleBean.tableObjects}"
widgetVar="itemTable"
paginator="true"
>
<p:ajax event="sort" process="#this" update="#this"
skipChildren="false" />
<p:ajax event="page" process="#this" update="#this"
skipChildren="false"
/>
<p:ajax event="filter" process="#this" update="#this" global="false"
skipChildren="false"
onstart="cfg.ext.params.push({name: 'tableFilterCount', value: PF('itemTable').paginator.cfg.rowCount});"
/>
<p:column id="DropdownHeader" headerText="Dropdown" sortBy="#{item.dd}"
filterBy="#{item.dd}" filterMatchMode="contains">
<p:selectOneMenu id="Dropdown" value="#{item.dd}" required="false"
label="Dropdown" style="width: 90%">
<f:selectItem itemValue="#{null}" itemLabel="" />
<f:selectItems value="#{sampleBean.dropDown.entrySet()}"
var="entry" itemValue="#{entry.value}" itemLabel="#{entry.key}" />
</p:selectOneMenu>
</p:column>
<p:column id="InputTextHeader" headerText="Input Text"
sortBy="#{item.inputText}" filterBy="#{item.inputText}"
filterMatchMode="contains">
<p:inputText id="InputText" value="#{item.inputText}" >
<p:ajax />
</p:inputText>
</p:column>
</p:dataTable>
</h:form>
</h:body>
</html>
Phase Listener
package sample;
import javax.faces.event.PhaseEvent;
import javax.faces.event.PhaseId;
import javax.faces.event.PhaseListener;
import org.primefaces.component.datatable.DataTable;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import sample.SampleBean.TableObject;
public class SamplePhaseListener implements PhaseListener {
/**
*
*/
private static final long serialVersionUID = 5273254619684337785L;
private Logger logger = LoggerFactory.getLogger(this.getClass());
public void afterPhase(PhaseEvent event) {
}
public void beforePhase(PhaseEvent event) {
if(event.getPhaseId() == PhaseId.APPLY_REQUEST_VALUES) {
prettyPrint("----------------start of Before "+event.getPhaseId().getName()+"------------------------------", 0);
String tableFilterCount = event.getFacesContext().getExternalContext().getRequestParameterMap().get("tableFilterCount");
if(tableFilterCount != null && "0".equals(tableFilterCount)) {
//backup the previous value first
DataTable table = (DataTable) event.getFacesContext().getViewRoot().findComponent("form:itemTable");
for (int index = 0; index < table.getRowCount(); index++) {
table.setRowIndex(index);
Object rowData = table.getRowData();
if(rowData != null) {
TableObject tableObject = (TableObject) rowData;
logger.info(" before backup to previousDd, dd: {}, previousDd: {}", tableObject.getDd(), tableObject.getPreviousDd());
tableObject.setPreviousDd(tableObject.getDd());
logger.info(" after backup to previousDd, dd: {}, previousDd: {}", tableObject.getDd(), tableObject.getPreviousDd());
}
}
}
prettyPrint("----------------end of Before "+event.getPhaseId().getName()+"------------------------------", 0);
}
if(event.getPhaseId() == PhaseId.RENDER_RESPONSE) {
prettyPrint("----------------start of Before " + event.getPhaseId().getName() + "------------------------------", 0);
String tableFilterCount = event.getFacesContext().getExternalContext().getRequestParameterMap().get("tableFilterCount");
if(tableFilterCount != null && "0".equals(tableFilterCount)) {
//restore the Dd from previous value
DataTable table = (DataTable) event.getFacesContext().getViewRoot().findComponent("form:itemTable");
for (int index = 0; index < table.getRowCount(); index++) {
table.setRowIndex(index);
Object rowData = table.getRowData();
if(rowData != null) {
TableObject tableObject = (TableObject) rowData;
logger.info(" before restore from previousDd, dd: {}, previousDd: {}", tableObject.getDd(), tableObject.getPreviousDd());
tableObject.setDd(tableObject.getPreviousDd());
logger.info(" after restore from previousDd, dd: {}, previousDd: {}", tableObject.getDd(), tableObject.getPreviousDd());
}
}
}
prettyPrint("----------------end of Before "+event.getPhaseId().getName()+"------------------------------", 0);
}
}
public PhaseId getPhaseId() {
return PhaseId.ANY_PHASE;
}
public static final String IDENT = " ";
private void prettyPrint(String str, int depth) {
StringBuilder sb = new StringBuilder();
for (int i = 0; i < depth; i++)
sb.append(IDENT);
sb.append(str + "\n");
logger.trace(sb.toString());
}
}
faces-config.xml
<?xml version='1.0' encoding='UTF-8'?>
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_3.xsd"
version="2.3">
<lifecycle>
<phase-listener>sample.SamplePhaseListener</phase-listener>
</lifecycle>
</faces-config>
What I doing is just an application where the selected option display in the textArea. But Ajax is not working after lending the page after navigation from the main menu on this page. That function only works after using the submit button.
Below is my JSF page code
<ui:composition 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"
template="/WEB-INF/template.xhtml">
<ui:define name="title">
Ajax Framework - <span class="subitem">Basic</span>
</ui:define>
<ui:define name="description">
This example demonstrates a simple but common usage of posting the form, updating the backend value and displaying the output with ajax.
</ui:define>
<ui:define name="implementation">
<h:form>
<p:panel id="panel" header="Form" style="margin-bottom:10px;">
<p:messages>
<p:autoUpdate />
</p:messages>
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<p:outputLabel for="lazy" value="Lazy:" />
<p:selectOneMenu id="lazy" value="#{selectOneMenuView.option}" lazy="true" style="width:125px">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{selectOneMenuView.options}" />
<f:ajax event="change" listener="#{selectOneMenuView.onChange}" execute="#this" render="textarea1"/>
</p:selectOneMenu>
</h:panelGrid>
<p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="ui-icon-check" />
<p:dialog header="Values" modal="true" showEffect="bounce" widgetVar="dlg" resizable="false">
<p:panelGrid columns="2" id="display" columnClasses="label,value">
<h:outputText value="Lazy:" />
<h:outputText value="#{selectOneMenuView.option}" />
</p:panelGrid>
</p:dialog>
<h3>AutoResize</h3>
<p:inputTextarea id="textarea1" value="#{selectOneMenuView.inputTextArea}" rows="6" cols="33" />
</p:panel>
</h:form>
</ui:define>
</ui:composition>
And my managed bean is as below
package org.primefaces.showcase.view.input;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.model.SelectItem;
import javax.faces.model.SelectItemGroup;
import org.primefaces.showcase.domain.Theme;
import org.primefaces.showcase.service.ThemeService;
#ManagedBean
public class SelectOneMenuView {
private String console;
private String car;
private List<SelectItem> cars;
private String city;
private Map<String,String> cities = new HashMap<String, String>();
private Theme theme;
private List<Theme> themes;
private String option;
private List<String> options;
private String inputTextArea;
public String getInputTextArea() {
return inputTextArea;
}
public void setInputTextArea(String inputTextArea) {
this.inputTextArea = inputTextArea;
}
#ManagedProperty("#{themeService}")
private ThemeService service;
#PostConstruct
public void init() {
//cars
SelectItemGroup g1 = new SelectItemGroup("German Cars");
g1.setSelectItems(new SelectItem[] {new SelectItem("BMW", "BMW"), new SelectItem("Mercedes", "Mercedes"), new SelectItem("Volkswagen", "Volkswagen")});
SelectItemGroup g2 = new SelectItemGroup("American Cars");
g2.setSelectItems(new SelectItem[] {new SelectItem("Chrysler", "Chrysler"), new SelectItem("GM", "GM"), new SelectItem("Ford", "Ford")});
cars = new ArrayList<SelectItem>();
cars.add(g1);
cars.add(g2);
//cities
cities = new HashMap<String, String>();
cities.put("New York", "New York");
cities.put("London","London");
cities.put("Paris","Paris");
cities.put("Barcelona","Barcelona");
cities.put("Istanbul","Istanbul");
cities.put("Berlin","Berlin");
//themes
themes = service.getThemes();
//options
options = new ArrayList<String>();
for(int i = 0; i < 20; i++) {
options.add("Option " + i);
}
}
public String getConsole() {
return console;
}
public void setConsole(String console) {
this.console = console;
}
public String getCar() {
return car;
}
public void setCar(String car) {
this.car = car;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
public Theme getTheme() {
return theme;
}
public void setTheme(Theme theme) {
this.theme = theme;
}
public List<SelectItem> getCars() {
return cars;
}
public Map<String, String> getCities() {
return cities;
}
public List<Theme> getThemes() {
return themes;
}
public void setService(ThemeService service) {
this.service = service;
}
public String getOption() {
return option;
}
public void setOption(String option) {
this.option = option;
}
public List<String> getOptions() {
return options;
}
public void setOptions(List<String> options) {
this.options = options;
}
public void onChange(){
this.inputTextArea = this.option;
}
}
May I know why? Can anyone give me some guideline?
I have two dropdowns: One is implemented using a selectOneMenu component and the other is implemented with selectCheckboxMenu.
When selecting an option in the selectOneMenu, the option values of the selectCheckboxMenu are updated depending of what option was selected in the selectOneMenu.
The following scenario happens:
I select an option of the selectOneMenu, the selectCheckboxMenu gets populated
I select/check some options of the selectCheckboxMenu
I select another option of the selectOneMenu, the selectCheckboxMenu gets populated with other values
I select some of the new values
I select the option in step 1 of the selectOneMenu
The values I selected in step 2 are no longer selected
I believe this is because the list value bound to the selectCheckboxMenu is getting reset by the setter method.
What I would like is for the state of the selectCheckboxMenu to be globally saved. What would be the best strategy for doing this?
EDIT:
Here's the relevant code that duplicates the previous behavior:
Bean:
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.inject.Inject;
import java.util.ArrayList;
import java.util.List;
#ManagedBean
#ViewScoped
public class BackingBean {
private List<Parent> parents = new ArrayList<>();
private List<Child> children = new ArrayList<>();
private List<Child> selectedChildren = new ArrayList<>();
private Parent selectedParent = new Parent();
#Inject
FamilyService service;
#PostConstruct
public void init(){
parents = service.findParents();
}
public void parentChanged(){
children = new ArrayList<>();
if(getSelectedParent() == null){
return;
}
children = service.findChildrenByParent(getSelectedParent());
}
public void selectedSonChanged(){
System.out.println(selectedChildren.size());
}
public List<Parent> getParents() {
return parents;
}
public void setParents(List<Parent> parents) {
this.parents = parents;
}
public List<Child> getChildren() {
return children;
}
public void setChildren(List<Child> children) {
this.children = children;
}
public List<Child> getSelectedChildren() {
return selectedChildren;
}
public void setSelectedChildren(List<Child> selectedChildren) {
this.selectedChildren = selectedChildren;
}
public Parent getSelectedParent() {
return selectedParent;
}
public void setSelectedParent(Parent selectedParent) {
this.selectedParent = selectedParent;
}
}
XHTML:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form id="selectOne">
<p:messages autoUpdate="true" />
<h:outputLabel for="parents" value="Parents:" />
<p:selectOneMenu converter="#{parentConverter}" id="parents" value="#{backingBean.selectedParent}">
<p:ajax update="children" listener="#{backingBean.parentChanged}" />
<f:selectItem noSelectionOption="true" value="#{null}" itemLabel="None" />
<f:selectItems value="#{backingBean.parents}" var="p" itemLabel="#{p.name}" itemValue="#{p}" />
</p:selectOneMenu>
<h:outputLabel for="children" value="Children:" />
<p:selectCheckboxMenu converter="#{childConverter}" id="children"
value="#{backingBean.selectedChildren}"
label="Children" filter="true" filterMatchMode="startsWith">
<p:ajax update="display" listener="#{backingBean.selectedSonChanged}" />
<f:selectItems value="#{backingBean.children}" var="c" itemLabel="#{c.name}" itemValue="#{c}" />
</p:selectCheckboxMenu>
<p:outputPanel id="display">
<p:dataList value="#{backingBean.selectedChildren}" var="sn" emptyMessage="No children selected">
#{sn.name}
</p:dataList>
</p:outputPanel>
<p:commandButton value="Submit" update="display, selectOne" />
</h:form>
</h:body>
</html>
The complete project is here: https://github.com/cenobyte321/jsfsamples/tree/master/selectcheckboxmenu
You can find a video of the interaction mentioned previously here:
https://github.com/cenobyte321/jsfsamples/blob/master/selectcheckboxmenu/example1.mp4?raw=true
As you can see when choosing another "Parent" and then selecting their children the previous children list gets substituted. How can I properly modify this behavior so the previously selected elements get persisted and shown as checked in the selectCheckboxMenu?
EDIT 2:
One solution I found was introducing another variable which will hold the global values and will be modified in the listener method "selectedSonChanged". Here's the relevant code:
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.inject.Inject;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;
#ManagedBean
#ViewScoped
public class BackingBean {
private List<Parent> parents = new ArrayList<>();
private List<Child> children = new ArrayList<>();
private List<Child> selectedChildren = new ArrayList<>();
private List<Child> globalSelectedChildren = new ArrayList<>();
private Parent selectedParent = new Parent();
#Inject
FamilyService service;
#PostConstruct
public void init(){
parents = service.findParents();
}
public void parentChanged(){
children = new ArrayList<>();
if(getSelectedParent() == null){
return;
}
children = service.findChildrenByParent(getSelectedParent());
selectedChildren = globalSelectedChildren.stream().filter(c -> c.getParent().equals(selectedParent)).collect(Collectors.toList());
System.out.println(selectedChildren.size());
}
public void selectedSonChanged(){
System.out.println(selectedChildren.size());
globalSelectedChildren = globalSelectedChildren.stream().filter(c -> !c.getParent().equals(selectedParent)).collect(Collectors.toList());
globalSelectedChildren.addAll(selectedChildren);
}
public List<Parent> getParents() {
return parents;
}
public void setParents(List<Parent> parents) {
this.parents = parents;
}
public List<Child> getChildren() {
return children;
}
public void setChildren(List<Child> children) {
this.children = children;
}
public List<Child> getSelectedChildren() {
return selectedChildren;
}
public void setSelectedChildren(List<Child> selectedChildren) {
this.selectedChildren = selectedChildren;
}
public Parent getSelectedParent() {
return selectedParent;
}
public void setSelectedParent(Parent selectedParent) {
this.selectedParent = selectedParent;
}
public List<Child> getGlobalSelectedChildren() {
return globalSelectedChildren;
}
public void setGlobalSelectedChildren(List<Child> globalSelectedChildren) {
this.globalSelectedChildren = globalSelectedChildren;
}
}
XHTML:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form id="selectOne">
<p:messages autoUpdate="true" />
<h:outputLabel for="parents" value="Parents:" />
<p:selectOneMenu converter="#{parentConverter}" id="parents" value="#{backingBean.selectedParent}">
<p:ajax update="children" listener="#{backingBean.parentChanged}" />
<f:selectItem noSelectionOption="true" value="#{null}" itemLabel="None" />
<f:selectItems value="#{backingBean.parents}" var="p" itemLabel="#{p.name}" itemValue="#{p}" />
</p:selectOneMenu>
<h:outputLabel for="children" value="Children:" />
<p:selectCheckboxMenu converter="#{childConverter}" id="children"
value="#{backingBean.selectedChildren}"
label="Children" filter="true" filterMatchMode="startsWith">
<p:ajax update="display" listener="#{backingBean.selectedSonChanged}" />
<f:selectItems value="#{backingBean.children}" var="c" itemLabel="#{c.name}" itemValue="#{c}" />
</p:selectCheckboxMenu>
<p:outputPanel id="display">
<p:dataList value="#{backingBean.globalSelectedChildren}" var="sn" emptyMessage="No children selected">
#{sn.name}
</p:dataList>
</p:outputPanel>
<p:commandButton value="Submit" update="display, selectOne" />
</h:form>
</h:body>
</html>
Here's the branch with this solution: https://github.com/cenobyte321/jsfsamples/tree/solution-1/selectcheckboxmenu
I have the datatable inside the rowExpansion and I can select rows of that table by means of checkboxes. I select some of them. But after I click on the row-toggler icon to untoggle inner table the event resets checkboxes in "false".
Can I avoid this behavior ?
Car Brand:
import java.util.List;
public class CarBrand {
private final String brandName;
private final List<CarModel> models;
private boolean selected;
public CarBrand(String brandName, List<CarModel> models) {
this.brandName = brandName;
this.models = models;
}
public String getBrandName() {
return brandName;
}
public List<CarModel> getModels() {
return models;
}
public boolean isSelected() {
return selected;
}
public void setSelected(boolean selected) {
this.selected = selected;
}
}
Car Model:
public class CarModel {
private final String modelName;
private final int year;
private boolean selected;
public CarModel(String modelName, int year) {
this.modelName = modelName;
this.year = year;
}
public String getModelName() {
return modelName;
}
public int getYear() {
return year;
}
public boolean isSelected() {
return selected;
}
public void setSelected(boolean selected) {
this.selected = selected;
}
}
CDI Managed Bean:
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.enterprise.context.SessionScoped;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.event.AjaxBehaviorEvent;
import javax.inject.Named;
import org.primefaces.event.ToggleEvent;
import org.primefaces.model.Visibility;
#Named
#SessionScoped
public class Bean implements Serializable {
List<CarBrand> brands;
#PostConstruct
private void init() {
brands = new ArrayList<>();
List<CarModel> carModels;
carModels = new ArrayList<>();
carModels.add(new CarModel("CL 63 AMG", 2011, 1));
carModels.add(new CarModel("S-Class Coupe", 2014, 2));
carModels.add(new CarModel("AMG GTS", 2015, 3));
brands.add(new CarBrand("Mercedes", carModels));
carModels = new ArrayList<>();
carModels.add(new CarModel("M5 F10", 2012, 4));
carModels.add(new CarModel("M6 F13", 2012, 5));
carModels.add(new CarModel("X5 M", 2015, 6));
brands.add(new CarBrand("BMW", carModels));
carModels = new ArrayList<>();
carModels.add(new CarModel("Polo", 2012, 7));
carModels.add(new CarModel("Golf GTI", 2013, 8));
carModels.add(new CarModel("Golf R", 2015, 9));
brands.add(new CarBrand("Volkswagen", carModels));
}
public void onRowToggle(AjaxBehaviorEvent event) {
ToggleEvent toggleEvent = (ToggleEvent) event;
FacesMessage msg;
if (toggleEvent.getVisibility() == Visibility.VISIBLE) {
msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Toggled", "Visibility:" + toggleEvent.getVisibility());
} else {
msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Untoggled", "Visibility:" + toggleEvent.getVisibility());
}
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public List<CarBrand> getBrands() {
return brands;
}
}
and .xhtml
<!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">
<f:view>
<h:head>
<title>TEST</title>
</h:head>
<h:body>
<h:form id="testForm" prependId="true">
<p:growl id="growl"/>
<p:dataTable id="carsTable" value="#{bean.brands}" var="brand" style="width: 400px">
<p:ajax event="rowToggle" listener="#{bean.onRowToggle}" update="testForm:growl"/>
<p:column style="width: 20px">
<p:rowToggler/>
</p:column>
<p:column headerText="Brand">
<b><h:outputText value="#{brand.brandName}"/></b>
</p:column>
<p:rowExpansion>
<p:dataTable id="modelsTable" value="#{brand.models}" var="model">
<p:column headerText="Model">
<h:outputText value="#{model.modelName}"/>
</p:column>
<p:column headerText="Year">
<h:outputText value="#{model.year}"/>
</p:column>
<p:column style="width: 20px">
<f:facet name="header">
<p:selectBooleanCheckbox id="selectAll" value="#{brand.selected}" rendered="#{not empty brand.models}">
<p:ajax/>
</p:selectBooleanCheckbox>
</f:facet>
<p:selectBooleanCheckbox id="modelSelect" value="#{model.selected}">
<p:ajax/>
</p:selectBooleanCheckbox>
</p:column>
</p:dataTable>
</p:rowExpansion>
</p:dataTable>
</h:form>
</h:body>
</f:view>
The problem is even worse than you mention. It is caused by the implementation of the toggle. If you see what is going on in the DOM, the expanded items get removed completely. When you toggle it back, the object are re-rendered.
For some reason text values are preserved, but the checkboxes get reverted to their original value.
The situation is worth though. If you do not expand the expansion, then the not rendered elements are not submitted, which for checkboxes means their values are changed to "false" no matter what was their original value.
You have basically two options:
move checkboxes outside the expansion
store their value using Javascript outside their expanded area
I'm trying to put the currently iterated <p:dataTable var> as a property of a managed bean using <f:setPropertyActionListener>. However, it is always set as null.
The view, dentistas.xhtml:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<ui:composition template="/templates/template.xhtml">
<ui:define name="content">
<h:form id="formDentistas">
<p:growl autoUpdate="true" />
<p:commandButton icon="ui-icon-plus" value="Cadastrar"
id="cadastrar" oncomplete="dialogCadastrar.show()" />
<p:dataTable var="dentista" value="#{dentistaMB.dentistas}"
paginator="true" emptyMessage="Não foi encontrado nenhum registro"
rows="10" id="dataTableDentistas">
<f:facet name="header">Lista de Dentistas</f:facet>
<p:column headerText="Nome" sortBy="nome" filterBy="nome" id="nome"
width="200px">
#{dentista.pessoaFisica.nome}
</p:column>
<p:column headerText="Data Nascimento" sortBy="dataNascimento"
filterBy="dataNascimento" id="dataNascimento" width="60px">
#{dentista.pessoaFisica.dataNascimento}
</p:column>
<p:column headerText="CRO" sortBy="cro" filterBy="cro" id="cro"
width="60px">
#{dentista.cro}
</p:column>
<p:column headerText="Ações" style="width:50px;">
<p:commandButton value="Alterar" icon="ui-icon-pencil">
<f:setPropertyActionListener target="#{dentistaMB.selectedDentista}" value="#{dentista}" />
</p:commandButton>
<p:commandButton value="Remover" icon="ui-icon-trash"
actionListener="#{dentistaMB.deletar}">
<f:setPropertyActionListener target="#{dentistaMB.selectedDentista}" value="#{dentista}" />
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
<ui:include src="/tabelas/dialog_insert_dentista.xhtml" />
</ui:define>
</ui:composition>
</h:body>
</html>
The managed bean, DentistaMBImpl:
package br.com.odontonew.mb;
import java.util.List;
import java.util.Map;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;
import javax.faces.bean.SessionScoped;
import javax.faces.bean.ViewScoped;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.faces.convert.FacesConverter;
import javax.faces.event.ActionEvent;
import org.apache.log4j.Logger;
import org.primefaces.context.RequestContext;
import br.com.odontonew.bean.Dentista;
import br.com.odontonew.bean.EstadoCivil;
import br.com.odontonew.bean.PessoaFisica;
import br.com.odontonew.bean.Sexo;
import br.com.odontonew.bean.SituacaoPessoa;
import br.com.odontonew.bean.Uf;
import br.com.odontonew.bo.BasicBO;
import br.com.odontonew.exception.BOException;
#ManagedBean(name = "dentistaMB")
#ViewScoped
public class DentistaMBImpl extends BasicMBImpl {
private Logger logger = Logger.getLogger(DentistaMBImpl.class);
#ManagedProperty("#{dentistaBO}")
private BasicBO dentistaBO;
private Dentista dentista;
private Dentista selectedDentista;
private List<Dentista> dentistas;
// Lists
private List<EstadoCivil> estadosCivis;
private List<SituacaoPessoa> situacoesPessoa;
private List<Sexo> sexos;
private List<Uf> ufs;
#PostConstruct
public void init() {
dentista = new Dentista();
dentista.setPessoaFisica(new PessoaFisica());
dentista.getPessoaFisica().setSexo(new Sexo());
dentista.getPessoaFisica().setEstadoCivil(new EstadoCivil());
dentista.getPessoaFisica().setSituacao(new SituacaoPessoa());
dentista.getPessoaFisica().setUf(new Uf());
estadosCivis = (List<EstadoCivil>) dentistaBO
.findByNamedQuery(EstadoCivil.FIND_ALL);
situacoesPessoa = (List<SituacaoPessoa>) dentistaBO
.findByNamedQuery(SituacaoPessoa.FIND_ALL);
sexos = (List<Sexo>) dentistaBO.findByNamedQuery(Sexo.FIND_ALL);
ufs = (List<Uf>) dentistaBO.findByNamedQuery(Uf.FIND_ALL);
}
public void salvar(ActionEvent event) {
try {
dentista = (Dentista) dentistaBO.save(dentista);
addInfoMessage("Dentista salvo com sucesso");
RequestContext.getCurrentInstance().execute(
"dialogCadastrar.hide()");
} catch (BOException e) {
addErrorMessage(e.getMessage());
}
}
public void atualizar(ActionEvent event) {
try {
dentistaBO.update(selectedDentista);
addInfoMessage("Dentista atualizado com sucesso");
} catch (BOException e) {
addErrorMessage(e.getMessage());
}
}
public void deletar(ActionEvent event) {
try {
dentistaBO.delete(selectedDentista);
addInfoMessage("Dentista deletado com sucesso");
} catch (BOException e) {
addErrorMessage(e.getMessage());
}
}
public List<Dentista> getDentistas() {
try {
if (dentistas == null)
dentistas = (List<Dentista>) dentistaBO
.findByNamedQuery(Dentista.FIND_ALL_COMPLETO);
return dentistas;
} catch (BOException e) {
addErrorMessage(e.getMessage());
return null;
}
}
/* gets and sets */
public Dentista getSelectedDentista() {
return selectedDentista;
}
public void setSelectedDentista(Dentista selectedDentista) {
this.selectedDentista = selectedDentista;
}
public Dentista getDentista() {
return dentista;
}
public void setDentista(Dentista dentista) {
this.dentista = dentista;
}
public Logger getLogger() {
return logger;
}
public void setLogger(Logger logger) {
this.logger = logger;
}
public List<EstadoCivil> getEstadosCivis() {
return estadosCivis;
}
public void setEstadosCivis(List<EstadoCivil> estadosCivis) {
this.estadosCivis = estadosCivis;
}
public List<SituacaoPessoa> getSituacoesPessoa() {
return situacoesPessoa;
}
public void setSituacoesPessoa(List<SituacaoPessoa> situacoesPessoa) {
this.situacoesPessoa = situacoesPessoa;
}
public List<Sexo> getSexos() {
return sexos;
}
public void setSexos(List<Sexo> sexos) {
this.sexos = sexos;
}
public void setDentistas(List<Dentista> dentistas) {
this.dentistas = dentistas;
}
public List<Uf> getUfs() {
return ufs;
}
public void setUfs(List<Uf> ufs) {
this.ufs = ufs;
}
public BasicBO getDentistaBO() {
return dentistaBO;
}
public void setDentistaBO(BasicBO dentistaBO) {
this.dentistaBO = dentistaBO;
}
}
Here,
<p:commandButton value="Remover" icon="ui-icon-trash"
actionListener="#{dentistaMB.deletar}">
<f:setPropertyActionListener target="#{dentistaMB.selectedDentista}" value="#{dentista}" />
</p:commandButton>
you're performing the delete in an actionListener method instead of an action method. This is not right. Business actions should be performed in the action method. All action listeners, including the <f:setPropertyActionListener>, are invoked before action method in the very same order as they are declared and assigned on the command component. So, in effects, the delete is first invoked and then the property is set. That explains why the property is null during the delete.
The fix is simple: make it a real action method:
<p:commandButton value="Remover" icon="ui-icon-trash"
action="#{dentistaMB.deletar}">
<f:setPropertyActionListener target="#{dentistaMB.selectedDentista}" value="#{dentista}" />
</p:commandButton>
Don't forget to remove the ActionEvent argument:
public void deletar() {
// ...
}
See also:
Differences between action and actionListener
Unrelated to the concrete problem, if you happen to target a Servlet 3.0 / EL 2.2 compatible container, then you can even get rid of that <f:setPropertyActionListener> altogether:
<p:commandButton value="Remover" icon="ui-icon-trash"
action="#{dentistaMB.deletar(dentista)}" />
With:
public void deletar(Dentista selectedDentista) {
// ...
}
See also point 3 of How can I pass selected row to commandLink inside dataTable?