How to programmatically add dialogs with primefaces - jsf

I want to display some data through primefaces datalist component. To achieve this I have an arrayList like ArrayList<Person>.
The person class looks something like this
class Person{
private String name;
private String age;
private ArrayList<String> hobbies;
}
To display the data I'm using the following code:
<p:dataList value="{gameBean.persons}" var="person" itemType="disc">
Name: #{person.getName()}, Age: #{person.getAge()},
<h:link value="Hobbies" onclick="dlg1.show();" />
</p:dataList>
What I want do do now, is to create a link that opens a dialog when clicked:
<p:dialog header="Hobbies" widgetVar="dlg1" modal="true"height="100">
//iterate through hobbies list to print it
</p:dialog>
So far this is working because I've hard coded the dialog as mentioned above in the xhtml file.
This method is of course not working for a dynamic amount of persons as I can not hard code the dialogs and the links. My question is, how can I create this dialogs programmatically and assign the right widgetVar variable to the onClick method of the Links?
Any help is highly apprechiated,
cheers Nikolaus

You can try this:
<h:form id="form">
<p:dataList value="{gameBean.persons}" var="person" itemType="disc">
Name: #{person.getName()}, Age: #{person.getAge()},
<p:column>
<p:commandLink value="Hobbies" actionListener="#{gameBean.onPersonSelect(person)}"
oncomplete="dlg1.show();" update=":form:hobbiesDlg" />
</p:column>
</p:dataList>
<p:dialog header="Hobbies" id="hobbiesDlg" widgetVar="dlg1" modal="true"height="100">
//iterate through hobbies of gameBean.person to show here
</p:dialog>
</h:form>
#ManagedBean
#ViewScoped
public class GameBean {
private Person person;
public void onPersonSelect(Person person) {
this.person = person;
}
}

Related

When nesting another datatable in rowexpansion, splitbutton stops working when 2 or more main rows are loaded

So I'm trying to nest a datatable within another datatable in the rowexpansion tag as follows:
<h:form>
<p:dataTable var="item"
value="#{bean.items}">
<p:column>
<p:rowToggler/>
</p:column>
<p:column headerText="Item Name">
<h:outputText value="#{item.name}"/>
</p:column>
<p:rowExpansion>
<p:dataTable var="subitem"
value="#{item.subitems}">
<p:column headerText="Subitem Name">
<h:outputText value="#{subitem.name}" />
</p:column>
<p:column>
<p:splitButton value="Save" action="#{bean.save}">
<p:menuitem value="Update" action="#{bean.update}"/>
<p:menuitem value="Delete" action="#{bean.delete}"/>
</p:splitButton>
</p:column>
</p:dataTable>
</p:rowExpansion>
</p:dataTable>
</h:form>
the testing methods in the bean are just
public void save() {
addMessage(FacesMessage.SEVERITY_INFO, "Success!", "Saved subitem");
PrimeFaces.current().ajax().update(":frmTopbar");
}
public void update() {
addMessage(FacesMessage.SEVERITY_INFO, "Success!", "Updated subitem");
PrimeFaces.current().ajax().update(":frmTopbar");
}
public void delete() {
addMessage(FacesMessage.SEVERITY_INFO, "Success!", "Deleted subitem");
PrimeFaces.current().ajax().update(":frmTopbar");
}
public void addMessage(FacesMessage.Severity severity, String summary, String detail) {
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(severity, summary, detail));
}
If only a single item and its subitems is loaded, everything displays and splitbutton buttons work fine.
The bean just sends a FacesMessage to test and like I said, the message is properly shown for each of the 3 buttons.
But as soon as I load 2 or more items and their subitems, everything looks visually correct, but the commands in splitbutton no longer reach bean, so no FacesMessage is sent.
Does anyone have a clue about what is going on or a suggestion as to what can be done to fix it?
I'm using primefaces v11.0
Thanks a lot!
I seem to have found a workaround with p:remoteCommand using BalusC's tips.
So what I've done, is place this somewhere in my page that will map a javascript function to a bean method.
<p:remoteCommand name="splitButtonMenuitemClicked" actionListener="#{bean.save}" style="display: none;" />
I then place this jquery code in my page to catch the click event from any split button:
jQuery( document).delegate( ".ui-splitbuttonmenu .ui-menuitem-link", "click",
function(e){
var menuitemText = $(this).find("span.ui-menuitem-text");
var itemText = $(menuitemText).text();
splitButtonMenuitemClicked([{ name: "fooName", value: itemText }])
}
);
Now in my bean function, I just retrieve my parameter as follows:
public void save() {
String fooName= FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("fooName");
//fooName is unique key in may table, so it works well to work on the correct entity
...
}
It'll do for now, although it would be nice if the components worked as one hopes.

How to insert PrimeFaces p:selectManycheckbox value to database

I am new to primefaces and i have a problem to save my primefaces SelectManyCheckbox value to database. I am using hibernate and mysql. The sample code are give as below
My xhtml pages code is:
<h:outputText value="#{msg['elicense.examinationform.personal.classofcertificates']}"/>
<p:selectManyCheckbox id="grid" value="#{examinationFormBean.selectedClass}" layout="grid" columns="1">
<f:selectItems value="#{examinationFormBean.examinationPart}"var="className" itemLabel="#{className.name}" itemValue="#{className}" />
</p:selectManyCheckbox>
My bean is:
private String[] selectedClass;
private List<CertificateClass> examinationPart=new ArrayList<CertificateClass>();
getter()
setter()
The method where I want to save my checkbox is:
private void saveExaminationDetails()
{
examDetails.setElementaryPrinciples(); //bolean field
examDetails.setLightinig()
//no of setter
}
I am not able to find out how I will set the selected and not selected checkbox value on the method
Look at primefaces showcases: http://primefaces-rocks.appspot.com/ui/selectManyCheckbox.jsf
Selected values from examinationFormBean.examinationPart should setting in p:selectManyCheckbox attribute value and then you can used this selected list in bean method.
For your example should be something:
<p:selectManyCheckbox id="grid" value="#{examinationFormBean.selectedExaminationParts}" layout="grid" columns="1">
<f:selectItems value="#{examinationFormBean.examinationParts}" var="className" itemLabel="#{className.name}" itemValue="#{className}" />
</p:selectManyCheckbox>
And then you can use selectedExaminationParts in your saveExaminationDetails()
The p:selectManyCheckbox select values are biding a String Collection(List, ArrayList... etc) on managed bean. You just need to save each String existent on the Collection.
I will give you an example showing how you can do that:
Example:
...
#Named(value = "myBean")
#SessionScoped
public class InscricaoBean implements Serializable {
...
private List<String> selectedElemnts = new ArrayList();
//selectedElements get and set
...
On JSF you have something like:
...
<h:outputText value="#{msg['elicense.examinationform.personal.classofcertificates']}"/>
<p:selectManyCheckbox id="grid" value="#{examinationFormBean.selectedElemnts}"...>
<f:selectItems value="#{examinationFormBean.examinationPart}"var="className"
itemLabel="#{className.name}" itemValue="#{className}" />
</p:selectManyCheckbox>
...
On save method:
...
private void saveExaminationDetails()
{
for (String nameAux: selectedElemnts )
{
//you save the data here
}
}
...

values not getting passed from datatable to dialog box

<p:column>
<p:commandButton id="selectButton" update="#(form)" oncomplete="userDialog.show()" icon="ui-icon-search" title="View">
<f:setPropertyActionListener value="#{book}" target="#{CreateBookBean.selectedUser}" />
</p:commandButton>
</p:column>
</p:dataTable>
</p:outputPanel>
<p:dialog header="User Detail" modal="true" widgetVar="userDialog" width="200" height="175">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="fname" value="First Name: " />
<h:outputText id="fname" value="#{CreateBookBean.selectedUser.fname}" />
<h:outputLabel for="lname" value="Last Name: " />
<h:outputText id="lname" value="#{CreateBookBean.selectedUser.lname}" />
<h:outputLabel for="mobileno" value="mobile no: " />
<h:outputText id="mobileno" value="#{CreateBookBean.selectedUser.mobileno}" />
</h:panelGrid>
</p:dialog>
i came across this example recently.
the datatable is properly getting updated with the values i enter. but when i want to display it in the dialog box its not displaying anything.
and i actually don understand why value="#{CreateBookBean.selectedUser.fname}" is used instead of value="#{CreateBookBean.fname}".
here is my java code
public class CreateBookBean {
private Book book = new Book();
private List<Book> books = new ArrayList<Book>();
private Book selectedUser;
public String reinit() {
book = new Book();
return null;
}
setters and getters are included here
}
Lets split this question in two parts.
First:
When you want to display updated values (e.g. with a h:outputText), you need to update this element. Updating this element means, it will fetch the current value of it's backing bean.
Do it like this:
<p:commandButton ... update="idToUpdate1, idToUpdate2, ..." >
In order to get the idToUpdate check Naming Container in JSF2/PrimeFaces.
If you have many components which need an update, I would recomment grouping them into one NamingContainer (e.g. p:outputPanel). So you only have to update the NamingContainer, and not every single component.
Second:
#CreateBookBean.selectUser.fname means: "Fetch the CreateBookBean, fetch it's property selectUser and fetch the property of selectUser called fname".
In this case you would have these class layouts:
public class CreateBookBean {
private Book selectedUser;
....
public Book getSelectedUser() {
return this.selectedUser;
}
}
public class Book {
private String fname;
....
public String getFname() {
this.fname;
}
}
#CreateBookBean.fname means: "Fetch the CreateBookBean, fetch it's property fname".
In this case you would have this class layout:
public class CreateBookBean {
private String fname;
....
public String getFname() {
return this.fname;
}
}
According to this code you posted, i guess that the CreateBookBean has a property called selectedUser (the code reveals it: target="#{CreateBookBean.selectedUser}"), and the selectUser has a property fname.
Use the Update attribute in the button your using to display the dialog box, for example, <p:commandButton update="dialogBoxId" . . ./> in order to display the items from your datatable.

Adding values from multiple inputs to the arraylist

I' have a simple problem with adding values from inputs to the ArrayList.
I have a POJO like this:
public class Person {
private String firstName;
private String lastName;
private List<String> friends=new ArrayList<>();
//getters and setters
then Backing bean:
public class backingBean{
Person p=new Person();
public void addPerson(){
for(String friend:p.getFriends)
System.out.println(friend);
}
}
and the view
<h:form>
<fieldset>
<h:panelGrid columns="2">
<h:outputText value="Name" />
<h:inputText value="{backingBean.person.firstName}"/>
<h:outputText value="LastName" />
<h:inputText value="#{backingBean.person.lastName}"/>
<h:outputText value="Friends" />
<h:inputText value="#{backingBean.person.friends}" />
<h:inputText value="#{backingBean.person.friends}" />
</h:panelGrid>
<h:commandButton value="Add"
action="#{backingBean.addPerson}" />
</fieldset>
</h:form>
When I try to addPerson I get this error:
summary=(Conversion Error setting value...
I don't understand why convert String to String?
You can't bind value of h:inputText to ArrayList (without converter). When you submit form (by clicking button) JSF tries to call setFriends(String) and this is where this Exception occurs. Try to figure out what you are trying to achieve with these two h:inputText elements.
if you want to add 2 friends, just create only 2 different variables in backing bean as :
private String friend1;
private String friend2;
and then add them in addPerson like this:
List<String> friends=new ArrayList<String>();
friends.add(friend1);
friends.add(friend2);
p.setFriends(friends);
Not tested can be some bugs.
EDIT:
And if this not satisfies you, you can look at this #BalusC ANSWER

JSF Cannot set the current variable entity in the managed bean in order to understand which entity has been selected by the user

Im trying to implement the modification of an entity in JSF using Primefaces.
My main view, which lists the users is the following:
<p:growl id="growlEditUnit" showDetail="true" life="12000" />
<p:dialog id="dialogEditUnit" header="Edit Unit" widgetVar="editUnitDialog" showEffect="fade" hideEffect="fade" resizable="false" >
<ui:include src="editUnit.xhtml" />
</p:dialog>
<h:form id="form2">
<p:dataTable id="units" var="unit" value="#{unitController.unitsOfLoggedInUser}" >
<f:facet name="header">
Click Edit or Delete after selecting a unit to modify or remove it
</f:facet>
<p:column headerText="Code">
#{unit.unitCode}
</p:column>
<p:column headerText="Name">
#{unit.unitName}
</p:column>
<p:column headerText="Semester" >
#{unit.semester}
</p:column>
<p:column headerText="Academic Year">
#{unit.academicYear}
</p:column>
<p:column headerText="Twitter Username">
#{unit.twitterUsername}
</p:column>
<p:column headerText="Actions">
<p:commandButton id="editButton" value="Edit" action="#{unitController.setCurrent(unit)}" update=":dialogEditUnit" oncomplete"editUnitDialog.show()" />
</p:column>
</p:dataTable>
</h:form>
This view lists all the data correctly. However, when I press the current, my aim is to set the current attribute of the managed bean (code listed below) with the unit based on the button clicked. After this I try to update the edit dialog, so it will be filled with the values of that unit, and then make it visible using the oncomplete attribute. However, it seems that the managed been method setCurrent(unit) is never called when clicking the edit button. Subsequently the dialog is shown empty. Can someone help me with what am I doing wrong?
I am posting the managed bean code too.
#ManagedBean(name = "unitController")
#ViewScoped
public class UnitController implements Serializable {
private Unit current;
private List<Unit> unitsOfLoggedInUser;
#ManagedProperty(value="#{loginController.checkedUser}")
private Lecturer lecturer;
#EJB
private web.effectinet.ejb.UnitFacade ejbFacade;
#EJB
private web.effectinet.ejb.LecturerFacade lecturerFacade;
public UnitController() {
}
#PostConstruct
public void init(){
if (lecturer.getLecturerId() == null)
unitsOfLoggedInUser = null;
else
unitsOfLoggedInUser = (List<Unit>) lecturer.getUnitCollection();
}
public List<Unit> getUnitsOfLoggedInUser() {
return unitsOfLoggedInUser;
}
public void setCurrent(Unit current) {
this.current = current;
}
public Lecturer getLecturer() {
return lecturer;
}
public void setLecturer(Lecturer lecturer) {
this.lecturer = lecturer;
}
The action attribute of the commandButton is rendered without information on the value of the unit variable.
To pass the unit to the action method of your managed bean, then you need to pass the ID of unit in an <f:param> child tag of commandButton.
<p:commandButton action="#{managedBean.actionMethod}" ........>
<f:param name="unitid" value="#{unit.id}" />
</p:commandButton>
From your action method you can get the request parameter by the name from the ExternalContext and this will give you the ID of the unit that the commandButton was pressed for in your dataTable.

Resources