I'm new to jsf and not sure how to frame the question in a right way. I'm doing a name lookup functionality and my input form is as follows:
Accept input from a text field.(Backed by managed bean and
getters and setters)
Invoke the action using command button.
Display it back on the UI.
I'm not able to paste the entire code because of confidentiality.
<h:form>
<p:outputLabel value="ABC" />
<p:inputText id="a" value="#{mybean.variable}" size="10" />
<p:commandButton value="Check" actionListener="#{mybean.getName()}" update="name">
</p:commandButton>
<p:inputText id="name" value="#{mybean.Value}" />
</h:form>
The above mentioned works fine,However I have 5 input text fields and their corresponding action methods like as follows:
<p:outputLabel value="DEF" />
<p:inputText id="b" value="#{mybean.variable1}" size="10" />
<p:commandButton value="Check" actionListener="#{mybean.getName()}" update="name" >
</p:commandButton>
<p:inputText id="name" value="#{mybean.Value}" />
</h:form>
and so on.
When I put all the text boxes and their corresponding actions,the input is not passed to the backend and the console does not display anything.
Any help appreciated.
Thanks.
Related
I'm trying to help users fill in entity Id numbers on a submittal form. I can't use a pulldown because there are 1000's.
In a PF dialog, I'm able to copy a selected value to the main form but I'm hardcoding the actionaListener into the commandLink to tell the popup dialog which h:textInput box on the main form to copy the value to and to render. If I have three h:inputText boxes I would then need to duplicate three p:dialogs.
For example in my p:dialog I would have a column in the datatable as such:
<h:commandLink value="Select This Item" onclick="PF('dlg').hide()">
<f:ajax render=":myForm:text_field_1" event="click"
listener="#{bean.popDownId1(item.id)}" />
</h:commandLink>
How can I pass those variables myForm:text_field_1 (the form name and field) to the p:dialog so that it becomes a more generic popup dialog? Also is there a way to not have to code a listener method for each field (popDownId1, popDownId2, etc...)As a bonus I'd also like to externalize the dialog and include it in every xhtml page instead of cutting and pasting as I'm doing now.
Here is more actual code:
form.xhtml
<h:form id="myForm">
<h:panelGrid columns="3">
<p:outputLabel value="Manager Employee Number: " />
<h:panelGroup>
<p:inputText id="managerId"
title="Type Employee Id or click the ? to search for their Id"
value="#{bean.department.manager}" >
<f:validator validatorId="com.company.app.EmployeeIdValidator" />
</p:inputText>
<p:commandButton title="Click here if you don't know their Employee Number"
id="managerId" value="Lookup Id"
onclick="PF('dlgManager').show();" type="button" >
</p:commandButton>
other fields and submit button
</h:form>
<p:dialog id="popup" modal="false" widgetVar="dlgManager" dynamic="true" >
<f:facet name="header">
<h:outputText value="Employee Number Finder" />
</f:facet>
<p>Search using any keyword.</p>
<h:form>
Keyword: <p:inputText id="search" value="#{employeeSearch.searchString}" />
<p:commandButton value="Search"
action="#{employeeSearch.searchByKeyword}">
<f:ajax execute="#form" render="output" />
</p:commandButton> (Enter keywords separated by spaces)
<p:dataTable id="output" var="employee" value="#{employeeSearch.employees}">
<p:column headerText="Action">
<h:commandLink value="Select" onclick="PF('dlgManager').hide()">
<f:ajax render=":myForm:managerId" event="click"
listener="#{bean.popDownManagerId(employee.id)}" />
</h:commandLink>
</p:column>
other columns(employee name, phone number, etc...)
</p:dialog>
you can see that I'd need to copy the dialog and tweak it a bit for every field on my form where I want to do an employee number lookup.
onclick="PF('dlgManager').show();">
onclick="PF('dlgSupervisor').show();">
onclick="PF('dlgFloorChief').show();">
EDIT
When applying BalusC's answer, if I add a second lookup Id button, the popup dialog to select an employee id has a command link which is tied to only the ManagerId field
action="#{bean.popDownManagerId(employee.id)}"
Also, when the second lookup id button is pressed the previous search results are still listed so the select command link would be referencing the wrong field to update
popup dialog
I display error messages somewhere on <p:tooltip> as follows.
<p:inputText id="text" value="#{bean.text}" required="true"/>
<p:tooltip for="text">
<p:message for="text"/>
</p:tooltip>
Although it displays an error message the given tooltip, an empty/unnecessary tooltip is shown, when there is no error as can be seen in the following picture - beside the bottom right corner of the text box.
How to get rid of such empty tooltips? (I tried someway but it did not work)
It can be done by checking for an error message in the list java.util.List<FacesMessage> that can be obtained by using facesContext.messageList.
The rendered attribute of <p:tooltip> can be set based on the error message/s found in the list for the associated component/s something along the line.
rendered="#{not empty facesContext.getMessageList('clientId')}"
A working code snippet :
<h:form id="form">
<p:panel id="panel">
<p:inputText id="text" value="#{bean.text}" required="true"/>
<p:tooltip for="text" rendered="#{not empty facesContext.getMessageList('form:text')}">
<p:message for="text"/>
</p:tooltip>
<p:commandButton value="Submit" update="panel"/>
</p:panel>
</h:form>
Or by using component binding. Such as,
<p:inputText id="text" binding="#{inputComponent}" value="#{bean.text}"/>
<p:tooltip for="text" rendered="#{not empty facesContext.getMessageList(inputComponent.clientId)}">
<p:message for="text"/>
</p:tooltip>
Or even
<p:inputText id="text" binding="#{inputComponent}" value="#{bean.text}"/>
<p:tooltip for="text" rendered="#{not inputComponent.valid}">
<p:message for="text"/>
</p:tooltip>
The last two cases are useful especially when the (input) component is enclosed within an iterating component like a <p/h:dataTable>, <p:dataGrid>, <p:dataList> (or even <ui:repeat>) where the uniqueness of enclosing components is determined based on the iterating row index of an iterating component such as, form:dataTable:0:text, form:dataTable:1:text, form:dataTable:2:text... and so on
p:tooltip should have a "rendered" attribute, set it to false
from documentation:
rendered : default=TRUE - value to specify the rendering of the
component, when set to false component will not be rendered.
Source: http://courses.coreservlets.com/Course-Materials/pdf/jsf/primefaces/users-guide/p-tooltip.pdf
I'm using primefaces with jsf and i want to make one of two fields required at least. that means that the error message will be displayed if this two fields are empties togheter:
this is a sample of my code:
<h:outputLabel for="srcNumber" value="Originator MSISDN (EXAMPLE 32495959595)" />
<p:inputText id="srcNumber" value="#{cdrMmscRecBean.srcNumber}" label="srcNumber" />
<h:outputLabel for="destNumber" value="Destination MSISDN (EXAMPLE 32495959595)" />
<p:inputText id="destNumber" value="#{cdrMmscRecBean.destNumber} label="destNumber" />
thanks :)
You can implement it this way:
<p:inputText id="srcNumber" value="#{cdrMmscRecBean.srcNumber}" label="srcNumber"
required="#{empty cdrMmscRecBean.destNumber}" requiredMessage="SRC Number Required">
<p:ajax event="change" update="destNumber" />
</p:inputText>
<p:inputText id="destNumber" value="#{cdrMmscRecBean.destNumber}" label="destNumber"
required="#{empty cdrMmscRecBean.srcNumber}" requiredMessage="DEST Number Required">
<p:ajax event="change" update="srcNumber" />
</p:inputText>
For more reference on how to parametrize your validation message:
Parametrized Messages in JSF with Facelets Taglib Functions
If you want to show the validation error use <p:message for="srcNumber" />
and same for test number, get rid of your outputLabels, this will show the validations warnings.
You neeed to add the required="true" flag to your inputTexts as well.
This is primefaces
EDIT
Purpose of the h:outputLabel and its "for" attribute this here shows the outputLabel for using non primefaces to show validatoin messages if this is all your problem was then u just need to add the required="true" validation flag indicators on your input texts
When I set an inputText to required, the the outputLabel I have associated with the inputText gets an asterisk added to it automatically. How do I prevent the asterisk from appearing?
<p:outputLabel value="Target Species" for="idInputText" />
<p:inputText id="idInputText" required="true" value="#{controller.string}"/>
I am using PrimeFaces 4.0
I would recommend using the plain JSF <h:ouputLabel… />
<h:outputLabel value="Target Species" for="idInputText" />
<p:inputText id="idInputText" required="true" value="#{controller.string}"/>
This removes the asterisk but keeps the label correctly associated with the input element. This is important for accessibility.
Not sure if this also works for 4, but it does for PrimeFaces 5.3: simply add indicateRequired="false". So:
<p:outputLabel value="Target Species"
for="idInputText"
indicateRequired="false"/>
<p:inputText id="idInputText"
required="true"
value="#{controller.string}"/>
Another option is to use css to hide the asterisk:
.ui-outputlabel-rfi { display: none; }
Then the label will still be associated with the input, and you can still use a Label Provider if you like:
http://cagataycivici.wordpress.com/2011/02/11/label-provider-for-jsf-input-components/
indicateRequired="true"
For example:
<p:inputText value="#{bean.firstName}" indicateRequired="true" required="true" requiredMessage="Name is required"/>
<p:outputLabel value="Target Species" for="idInputText" />
<p:inputText id="idInputText" required="true" value="#{controller.string}"/>
In your code ,you're specifically setting that label for inputText and this will have asterisk.
Remove "for" from outputLabel. It should look like :
<p:outputLabel value="Target Species" />
Now, you won't have asterisk .
I have the following usage of the p:selectOneMenu:
<p:selectOneMenu id="selectField"
value="#{someBean.someField}"
converter="#{selectItemConverter}" var="x" editable="true">
<f:selectItems
value="#{selectItemsBean.getSelectItems(tab, field)}" var="si"
itemLabel="#{si.label}" itemValue="#{si}" />
<p:column>
<h:outputText value="#{si.label}" />
</p:column>
<p:column>
<h:graphicImage library="images" name="noway_16x16.png"
title="#{si.disabledReason}" rendered="#{si.disabled}" />
</p:column>
<p:ajax event="change" update="#form" partialSubmit="true" process="selectField" />
</p:selectOneMenu>
As you can see, I use custom content in combination with editable=true. When I submit the form, the Converter gets the label of a selected item as the value, not the actual value. In the HTML page, the values are correct, e.g. <option value="C">C-style mounting</option>. With editable=false, the correct value (e.g. C is sent to the converter, with editable=true the converter retrieves C-style mounting.
What I want is that the user can either select one of the pre-defined items in the list and the server submits that value of the item OR the user enters something and that is submitted as value. But the current behavior is a bit strange - or am I just wanting too much?