Is it possible to use primefaces datalist and fieldset elements in a nested way. My application needs to look something like this:
<p:fieldset>
<p:dataList>
<p:fieldset>
<p:datalist>
</p:datalist>
</p:fieldset>
</p:dataList>
</p:fieldset>
I've tried it as mentioned above but I always get the following error:
javax.faces.view.facelets.TagException: /WEB-INF/flows/mainapp/wholesaleInfo.xhtml #106,105 Tag Library supports namespace: http://primefaces.org/ui, but no tag was defined for name: datalist
The datalist mentioned in the error message is of course the inner one... Any ideas how I could make that work? thanks Nikolaus
Try with dataList camelCase instead of datalist, in the inner one. This should make the error go away. However I am unsure if dataLists can be nested. If it's just for layout - display purpose, you may have a look at p:layout
Related
I have below code for primefaces p:commandButton. I have set update and oncomplete attributes to disable commandButton in p:panelGrid of "panelGrid1s4a3b1" and show messages on p:message of "customMessage1s4". But does not know why these two not working. Anyone can help me to make them work?
<p:commandButton id="cmdVerify1s4a2" widgetVar="cmdVerify1s4a2"
value="Verify" action="approveProfileQualifications"
update="#([id$=panelGrid1s4a3b1]), #([id$=customMessage1s4])"
oncomplete="PF(cmdVerify1s4a2).disable(); PF('cmdReject1s4a2').disable();"/>
You are not updating is right. Change your p:commandButton little
update="panelGrid1s4a3b1 customMessage1s4"
while I believe your p:messages like
<p:messages id="customMessage1s4" showDetail="true" autoUpdate="true" closable="true" />
MORE
You can also use keywords to update:
Keywords are the easier way to reference components, they resolve to ids so that if an id changes,
the reference does not need to change. Core JSF provides a couple of keywords and PrimeFaces
provides more along with composite expression support.
Following are the keywords.
#this Standard Current component. #all Standard Whole view. #form
Standard Closest ancestor form of current component. #none Standard No
component. #namingcontainer PrimeFaces Closest ancestor naming
container of current component. #parent PrimeFaces Parent of the
current component. #composite PrimeFaces Closest composite component
ancestor. #child(n) PrimeFaces nth child. #row(n) PrimeFaces nth row.
#previous PrimeFaces Previous sibling. #next PrimeFaces Next sibling.
#widgetVar(name) PrimeFaces Component with given widgetVar.
In my Java code I want to programmatically create a <fieldset> tag that I can use in my JSF form.
The setup of my form looks like this:
Application app = FacesContext.getCurrentInstance().getApplication();
HtmlForm form = (HtmlForm) app.createComponent(HtmlForm.COMPONENT_TYPE);
form.setStyleClass("pure-form pure-form-stacked");
As you can see I use HtmlForm.COMPONENT_TYPE as an identifier for the JSF UI component but I haven't found an identifier for a fieldset so I tried:
UIComponent fieldset = app.createComponent("fieldset");
form.getChildren().add(fieldset);
Unfortunately this is not working so I have to come up with another solution. Do you have any ideas?
Is there a general approach how HTML tags (which are unknown in the JSF context) can be created?
You can try the following:
Theres a component called <f:verbatim> which you would use in xhtml like this:
<f:verbatim escape="false">
<fieldset id="blah"></fieldset>
</f:verbatim>
To achieve that programmaticlly you can add this component like this:
String fieldsetHTMLText ="<fieldset id=\"blah\"></fieldset>";
UIOutput verbatim = new UIOutput();
verbatim.setRendererType("javax.faces.Text");
verbatim.getAttributes().put("escape", false);
verbatim.setValue(fieldsetHTMLText);
I found three solutions to my problem. The first one is to use PrimeFaces, the second one is to use MyFaces Tomahawk and the third one is to use a JSF Verbatim UI component with string input. I will shortly list up code samples and the differences between the solutions.
1 PrimeFaces
With an include of the PrimeFaces components suite (and it's Apache Commons FileUpload dependency) one can use the Fieldset class to programatically create a fieldset on-the-fly. The bad thing on that is, that the PrimeFaces Fieldset component is depends on a PrimeFaces JavaScript file so instead of the plain fieldset, one will get a fieldset and a JavaScript include which is way too much.
import org.primefaces.component.fieldset.Fieldset;
...
form.getChildren().add(new Fieldset());
2 MyFaces Tomahawk
The UI component set Tomahawk also comes with a Fieldset component that can be used to create an HTML fieldset programatically. If the Fieldset of Tomahawk will be used, then one will get a plain and nice-looking fieldset tag. The bad thing here is that Tomahawk is an extension to MyFaces and MyFaces itself is a whole JavaServer Faces implementation which should not be used alongside standard JSF.
import org.apache.myfaces.custom.fieldset.Fieldset
...
form.getChildren().add(new Fieldset());
3 JSF Verbatim UI Component
The standardized and hacky way is to use a JSF Verbatim UI component. Within a verbatim component you are allowed to put any HTML needed. With this little trick we can create a verbatim tag:
UIOutput fieldset = new UIOutput();
fieldset.setRendererType("javax.faces.Text");
fieldset.getAttributes().put("escape", false);
fieldset.setValue("<fieldset></fieldset>");
The code shown above renders a fieldset HTML element but because it is a string and the tag inside the string is closed you cannot programatically append anything to that tag, so this won't work:
form.getChildren().add(fieldset);
To generate an HTML tag that can be used for nesting of elements, each opening and closing tag must be put in an own Varbatim component which makes this solution very text heavy:
UIOutput fieldsetStart = new UIOutput();
fieldsetStart.setRendererType("javax.faces.Text");
fieldsetStart.getAttributes().put("escape", false);
fieldsetStart.setValue("<fieldset>");
UIOutput fieldsetClose = new UIOutput();
fieldsetClose.setRendererType("javax.faces.Text");
fieldsetClose.getAttributes().put("escape", false);
fieldsetClose.setValue("</fieldset>");
HtmlInputText inputText = (HtmlInputText) app.createComponent(HtmlInputText.COMPONENT_TYPE);
form.getChildren().add(fieldsetStart);
form.getChildren().add(inputText);
form.getChildren().add(fieldsetClose);
Conclusion:
None of the solutions shown is really elegant. PrimeFaces und MyFaces have large dependencies and the standard JEE way requires practally much writing effort. I had hoped to find a nice solution to produce unknown / custom HTML elements, such as: document.createElement("fieldset");.
If anyone knows a way to do that, please post the solution.
I have a date field in my jsp page where I have used apache trinidad.
I have written the following code for that
<tr:inputDate label="Date From" id="dateFrm" value="#{taskStatus.fromDate}" >
<f:convertDateTime pattern="dd-MM-yyyy"/>
</tr:inputDate>
<tr:outputLabel value="DD-MM-YYYY" inlineStyle="color:red; vertical-align:top">
</tr:outputLabel>
Now, the problem that I have is that whenever I enter an invalid date the error message is scattered all over the page and I get an extra calender icon! I want to override the element style for inputDate element.So ,that it does not show any error message(or the extra calender icon). I tried to use this to override element style
<tr:inputDate label="Date From" id="dateFrm" value="#{taskStatus.fromDate}" inlineStyle="display: inline !important" >
But it did not work either
I never have problems with the layout of error messages. I always put my input fields in tr:panelFormLayout tags, which could result in a more consistent layout for you.
Also I would suggest to use a help facet to show the date format. You can skin it using the selector .OraInlineInfoText.
<tr:panelFormLayout>
<tr:inputDate label="Date From"
id="dateFrm"
value="#{taskStatus.fromDate}">
<f:convertDateTime pattern="dd-MM-yyyy"/>
<f:facet name="help">
<tr:outputText value="DD-MM-YYYY"/>
</f:facet>
</tr:inputDate>
</tr:panelFormLayout>
I tried <p:commandButton> as shown above, it works correctly.
<p:spinner id="spinnerQte" min="1" value="#{newOpProgramme.quantite}"/>
<p:commandButton id="AjoutEquip" value="Ajouter" actionListener="#{newOpProgramme.addEquipement()}" update="spinnerQte"/>
But, when I tried ti nest this in my global page inside layout, panel, panel-Grid and field-Set, addEquipement() method is not called !
also, thee some fields which have required attribute set to true, I think this is why addEquipement() method isn't called.
Have you an Idea how to fix the problem.
thank you
I fixed the problem by adding process attribute to <p:commandButton> set to #this.
I'm looking for a way to set focus to an ICEfaces component by means of an anchor tag. For instance, when a field fails validation I want to output something like this:
Field XYZ failed validation
and then, at the XYZ component, have something like:
<ice:inputText id="XYZ" anchor="xyz">
This would enable the user to click on the error message and get focus on the offending component. Is this in any way possible? (I'm aware of the outputLink and inputLink component, but the error message would typically reside in a message.properties file making it hard to use components...)
I'm using ICEfaces version 1.8.2
Use labels. There they are for.
<h:outputLabel for="xyz">message</h:outputLabel>
<h:inputText id="xyz" />
Substitute with ice variants if necessary.