Grouping in PrimeFaces selectCheckboxMenu? - primefaces

Is there a way to apply grouping (similar to p:selectOneMenu) on p:selectCheckboxMenu?
I've tried following to add grouping to p:selectCheckboxMenu:
TestBean.java
#ManagedBean
#ViewScoped
public class TestBean {
List<SelectItem> items;
String selectedItem;
List<String> selectedItems;
#PostConstruct
public void init() {
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")});
items = new ArrayList();
items.add(g1);
items.add(g2);
}
// getters and setters
}
test.xhtml
<h:form>
<p:selectCheckboxMenu label="Select Cars..." value="#{testBean.selectedItems}">
<f:selectItems value="#{testBean.items}" />
</p:selectCheckboxMenu>
</h:form>
But in the output it only displays German Cars and American Cars (the titles of SelectItemGroup objects) in the checkboxMenu

Related

Datatable filters not working after primefaces upgrade 8

Upgraded application from primefaces 5.3.6 to 8 version.Filters stop working in below data table.I didn't get any error in console.Looks like filters are not responding.Sorting working fine.
XHTML
<p:dataTable id="tableId1" var="v" paginator="true" value="dataModel"
rowKey="rowKey" selectionMode="single" rowIndexVar="rowIndexVar"
selection="selectedObj" widgetVar="wVar" filteredValue = "filteredResults"
lazy = "lazyLoadIndicator" filterDelay="1000">
<p:columns id="columnsId" value="#{columnsList}" var="column" sortBy="#{v[column.property1]}" filterBy="#{v[column.property1]}"
filterMatchMode="contains">
</p:columns>
</p:dataTable>
Java code:
private List<Model1> columnsList = new ArrayList<Model1>();
public class Model1 implements Serializable {
private String property1;
public Model1(String property) {
this.property1 = property;
}
public String getProperty1() {
return property1;
}
}

How to use LazyDataModel List in a selectOneMenu

I want to use a LazyDataModel List inside a SelectOneMenu, but the selectoneMenu doesn't show anything . this is my code
public void show() {
beneficiaries = new LazyDataModel<Fournisseur>() {
private static final long serialVersionUID = 1L;
private List<Fournisseur> list;
#Override
public List<Fournisseur> load(int first, int pageSize, String sortField, SortOrder sortOrder, Map<String,Object> filters){
list = service.getAll((String)filters.get("benef.intitule"),first, pageSize);
this.setRowCount(service.count((String)filters.get("benef.intitule")));
return list;
}
#Override
public Object getRowKey(Fournisseur obj) {
return obj.getCpt();
}
#Override
public Fournisseur getRowData(String rowKey) {
Fournisseur o=null;
if(rowKey != null) {
for (Fournisseur obj : list) {
if(rowKey == obj.getCpt()) {
o = obj;
}
}
return o;
}else {
return null;
}
}
};
}
this is my html code
<p:selectOneMenu id="beneficiary" value="#
{documentController.doc.beneficiary}" converter="#
{beneficiaryConverter}" panelStyle="width:160px" required="true" >
<f:selectItem itemLabel="Selectionner" itemValue="" />
<f:selectItems value="#{beneficiaryController.beneficiaries}"
var="beneficiary" itemLabel="#{beneficiary.intitule}" itemValue="#
{beneficiary}" />
</p:selectOneMenu>
i've tested the list out side the selectOneMenu and it's work fine.
You are using PrimeFaces and want to allow the user to select one out of very many options. As Melloware mentioned, LazyDataModel is ment for use with DataTable or other components that support pagination this way ( e.g. DataGrid)
For your use case p:autoComplete seemes to be the best way to go.
dropdown="true" makes it look like a selectOneMenu, and you can limit the number of items show using maxResults="5".
<p:autoComplete dropdown="true" maxResults="5" value="#{autoCompleteView.txt6}"
completeMethod="#{autoCompleteView.completeText}" />
You'll need to write a custom autoComplete method that finds matches for given user search input:
public List<String> completeText(String query) {
List<String> results = new ArrayList<String>();
// fill the result matching the query from user input
return results;
}

RowKey of DataTable is null when calling onCellEdit

I have a Primefaces 6.0 DataTable working with a LazyDataModel bean. After I changed to the lazy implementation, the cell edition stopped working.
The reason for that is whenever I call my onCellEdit method, and try to get the clicked row contents by calling event.getRowkey() , I get a null object.
As per Primefaces Documentation I'm have a rowKey attribute to bind the tuple with the bean value, but it doesn't seems to work.
EDIT: I can update the value now, but the dataTable doesn't reload the cell UiElement. To see the changes i have to F5 the page.
Here is my ata.xhtml DATATABLE(Sanitized)
<p:tabView id="tab" value="#{setorMB.listaSetor}" var="tabView"
activeIndex="#{ataGerencialMB.activeTabIndex}">
<p:ajax event="tabChange" listener="#{ataGerencialMB.onTabChange}"
update="tab ,formListagemCapacitacao" />
<p:tab title="#{tabView.sigla}">
<p:dataTable id="dtCapacitacao"
value="#{ataGerencialMB.lazyModelAtaGerencial}"
var="gerencial"
lazy="true"
paginator="true"
rows="#{Config.NUM_ROWS}"
currentPageReportTemplate="#{Config.CURRENT_PAGE_REPORT_TEMPLATE}"
paginatorTemplate="#{Config.PAGINATOR_TEMPLATE}"
rowsPerPageTemplate="#{Config.ROWS_PER_PAGE_TEMPLATE}"
sortBy="#{gerencial.idAta}"
sortOrder="ascending"
reflow="true"
editable="true"
editMode="cell"
rowKey="#{gerencial.idAta}">
<p:ajax event="cellEdit"
listener="#{ataGerencialMB.onCellEdit}" oncomplete="onCellEdit()"/>
<p:column>
<p:rowToggler/>
</p:column>
<p:column headerText="Tipo Assunto" >
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{gerencial.tipo}"
rendered="true" />
</f:facet>
<f:facet name="input">
<p:inputTextarea id="tipo"
value="#{gerencial.tipo}"
style="width:96%" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</p:tab>
</p:tabView>
Class that extends the LazyDataModel AtaGerencialLazyDataModel
public class AtaGerencialLazyDataModel extends LazyDataModel<AtaGerencialBean> {
AtaGerencialBusiness ataBusiness = new AtaGerencialBusiness();
Map<String, Object> customFilters = new HashMap<String, Object>();
private List<AtaGerencialBean> listaAtaGerencialBean = new ArrayList<AtaGerencialBean>();
public AtaGerencialLazyDataModel(){
this.setRowCount(ataBusiness.getAtaGerencialTotalCount(null));
}
public AtaGerencialLazyDataModel(SetorBean setor){
customFilters.put("setor", setor);
this.setRowCount(ataBusiness.getAtaGerencialTotalCount(customFilters));
}
#Override
public List<AtaGerencialBean> load(int first, int pageSize, String sortField,
SortOrder sortOrder, Map<String, Object> filters){
List<AtaGerencialBean> list = ataBusiness.fetchLazyAtaGerencial(first, pageSize, sortField, sortOrder, customFilters);
this.setRowCount(ataBusiness.getAtaGerencialTotalCount(customFilters));
setListaAtaGerencialBean(list);
setWrappedData(list);
return list;
}
#Override
public AtaGerencialBean getRowData(String rowKey){
try{
long id = Long.parseLong(rowKey);
for (AtaGerencialBean bean : listaAtaGerencialBean) {
if (bean.getIdAta() == id){
return bean;
}
}
}catch(Exception e){
System.out.println(e.getMessage());
}
return null;
}
#Override
public Object getRowKey(AtaGerencialBean p) {
return p.getIdAta();
}
public List<AtaGerencialBean> getListaAtaGerencialBean() {
return listaAtaGerencialBean;
}
public void setListaAtaGerencialBean(
List<AtaGerencialBean> listaAtaGerencialBean) {
this.listaAtaGerencialBean = listaAtaGerencialBean;
}
}
The onCellEdit method
#ManagedBean
#ViewScoped
public class AtaGerencialMB extends MB<AtaGerencialBean,
AtaGerencialBusiness> {
private LazyDataModel<AtaGerencialBean> lazyModelAtaGerencial;
#SuppressWarnings("unused")
public void onCellEdit(CellEditEvent event) {
try{
DataTable controladorTabela = (DataTable) event.getComponent();
//rowindex is fine, it brings the index of the edited row in the
datatable (from 0 onwards)
Integer rowIndex = event.getRowIndex();
String rowKey = event.getRowKey();
//rowKey is always null
System.out.println("rowKey value:" + rowKey);
AtaGerencialBean entity = (AtaGerencialBean) controladorTabela.getRowData(event.getRowKey());
this.setRegistroDefinido(entity);
super.atualizar();
}catch(NullPointerException ex){
System.out.println(ex.getMessage());
}
}
}
EDIT
I was able to circumvent the problem by NOT using the rowKey to retrieve the data and modifying the onCellEdit method to get the data from the Datamodel inside the Datatable.
I am not sure whether it is a good/bad practice, or if that's how you're supposed to retrieve the row when using LazyLoading.
Also, following #Kukeltje suggestion, I am now using PRIMEFACES 6.2
Modified onCellEdit method
#ManagedBean
#ViewScoped
public class AtaGerencialMB extends MB<AtaGerencialBean, AtaGerencialBusiness> {
private LazyDataModel<AtaGerencialBean> lazyModelAtaGerencial;
#SuppressWarnings("unused")
public void onCellEdit(CellEditEvent event) {
try{
DataTable controladorTabela = (DataTable) event.getComponent();
DataModel dm = (DataModel) controladorTabela.getValue();
AtaGerencialBean entity = (AtaGerencialBean) dm.getRowData();
this.setRegistroDefinido(entity);
super.atualizar();
}catch(NullPointerException ex){
System.out.println(ex.getMessage());
}
}
}
I was able to circumvent the problem by NOT using the rowKey to retrieve the data and modifying the onCellEdit method to get the data from the Datamodel inside the Datatable.
I am not sure whether it is a good/bad practice, or if that's how you're supposed to retrieve the row when using LazyLoading.
Also, following #Kukeltje suggestion, I am now using PRIMEFACES 6.2
Modified onCellEdit method
#SuppressWarnings("unused")
public void onCellEdit(CellEditEvent event) {
try{
DataTable controladorTabela = (DataTable) event.getComponent();
DataModel dm = (DataModel) controladorTabela.getValue();
AtaGerencialBean entity = (AtaGerencialBean) dm.getRowData();
this.setRegistroDefinido(entity);
super.atualizar();
}catch(NullPointerException ex){
System.out.println(ex.getMessage());
}
}
https://github.com/primefaces/primefaces/issues/2688
You may refer to this issue on github. You should enable selection for your datatable

MySQL YEAR field - how to input from jsf

The tools created this field in the entity:
#Entity
#Table(name = "movies")
public class Movie implements Serializable {
private static final long serialVersionUID = 1L;
#Id
#GeneratedValue(strategy = GenerationType.IDENTITY)
private int idmovie;
// etc
#Temporal(TemporalType.DATE)
#Column(name = "year_of_release")
#Past(message = "Back from the future ?") // added by me
#NotNull(message = "Please enter the year of the movie") // added by me
private Date yearOfRelease;
}
I want to enter the year from a form - I can't find anything that produces a year drop down and that converts it to an YEAR field (getting Data truncation exceptions).
The closest I got :
<h:outputLabel for="yearOfRelease">Year of release</h:outputLabel>
<h:inputText id="yearOfRelease"
value="#{movieController.movie.yearOfRelease}" redisplay="true"
converterMessage="Please enter date in yyyy-MM-dd format">
<f:convertDateTime pattern="yyyy-MM-dd" />
</h:inputText>
<h:message id="yearOfReleaseMessage" for="yearOfRelease" />
Do not seem to find a converter to tell jsf to convert to year.
Is integer my only option ?
Also ideally I would like a dropdown. I found things like
<h:selectOneListbox value="#{form.year}" size="5">
<f:selectItem itemValue="1900" itemLabel="1900"/>
<f:selectItem itemValue="1901" itemLabel="1901"/> ... </h:selectOneListbox>
but surely there is a way to have this automated ?
I am new to JSF and I'd rather stay vanilla JavaEE (no faces libraries). I am on glassfish 4.
Partial answer
// YEAR
private static final short MIN_YEAR = 1901;
private static final short MAX_YEAR = 2014; // (short) new
// java.util.Date().getYear(); // does not play with message
private static final List<Short> YEARS = new ArrayList<>(MAX_YEAR
- MIN_YEAR + 1);
static {
for (short i = MIN_YEAR; i <= MAX_YEAR; ++i) {
YEARS.add(i);
}
}
private static final String MIN_MSG = "Min release year: " + MIN_YEAR;
private static final String MAX_MSG = "Max release year: " + MAX_YEAR;
#Column(name = "year_of_release")
#NotNull(message = "Please enter the year of release of the movie")
#Min(value = 1901, message = MIN_MSG)
#Max(value = 2014, message = MAX_MSG)
private short yearOfRelease = 2014;
public List<Short> getYears() {
return YEARS;
}
And in the form:
<h:selectOneListbox id="yearOfRelease" redisplay="true"
value="#{movieController.movie.yearOfRelease}" size="8">
<f:selectItems value="#{movieController.movie.years}" var="entry"
itemValue="#{entry}" itemLabel="#{entry}" />
<f:ajax event="blur" render="yearOfReleaseMessage" />
</h:selectOneListbox>
If someone can come up with something more elegant (like some ready made Year dropdown that validates #Past and converts to something nice for a MySQL Year datatype) I would gladly accept it.
You can declare <f:selectItems /> and fill it with values from the bean, so something like
#RequestScoped
#ManagedBean
public class Form {
private List<String> items = new ArrayList<>();
#PostConstruct
public void init() {
for(int i=1900;i<2000;i++) {
items.add(i);
}
}
public List<String> getItems() {
return items;
}
}
and then in your page
<h:selectOneListbox value="#{form.year}" size="5">
<f:selectItems value="#{form.items}" var="entry"
itemValue="#{entry}" itemLabel="#{entry}" />
</h:selectOneListbox>

Primefaces tabview tabChange event fired after displaying tab

I am working on a project using Primefaces 3.5 & JSF2.1 (Mojarra)
I have created a primefaces <p:tabView id="tabsVw" dynamic="false"> with two tabs inside and each tab has a primefaces datatable
<h:form>
<p:tabView dynamic="false">
<p:ajax event="tabChange" listener="#{tstTab.onDtlTabChanged}" />
<p:tab title="tab1">
<p:dataTable value="#{tstTab.list1}" var="v1">
<p:column>
<h:outputText value="#{v1}"/>
</p:column>
</p:dataTable>
</p:tab>
<p:tab title="tab2">
<p:dataTable value="#{tstTab.list2}" var="v2">
<p:column>
<h:outputText value="#{v2}"/>
</p:column>
</p:dataTable>
</p:tab>
</p:tabView>
</h:form>
and inside the bean (view scoped)
#ManagedBean
#ViewScoped
public class TstTab {
private List<String> list1;
private List<String> list2;
public TstTab(){
list1 = new ArrayList<String>();
list2 = new ArrayList<String>();
list1.add("List 1 - Str 1");
list1.add("List 1 - Str 2");
list1.add("List 1 - Str 3");
list1.add("List 1 - Str 4");
list1.add("List 1 - Str 5");
list2.add("List 2 - Str 1");
list2.add("List 2 - Str 2");
list2.add("List 2 - Str 3");
list2.add("List 2 - Str 4");
list2.add("List 2 - Str 5");
}
public void onDtlTabChanged(TabChangeEvent event) {
System.out.println("000000000000000000");
}
public List<String> getList1() {
System.out.println("11111111111111");
return list1;
}
public List<String> getList2() {
System.out.println("222222222222222222");
return list2;
}
}
now the problem is when run the application and try to navigate (change) between tabs, but I can see that the onDtlTabChanged is called after calling getters, so that is a big problem.
and if change the tabView from static to dynamic, then the behavior is random, in other words the calling to the change event is happening somewhere in the middle of getters.
Thank you in advance.
Well I think that its a primefaces BUG, I found a workaround which as the following
Do not use a global form (form for the tabView itself) instead use a form for each tab (inside it that surround the datatable)
You have to add a dummy tab to be the first one that must include a form which some static data or pre-loaded data inside
Thats all,
the problem was that the ajax request is inside the global form and it cause the datatables to get their data first before ajax request,
the strange thing with Primefaces that if you do not add the first dummy tab it will always execute the first form inside the tabs and get its data and this will cause a problem
regards ,
I think the answer of ali saleh is right.
If you get problems with the tabchangelistener perhaps this can help you:
I had a similar problem with Primefaces 5.1
As long as i put the tabview into a form everything worked fine.
But because i wanted to use seperate forms in my tabs i had to remove the surrounding form of the tabview to avoid nested forms.
Without the surrounding form the ajax event didnĀ“t get triggered any more when changing the tab.
My solution was to use a remotecommand in a form parallel to the tabview.
The remotecommand is triggered by the onTabChange attribute of the tabview element.
At that call i forwarded the index parameter to the global request parameters.
<p:tabView id="rootTabMenu" styleClass="tabcontainer" prependId="false"
activeIndex="#{sessionData.activeTabIndex}" widgetVar="rootTabMenu"
onTabChange="tabChangeHelper([{name: 'activeIndex', value: index}])">
// Tabs...
</p:tabView>
<h:form id="tabChangeHelperForm">
<p:remoteCommand name="tabChangeHelper" actionListener="#{sessionData.onTabChange()}" />
</h:form>
In the backing bean i catched the value again from the request parameter map and set the active index.
public void onTabChange()
{
FacesContext context = FacesContext.getCurrentInstance();
Map<String, String> paramMap = context.getExternalContext().getRequestParameterMap();
String paramIndex = paramMap.get("activeIndex");
setActiveTabIndex(Integer.valueOf(paramIndex));
System.out.println("Active index changed to " + activeTabIndex);
}
Hope that can help you
It work fine in Primefaces 3.5 and mojarra 2.1.20, my code:
bean:
#ManagedBean(name = "tabview")
#ViewScoped
public class TabView implements Serializable {
private static final long serialVersionUID = 1L;
private List<Car> l1;
private List<Car> l2;
private List<Car> l3;
public TabView() {
l1 = new ArrayList<Car>();
l2 = new ArrayList<Car>();
l3 = new ArrayList<Car>();
Car c1 = new Car("c1", "a1");
Car c2 = new Car("c21", "a21");
Car c3 = new Car("c31", "a31");
Car c4 = new Car("c41", "a41");
Car c5 = new Car("c51", "a51");
Car c6 = new Car("c61", "a61");
Car c7 = new Car("c71", "a71");
Car c8 = new Car("c81", "a81");
Car c9 = new Car("c91", "a91");
l1.add(c1);
l1.add(c2);
l1.add(c3);
l2.add(c4);
l2.add(c5);
l2.add(c6);
l3.add(c7);
l3.add(c8);
l3.add(c9);
}
public void hand(TabChangeEvent event) {
Car c1 = new Car("c1", "a1");
Car c2 = new Car("c1", "a1");
Car c3 = new Car("c1", "a1");
Car c4 = new Car("c1", "a1");
Car c5 = new Car("c1", "a1");
Car c6 = new Car("c1", "a1");
Car c7 = new Car("c1", "a1");
Car c8 = new Car("c1", "a1");
Car c9 = new Car("c1", "a1");
l1.add(c1);
l1.add(c2);
l1.add(c3);
l2.add(c4);
l2.add(c5);
l2.add(c6);
l3.add(c7);
l3.add(c8);
l3.add(c9);
}
public List<Car> getL1() {
return l1;
}
public void setL1(List<Car> l1) {
this.l1 = l1;
}
public List<Car> getL2() {
return l2;
}
public void setL2(List<Car> l2) {
this.l2 = l2;
}
public List<Car> getL3() {
return l3;
}
public void setL3(List<Car> l3) {
this.l3 = l3;
}
}
xhtml:
<p:tabView id="mtrlDtlTabs" dynamic="true" cache="false">
<p:ajax event="tabChange" update="t1 t2 t3" listener="#{tabview.hand}"/>
<p:tab id="t1" title="1">
<p:dataTable id="l1" value="#{tabview.l1}" var="l1">
<p:column headerText="l1">#{l1.manufacturer}</p:column>
<p:column headerText="l2">#{l1.model}</p:column>
</p:dataTable>
</p:tab>
<p:tab id="t2" title="2">
<p:dataTable id="l2" value="#{tabview.l2}" var="l2">
<p:column headerText="l2">#{l2.manufacturer}</p:column>
<p:column headerText="l22">#{l2.model}</p:column>
</p:dataTable>
</p:tab>
<p:tab id="t3" title="3">
<p:dataTable id="l3" value="#{tabview.l3}" var="l3">
<p:column headerText="l3">#{l3.manufacturer}</p:column>
<p:column headerText="l33">#{l3.model}</p:column>
</p:dataTable>
</p:tab>
</p:tabView>