I have a <ui:repeat> that iterates over a List<String> and creates a <p:commandButton> with the value of the current String in a <p:lightBox>.
But when I add widgetVar to my <p:lightBox>'s attributes the value of the <p:commandButton> is always the String from the last iteration.
Can someone explain what happens and (as I need widgetVar) maybe point out a solution?
This is my html:
<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:body>
<ui:repeat var="thing" value="#{bugBean.things}">
<p:lightBox widgetVar="whatever">
<h:outputLink>
<h:outputText value="#{thing}" />
</h:outputLink>
<f:facet name="inline">
<h:form>
<p:commandButton action="#{bugBean.writeThing(thing)}"
value="#{thing}" />
</h:form>
</f:facet>
</p:lightBox>
</ui:repeat>
</h:body>
</html>
This is the backing bean:
package huhu.main.managebean;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;
#Named
#SessionScoped
public class BugBean implements Serializable {
private static final long serialVersionUID = 1L;
List<String> things = new ArrayList<String>();
public BugBean(){
things.add("First");
things.add("Second");
things.add("Third");
}
public void writeThing(String thing){
System.out.println(thing);
}
public List<String> getThings() {
return things;
}
public void setThings(List<String> things) {
this.things = things;
}
}
The widgetVar basically generates a window scoped JavaScript variable. What you're effectively doing now in JavaScript context is:
window['whatever'] = new Widget(lightboxElement1);
window['whatever'] = new Widget(lightboxElement2);
window['whatever'] = new Widget(lightboxElement3);
// ...
This way the whatever variable in JS would only refer the last one.
You should basically be giving them each an unique name, for example by adding the iteration index:
<ui:repeat var="thing" value="#{bugBean.things}" varStatus="iteration">
<p:lightBox widgetVar="whatever#{iteration.index}">
This way it becomes effectively:
window['whatever0'] = new Widget(lightboxElement1);
window['whatever1'] = new Widget(lightboxElement2);
window['whatever2'] = new Widget(lightboxElement3);
// ...
This way you can refer the individual lightboxes by whatever0, whatever1, whatever2, etc.
Unrelated to the concrete problem: isn't it easier to use a single lightbox and update its content on every click instead?
recently i had a similar problem when upgrading to primefaces 4.0 -> 5.1
I had to use syntax:
PF('whatever0')
Due to changes in how primefaces names the widgetvar.
Related
I'm trying to capture old/new value for some business validation. For that, the ValueChangeListener seemed like a good choice. It worked great on h:selectOneMenu, however it does not get called when used with a home grown Composite Component with a Backing Component. Any idea what I'm doing wrong?
One thing to add is, when removing the componentType attribute from state.xhtml, the valueChangeListener works as expected...
The component:
<!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:composite="http://java.sun.com/jsf/composite">
<composite:interface displayName="state" componentType="com.company.dept.system.ui.address.State" shortDescription="State Information Display/Input Component">
<composite:attribute name="value" type="java.lang.String" required="true" shortDescription="The value of the component" />
<composite:editableValueHolder name="state" />
</composite:interface>
<composite:implementation>
<div id="#{cc.clientId}">
<h:selectOneMenu id="state" value="#{cc.attrs.value}">
<f:selectItem itemLabel="(select)" noSelectionOption="true"/>
<f:selectItems var="item" itemLabel="#{item.displayValue}" value="#{cc.states}" />
</h:selectOneMenu>
</div>
</composite:implementation>
</html>
The backing component
#FacesComponent("com.company.dept.system.ui.address.State")
public class State extends UIInput implements NamingContainer {
private List<com.company.dept.policy.enums.State> states;
#Override
public String getFamily() {
return UINamingContainer.COMPONENT_FAMILY;
}
/**
* Prepare the list of states to display
*/
public List<com.company.dept.policy.enums.State> getStates(){
if (states != null) {
return states;
}
states = new ArrayList<com.company.dept.policy.enums.State>();
for (com.company.dept.policy.enums.State st : com.company.dept.policy.enums.State.values()) {
if(!st.equals(com.company.dept.policy.enums.State.NWNORWAY) && !st.equals(com.company.dept.policy.enums.State.UNKNOWN) && !st.equals(com.company.dept.policy.enums.State.TTTRUST_TERRITORY_AND_GUAM)) {
states.add(st);
}
}
Collections.sort(states,new StateNameComparator());
return states;
}
}
The value change listener
public class ClientValueChangeListener implements ValueChangeListener {
#Override
public void processValueChange(ValueChangeEvent event)
throws AbortProcessingException {
System.out.println("*****************************");
System.out.println("VALUE CHANGE LISTENER. OLD=" + event.getOldValue() + " - NEW=" + event.getNewValue());
System.out.println("*****************************");
}
}
consuming page:
<h:form>
<address:state value="#{testPage.state}">
<f:valueChangeListener type="com.company.dept.system.ui.clientinformation.ClientValueChangeListener" for="state"/>
</address:state>
<h:commandButton id="submitButton" value="Test" action="#{testPage.act}"/>
</h:form>
It's because your backing component extends from UIInput. The value change listener is applied to the backing component itself instead of to a child of the composite implementation.
Your concrete functional requirement isn't exactly clear, but based on the information provided so far, you can safely replace extends UIInput implements NamingContainer by extends UINamingContainer (and get rid of getFamily() override).
If you really intend to keep your backing component to extend from UIInput, then you should be delegating the submitted value, local value and value of the backing component all to the child dropdown component, but this makes design technically little to no sense.
My h:form contains a p:selectOneMenu component, which has two values single and multiple. The h:form also contains a default p:inputText. My objective is to add multiple p:inputText component only when value multiple is selected. Please see the attached screenshot-
Below is my view, which suppose to send ajax request, whenever icon button is clicked-
<h:form>
<p:panel header="Dynamically Add textbox">
<p:selectOneMenu id="runType" value="#{repeateRun.runType}">
<f:selectItems value="#{repeateRun.runList}" var="runType" itemLabel="#{runType}" itemValue="#{runType}" />
<p:ajax update="outPanel" listener="#{repeateRun.renderComponent}" />
</p:selectOneMenu>
<h:panelGrid id="runList">
<ui:repeat value="#{repeateRun.runs}" var="run">
<p:inputText value="#{run.runValue}" />
</ui:repeat>
</h:panelGrid>
<p:outputPanel id="outPanel">
<p:commandButton update="runList" icon="ui-icon-plusthick" title="Add more" rendered="#{repeateRun.showAddButton}">
<f:ajax render="runList" listener="#{repeateRun.addRun}" />
</p:commandButton>
</p:outputPanel>
</p:panel>
</h:form>
The #ViewScoped #ManagedBean RepeateRun is following-
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.event.ActionEvent;
#ManagedBean
#ViewScoped
public class RepeateRun implements Serializable {
private static final long serialVersionUID = 1L;
private List<String> runList;
private List<Run> runs;
private int runValue;
private String runType;
private boolean showAddButton = false;
private static final String SINGLE = "Single";
private static final String MULTIPLE = "Multiple";
//Note : Getters Setters are removed while putting here
#PostConstruct
public void initBean() {
this.setRunList(this.populateRunList());
this.setRuns(this.populateRuns());
}
public void addRun() {
if (this.runs == null) {
this.setRuns(this.populateRuns());
} else {
this.runs.add(this.defaultRun());
}
}
public void renderComponent() {
if (this.getRunType().equals(SINGLE)) {
this.setShowAddButton(false);
} else {
this.setShowAddButton(true);
}
}
private List<String> populateRunList() {
List<String> runList = new ArrayList<String>();
runList.add(SINGLE);
runList.add(MULTIPLE);
return runList;
}
private Run defaultRun() {
Run defaultRun = new Run();
defaultRun.setRunValue(1);
return defaultRun;
}
private List<Run> populateRuns() {
List<Run> runs = new ArrayList<Run>();
runs.add(this.defaultRun());
return runs;
}
}
So after selecting the value Multiple in f:selectItems the plus icon button comes but the button is not invoking attached method i.e. addRun. To confirm the method addRun call after clicking, I put some sysout statements in addRun method. I saw that sysout is not flushed. At the same time I saw some xml response in the firebug.
Where is the problem?
The problem was with f:ajax which doesn't work with p:commandButton. Below are the culprit lines-
<p:commandButton update="runList" icon="ui-icon-plusthick" title="Add more" rendered="#{repeateRun.showAddButton}">
<f:ajax render="runList" listener="#{repeateRun.addRun}" />
</p:commandButton>
The above lines should be replaced with below line
<p:commandButton actionListener="#{repeateRun.addRun}" update="runList" icon="ui-icon-plusthick" title="Add more" rendered="#{repeateRun.showAddButton}" />
The setter method of selectedRestaurant is called but the menu just flips back and doesn't render the <h:outputText>. The Menu has content, so the List used in <f:selectItems> is not empty. As I am using omnifaces.SelectItemsConverter I suppose it is not due to a conversion problem.
This is my JSF Code:
<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:body>
<h:panelGroup id="adminOneMenu" layout="block">
<h:form>
<p:selectOneMenu value="#{bugBean.selectedRestaurant}" converter="omnifaces.SelectItemsConverter">
<f:selectItem itemValue="" itemLabel="Restaurant wählen"/>
<f:selectItems value="#{bugBean.restaurants('London')}" var="restaurant" itemLabel="#{restaurant.screenName}"/>
<p:ajax update=":adminOneMenu"/>
</p:selectOneMenu>
<h:outputText value="#{bugBean.selectedRestaurant.screenName}" />
</h:form>
</h:panelGroup>
</h:body>
</html>
This is the backing bean:
package huhu.main.managebean;
import java.io.Serializable;
import java.util.List;
import javax.ejb.EJB;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;
import huhu.model.generated.Restaurant;
import huhu.service.RestaurantService;
#Named
#SessionScoped
public class BugBean implements Serializable {
private static final long serialVersionUID = 1L;
private Restaurant selectedRestaurant;
#EJB
RestaurantService rs;
public List<Restaurant> getRestaurants(String city){
List<Restaurant> restaurants;
restaurants = rs.getRestaurantsInCity(city);
return restaurants;
}
public Restaurant getSelectedRestaurant() {
return selectedRestaurant;
}
public void setSelectedRestaurant(Restaurant selectedRestaurant) {
this.selectedRestaurant = selectedRestaurant;
}
}
If there would be a conversion error, you should get an error message.
Did you implement #equals() and #hashcode() in class Restaurant?
How can i pass an object to the action method of an commandButton? I use a datatable which is the basis of a composite component. The composite component should provide the possibility to exchange the buttons which are added to the rows of the datatable. I thought i can realize this with facets, but i have problems passing objects from the datatables list to action methods, neither directly via an EL nor via an property action listener.
View:
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:customer="http://java.sun.com/jsf/composite/components/customer">
<ui:composition template="/WEB-INF/templates/template.xhtml">
<ui:define name="content">
<h:form id="customerList">
<customer:list list="#{customerControllerBean.list}">
<f:facet name="rowButton">
<h:commandButton value="#{msg.deleteButtonLabel}"
action="#{customerControllerBean.delete(customer)}" />
<h:commandButton value="#{msg.deleteButtonLabel}" action="#{customerControllerBean.deleteCustomer}">
<f:setPropertyActionListener target="#{customerControllerBean.customer}" value="#{customer}"/>
</h:commandButton>
<h:button outcome="customerdetail.jsf?id=#{customer.id}"
value="#{msg.editButtonLabel}" />
</f:facet>
</customer:list>
</h:form>
</ui:define>
</ui:composition>
</html>
Using the following composite component customer:list:
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="list" />
<composite:facet name="rowButton" />
</composite:interface>
<composite:implementation>
<p:dataTable id="customer" var="customer" value="#{cc.attrs.list}">
...
<p:column>
<composite:renderFacet name="rowButton" />
</p:column>
</p:dataTable>
</composite:implementation>
</html>
The backing bean:
#Named
#ConversationScoped
public class CustomerControllerBean implements Serializable {
private static final long serialVersionUID = 6168621124401208753L;
List<Customer> allCustomers = null;
private Customer customer;
// setters and getters ...
#PostConstruct
public void loadAllCustomers() {
// load customers
}
public List<Customer> getList() {
return allCustomers;
}
public String delete(Customer customer) {
// delete customer...
return "deleted";
}
public String deleteCustomer() {
// delete customer...
return "deleted";
}
Is it not possible to pass objects to methods in this context?
Since you're using Primefaces you could take advantage of the its datatable features like its properties and events to set your model.
Using Primefaces' DataTable features
In your controller you may specify the model and the operations to be performed on it, in this case I used an EJB as example.
#ManagedBean
#ViewScoped
public class CustomerBean
{
private Customer model;
#EJB
private CustomerService cs;
public void rowSelected()
{
// log or do stuff
}
public void delete()
{
cs.delete(model);
}
// getters & setters
}
Then you specify the selectionMode and the selection properties in your datatable, with the selection being mapped to your model.
<p:dataTable id="dtModel" var="row" value="#{bean.list}" selectionMode="single" selection="#{bean.model}">
<p:ajax event="rowSelect" process="#this" listener="#{bean.rowSelected}" update=":content" />
</p:datatable>
In this case I used a listener in the p:ajax tag but it is only an example that may be useful if you want to do something with your model once it is selected, but it is not required to set your model. Your model will be set using the bean's setter method.
Passing row as parameter
In your controller you specify the method that receives the model as parameter.
#ManagedBean
#ViewScoped
public class CustomerBean
{
#EJB
private CustomerService cs;
public void delete(Customer candidate)
{
cs.delete(candidate);
}
// getters & setters
}
And in your datatable you use the row object as specified in var property.
<p:dataTable id="dtModel" var="row" value="#{bean.list}">
<p:column headerText="name">
<h:outputText value="#{row.name}" />
</p:column>
<p:column headerText="delete">
<p:commandButton value="delete" actionListener="#{bean.delete(row)}" />
</p:column>
</p:datatable>
I prefer to use the first example as it allows you to set the model by selecting a row and then performing various operations on it, like delete, edit or view its details. You could enable or disable buttons on your UI by checking if the model is selected or not, etc...
Hint
Instead of Composite Components you could use simple Facelets templates to create a simple taglib. They usually work fine, the only downside is that you cannot enforce an interface to the use of these components.
You may also check the PrimeFaces showcase, which has a lot of useful examples.
I hope it helps.
I have read there, but i can't take edited value from primefaces datatable cellEditor, it gives me unedited value. i am using jpa.
xhtml page:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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.prime.com.tr/ui"
template="/templates/masterLayout.xhtml">
<ui:define name="windowTitle">
learn
</ui:define>
<ui:define name="content">
<h:form>
<p:dataTable value="#{lesson.lessonValue}" var="l" style="width: 400px">
<p:ajax event="rowEdit" listener="#{lesson.onEditRow}"/>
<p:column headerText="Lessons" style="width: 300px">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{l.lessonName}"/>
</f:facet>
<f:facet name="input">
<p:inputText value="#{l.lessonName}" style="width: 100%"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column headerText="Options">
<p:rowEditor />
</p:column>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition>
lesson.java:
public class lesson implements Serializable {
private String name;
protected EntityLesson[] lessonList;
public String getName() { return name; }
public void setName(String newValue) { name = newValue; }
EntityManagerFactory emf = Persistence.createEntityManagerFactory("DefaultPU");
public EntityLesson[] getLessonValue() {
EntityManager em = emf.createEntityManager();
List<EntityLesson> result;
try {
EntityTransaction entr = em.getTransaction();
boolean committed = false;
entr.begin();
try {
Query query = em.createQuery("SELECT l FROM EntityLesson l");
result = query.getResultList();
entr.commit();
committed = true;
lessonList = new EntityLesson[result.size()];
lessonList = result.toArray(lessonList);
} finally {
if (!committed) entr.rollback();
}
} finally {
em.close();
}
return lessonList;
}
public void onEditRow(RowEditEvent event) {
EntityLesson editedLesson = (EntityLesson)event.getObject();//gives me unedited value
............................
............................
}
EntityLesson.java:
#Entity
#Table(name="lessonaaa")
public class EntityLesson implements Serializable {
#Id
#Column(name="Lesson_Id", nullable=false)
#GeneratedValue(strategy= GenerationType.IDENTITY)
private int lessonId;
#Column(name="Lessson", nullable=false, length=65)
private String lessonName;
public int getLessonId() { return lessonId; }
public void setLessonId(int lessonId) { this.lessonId = lessonId; }
public String getLessonName() { return lessonName; }
public void setLesson (String lessonName) { this.lessonName = lessonName; }
}
The problem occurs because of the JSF lifecycle:
When your dataTable is displayed it executes the JPQL to retrieve the list of lessons. After that they are displayed.
Now you edit on entity and hit save, the edited entity in the list has now the new value.
But what happens next, is that the list is fetched another time and then the listener method is executed with the newly fetched enitiy.
You can solve the problem if you store the list of entities in a local attribute in the view bean and fill it in the post construct method (annotated by #PostContruct) and you have to make the view bean #SessionScoped. Then use this list for the datatable.
My problem is similar:
The 'dataTable' contains as 'value' a list of entities:
<p:dataTable id="category" var="category" value="#{categoriesBacking.categoriesListEdit}">
If I select one for edit, the object which is passed to the event contains the previously unmodified value. I observed that this is due to the fact that dataTable's value is a list. As a work-around (to be able to use the component) I added a 'filterBy' to any of the 'column'. If the dataTable will contain only one value, that value will be interpreted correctly by the passed event in the managed bean.
!!! The event's object will be the modified instance.
I also use:
<p:ajax event="rowEdit" update="#this" listener="#{categoriesBacking.onEditRow}" />
instead of dataTable's 'rowEditListener'.
Again, this is just a workaround.
I have almost exactly the same code except instead of using the <p:ajax> tag I am instead using the rowEditListener attribute of dataTable. Try this instead:
<p:dataTable ... rowEditListener="#{lesson.onEditRow}" ... >
...
This kind of problems are generally related to your backing bean. Your "lesson" class needs #ManagedBean (javax.faces.bean.ManagedBean) annotation. Simply add
#ManagedBean (name="YourBeanName")
#ViewScoped
just before public class lesson implements Serializable { line in your lesson.java