JSF selectboolean checkbox in datatable not showing up - jsf

Firstly I would provide my configuration details:
JSF - 1.2
Icefaces - 1.8
Servlet - 2.5
I am trying to put an ice:selectBooleanCheckbox in a datatable. But, I am facing an expception repeatedly:
icelogin.jspx #54,59 value="#{o.checkBox}": ELResolver cannot handle a
null base Object with identifier 'o'
Here is my jspx code
<html 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:ice="http://www.icesoft.com/icefaces/component"
xmlns:ft="http://facestrace.sourceforge.net">
<f:view>
<head>
<title>JSF Jump start</title>
</head>
<body>
<ice:form>
<h3>User Name and Password</h3>
<table>
<tr>
<td>
<ice:outputLabel value="Name"/>
</td>
<td>
<ice:inputText value="#{userLogin.name}"/>
</td>
</tr>
<tr>
<td>
<ice:outputLabel value="Password"/>
</td>
<td>
<ice:inputText value="#{userLogin.password}"/>
</td>
</tr>
</table>
<ice:dataTable value="#{userLogin.orderList}" var="o">
<ice:column>
<!-- column header -->
<f:facet name="header">Order No</f:facet>
<!-- row record -->
#{o.orderNo}
</ice:column>
<ice:column>
<f:facet name="header">Product Name</f:facet>
#{o.productName}
</ice:column>
<ice:column>
<f:facet name="header">Price</f:facet>
#{o.price}
</ice:column>
<ice:column>
<!-- column header -->
<f:facet name="header">Checkbox</f:facet>
<!-- row record -->
<ice:selectBooleanCheckbox value="#{o.checkBox}"/>
<!-- #{o.checkBox} -->
</ice:column>
<ice:column>
<f:facet name="header">Quantity</f:facet>
#{o.qty}
</ice:column>
</ice:dataTable>
<ice:commandButton type="submit" value="Sign In" action="#userLogin.saveData}"/>
</ice:form>
</body>
</f:view>
</html>
If I remove checkBox value from #{o.checkBox} to true or false, it works. I presume that for true, the checkBox should be selected in UI, and false it must remain unselected. But, even if I put code like this
<ice:selectBooleanCheckbox value="true"/>
check button is being displayed in UI but is not showing up selected though the value is true. I am following this tutorial, in my case I have one more extra parameter in my bean.
boolean checkBox;
I have getters and setters in place, and passed to the constructor, all set. What could be wrong?

Related

how to Close p:accordionPanel on button click

I am using to enter address field .by default am setting active-index="-1" so the panel will be closed when the page gets loaded.After the details has been entered by user i want the panel area which means i want the accordion panel to be closed on button(save) click.but i tried a lot using java script but am not able to achieve ,and here is page
<h:body>
<ui:composition template="/WEB-INF/templates/layout.xhtml">
<ui:define name="content">
<h:form id="quotesForm">
<div class="headerbg">
<div id="innerheaderbg">
<div id="iconarea">
<img src="#{request.contextPath}/images/headerimages/productlist.png" />
</div>
<div id="headertextarea">
<p class="headingtext">New Quote</p>
<p id="breadCrumbtext">Order  <img src="#{request.contextPath}/images/error-bullet.gif" />
 Quote List  <img src="#{request.contextPath}/images/error-bullet.gif" />
 New Quote
</p>
</div>
</div>
</div>
<p:growl id="msgs" />
<div class="widget widget-table action-table">
<div class="widget-header" style="text-align:center;padding-top: 52px">
<h3>Create New Quote</h3>
</div>
<div class="widget-content" style="background-color: #DAEDF4;height: 600px;" >
<div id="calender" style="margin-left: 52px;margin-top: -26px">
<table>
<tr>
<td>
<p:outputLabel id="qDate" value="#{quotesBean.qtCreationDate}"></p:outputLabel>
</td>
<td>
<p:calendar id="popup" showOn="button" display="inline" >
<p:ajax event="dateSelect" listener="#{quotesBean.onDateSelect}" update="qDate" />
</p:calendar>
</td>
</tr>
</table>
<p:outputLabel value="Invoice # #{quotesBean.qCount}" style="margin-top:-15px;margin-left:10px;"/>
</div>
<div id="company">
<table align="right" style="margin-right: 52px">
<thead>
<tr>
<th style="text-align: center;padding: 0;"><img src="#{request.contextPath}/images/favicon.ico"/><p:spacer width="5px"/>SolvEdge</th>
</tr>
</thead>
<tr><td style="text-align: center;padding: 0;">Zameen Pallavaram,</td></tr>
<tr><td style="text-align: center;padding: 0;">Chennai,</td></tr>
<tr><td style="text-align: center;padding: 0;">INDIA</td></tr>
</table>
</div>
<h:form id="addForm">
<p:accordionPanel id="accordion" cache="false" activeIndex="-1" style="margin-bottom:20px;width:330px;" widgetVar="acc" >
<p:tab title="Bill To Address:" titleStyle="width:330px;background-color:#DAEDF4" >
<h:panelGrid columns="2">
<h:outputLabel value="Name" />
<h:inputText value="#{quotesBean.name}"/>
<h:outputLabel value="Street" />
<h:inputText value="#{quotesBean.street}"/>
<h:outputLabel value="City" />
<h:inputText value="#{quotesBean.city}"/>
<h:outputLabel value="ZIP" />
<h:inputText value="#{quotesBean.zip}"/>
</h:panelGrid>
<p:commandButton icon="ui-icon-save" value="Save" action="#{quotesBean.saveAddress}" update=":quotesForm:addForm:accordion" ajax="false" onclick="PF('quotesForm:addForm:accordion').hide();"/>
</p:tab>
</p:accordionPanel>
</h:form>
</div>
</div>
<script type="text/javascript">
var link = document.getElementById('quotesForm:popup_input');
link.style.display = 'none';
function closeAccordianPanel()
{
var panel = document.getElementById('quotesForm:addForm:accordion');
link.style.activeIndex = '-1';
/* PF('widget_accordion').unselect(0); */
}
</script>
</h:form>
<br></br>
</ui:define>
</ui:composition>
</h:body>
</html>
Note:Java Script i tried here is nothing worked for me,i would like to close the accordion panel on button click.
I bet you have javascript errors in the console...(PF('quotesForm:addForm:accordion').hide(); is wrong, it should be PF('acc').hide(); IF it works at all (nothing about that in the PrimeFaces docs). And why close a ui component via javascript if you do an 'ajax="false"'. And sending a click event to the tab you want to toggle works, but even better is to use the official client-side api: PF('acc').unselect(...);
Ahhhh... you have additional code below the commandbutton... but there is a wrong widgetVar value... and it is commented out... and the other part does nothing...
Unselect(index of tab) method only hide the p:tab.
If you want to hide your accordionPanel, you can use rendered attribute.
Here is the panel:
<p:panel id="toggleable" header="Toggleable" toggleable="true"
toggleOrientation="horizontal" toggleSpeed="500" closeSpeed="500"
widgetVar="panel" class="left-menu-panel" >
</p:panel>enter code here`
and button or commandLink which collapse panel
<p:commandLink styleClass="open-left-menu-button"
onclick="PF('panel').toggle()">
</p:commandLink>
You can set it with toggleOrientation="horizontal/vertical".
normal panel - not collapsed
collapsed

PrimeFaces dialog does not show up

hi I'm working with PrimeFaces. When I encountered this problem. I want to display the values I entered in the form while clicking the save button
and the XHTML file is
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>
calender popup problem
</title>
</h:head>
<body>
<h:form>
<TABLE>
<tr>
<td><h:outputText value="*"/></td>
<td><h:outputText value="COUPOUN NAME" /></td>
<td><p:inputText id="coupounname" maxlength="50" value="#{office.coupounname}"/></td>
</tr>
<tr style="padding-top: 10px">
<td><h:outputText value="*"/></td>
<td><h:outputText value="COUPOUN CODE" /></td>
<td><p:inputText id="couponcode" value="#{office.coupouncode}"/></td>
</tr>
<tr style="padding-top:10px">
<td><h:outputText value="*"/></td>
<td><h:outputText value="COUPOUN DESCRIPTION"/></td>
<td><p:inputTextarea id="coupoundes" value="#{office.coupouncode}"/></td>
</tr>
<tr style="padding-top: 10px">
<td><h:outputText value= "*"/></td>
<td><h:outputText value="Discount"/></td>
<!-- <td>
<p:selectOneRadio id="radiobuttons" value="#{office.percentage}">
<f:selectItem itemLabel="in ruppes" itemValue="ByCash"/>
<f:selectItem itemLabel="inpercentage" itemValue="InPercentage"/>
</p:selectOneRadio>
</td> -->
</tr>
<tr>
<td><h:outputText value="*"/></td>
<td><h:outputText value="Validity"/></td>
<td><p:calendar value="#{office.startdate}"/></td>
<td><p:calendar value="#{office.enddate}"/></td>
</tr>
<tr>
<td><p:commandButton id="save" value="save" action="#{officebean.save}"/></td>
<td><p:commandButton id="cancel" value="cancel"/></td>
</tr>
</TABLE>
</h:form>
<ui:include src="dialogs.xhtml"/>
</body>
</html>
and the dialog is stored in the file
<p:dialog id="listdialog" visible="${officebean.dialogvisible eq 'Bean'} " dynamic="true" minHeight="120">
<h:form id="dialogform">
<h:outputText value=" the value entered by the users were"/>
<table>
<tr>
<td>name:=<h:outputText value="#{office.coupounname}"/></td>
<td>code:<h:outputText value="#{officebean.dialogvisible}"/</td>
</tr>
</table>
</h:form>
</p:dialog>
now the bean class which contains the action for save button which sets the condition which makes the dialog visible
#ManagedBean(name="officebean")
#RequestScoped
public class Officebean {
private List<Office>officeList;
private Office office;
private String Dialogvisible;
public void save() {
Dialogvisible="Bean";
}
public List<Office> getOfficeList() {
return officeList;
}
public void setOfficeList(List<Office> officeList) {
this.officeList = officeList;
}
public Office getOffice() {
return office;
}
public void setOffice(Office office) {
this.office = office;
}
public String getDialogvisible() {
return Dialogvisible;
}
public void setDialogvisible(String dialogvisible) {
Dialogvisible = dialogvisible;
}
}
but dialog is not showing up when save button is clicked any held would be appreciated
I'd guess you need to use
<h:body> instead of <body>
<p:dialog id="listdialog" widgetVar="listdialog".... >
<p:commandButton oncomplete="PF('listdialog').show()" ... />
and maybe remove visible from the dialog.
try
<p:commandButton id="save" value="save" action="#{officebean.save}" update="listdialog"/>
but if you want to show as a popup you are going to have to use
<p:commandButton id="save" value="save" action="#{officebean.save}" update="listdialog" oncomplete="#{p:widgetVar('listDialog')}.show();"/>
First you have to know that a dialog doesn't show until you call in some way the show() function...
if the other answers don't work for you maybe you can add in dialogs.xhtml this:
firt you have to add the widgetVar variable at the dialog like something like:
<p:dialog id="listdialog" visible="${officebean.dialogvisible eq 'Bean'} " dynamic="true" minHeight="120" widgetVar="listdialog">
Then outside the dialog something like:
<p:remoteCommand id="rc1" name="showDialog"oncomplete="PF('listdialog').show();" />
And to finish:
<script type="text/javascript">
showDialog();
</script>
This should open your dialog as soon you open the dialogs.xhtml....
Good luck!

Error due to same client ID of components in JSF Data Table

I have a JSF application with a Data Table. Each row has a 'commandLink'. When the commandLink of a row is clicked then row data must be displayed on console.
I am getting an error when I click on the commandLink, the error is as follows:
component with duplicate id "dataTable1:col1" found
viewId=/UserHome.xhtml
location=E:\workspaces_eclipse\webService\.metadata\.plugins \org.eclipse.wst.server.core\tmp2\wtpwebapps\JSF_Demo\UserHome.xhtml
phaseId=RENDER_RESPONSE(6)
Caused by:
java.lang.IllegalStateException - component with duplicate id "dataTable1:col1" found
at org.apache.myfaces.view.facelets.compiler.CheckDuplicateIdFaceletUtils.checkIds(CheckDuplic ateIdFaceletUtils.java:100)
The error shows that components have same IDs, however I tried to give different 'id' to each element of the data table.
The source code of JSF file 'UserHome.xhtml' is as follows:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Resource Net 1.0</title>
<h:outputStylesheet library="css" name="table-style.css"></h:outputStylesheet>
</h:head>
<h:body>
<div align="center">
<table width="90%" height="100%" border="0" style="cellspacing:0; border-radius:10px ;box-shadow: 0px 0px 15px 10px #888888">
<tr>
<td>
<h2><div align="center">Resource Net 1.0</div></h2>
</td>
</tr>
<tr>
<td>
2. Generated by Map :
<h:selectOneMenu value="#{userHomeListener.favCoffee2}">
<f:selectItems value="#{userHomeListener.allDomains}" />
</h:selectOneMenu>
</td>
</tr>
<tr>
<td>
<h:dataTable value="#{userHomeListener.documents}" var="doc"
binding="#{userHomeListener.documentsTable}"
id="dataTable1"
styleClass="order-table"
headerClass="order-table-header"
rowClasses="order-table-odd-row,order-table-even-row"
border="1">
<h:column id="col1">
<f:facet name="header1">Document ID</f:facet>
#{doc.docID}
</h:column>
<h:column id="col2">
<f:facet name="header2">Document Name</f:facet>
#{doc.docName}
</h:column>
<h:column id="col3">
<f:facet name="header3">Document Link</f:facet>
<h:form id="form1">
<h:commandLink id="link" value="#{doc.docLink}" action="#{userHomeListener.getRowData}"></h:commandLink>
</h:form>
</h:column>
<h:column id="col4">
<f:facet name="header4">Upload Date</f:facet>
#{doc.uploadDate}
</h:column>
</h:dataTable>
<h:commandButton value="get row data" ></h:commandButton>
</td>
</tr>
</table>
</div>
</h:body>
Is there some problem with my code? Kindly suggest solutions to this issue.
Thanks in advance.
The binding attribute of the <h:dataTable> is the suspect here. It may lead to this kind of problems when the bean is in a too broad scope and/or when you're doing "wrong things" in the getter/setter of that attribute.
Putting the bean in the request scope and/or looking for alternative ways so that you can get rid of the binding altogether should solve this problem.
The combination of the binding attribute and the name of the command link action method getRowData suggests that you're merely using it to get the current table row. This was indeed the way when using the old JSF 1.x, but not anymore when using the new JSF 2.x. This can be done much better and simpler when you're running a Servlet 3.0 / EL 2.2 capable container (Tomcat 7, Glassfish 3, etc).
<h:dataTable value="#{userHomeListener.documents}" var="doc">
<h:column>
<h:form>
<h:commandLink value="#{doc.docLink}" action="#{userHomeListener.getRowData(doc)}" />
</h:form>
</h:column>
</h:dataTable>
with
public void getRowData(Document doc) {
// ...
}
You see, you can just pass the #{doc} straight as method argument.
See also:
How can I pass selected row to commandLink inside dataTable?
Recommended JSF 2.0 CRUD frameworks

How to rewrite JSF h:table into h:panelGrid

I need a way to create editable table like this. I interested is it possible to use h:panelGrid to display and edit the data. From my previews post I saw that it's possible to simple JSF table, but is this possible with h:panelGrid?
<table>
<ui:repeat var="elem" value="#{yourMB.yourDataList}">
<tr>
<td>#{elem.userid}</td>
<td>
<h:outputText value="#{elem.name}"
rendered="#{not elem.editable}" />
<h:inputText value="#{elem.name}" rendered="#{elem.editable}" />
</td>
<td>
<h:outputText value="#{elem.telephone}"
rendered="#{not elem.editable}" />
<h:inputText value="#{elem.telephone}"
rendered="#{elem.editable}" />
</td>
<td>
<h:commandLink value="Edit" rendered="#{not elem.editable}"
action="#{yourMB.editAction(elem)}" />
</td>
</tr>
</ui:repeat>
</table>
<h:commandButton value="Save Changes" action="#{yourMB.saveAction}" />
The answer is "NO". Try to use h:dataTable instead of h:panelGrid.

New values are not binding with form backing object when posting in seam

I have multiple forms that are populated by ThingPageBean. Each of these forms are submitted with a <h:commandButton> where the action is set to call #{thingPageBean.doAmazingThing(oneStuff)}. All fields are static except for contactEmail and contactPhone where I want to use <h:inputText> instead of <h:outputText> so that the user can set a new value if they wish.
The problem is that the new values are not bound to object that is received in doAmazingThing(OneStuff oneStuff) in the ThingPageBean. The old ones remain.
What am I doing wrong? Have I missed some crucial part?
My Bean:
#SuppressWarnings({"unchecked"})
#AutoCreate
#Name("thingPageBean")
#Scope(ScopeType.EVENT)
#Restrict("#{s:hasRole('admin')}")
public class ThingPageBean implements Serializable {
#In
StuffService stuffService;
#In
private StatusMessages statusMessages;
public String doAmazingThing(OneStuff oneStuff) {
return this.stuffService.doAmazingStuffToThing(oneStuff);
}
#Factory(value = "notHandledStuff")
public List<Stuff> notHandledStuff() {
return this.stuffService.searchNotHandledStuff();
}
}
My xhtml file:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jstl/core"
template="/layout/SiteTemplate.xhtml">
<ui:param name="robots" value="noindex"/>
<!-- hide blocks -->
<ui:param name="preContentHide" value="true"/>
<ui:define name="mainContent">
<c:set var="stuff" value="#{notHandledStuff}"/>
<s:div styleClass="section"
rendered="#{stuff == null or stuff.size==0}">
<h:outputText value="#{messages['stuff.no']}"/>
</s:div>
<s:div styleClass="section"
rendered="#{stuff != null and stuff.size>0}">
<br/>
<ui:repeat var="oneStuff" value="#{stuff}">
<h:form id="stuffForm">
<hr style="margin-top:8px;margin-bottom:4px;"/>
<table border="1">
<tr>
<td><b>Company name:</b></td>
<td width="780px"><h:outputText value="#{oneStuff.companyName}"/></td>
</tr>
<tr>
<td><b>street:</b></td>
<td><h:outputText value="#{oneStuff.street}"/></td>
<td/>
</tr>
<tr>
<td><b>zip:</b></td>
<td><h:outputText value="#{oneStuff.zip}"/></td>
<td/>
</tr>
<tr>
<td><b>city:</b></td>
<td><h:outputText value="#{oneStuff.city}"/></td>
<td/>
</tr>
<tr>
<td style="padding-top:10px"><b>contactPerson:</b></td>
<td><h:outputText value="#{oneStuff.contactPersonName}"/></td>
<td/>
</tr>
<tr>
<td><b>contactEmail:</b></td>
<td><h:inputText value="#{oneStuff.contactEmail}"/></td>
<td/>
</tr>
<tr>
<td><b>contactPhone:</b></td>
<td><h:inputText id="contactPhone" value="#{oneStuff.contactPhone}"/></td>
<td/>
</tr>
<h:commandButton id="submit" value="couple"
action="#{thingPageBean.doAmazingThing(oneStuff)}"/>
</td>
</tr>
</table>
</s:div>
</h:form>
</ui:repeat>
<hr style="margin-top:8px;margin-bottom:4px;"/>
</s:div>
<br/>
</div>
</ui:define>
</ui:composition>
Thank you
Jakob
I suggest to change your #Scope(ScopeType.EVENT)
The event (request) context: spans a server request, from restore view to render response.
to a page scope: #Scope(ScopeType.PAGE)
Begins during the invoke application phase prior to rendering a page, and lasts until the end of any invoke application phase of a faces request originating from that page. Non-faces requests do not propagate the page scope.
because you do need these data for a longer conversation not only an event (quotes from Seam Doc)
The problem seemed to be with multiple forms. Moved the <h:form> tag outside <ui:repeat> tag and voila everything works.

Resources