I have been working on this problem from last two days. I went through the apis possibly I could refer to but no luck.
I have been using ui:repeat as jsf facelet to render data with rows and columns
Code for reference
<ui:repeat var="pendingRequestItem" value="#{oqHomeController.allRequests}" > --JSF
<p:row rendered="#{oqHomeController.renderPendingRequest}> -- PRIMEFACES FOR ROW
<td><h:outputText value="#{pendingRequestItem.title}" /></td>
<td><h:outputText value="#{oqHomeController.pendingCount}" /></td>
</p:row>
</ui:repeat>
And the above code is resulting in the following which is very strange.
<tbody>
<td>Request for Quote 1</td>
<td>1</td>
<td>DTHEME1</td>
<td>4</td>
</tbody>
I hope it should be
<tbody>
<tr>
<td>Request for Quote 1</td>
<td>1</td>
</tr>
<tr>
<td>DTHEME1</td>
<td>4</td>
</tr>
</tbody>
Please help thanks.
Have you tried <p:dataTable> it seems that is what you are looking for:
<p:dataTable var="pendingRequestItem" value="#{oqHomeController.allRequests}">
<p:column>
<h:outputText value="#{pendingRequestItem.title}"/>
</p:column>
<p:column>
<h:outputText value="#{oqHomeController.pendingCount}"/>
</p:column>
</p:dataTable>
Related
I am developing a complex table with nodes and many rows by node. I would like add f:facets to f:facet for my table.
I have this.
I would like this.
<h:form id="formPartes">
<h:panelGroup id="pgPartes">
<p:treeTable id="tablaPartes" class=" validate tablaNormal" style="border:none;" value="#{estrategiaBean.nodoProyecto}" var="parte">
<p:column headerText="Nombre">
<h:outputText value="#{parte.nombre}" />
<h:panelGroup id="agregarParteHija#{generalBean.unir(parte.nombre)}">
<h:commandLink action="#{estrategiaBean.cargarNuevaParte(parte)}">
<f:ajax render=":formNuevaParte:pgNuevaParte" execute="agregarParteHija#{generalBean.unir(parte.nombre)}"/>
<i class="material-icons small">add</i>
</h:commandLink>
</h:panelGroup>
</p:column>
<p:column headerText="Ts...">
<ui:repeat value="#{estrategiaBean.funcionesDeParte(parte)}" var="atributo">
<table>
<thead>
<tr>
<ui:repeat value="#{atributo.obtLista('TAM_Ciclo')}" var="atributo3">
<th class="ui-state-default">
#{atributo3.atributo}
</th>
</ui:repeat>
</tr>
</thead>
<tbody>
<tr>
<ui:repeat value="#{atributo.obtLista('TAM_Ciclo')}" var="atributo3">
<td>
<h:inputText value="#{atributo3.valor}"/>
</td>
</ui:repeat>
</tr>
</tbody>
</table>
</ui:repeat>
</p:column>
</p:treeTable>
<h:panelGroup>
</h:form>
Please, help me with xhtml code.
<h:form>
<table>
<tr>
<td><label>First Name:</label></td>
<td><h:outputText value="#{profile.firstName}"
rendered="#{not profile.canEdit}" /></td>
<td><h:inputText value="#{profile.firstName}"
rendered="#{profile.canEdit}" required="true" /></td>
<td><h:commandButton value="Edit"
action="#{profile.editDetail}" /></td>
<td><h:commandButton value="Cancel" type="button"
action="#{profile.cancelBtn}" /></td>
</tr>
<tr>
<td><label>Last Name:</label></td>
<td><h:outputText value="#{profile.lastName}"
rendered="#{not profile.canEdit}" /></td>
<td><h:inputText value="#{profile.lastName}"
rendered="#{profile.canEdit}" required="true" /></td>
<td><h:commandButton value="Edit"
action="#{profile.editDetail}" /></td>
<td><h:commandButton value="Cancel" type="button"
action="#{profile.cancelBtn}" /></td>
</tr>
<tr>
<td><label>Email:</label></td>
<td><h:outputText value="#{profile.email}"
rendered="#{not profile.canEdit}" /></td>
<td><h:inputText value="#{profile.email}" id="email"
rendered="#{profile.canEdit}" required="true" /></td>
<td><h:commandButton value="Edit"
action="#{profile.editDetail}" /></td>
<td><h:commandButton value="Cancel" type="button"
action="#{profile.cancelBtn}" /></td>
<td><h:message for="email" value="#{profile.errorMessage}"
rendered="#{profile.errorMessage ne null}" /></td>
</tr>
<tr>
<td><label>Password:</label></td>
<td><h:outputText value="#{profile.password}"
rendered="#{not profile.canEdit}" /></td>
<td><h:commandButton value="Edit"
action="#{profile.editDetail}" /></td>
<td><h:commandButton value="Cancel" type="button"
action="#{profile.cancelBtn}" /></td>
</tr>
<h:panelGroup rendered="#{profile.canEdit}">
<tr>
<td><label>Old Password: </label></td>
<td><h:inputText value="#{profile.password}" required="true" /></td>
<td><h:outputText rendered="#{profile.errorMessage != null}"
value="#{profile.errorMessage}"></h:outputText></td>
</tr>
<tr>
<td><label>New Password: </label></td>
<td><h:inputSecret value="#{profile.newPassword}"
required="true" /></td>
</tr>
<tr>
<td><label>Confirm Password: </label></td>
<td><h:inputSecret value="#{profile.confirmPassword}"
required="true" /></td>
<td><h:outputText
rendered="#{profile.confirmPassword != profile.newPassword}"
value="Passwords donot match!!"></h:outputText></td>
</tr>
<tr>
<td><h:commandButton action="#{profile.savePassword}"
value="Save Password"
disabled="#{profile.confirmPassword != profile.newPassword}" /></td>
<td><h:commandButton action="#{profile.cancelBtn}" value="Cancel" type="button"/></td>
</tr>
</h:panelGroup>
<tr>
<td><label>Gender</label></td>
<td>#{profile.gender}</td>
</tr>
<tr>
<td><label>City</label></td>
<td>#{profile.city}</td>
</tr>
<tr>
<td><label>State</label></td>
<td>#{profile.state}</td>
</tr>
<tr>
<td><label>Country</label></td>
<td>#{profile.country}</td>
</tr>
<tr>
<td><label>Zip-Code</label></td>
<td>#{profile.zipCode}</td>
</tr>
<tr>
<td><label>Phone Number</label></td>
<td>#{profile.phoneNumber}</td>
</tr>
<tr>
<td><h:commandButton action="#{profile.saveDetails}"
disabled="#{profile.canEdit eq 'false'}" value="Save" /></td>
<td><h:commandButton action="#{profile.cancelBtn}" type="button"
value="Cancel" /></td>
</tr>
</table>
</h:form>
My code snippet of my backing bean
public String InitializeValues(){
customer = (CustomerVO) sessionManager.getSession("CustomerBean");
System.out.println("inside profilepagecontroller"+"\n"+ customer);
setFirstName(customer.getFirstName());
this.setLastName(customer.getLastName());
this.setEmail(customer.getEmail());
this.setPassword(customer.getPassword());
this.setCity(customer.getCity());
this.setState(customer.getState());
this.setCountry(customer.getCountry());
this.setPhoneNumber(customer.getPhoneNumber());
this.setGender(customer.getGender());
this.setZipCode(customer.getZipCode());
this.setCustomerId(customer.getCustomerId());
return "ProfilePage";
}
public String editDetail(){
setCanEdit(true);
setCanSave(true);
return null;
}
public String cancelBtn(){
setCanEdit(false);
return "ProfilePage";
}
Problems and solutions i need
when i click on cancelbutton, canEdit sets to false, but the
inputText does not get 'un'rendered on the screen. it does not render
outputText.
how do i get only a particular field in edit mode after i click edit?( creating separate boolean values for each field obv not
feasible)
setter methods set the values of fields of backing beans. after i run the code, same are not displayed on the screen. 'this' gets all
the values which i need to display, but not displayed on screen.
when i click on cancelbutton, canEdit sets to false, but the inputText
does not get 'un'rendered on the screen. it does not render outputText
Your commandButton has type="button" that shouldn't be the case.
how do i get only a particular field in edit mode after i click edit?(
creating separate boolean values for each field obv not feasible)
Huh Sure it is feasible. The only scenario I'd see you using that is if validation didn't pass for some component. Then I think you could try #{component.valid} in rendered. The problem is that all the component will be vaalid at the start then the invalid will not be rendered. To solve that check if the request is a postback:
public boolean isPostback(){
return FacesContext.getCurrentInstance().isPostback();
}
rendered="#{component.valid and not mybean.postback}"
setter methods set the values of fields of backing beans. after i run
the code, same are not displayed on the screen. 'this' gets all the
values which i need to display, but not displayed on screen.
I don't understand that question is it your capitalized method Initialize that your are talking about ? you should post the whole bean as well cuz it's never called here.
I have a condition where i need to have two radio buttond with related data in the below the buttons.
i did something like below but the selected radio button value is not getting in the backed been. Please correct where i am going wrong
<table>
<tr>
<td>
<h:selectOneRadio value="#{beenObject.adressSelection}">
<f:selectItem itemValue="Employer" itemLabel="Employer" />
</h:selectOneRadio>.
</td>
<td>
<h:selectOneRadio value="#{beenObject.adressSelection}">
<f:selectItem itemValue="Consultant" itemLabel="Consultant" />
</h:selectOneRadio>.
</td>
</tr>
<tr>
<td>
<h:outputText value="#{beenObject.consultentDetailsString}">
</h:outputText>
</td>
</tr>
<tr>
<td>
<h:outputText value="#{beenObject.employerDetailsString}">
</h:outputText>
</td>
</tr>
</table>
I'm facing an issue similar as yours however I tried to replicate my situation at your code. While I was simplifying the lines I just end-up fixing your bug.
Below the code wich will work for you.
<table>
<tr>
<td>
<h:selectOneRadio value="#{beenObject.adressSelection}">
<f:selectItem itemValue="Employer" itemLabel="Employer" />
<f:selectItem itemValue="Consultant" itemLabel="Consultant" />
</h:selectOneRadio>
</td>
</tr>
<tr>
<td>
<h:outputText value="#{beenObject.consultentDetailsString}">
</h:outputText>
<h:outputText value="#{beenObject.employerDetailsString}">
</h:outputText>
</td>
</tr>
</table>
Explaining what I did:
I grouped the elements f:selectItem underneath f:selectItems like is shown in the sample at primeface showcase and it starts to work.
Hope it work as you want.
Cheers.
I want to create a table which display a list of values in several rows, each row should contains only 3 columns.
I can create this by using JSTL but not using JSF. I am suspecting that it is xhtml related issue, not a problem in JSP, xhtml is very strict about the elements formation. Is there a way to achieve this?
Using JSTL:
<c:forEach var="book" value="${bookBean.bookList}" varStatus="bookStatus">
<c:if test="${bookStatus.index eq 0 or bookStatus.index mod 3 eq 0}">
<tr>
</c:if>
<td>
<table>
<tr>
<td>#{book.bookId}</td>
<td>#{book.bookName}</td>
<td>#{book.price}</td>
<td>#{book.author}</td>
</tr>
</table>
</td>
<c:if test="${bookStatus.count mod 3 eq 0}">
</tr>
</c:if>
</c:forEach>
Using JSF:
<ui:repeat var="book" value="#{bookBean.bookList}" varStatus="bookStatus">
<ui:fragment rendered="#{bookStatus.first or bookStatus.index mod 3 eq 0}">
<tr> <!-- Here i am getting an error saying closing tr missed.--->
</ui:fragment>
<td>
<table>
<tr>
<td>#{book.bookId}</td>
<td>#{book.bookName}</td>
<td>#{book.price}</td>
<td>#{book.author}</td>
</tr>
</table>
</td>
<ui:fragment rendered="#{(bookStatus.index+1) mod 3 eq 0}">
</tr>
</ui:fragment>
</ui:repeat>
This is actually not easy to do without using some component library (richfaces I know for a fact that has a component that does this.. rich:dataGrid..)
Here's a solution I found a while back to solve this issue... (I'm not a big fan of component libraries myself... ).. it's not the most elegant solution.. but it does the trick..
<table>
<tr>
<ui:repeat var="book" value="#{bookBean.bookList}" varStatus="bookStatus">
<td>
<table>
<tr>
<td>#{book.bookId}</td>
<td>#{book.bookName}</td>
<td>#{book.price}</td>
<td>#{book.author}</td>
</tr>
</table>
</td>
<h:outputText value="</tr><tr>" escape="false" rendered="#{(bookStatus.index + 1 ) mod 3 eq 0}"/>
</ui:repeat>
</tr>
</table>
As #FMQ has mentioned, try to use a JSF component library. Primefaces could be a good option, checkout the Demo page.
I have input fields and datatable in the same page, in such a way that when user adds a new data, data should be added to the datatable without refreshing the page.
To achieve this I tried the following code
xhtml part
<table border="0">
<tr>
<td width="700" height="100px">Customer Name: <h:inputText
immediate="true" id="customername" autocomplete="false" value="#{salesBean.customerName}">
</h:inputText>
</td>
</tr>
<tr>
<td width="900" height="160px">
<table border="1">
<tr>
<td align="left">Product Name</td>
<td align="left">Rate</td>
<td align="left">Quantity</td>
<td align="left">Total Price</td>
<td align="left">Paid</td>
<td align="left">Date of Sales</td>
<td align="left"></td>
</tr>
<tr>
<td align="left"><h:inputText immediate="true"
id="productname" autocomplete="false" value="#{salesBean.productName}">
</h:inputText></td>
<td align="left"><h:outputText id="rate"
binding="#{salesBean.productRate}" /></td>
<td align="left"><h:inputText size="2"
onkeyup="return calculateTotalRate(event);" id="quantity" value="#{salesBean.quantity}"/></td>
<td align="left"><h:outputText id="totalprice" /></td>
<td align="left"><h:selectOneRadio id="sor"
title="Select any one of the choice" value="#{salesBean.paidFlag}">
<f:selectItem id="si1" itemLabel="Yes" itemValue="yes" />
<f:selectItem id="si2" itemLabel="No" itemValue="no" />
</h:selectOneRadio></td>
<td align="left"><rich:calendar id="salesDate" value="#{salesBean.salesDate}"></rich:calendar></td>
<td align="center">
<h:commandButton value="Submit">
<a4j:support action="#{salesBean.submit}" reRender="table"></a4j:support>
</h:commandButton>
<h:commandButton value="Cancel" /></td>
</tr>
</table>`
</td>
</tr>
<tr>
<td>
<h:outputText id="errormessage" style="display:inline-block;color:Red;width:300px;"/>
</td>
</tr>
<tr>
<td>
<h:panelGroup id="panel">
<rich:dataTable var="data" id="table" binding="#{salesBean.table}" rendered="#{salesBean.salesHistoryRendered}">
<h:column>
<f:facet name="header">
<h:outputText value="Product Name"/>
</f:facet>
<h:outputText value="#{data.productName}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Date of Sale"/>
</f:facet>
<h:outputText value="#{data.dateOfSales}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Is Paid?"/>
</f:facet>
<h:outputText value="#{data.paidCheck}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Quantity?"/>
</f:facet>
<h:outputText value="#{data.quantity}"/>
</h:column>
</rich:dataTable>
<h:outputText id="text" binding="#{salesBean.checkValueChangeListener}"/>
</h:panelGroup>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
Please help me to solve this. Please update me if my question is not clear.
I am using JSF 1.2 and Richfaces 3.3.2
Thanks in advance
You have missed event attribute in a4j:support. Should be like this (disableDefault="true" is to prevent h:commandButton standard behavior):
<h:commandButton value="Submit">
<a4j:support event="onclick" disableDefault="true" action="#{salesBean.submit}" reRender="table"/>
</h:commandButton>
Or even better like this (will do the same as the lines above, but in more a4j-style):
<a4j:commandButton value="Submit" action="#{salesBean.submit}" reRender="table"/>
"Without refreshing the page" means AJAX.
RichFaces 3.3 has AJAX support, and their documentation explains how to use it in chapters 5.1 through 5.7.