I want to add item into Primefaces table when I create new item. I managed to create this code:
<h:form id="new_item_button">
<p:commandButton id="ajax" value="New Sensor" styleClass="ui-priority-primary" onclick="PF('dlg').show();" type="button"/>
</h:form>
<h:form id="new_sensor">
<p:dialog header="New Sensor" widgetVar="dlg" focus="name" modal="true" showEffect="fade">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="name" value="Name" />
<p:inputText id="name" label="name" value="#{newSensor.sensor.name}" />
.............................
</h:panelGrid>
<f:facet name="footer">
<p:commandButton id="ajax" value="Create Sensor" actionListener="#{newSensor.saveRecord()}" update=":new_sensor"/>
</f:facet>
</p:dialog>
</h:form>
<h:form id="form">
<p:dataTable id="tbl" var="sensor" value="#{sensors.systemSensors}"
.......
paginator="true" rows="12"
rowKey="#{sensor.model}">
<p:column headerText="Name" sortBy="#{sensor.name}" style="text-align: center">
<h:outputText value="#{sensor.name}" />
</p:column>
...................
</p:column>
</p:dataTable>
Beans:
#Named
#RequestScoped
public class Sensors implements Serializable
{
private List<SensorObj> sensors;
#PostConstruct
public void init()
{
sensors = generateSensors();
}
public List<SensorObj> getSystemSensors()
{
return sensors;
}
private List<SensorObj> generateSensors()
{
List list = new ArrayList();
SensorObj obj1 = new SensorObj("Sensor 1", "SBS0212", "Online", true, null);
list.add(obj1);
return list;
}
}
#Named
#RequestScoped
public class NewSensor implements Serializable
{
private SensorObj sensor = new SensorObj();
public SensorObj getSensor()
{
return sensor;
}
public void setSensor(SensorObj sensor)
{
this.sensor = sensor;
}
public void saveRecord(){
.....
}
}
When I submit the dialog with the new sensor I want to update the table. How I can implement this?
Should I use one managed bean for listing the content and adding new items or as it is it's better to use two?
Related
I am building a CRUD app with a dashboard in which the user should be able to partially reload a widget. This is what I got:
<f:metadata>
<f:viewParam name="customerUuid" value="#
{dashboardManagedBean.customerUuid}" />
<f:event type="preRenderView" listener="#{dashboardManagedBean.init}" />
</f:metadata>
<f:view>
<h:body>
<h:form>
<p:panelGrid>
<p:row>
<p:column>
<p:panelGrid columns="4" styleClass="ui-noborder"
style="float:right;">
<p:outputLabel for="dateFrom" value="From:">
</p:outputLabel>
<p:calendar id="dateFrom" value="#
{dashboardManagedBean.statisticsRequest.dateFrom}"
pattern="dd.MM.yyyy HH:mm:ss" locale="de" readonlyInput="false"
timeInput="true" mode="popup"/>
<p:outputLabel for="dateTo" value="Till:">
</p:outputLabel>
<p:calendar id="dateTo" value="#
{dashboardManagedBean.statisticsRequest.dateTo}" pattern="dd.MM.yyyy
HH:mm:ss" locale="de" readonlyInput="false" timeInput="true"
mode="popup"/>
</p:panelGrid>
</p:column>
</p:row>
<p:row>
<p:column colspan="3">
<p:panel id="telemetry" header="Telemetrie"
style="width: 100%" collapsed="true" toggleable="true">
<f:facet name="actions">
<p:commandLink
actionListener="#
{dashboardManagedBean.loadData}"
styleClass="ui-panel-titlebar-icon
ui-corner-all ui-state-default"><h:outputText
styleClass="fa fa-refresh"/>
</p:commandLink>
</f:facet>
</p:panel>
</p:column>
</p:row>
</p:panelGrid>
</h:form>
</h:body>
</f:view>
And the bean looks like this:
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.bean.ViewScoped;
#ManagedBean(name = "dashboardManagedBean")
#ViewScoped #Getter #Setter
public class DashboardManagedBean implements Serializable {
private Customer customer;
private StatisticsRequest statisticsRequest;
private String customerUuid;
public DashboardManagedBean() {
this.customer = new Customer();
this.statisticsRequest = new StatisticsRequest();
}
public void init() {
loadCustomer();
loadData();
}
public void loadData(){
// load the customer data by using his the statisticsRequest
}
public void loadCustomer(){
// load the customer
}
}
The StatisticsRequest Class is just a wrapper for the request data:
#Getter #Setter
public class StatisticsRequest {
private Customer customer;
private Date dateFrom;
private Date dateTo;
public StatisticsRequest(){
java.util.Date da = new Date();
Calendar cal = Calendar.getInstance();
cal.setTime(da);
cal.add(Calendar.MONTH, -4);
this.dateFrom = cal.getTime();
this.dateTo = new Date();
}
}
I put this into the constructor of the StatisticsRequest so that I get a reasonable default value when loading the page. However the constructor of the viewscoped bean is called everytime I click on the reload commandLink the date I picked in the calendar is removed and the StatisticsRequest contains the default value again.
Why is this happening?
i have this problem: if build a p:datatable from ArrayList it's impossible editing and sometimes rowSelectd not fire.
my xhtml code:
<h:form id="form">
<p:messages id="messageWiz" showDetail="true" closable="true" autoUpdate="true"/>
<h:panelGroup>
<p:commandButton id="addPattern" icon="ui-icon-add"
actionListener="#{testController.add}" process="#this"
update="patternsId" />
<p:commandButton id="deletePattern" icon="ui-icon-delete"
actionListener="#{testController.remove}"
process="#this" update="#this, patternsId"
disabled="#{empty testController.patternsSelected}" />
</h:panelGroup>
<p:dataTable id="patternsId" var="pattern" scrollable="true" scrollHeight="200"
value="#{testController.patterns}" editable="true"
editMode="cell" widgetVar="patterns" rowIndexVar="idx"
selection="#{testController.patternsSelected}"
rowKey="#{pattern}"
emptyMessage="#{label['msg.emptytable']}" styleClass="nofooter">
<p:ajax event="rowSelect" update=":form:deletePattern" />
<p:ajax event="rowUnselect" update=":form:deletePattern" />
<p:ajax event="rowSelectCheckbox" update=":form:deletePattern"/>
<p:ajax event="toggleSelect" update=":form:deletePattern" />
<p:ajax event="rowUnselectCheckbox" update=":form:deletePattern" />
<p:ajax event="cellEdit" update=":form:messageWiz" />
<p:column selectionMode="multiple" width="20" />
<p:column>
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{pattern}" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{pattern}"
required="true" style="width:96%" autocomplete="off" />
</f:facet>
</p:cellEditor>
</p:column>
</p:dataTable>
</h:form>
controller code:
#ManagedBean
#ViewScoped
public class TestController implements Serializable {
private static final long serialVersionUID = 1L;
private ArrayList<String> patterns = new ArrayList<String>();
private ArrayList<String> patternsSelected;
public ArrayList<String> getPatterns() {
return patterns;
}
public void setPatterns(ArrayList<String> patterns) {
this.patterns = patterns;
}
public ArrayList<String> getPatternsSelected() {
return patternsSelected;
}
public void setPatternsSelected(ArrayList<String> patternsSelected) {
this.patternsSelected = patternsSelected;
}
public void add() {
patterns.add(new String());
}
public void remove() {
}
}
add row and edit, then close edit end inputed vaues disappear, rowSelected not fire.
You cannot achieve this with an arraylist of strings.
You must implement a list of Pattern objects (with at least id and value members)
Backing bean (testController) must implement SelectableDataModel (unique ids will help to be sure to identify and remove the right items).
Anyone know of a way to assign the value of a p:inputText so it displays correctly in a dialog window but only update a change in the value from a commandButton action instead of a dynamic set method of the value in the backing bean. Have the users add a step and it shows up in the ring then they can click the individual steps, but I want them to be able to update the step info only through the update step button, not by just changing the field and closing the dialog? Built-in method would be prefer, I know I can code around, but trying not to.
Thanks in advance....
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>
<p:dialog modal="true" widgetVar="statusDialog" header="Status"
draggable="false" closable="false">
<p:graphicImage value="/resources/images/ajaxloadingbar.gif" />
</p:dialog>
<h:form id="form">
<p:panel header="Setup System" >
<p:selectOneMenu value="#{groups.selected_sys_code}" id="systems" rendered="#{utility.systemDD}">
<f:selectItem itemLabel="Choose System" itemValue="" />
<f:selectItems value="#{supportBean.access_system_codes}"/>
<p:ajax listener="#{groups.valueChanged}" event="valueChange" render="systemForm" execute="#all"/>
</p:selectOneMenu>
<h:panelGroup id="systemForm" >
<p:panel id="panel" header="Step Details">
<p:messages id="msgs"/>
<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
<p:panelGrid columns="2" styleClass="veaGrid">
<h:outputLabel for="name" value="Name:"/>
<p:inputText id="name" value="#{setup.name}" label="Name" required="true"/>
<h:outputLabel for="desc" value="Description:"/>
<p:inputText id="desc" value="#{setup.description}" label="Description" required="true"/>
<h:outputLabel for="email" value="Email For Group Responsible:"/>
<p:inputText id="email" value="#{setup.emailResp}" label="Email" required="true"/>
<h:outputLabel for="process" value="Process:"/>
<p:inputText id="process" value="#{setup.process}" label="Process" required="true"/>
</p:panelGrid>
</h:panelGrid>
<p:commandButton value="Add Step" update="panel,stepsRing" actionListener="#{setup.setSteps}" process="#form" >
</p:commandButton>
<p:commandButton value="Submit All Steps" actionListener="setup.submitSteps">
</p:commandButton>
</p:panel>
</h:panelGroup>
<h:panelGroup id="stepsRing" >
<p:panel header="Steps">
<p:ring id="basic" value="#{setup.steps}" var="step" >
<p:column>
<p:outputPanel/>
<p:outputPanel style="text-align:center;" layout="block" >
Step #{step.sequence}
<br/>
<p:commandButton update=":form:detail" title="View" oncomplete="dlg.show()" value="Details" >
<f:setPropertyActionListener value="#{step}" target="#{setup.selectedStep}" />
</p:commandButton>
</p:outputPanel>
</p:column>
</p:ring>
</p:panel>
</h:panelGroup>
<p:dialog id="dialog" widgetVar="dlg" showEffect="fade" hideEffect="fade" modal="true" width="300" >
<p:outputPanel id="detail" style="text-align:center;" layout="block">
<h:panelGrid columns="2" cellpadding="5" rendered="#{not empty setup.selectedStep}">
<f:facet name="header">
Step #{setup.selectedStep.sequence}
</f:facet>
<h:outputText value="Name: " />
<p:inputText id="name2" value="#{setup.selectedStep.name}" />
<h:outputText value="Description: " />
<p:inputText id="desc2" value="#{setup.selectedStep.description}" />
<h:outputText value="Email: " />
<p:inputText id="email2" value="#{setup.selectedStep.emailResp}"/>
<h:outputText value="Process: " />
<p:inputText id="process2" value="#{setup.selectedStep.process}"/>
<p:commandButton update="stepsRing" actionListener="#{setup.removeStep}" title="Remove" oncomplete="dlg.hide()" value="Remove Step" >
<f:setPropertyActionListener value="#{step}" target="#{setup.selectedStep}" />
</p:commandButton>
<p:commandButton update="stepsRing" process="#form" actionListener="#{setup.updateStep}" title="Update" value="Update Step" >
<f:setPropertyActionListener value="#{step}" target="#{setup.selectedStep}" />
</p:commandButton>
</h:panelGrid>
</p:outputPanel>
</p:dialog>
</p:panel>
</h:form>
BackingBean
#ManagedBean(name="setup")
#ViewScoped
public class WorkStepSetupSystemBean implements Serializable{
private WorkSetup step;
public ArrayList <WorkSetup> steps=new ArrayList <WorkSetup> ();
private WorkSetup ws;
private String system="test1";
private String emailResp;
private String process;
private String name;
private String description;
private Integer sequence;
private String email2;
private String process2;
private String name2;
private String desc2;
private WorkSetup selectedStep;
public WorkStepSetupSystemBean(){
}
public String getDesc2() {
return desc2;
}
public String getEmail2() {
return email2;
}
public String getName2() {
return name2;
}
public String getProcess2() {
return process2;
}
public WorkSetup getSelectedStep() {
return selectedStep;
}
public ArrayList<WorkSetup> getSteps() {
return steps;
}
public WorkSetup getStep() {
return step;
}
public void setSteps(ActionEvent event) {
step= new WorkSetup();
step.setName(name);
step.setEmailResp(emailResp);
step.setDescription(description);
step.setSystem(system);
step.setProcess(process);
step.setSequence(steps.size()+1);
steps.add(step);
return;
}
public void setStep(ArrayList<WorkSetup> steps) {
this.steps = steps;
}
public Integer getSequence() {
return sequence;
}
public String getDescription() {
return description;
}
public String getEmailResp() {
return emailResp;
}
public String getName() {
return name;
}
public String getProcess() {
return process;
}
public String getSystem() {
return system;
}
public void setDescription(String description) {
this.description = description;
}
public void setEmailResp(String emailResp) {
this.emailResp = emailResp;
}
public void setName(String name) {
this.name = name;
}
public void setProcess(String process) {
this.process = process;
}
public void setSequence(Integer sequence) {
this.sequence = sequence;
}
public void setSystem(String system) {
this.system = system;
}
public void setDesc2(String desc2) {
this.desc2 = desc2;
}
public void setEmail2(String email2) {
this.email2 = email2;
}
public void setName2(String name2) {
this.name2 = name2;
}
public void setProcess2(String process2) {
this.process2 = process2;
}
public void setSelectedStep(WorkSetup selectedStep) {
this.selectedStep = selectedStep;
}
public void removeStep(ActionEvent event) {
steps.remove(steps.indexOf(this.selectedStep));
for(int i=0;i<steps.size();i++){
steps.get(i).setSequence(i+1);
}
}
public void updateStep(ActionEvent event) {
step=steps.get(steps.indexOf(this.selectedStep));
step.setName(name2);
step.setEmailResp(email2);
step.setDescription(desc2);
step.setSystem(system);
}
}
Ended up using
<p:inplace id="inplaceName" >
<p:inputText id="name2" value="#{setup.selectedStep.name}" />
<p:tooltip for="inplaceName" value="Click here to edit"/>
</p:inplace>
without the AJAX option
I have a tree table and two buttons:
one for collapsing the tree and
the other for expanding,
but they don't work. At the backing bean I did root.setExpanded(true); and root.setExpanded(false); but it doesn't work.
<center>
<p:treeTable value="#{roleMB.root}" var="roleTreeTableVar"
binding="#{roleMB.treeTable}" id="roleTreeTable">
<f:facet name="header">
<center>
<p:commandButton value="Réduire tout"
icon="ui-icon-folder-collapsed" style="font-size: 0.9em"
actionListener="#{roleMB.expandAll}"
update=":roleTreeTableForm:roleTreeTable" />
<p:spacer width="30px" />
<p:commandButton value="Développer tout"
icon="ui-icon-folder-open" style="font-size: 0.9em"
actionListener="#{roleMB.collapseAll}"
update=":roleTreeTableForm:roleTreeTable" />
<p:spacer width="30px" />
</center>
</f:facet>
<p:column style="width:150px">
<f:facet name="header">
Nom de Role
</f:facet>
<h:outputText value="#{roleTreeTableVar.nom}" />
</p:column>
<p:column style="width:100px">
<f:facet name="header">
Id de role
</f:facet>
<h:outputText value="#{roleTreeTableVar.id}" />
</p:column>
<p:column style="width:20px">
<p:commandLink oncomplete="dlgAddRole.show()" value="Ajouter"
update=":addRoleForm:selectRolesNamesId">
<f:setPropertyActionListener value="#{roleTreeTableVar}"
target="#{roleMB.selectedRole}" />
</p:commandLink>
<p:commandLink oncomplete="delRole.show()" value="Supprimer">
<f:setPropertyActionListener value="#{roleTreeTableVar}"
target="#{roleMB.selectedRole}" />
</p:commandLink>
<p:commandLink oncomplete="editRole.show()" value="Modifier">
<f:setPropertyActionListener value="#{roleTreeTableVar}"
target="#{roleMB.selectedRole}" />
</p:commandLink>
</p:column>
</p:treeTable>
</center>
This is recursive method for Collapse and Expande.
public void collapsingORexpanding(TreeNode n, boolean option) {
if(n.getChildren().size() == 0) {
n.setSelected(false);
}
else {
for(TreeNode s: n.getChildren()) {
collapsingORexpanding(s, option);
}
n.setExpanded(option);
n.setSelected(false);
}
}
The variable n is the node than you want to expand or colapse.
When The variable option is false, all children of the n is
collapse, in the another case, is expanded
setSelected(false) indicate than this node isn't selected
You should set the expanded property to true not just for the root node but for all the children nodes as well.
A possible solution might look this:
view.xhtml
<h:form id="form">
...
<p:commandButton update=":form:tree" actionListener="#{view.collapseAll}"
icon="fa fa-minus" title="#{msg.collapseAll}"/>
<p:commandButton update=":form:tree" actionListener="#{view.expandAll}"
icon="fa fa-plus" title="#{msg.expandAll}"/>
...
<p:treeTable id="tree" ...>
...
</p:treeTable>
...
</h:form>
View.java
#Named
#ViewScoped
public class View implements Serializable {
private TreeNode root;
...
public void collapseAll() {
setExpandedRecursively(root, false);
}
public void expandAll() {
setExpandedRecursively(root, true);
}
private void setExpandedRecursively(final TreeNode node, final boolean expanded) {
for (final TreeNode child : node.getChildren()) {
setExpandedRecursively(child, expanded);
}
node.setExpanded(expanded);
}
}
For question: "how can this be realized?"
In code...
public void reloadTree() {
assocRoot = new DefaultTreeNode();
assocRoot.setExpanded(true);
TreeNode currentAssocNode;
AbstractDocument parentAssoc = getParentDocAssociation();
if(parentAssoc !=null) {
TreeNode parentAssocNode = new DefaultTreeNode(parentAssoc);
parentAssocNode.setExpanded(true);
....
I have a jsf page that I can't update the value of some checkboxes in a list of userDamain objects, in fact this is a part of my jsf page :
<h:outputText value="USER's rights list: "></h:outputText>
<p:dataTable id="userss" var="userr" value="#{userMB.userListe}">
<p:column>
<f:facet name="header"><h:outputText value="FirstName" /></f:facet>
<h:outputText value="#{userr.firstName}" />
</p:column>
<p:column>
<h:panelGrid columns="1" style="margin-bottom:10px" cellpadding="5">
<h:outputText value="Basic Usage: " />
<p:selectBooleanCheckbox value="#{userr.deletee}" immediate="true" actionListener="#{userr.deletee}" />
</h:panelGrid>
<p:commandButton value="Submit" update="display" oncomplete="dlg.show()" />
<p:dialog header="Selected Values" modal="true" showEffect="fade" hideEffect="fade" widgetVar="dlg">
<h:panelGrid columns="1" id="display">
<h:outputText value="Value 1: #{userr.deletee}" />
</h:panelGrid>
</p:dialog>
</p:column>
when I click on the boolean button 'Submit', the value of the userr.deletee is always false ( the default value ) and it's not updated anyway, I tried to use the Listner and actionListener in the booleanButton but it doesn't work, I also tried the postValidate event, so if someone has any idea of that, I would be graceful.
this is a part of my managed bean:
private List<UserDomain> userListe ;
public List<UserDomain> getUserListe() {
return this.userListe;
}
public void loadUserListe(){
this.userListe = new ArrayList<UserDomain>();
this.userListe.addAll(getUserServicee().getAll());
}
public void setUserListe(List<UserDomain> userListe) {
this.userListe = userListe;
}
a part of the userDomain bean:
...
public String getFirstName() {
return firstName;
}
public void setFirstName(String firstName) {
this.firstName = firstName;
}
#Transient
private boolean deletee;
public boolean isDeletee() {
return deletee;
}
public void setDeletee(boolean deletee) {
this.deletee = deletee;
}
I found out a solution which seems logic to me, I added to my checkbox an ajax behavior to execute a method and an attribute which called in this method to get the whole userDomain object, so on I can get the user.deletee value, here is a part of the code I m talking about:
<h:panelGrid columns="1" style="margin-bottom:10px" cellpadding="5">
<h:outputText value="Delete Right: " />
<p:selectBooleanCheckbox value="#{userr.deletee}">
<f:ajax execute="#this" listener="#{userMB.saveUserRights}" />
<f:attribute name="user" value="#{userr}" />
</p:selectBooleanCheckbox>
</h:panelGrid>
I hope this will be helpful for you