In my application I need to decide selection mode dynamically either 'single' or 'multiple' for datatable (I'm using primefaces 5.0) and depends on that selection assigned. Below are the el expressions i have binded.
XHTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:cc="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<h:head>
<title>Primefaces Data Table</title>
<script type="text/javascript" src="Test.js"/>
</h:head>
<h:body>
<h:form id="form">
<p:growl id="msgs" showDetail="true" />
<p:dataTable id="T" var="car" widgetVar="T_wv" value="#{ECTestScreen.cars}" selectionMode="#{ECTestScreen.selectionMode}" selection="#{ECTestScreen.selectionMode ne 'multiple'? ECTestScreen.selectedCar :ECTestScreen.selectedCars}" rowKey="#{car.id}" paginator="true" rows="5" paginatorAlwaysVisible="true">
<f:facet name="header">
Row Selection on Click
</f:facet>
<p:column headerText="Car Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<p:inputTextarea id="ta" rows="10" cols="30" style="height: 22px; overflow:auto;" value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:inputText value="#{car.color}" onmouseup="onCellFocus1(event, $(this).parent(), [{name: 'screenletId', value: 'T'}, {name: 'rowIndex', value: '5'}, {name: 'colName', value: 'Color'}]);"/>
</p:column>
<p:ajax event="rowSelect" listener="#{ECTestScreen.onRowSelect}" update=":form:msgs" />
</p:dataTable>
<p:commandButton value="Update Table" actionListener="#{ECTestScreen.onButtonClick}"/>
</h:form>
</h:body>
</html>
Java code:
#ManagedBean(name = "ECTestScreen")
#ViewScoped
public class ECTestScreen implements Serializable {
private static final long serialVersionUID = -855625904411046273L;
private List<String> products = new ArrayList<>();
private List<Integer> rowList = new ArrayList<>();
private List<Car> cars = new ArrayList<>();
private Car selectedCar ;
private List<Car> selectedCars = new ArrayList<>();
private String selectionMode="multiple";
public List<Integer> getRowList() {
return rowList;
}
public void setRowList(List<Integer> rowList) {
this.rowList = rowList;
}
public List<String> getProducts() {
return products;
}
public void setProducts(List<String> products) {
this.products = products;
}
public List<Car> getCars() {
for(int j=1; j<10;j++){
this.cars.add(new Car(j, (2000+j), "Merc-"+j, "Black-"+j));
}
return cars;
}
public void setCars(List<Car> cars) {
this.cars = cars;
}
public Car getSelectedCar() {
return selectedCar;
}
public void setSelectedCar(Car selectedCar) {
this.selectedCar = selectedCar;
}
public List<Car> getSelectedCars() {
FacesContext.getCurrentInstance().getPartialViewContext().getRenderIds().add("form");
return selectedCars;
}
public void setSelectedCars(List<Car> selectedCars) {
this.selectedCars = selectedCars;
}
public String onButtonClick(){
for(int i=1; i<6; i++){
rowList.add(i);
}
for(int j=1; j<4;j++){
products.add("td="+j);
}
for(int j=1; j<10;j++){
cars.add(new Car(j, (2000+j), "Merc-"+j, "Black-"+j));
}
FacesContext.getCurrentInstance().getPartialViewContext().getRenderIds().add("form");
return "";
}
public String getSelectionMode(){
return selectionMode;
}
public void setSelectionMode(String selectionMode){
selectionMode="multiple";
}
public void onRowSelect(SelectEvent event) {
FacesMessage msg = new FacesMessage("Car Selected: ", ((Car) event.getObject()).getBrand());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onRowUnselect(UnselectEvent event) {
FacesMessage msg = new FacesMessage("Car Unselected: ", ((Car) event.getObject()).getBrand());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
Now the problem is if i assign selectionMode to either single or multiple through el or hardcoding and for selection if i point to only one function(either #{ECTestScreen.selectedCar} or #{ECTestScreen.selectedCars)) it works fine. But using above code if i decide selection mode dynamically either single or multiple depends on that if i add selection through above el the data table selection is not working means when selecting the row the setter is not at all called. and of course pagination also not working. it always stays in first page.
actually in case of single selection expects a single object where as in multiple selection list/array of objects...how to club these two..
Please help..
Primefaces version 5.0
I don't really know why you would make that distinction, since a multiselection dataTable should also cover the single selection requirements.
But if you insist, then i would probably make 2 dataTables - one single and one multiple selection and make them "rendered" based on a boolean.
selectedCars must be an array, not a List. The showcase presents example with a List, but it's not working that way.
Related
I've got a datatable along with sort, filter and columntoggler.
Firstly, when I select and unselect a column in the same page everything is fine.
As you can see, my first column has disappeared
My problem here is when I go to the next page with pagination tool and if I want to unselect a column, it displays only the column header and not their rows as you can see below :
The initial hidden column is now displayed but we've got a gap. The last column is right now empty and the first one take the value to the second column.
This is my datatable structure :
<p:dataTable id="datatable" var="mon" value="#{X.resultQuery}"
first="#{dataTableController.first}"
resizableColumns="true"
rows="20"
paginator="true"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="30,40,50"
draggableColumns="true"
paginatorPosition="bottom"
selectionMode="single" rowKey="#{mon[4]}"
>
<f:facet name="header">
<p:commandButton id="toggler" type="button" value="Hide Columns" icon="ui-icon-calculator" />
<p:columnToggler datasource="datatable" trigger="toggler">
<p:ajax event="toggle" listener="#{columnTogglerController.onToggle}" />
</p:columnToggler>
</f:facet>
This is my ColumnTogglerController :
public class ColumnTogglerController implements Serializable {
private List<Boolean> list;
/**
* Creates a new instance of ColumnTogglerController
*/
public ColumnTogglerController() {
}
public List<Boolean> getList() {
return list;
}
public void setList(List<Boolean> list) {
this.list = list;
}
#PostConstruct
public void init() {
setList(Arrays.asList(true, true, true, true, true, true, true, true, true, true, true));
}
public void onToggle(ToggleEvent e) {
list.set((Integer) e.getData(), e.getVisibility() == Visibility.VISIBLE);
}
}
Basically my program is based on this blog :
http://blog.primefaces.org/?p=3341
Thanks for you help.
I happen to encounter this recently. The blog actually works. The problem is draggableColumns="true" makes the index of columns change. So, instead of list I used 2 maps:
private final Map<String, Boolean> colVisibilityMap = new HashMap<>();
private final Map<Integer, String> colIndexMap = new HashMap<>();
During initialization, I set the colIndexMap and the colVisibilityMap (and I used the id/clientId as the key).
On column reorder, I update the colIndexMap.
And on toggle, I update the colVisibilityMap base on colIndexMap.
public Map<String, Boolean> getColVisibilityMap() {
return Collections.unmodifiableMap(colVisibilityMap);
}
private String getColumnId(String fullId) {
String[] idParts = fullId.split(":");
return idParts[idParts.length - 1];
}
#PostConstruct
public void init() {
FacesContext context = FacesContext.getCurrentInstance();
DataTable table = (DataTable) context.getViewRoot().findComponent(":form:tableid");
List<UIColumn> columns = table.getColumns();
for (int i = 0; i < columns.size(); i++) {
final String columnId = this.getColumnId(columns.get(i).getClientId());
colIndexMap.put(i, columnId);
colVisibilityMap.put(columnId, true);
});
}
public void onColumnReorder(AjaxBehaviorEvent e) {
List<UIColumn> columns = ((DataTable) e.getSource()).getColumns();
for (int i = 0; i < columns.size(); i++) {
this.colIndexMap.put(i, this.getColumnId(columns.get(i).getClientId()));
}
}
public void onToggle(ToggleEvent e) {
// If we use list here, e.getData() may not be the correct index due to column reordering.
this.colVisibilityMap.put(this.colIndexMap.get((Integer) e.getData()), e.getVisibility() == Visibility.VISIBLE);
}
Here is the code on my JSF page:
<p:dataTable id="tableid" widgetVar="tableWidgetVar" draggableColumns="true" paginator="true"
<!-- ommitted other attributes -->
>
<p:ajax event="colReorder" listener="#{bean.onColumnReorder}"/>
<f:facet name="header">
<p:commandButton id="toggler" type="button" value="Columns"/>
<p:columnToggler datasource="tableid" trigger="toggler">
<p:ajax event="toggle" listener="#{bean.onToggle}"/>
</p:columnToggler>
</f:facet>
<p:column id="col1" visible="#{bean.colVisibilityMap['col1']}">
<!-- ommitted -->
</p:column>
<p:column id="col2" visible="#{bean.colVisibilityMap['col2']}">
<!-- ommitted -->
</p:column>
<!-- and so on... -->
</p:dataTable>
Need some help to know if my solution is valid or not.
I have a primefaces datatable with single row selection, and I need to add a multiple selection checkbox column... My idea is to switch selection mode clicking on one button, that switch the selection mode from single to multiple and vice versa....
<pf:dataTable
value="${bean.notifications}"
var="notif"
selection="#{bean.isMultiple() ? consulterCorbeilleBean.selectedNotifs : consulterCorbeilleBean.selectedNotif}"
selectionMode="#{not bean.isMultiple() ? 'single' : ''}"
rowKey="${notification.cle.idNotification}">
<pf:ajax event="rowSelect" disabled="${bean.isMultiple()}"
listener="${bean.function()}" update=":table:notificationTable"
oncomplete="stopPropagationClick()" />
<pf:column selectionMode="multiple" rendered="#{bean.isMultiple()}"/>
</pf:dataTable>
I have a problem with the selection binding. I have this error :
Illegal Syntax for Set Operation:
javax.el.PropertyNotWritableException: /index.xhtml #114,50
selection="#{bean.isMultiple() ? bean.selectedNotifs :
bean.selectedNotif}"
Any idea to workaround ? I use Primefaces 3.2.
Best Regards and thanks for your help :)
You can't use dynamic setter values on the selection.
I would rethink the design if i were you, but if you really need both single and multiple selection options on the same table, you could use 2 datatables and render only 1 of them at a time, and switch between them with a button click.
If you really need it, then you can try this work example
View
<h:form id="form">
<p:growl id="msgs" showDetail="true" for="basicDT" />
<p:inputSwitch value="#{dtSelectionView.multiple}">
<p:ajax listener="#{dtSelectionView.addMessage}" update="basicDT, msgs" />
</p:inputSwitch>
<p:dataTable
id="basicDT"
var="car"
value="#{dtSelectionView.cars1}"
rowStyleClass="#{dtSelectionView.checkSelection(car)? 'ui-state-highlight':''}"
>
<f:facet name="header">
DoubleSelect
</f:facet>
<p:column style="width:32px">
<p:commandButton update="basicDT,:form:msgs,:form:carDetail,:form:multiCarDetail" icon="ui-icon-check" actionListener="#{dtSelectionView.addSelection(car)}" />
</p:column>
<p:column headerText="Id">
<h:outputText value="#{car.id}" />
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:column headerText="Brand">
<h:outputText value="#{car.brand}" />
</p:column>
<p:column headerText="Color">
<h:outputText value="#{car.color}" />
</p:column>
</p:dataTable>
<p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" closeOnEscape="true">
<p:outputPanel id="carDetail" style="text-align:center;">
<p:panelGrid columns="2" rendered="#{not empty dtSelectionView.selectedCar}" columnClasses="label,value">
<h:outputText value="Id:" />
<h:outputText value="#{dtSelectionView.selectedCar.id}" />
<h:outputText value="Year" />
<h:outputText value="#{dtSelectionView.selectedCar.year}" />
<h:outputText value="Color:" />
<h:outputText value="#{dtSelectionView.selectedCar.color}" style="color:#{dtSelectionView.selectedCar.color}"/>
<h:outputText value="Price" />
<h:outputText value="$#{dtSelectionView.selectedCar.price}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
<p:dialog header="Selected Cars" widgetVar="multiCarDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" width="200">
<p:outputPanel id="multiCarDetail" style="text-align:center;">
<ui:repeat value="#{dtSelectionView.selectedCars}" var="car">
<h:outputText value="#{car.id} - #{car.brand}" style="display:block"/>
</ui:repeat>
</p:outputPanel>
</p:dialog>
</h:form>
Model
import java.io.Serializable;
public class Car implements Serializable{
private String Id;
private String Brand;
private int Year;
private String Color;
private int Price;
private boolean SoldState;
public Car(String id, String brand, int year, String color, int price,
boolean soldState) {
super();
Id = id;
Brand = brand;
Year = year;
Color = color;
Price = price;
SoldState = soldState;
}
#Override
public boolean equals(Object o){
if(o == null) return false;
if(!(o instanceof Car)) return false;
Car other = (Car) o;
if(! this.Id.equals(other.Id)) return false;
if(! this.Brand.equals(other.Brand)) return false;
if(this.Year != other.Year) return false;
if(! this.Color.equals(other.Color)) return false;
if(this.Price != other.Price) return false;
if(this.SoldState != other.SoldState) return false;
return true;
}
#Override
public int hashCode(){
return (int) Id.hashCode() *
Brand.hashCode() *
Year *
Color.hashCode() *
Price *
(SoldState ? 31 : 32)
;
}
/** getters/setters */
}
Bean
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import org.primefaces.context.RequestContext;
import org.primefaces.event.SelectEvent;
import org.primefaces.event.UnselectEvent;
#ManagedBean(name="dtSelectionView")
#ViewScoped
public class SelectionView implements Serializable {
private List<Car> cars1;
private Car selectedCar;
private List<Car> selectedCars;
private boolean multiple= false;
#ManagedProperty("#{carService}")
private CarService service;
#PostConstruct
public void init() {
cars1 = service.createCars(10);/** random generated List. See PF showcase, datatable examples*/
selectedCars = new ArrayList<Car>();
}
public boolean checkSelection(Car car){
if(isMultiple())
return selectedCars.contains(car) ? true : false;
else
return car.equals(selectedCar) ? true : false;
}
public void addSelection(Car car){
String summary = "Car was ";
if(isMultiple())
if(selectedCars.contains(car)){
selectedCars.remove(car);
summary += "removed from list.";
}
else{
selectedCars.add(car);
summary += "added to list.";
RequestContext.getCurrentInstance().execute("PF('multiCarDialog').show();");
}
else
if(car.equals(selectedCar)){
selectedCar = null;
summary += "unselected.";
}
else{
selectedCar = car;
summary += "selected.";
RequestContext.getCurrentInstance().execute("PF('carDialog').show();");
}
FacesContext.getCurrentInstance().addMessage("basicDT", new FacesMessage(summary));
}
public void setService(CarService service) {
this.service = service;
}
public Car getSelectedCar() {
return selectedCar;
}
public List<Car> getSelectedCars() {
return selectedCars;
}
public void onRowSelect(SelectEvent event) {
FacesMessage msg = new FacesMessage("Car Selected", ((Car) event.getObject()).getId());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onRowUnselect(UnselectEvent event) {
FacesMessage msg = new FacesMessage("Car Unselected", ((Car) event.getObject()).getId());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void addMessage() {
selectedCar = null;
selectedCars = new ArrayList<Car>();
String summary = multiple ? "Checked" : "Unchecked";
FacesContext.getCurrentInstance().addMessage("basicDT", new FacesMessage(summary));
}
public List<Car> getCars1() {
return cars1;
}
public void setCars1(List<Car> cars1) {
this.cars1 = cars1;
}
public CarService getService() {
return service;
}
public boolean isMultiple() {
return multiple;
}
public void setMultiple(boolean multiple) {
this.multiple = multiple;
}
}
Hope You'll in right direction.
I'm using PrimeFace4.0, JSF 2.2, Java, and XHTML. I have a string value that I need to pass from one bean to another. The value is selected on one XHTML page and when the user clicks to select, a new web page is launched. I can see from my server output that the value is successfully collected by the first bean (TestSelectBean), but I can't seem to get it into the next bean (TargetBeanFranz). When a String is hard coded into the bean, it works correctly. However, when I try to use the managed property to call it as per the user input, I get a NullPointer at the line of code (85) where I'm trying to use it.
The first HTML: testselect.xhtml
//irrelevant code
<p:layoutUnit position="center">
<h:form>
<p:selectOneRadio id="Test" value="#{testSelectBean.selectedNameOfExperiments}" >
<f:selectItems id="selectedNameOfExperiments" value="#{testSelectBean.nameofexperiments}" var="entry" itemValue="#{entry.key}" itemLabel="#{entry.value}" />
</p:selectOneRadio>
<p:commandLink id="nonAjax" action="open" actionListener="#{testSelectBean.getParameters}" style="margin-right:20px;" ajax="false">
<h:outputText value="Submit" />
</p:commandLink>
</h:form>
</p:layoutUnit>
The user chosen selectedNameOfExperiments is succsefully passed to TestSelectBean:
#ManagedBean(name = "testSelectBean", eager = true)
#SessionScoped
public class TestSelectBean implements Serializable {
private static final long serialVersionUID = 1L;
protected String selectedNameOfExperiments;
private final Map<String, String> nameofexperiments;
private transient String selected;
public TestSelectBean() throws SQLException {
selected = new String();
nameofexperiments = new HashMap<String, String>();
XYexpdataServiceAdapter xydata = new XYexpdataServiceAdapterImpl();
List<String> dbnameofexperiments = xydata.getNameofexperiments();
for (String ta : dbnameofexperiments) {
nameofexperiments.put(ta, ta);
}
}
public String getSelectedNameOfExperiments() {
return selectedNameOfExperiments;
}
public void setSelectedNameOfExperiments(String selectedNameOfExperiments1) {
this.selectedNameOfExperiments = selectedNameOfExperiments1;
}
public Map<String, String> getNameofexperiments() {
return nameofexperiments;
}
public void getParameters() {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've selected Experiment:" + selectedNameOfExperiments));
System.out.println("You've selected Experiment:" + selectedNameOfExperiments);
}
}
However, the XHTML FranzwPopup will not launch unless Experiment is hard coded into TargetBeanFranz.
//irrelevant code
<p:layoutUnit position="center">
<p:panelGrid columns="2" style=" font-size: 14">
<h:outputLabel value="Description" style="font-size: 20"/>
<h:outputText value="Neutron-induced production of protons, deuterons and tritons in Copper and Bismuth."/>
<h:outputLabel value="Reference" style="font-size: 20"/>
<h:outputText value="Nuclear Physics A510 (1990) 774-802 (Franz, et. al.)"/>
</p:panelGrid>
<form action="http://localhost:8080/primefaces/faces/handle.xhtml" method="get" name="login" onsubmit="process();
return false;" style="overflow-y: scroll">
Click to display chart data in a table.<br />
<input type="submit" value="Display"/>
</form>
<h:form>
<h:panelGrid columns="4" cellpadding="5">
<p:selectCheckboxMenu id="menu1" value="#{targetBeantFranz.selectedTargets}" label="Targets" filter="true" filterMatchMode="startsWith"
panelStyle="width:220px">
<f:selectItems value="#{targetBeantFranz.targets}" />
</p:selectCheckboxMenu>
<p:selectCheckboxMenu id="menu2" value="#{targetBeantFranz.selectedSecondaries}" label="Secondaries" filter="true" filterMatchMode="startsWith"
panelStyle="width:220px">
<f:selectItems value="#{targetBeantFranz.secondaries}" />
</p:selectCheckboxMenu>
<p:selectCheckboxMenu id="menu3" value="#{targetBeantFranz.selectedReactions}" label="Reactions" filter="true" filterMatchMode="startsWith"
panelStyle="width:220px">
<f:selectItems value="#{targetBeantFranz.reactions}" />
</p:selectCheckboxMenu>
<p:selectCheckboxMenu id="menu4" value="#{targetBeantFranz.selectedBeamEnergies}" label="Beam Energy" filter="true" filterMatchMode="startsWith"
panelStyle="width:220px">
<f:selectItems value="#{targetBeantFranz.beamenergies}" />
</p:selectCheckboxMenu>
</h:panelGrid>
<p:panel header="Resulting Plots">
<p:commandLink id="nonAjax" actionListener="#{targetBeantFranz.getParameters}" style="margin-right:20px;" ajax="false">
<button id="change">Submit Query</button>
</p:commandLink>
<div id="container" style="min-width: 310px; margin: 0 auto"></div>
</p:panel>
</h:form>
</p:layoutUnit>
//more irrelevant
Instead, I get a NPE on line 85 of TargetBeanFranz where I try to initialize Experiment.
//stuff
#ManagedBean(name = "targetBeantFranz", eager = true)
#SessionScoped
public class TargetBeanFranz implements Serializable {
#ManagedProperty(value="#{testSelectBean}")
private TestSelectBean testSelectBean;
public TestSelectBean getTestSelectBean(){
return testSelectBean;
}
public void setTestSelectBean (TestSelectBean testSelectBean) {
this.testSelectBean = testSelectBean;
}
private static final long serialVersionUID = 1L;
private String Experiment;
//more stuff
public TargetBeanFranz() throws SQLException {
targets = new HashMap<String, String>();
selectedTargets = new ArrayList<String>();
secondaries = new HashMap<String, String>();
selectedSecondaries = new ArrayList<String>();
reactions = new HashMap<String, String>();
selectedReactions = new ArrayList<String>();
beamenergies = new HashMap<String, String>();
selectedBeamEnergies = new ArrayList<String>();
seriesDataArray = new ArrayList<String>();
seriesDataArArray = new ArrayList<ArrayList<String>>();
seriesNameArray = new ArrayList<String>();
seriesToolTipArray = new ArrayList<String>();
seriesErrorArray = new ArrayList<String>();
seriesErrorArArray = new ArrayList<ArrayList<String>>();
allselected = new ArrayList<XYexpdata>();
Experiment = testSelectBean.getSelectedNameOfExperiments(); //This is line 85 and where I'm getting the NPE.
XYexpdataServiceAdapter xydata = new XYexpdataServiceAdapterImpl();
List<String> dbtargets = xydata.getTargetNamesbyExperiment(Experiment);
for (String ta : dbtargets) {
targets.put(ta, ta);
}
List<String> dbsecondaries = xydata.getSecondaryNamesbyExperiment(Experiment);
for (String ta : dbsecondaries) {
secondaries.put(ta, ta);
}
List<String> dbreactions = xydata.getReactionNamesbyExperiment(Experiment);
for (String ta : dbreactions) {
reactions.put(ta, ta);
}
List<String> dbbeamenergies = xydata.getBeamEnergybyExperiment(Experiment);
for (String ta : dbbeamenergies) {
beamenergies.put(ta, ta);
}
}
//more code
I think the reason for your problem is, that the signature of the action listener in your command link does not match.
The method in the bean has to be of the following type:
public void getParameters(javax.faces.ActionEvent event) {
.....
}
If you are using Java EE 7 you should also avoid the annotations in the package javax.faces.bean, since they are abandoned. Use CDI beans, it makes life easier:
#Named
#SessionScoped
public class TestSelectBean {
...
}
#Named
#SessionScoped
public class TargetBeanFranz {
#Inject
private TestSelectBean testSelectBean;
....
}
See more about the CDI topic here: Backing beans (#ManagedBean) or CDI Beans (#Named)?
I want to develop a JSF Page which lets user edit a Employee from database. I loaded list of all employees in h:selectOneMenu. and second thing i want that with valueChangeEvent employee detail should be loaded in corresponding h:inputText. but nothing happens with every valueChangeEvent. So, where is the problem in codes.
<?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://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<div id="hdr">
<h1>Vinweb Services</h1>
<hr/>
</div>
;
<div id="mnu" style="height: 50px; width: auto; background: skyblue;">
<h:form>
<h:commandLink value="Home" action="index"/>
<h:outputText value=" "/>
<h:commandLink value="Create" action="create"/>
<h:outputText value=" "/>
<h:commandLink value="View" action="view"/>
<h:outputText value=" "/>
<h:commandLink value="Edit" action="edit"/>
</h:form>
</div>
<div id="cnt">
<h:form>
<h:panelGrid columns="2">
<h:outputLabel value="Select an Employee"/>
<h:selectOneMenu value="#{esb.empName}" onchange="submit()" valueChangeListener="#{esb.loadEmployeeDetail}">
<f:selectItems value="#{esb.employeeList}"/>
</h:selectOneMenu>
<h:outputLabel value="Employee Code"/>
<h:inputText value="#{esb.empCode}" required="true"/>
<h:outputLabel value="Employee Name"/>
<h:inputText value="#{esb.empName}" required="true"/>
<h:outputLabel value="Joining Date"/>
<h:inputText value="#{esb.joinDate}" required="true">
<f:convertDateTime pattern="MM/yy"/>
</h:inputText>
<h:outputLabel value="Salary"/>
<h:inputText value="#{esb.salary}" required="true"/>
<h:commandButton value="Update" action="#{esb.updateEmployeeDetail}"/>
</h:panelGrid>
</h:form>
</div>
</h:body>
</html>
Backing Bean:
package ems.bean;
import javax.inject.Named;
import javax.enterprise.context.SessionScoped;
import java.io.Serializable;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.Date;
import javax.annotation.Resource;
import javax.faces.event.ValueChangeEvent;
import javax.sql.DataSource;
#Named(value = "esb")
#SessionScoped
public class EmployeeServiceBean implements Serializable {
#Resource(name = "JPA4A")
private DataSource ds;
// Member Declaration
private String empCode;
private String empName;
private Date joinDate;
private long salary;
private ArrayList empList;
// Service Code Segment
// This method will publish all emloyees in table to selectOneMenu
public ArrayList getEmployeeList() throws SQLException{
empList = new ArrayList();
Connection con = ds.getConnection();
try{
Statement stmt = con.createStatement();
ResultSet rslt = stmt.executeQuery("SELECT empName FROM Employee");
while(rslt.next()){
empList.add(rslt.getString("empName"));
}
}
catch(SQLException se) {
throw new SQLException();
}
finally{
con.close();
}
return empList;
}
// This method should load selected empoyee's details in inputText fields
public void loadEmployeeDetail(ValueChangeEvent evt) throws SQLException{
String emp = evt.getNewValue().toString();
Connection con = ds.getConnection();
try{
Statement stmt = con.createStatement();
String qry = "SELECT * FROM Employee WHERE empName = '"+emp+"'";
ResultSet rslt = stmt.executeQuery(qry);
rslt.next();
this.empCode = rslt.getString("empCode");
this.empName = rslt.getString("empName");
this.joinDate = rslt.getDate("joinDate");
this.salary = rslt.getLong("salary");
}
catch(SQLException se) {
se.printStackTrace();
}
finally{
con.close();
}
}
public void updateEmployeeDetail() throws SQLException{
Connection con = ds.getConnection();
try{
Statement stmt = con.createStatement();
boolean rs = stmt.execute("UPDATE Employee SET empCode='"+empCode+"', empName='"+empName+"', joinDate='"+joinDate+"', salary="+salary);
}
catch(SQLException se) {
throw new SQLException();
}
finally{
con.close();
}
}
// Property Getter & Setter code segment
public String getEmpCode() {
return empCode;
}
public void setEmpCode(String empCode) {
this.empCode = empCode;
}
public String getEmpName() {
return empName;
}
public void setEmpName(String empName) {
this.empName = empName;
}
public Date getJoinDate() {
return joinDate;
}
public void setJoinDate(Date joinDate) {
this.joinDate = joinDate;
}
public long getSalary() {
return salary;
}
public void setSalary(long salary) {
this.salary = salary;
}
}
The valueChangeListener is the wrong tool for the job.
You're here doing a onchange="submit()" which submits the entire form, including those required fields which in turn caused validation errors which in turn failed to reach your attention because you don't have any <h:message(s)> for them. If you have placed a <h:messages/> inside the form, or have paid more love and attention to server logs, you should have been notified of those required="true" validation errors.
You need <f:ajax listener>.
Replace
<h:selectOneMenu value="#{esb.empName}" onchange="submit()" valueChangeListener="#{esb.loadEmployeeDetail}">
<f:selectItems value="#{esb.employeeList}"/>
</h:selectOneMenu>
by
<h:selectOneMenu value="#{esb.empName}">
<f:selectItems value="#{esb.employeeList}"/>
<f:ajax listener="#{esb.loadEmployeeDetail}" render="#form" />
</h:selectOneMenu>
and replace
public void loadEmployeeDetail(ValueChangeEvent evt) throws SQLException{
String emp = evt.getNewValue().toString();
// ...
}
by
public void loadEmployeeDetail() throws SQLException{
String emp = empName; // You can also just use `empName` directly.
// ...
}
See also:
When to use valueChangeListener or f:ajax listener?
i am new on prime faces .I have a user with some attribute i have shown the table of user data . Now the requirement is that, on click of particular user row the data associated with that user must be shown on same window under the table please tell the way to do this i m trying to use layout but the problem is how i can get the data on same window .Give me learing site link if possible doing the same thing or tell me the procedure thanks
package com.poc.faces;
import java.util.Collection;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import org.primefaces.event.SelectEvent;
import org.primefaces.event.UnselectEvent;
#ManagedBean
#ViewScoped
public class UserManagedBean {
UserService service = new UserService();
private String username;
private String password;
private String searchUser;
private Collection<User> searchUsersResults;
private User selectedUser;
public UserService getService() {
return service;
}
public void setService(UserService service) {
this.service = service;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getSearchUser() {
return searchUser;
}
public void setSearchUser(String searchUser) {
this.searchUser = searchUser;
}
public Collection<User> getSearchUsersResults() {
return searchUsersResults = service.getAllUser();
}
public void setSearchUsersResults(Collection<User> searchUsersResults) {
this.searchUsersResults = searchUsersResults;
}
public User getSelectedUser() {
return selectedUser;
}
public String login() {
if ("sas".equalsIgnoreCase(getUsername())
&& "sas".equals(getPassword())) {
return "home";
} else {
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage("username", new FacesMessage(
"Invalid UserName and Password"));
return "login";
}
}
public void setSelectedUser(User selectedUser) {
this.selectedUser = selectedUser;
}
public void onRowSelect(SelectEvent event) {
FacesMessage msg = new FacesMessage("User Selected",
((User) event.getObject()).getUsername());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public void onRowUnselect(UnselectEvent event) {
FacesMessage msg = new FacesMessage("Car Unselected",
((User) event.getObject()).getUsername());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
}
This home.xhtml
where i am getting the tabledata
<html xmlns="http://www.w3c.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:ui="http://java.sun.com/jsf/facelets">
<h:head>
<link href="../css/style.css" type="text/css" rel="stylesheet" />
</h:head>
<h:body>
<p:layout style="min-width:400px;min-height:200px;" id="layout">
<p:layoutUnit position="center">
<h:form prependId="false">
<h:panelGroup layout="block" id="left_column"
style="width: 2px; left: 2px; margin-left: 2px">
<center>
<H1>UserData</H1>
<br />
<p:dataTable value="#{userManagedBean.searchUsersResults}"
var="user" pagination="true" rows="5" styleClass="userTable"
headerClass="userTableHeader"
rowClasses="userTableOddRow,userTableEvenRow"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<!-- <p:ajax event="rowSelect" listener="#{userManagedBean.onRowSelect}"
update=":form:display :form:growl" oncomplete="carDialog.show()" />
<p:ajax event="rowUnselect"
listener="#{userManagedBean.onRowUnselect}" update=":form:growl" /> -->
<p:column>
<f:facet name="header">UserId</f:facet>
<h:outputText value="#{user.userId}"></h:outputText>
</p:column>
<p:column>
<f:facet name="header">Username</f:facet>
<h:outputText value="#{user.username}"></h:outputText>
</p:column>
<p:column>
<f:facet name="header">EmailId</f:facet>
<h:outputText value=" #{user.emailId}"></h:outputText>
</p:column>
<p:column>
<f:facet name="header">Phone</f:facet>
<h:outputText value=" #{user.phone}"></h:outputText>
</p:column>
</p:dataTable>
</center>
</h:panelGroup>
</h:form>
<p:layoutUnit position="west" resizable="true" size="100"
minSize="40" maxSize="200">
West
</p:layoutUnit>
</p:layout>
</h:body>
</html>
I don't think there is a component of PF called layoutUnit. are you sure it's not layout?