Primefaces tree create new node inside other node - jsf-2

Is it possible to create a new node inside tree dynamically.
<p:tree value="#{treeBasicView.root}" var="node" dynamic="true">
<p:treeNode>
<h:outputText value="#{node}" />
</p:treeNode>
</p:tree>
If it possible, how to do it. Kindly help. Thank you.

Yes, it is possible to do.
You should see examples from this link.
In the example, Recursion is used for demonstration.

Related

Is it possible to fill the background color of some items of f:selectitem in one color and others in others?

I'm a new member of stackoverflow but since this is the first problem I really can't seem to fix.
I know the question probably is unclear but here is my problem. For our backend application we use JSF.
Now there is a p:selectOneMenu with selectItems that are automatically filled (DatabaseServers) but we've added a new attribute (boolean full) and my question now is if it is possible to edit the background-color of the full databases in red and the not full databases in green.
<p:outputLabel for="emrDatabaseServer"
value="#{msg['tenants.label.emrDatabase']}" />
<p:selectOneMenu id="emrDatabaseServer" style="width:250px;"
value="#{tenantController.entity.emrDatabaseServer}"
effect="fade" required="true"
converter="#{databaseServerConverter}">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{tenantController.emrDatabaseServers}"
var="emrDB"
itemLabel="#{emrDB.name} (#{emrDB.host}:#{emrDB.port}) (#{emrDB.nbDatabases} dbs)"
itemValue="#{emrDB}" />
<p:ajax event="change"
listener="#{tenantController.onValueChange}" update="save" />
</p:selectOneMenu>
I've tried countless things but it just doesn't seem to work.
I would also like to mention that I don't have the option of using code from other packages and so.
Styling options of a select-element is not possible in a clean and cross-browser-compatible way, as described here.
But if you would use some hack that satisfied your styling-requirement, there is no style or styleClass attribute for <f:selectItem> resp. <f:selectItems>. For this problem you could try using a pass-through-attribute as described by this anser (which uses the title-attribute instead of style, but you got the idea).
But all in all, what you are trying to do would result in a big hack and should be avoided.

p:dataExporter does not keep the sorting of p:dataTable

The problem can be reproduced in PrimeFaces showcase:
http://www.primefaces.org/showcase/ui/data/dataexporter/basic.xhtml
<f:facet name="{Exporters}">
<h:commandLink>
<p:graphicImage name="/demo/images/excel.png" width="24"/>
<p:dataExporter type="xls" target="tbl" fileName="cars" />
</h:commandLink>
</f:facet>
I have no idea from where the export gets the sorting that it is using.
Is there any way to make p:dataExporter to keep the same order as in p:dataTable?
Edit: My client noticed that if you click a column to sort the datatable then export keeps the sorting. That's good but how to keep the initial sorting?

JSF 2 ui:repeat vs h:datatable behavior

I had a bad time trying to solve p:selectBooleanButton doesn't render preselected value, a lot of hours just to fix it changing ui:repeat to h:datatable.
Here is both pieces of code.
<ui:repeat value="#{presupuestoBean.getItemsPresupuestBySeccion('Parte Delantera')}" var="itemPresupuesto">
<tr>
<td><h:outputText value="#{itemPresupuesto.descripcion}"/></td>
<td>
<p:selectBooleanButton value="#{presupuestoBean.itemsPresupuestoAsignadoCambiar[itemPresupuesto.id]}" onLabel="Yes" offLabel="No" onIcon="ui-icon-check" offIcon="ui-icon-close"/>
<h:outputText value="#{presupuestoBean.itemsPresupuestoAsignadoCambiar[itemPresupuesto.id]}" />
</td>
</tr>
</ui:repeat>
(Notice that the button is showing 'FALSE (or NO)' value although the property value is 'TRUE' as displayed by outputText)
On the other hand, the exactly same code with h:datatable.
<h:dataTable value="#{presupuestoBean.getItemsPresupuestBySeccion('Parte Delantera')}" var="itemPresupuesto2">
<h:column>
<h:outputText value="#{itemPresupuesto2.descripcion}"/>
</h:column>
<h:column>
<p:selectBooleanButton value="#{presupuestoBean.itemsPresupuestoAsignadoCambiar[itemPresupuesto2.id]}" onLabel="Si" offLabel="No" onIcon="ui-icon-check" offIcon="ui-icon-close"/>
<h:outputText value="#{presupuestoBean.itemsPresupuestoAsignadoCambiar[itemPresupuesto2.id]}" />
</h:column>
</h:dataTable>
Anyone know why is this happening ??. As far as I know, this two tags could be exchangeable. (at least according the example that I saw e.g JSF 2 Repeat Tag Example)
I'm using com.sun.faces jsf-api and jsf-impl 2.2.4
Also Primefaces 4.0
You confuse view build time with view render time! BalusC posted an explanation here:
JSTL in JSF2 Facelets... makes sense?
I had the same behavior, and was not able to make work the ui:repeat properly with map and default value.
As you are using primefaces, you might also found p:dataGrid as an alternative to h:dataTable.

Replace <c:if> and fn:toUpperCase() with JSF-tags

This example is from a book on JSF. The excercise is to refactor the following Facelets code while eliminating <c:if> and fn:toUpperCase(). Usage of <c:forEach> is allowed.
#{myBean.numbers} returns String["one","two","three"]
As the book is on JSF and not on Java, I suppose the existing Java-code is not to be touched. But I can't think of another way to do this solely in Facelets.
<c:forEach var="item" items="#{myBean.numbers}">
<c:if test="#{not fn:endsWith(item,'o')}">
#{item}
</c:if>
<c:if test="#{fn:endsWith(item,'o')}">
#{fn:toUpperCase(item)}
</c:if>
</c:forEach>
Only thing I can think of is using a converter that conditionally uses String#toUpperCase() and then I still do not understand why use of <c:forEach> should still be allowed:
<ui:repeat var="item" value="#{myBean.numbers}">
<h:outputText value="#{item}" converter="conditionalConverter"/>
</ui:repeat>
Is there a more "Facelets way" to do this (and still a need to use <c:forEach>)?
UPDATE:
Instead of <c:if> one could still use e.g. <h:outputPanel> and it's rendered-attribute, but there is still no Java-less replacement for fn:toUpperCase().
I am asking for learning purposes only. I suppose the <ui:repeat>-solution with a converter is the cleanest and represents most how JSF is supposed to be used. Do you think so, too?
As to <c:if>, the JSF alternative to JSTL <c:if> is the rendered attribute on any component. For example, <h:panelGroup> or <h:outputText>. Those components doesn't generate additional markup if there are no attribtues specified which should end up in HTML, like id or styleClass, otherwise they generate a <span>.
Here's an example of both:
<h:panelGroup rendered="#{not fn:endsWith(item,'o')}">
#{item}
</h:panelGroup>
<h:outputText value="#{fn:toUpperCase(item)}" rendered="#{fn:endsWith(item,'o')}" />
As to fn:toUpperCase(), JSF has no alternative. I'm not sure why you would need a JSF alternative as it's essentially not a tag, but a simple EL function which is perfectly usable in both JSTL and JSF tags. In any case, you could if necessary throw in CSS text-transform: uppercase. As this takes place entirely client side, your only problem may be the browser support.
<h:outputText value="#{item}" style="text-transform: uppercase" />
(note: this is just an example, the normal practice is to put styles in its own .css file which you load by <h:outputStylesheet>)
<h:outputText value="#{item}" styleClass="uppercased" />
I suppose the -solution with a converter is the cleanest and represents most how JSF is supposed to be used. Do you think so, too?
I'm a big fan of "Use the right tool for the job". Use JSTL tags to conditionally build the JSF component tree. Use JSF components to generate HTML. That's it. See also JSTL in JSF2 Facelets... makes sense?

How do I avoid using nested forms in Richfaces 4 + How do I use a4j:push in Richfaces 4?

I'm using Richfaces 4 CR1 + JSF 2.0. And I have got two questions :
1) I know nesting is not allowed in JSF. It just isn't.
Here's a use case - I have a master page which includes header.xhtml and footer.xhtml with
<ui:include src="header.xhtml"/>
<h:form>
<rich:tabPanel switchType="ajax"..>
<rich:tab ..>
<ui:include src="/includes/page1.xhtml" .../>
</rich:tab>
<rich:tab ..>
<ui:include src="/includes/page2.xhtml" .../>
</rich:tab>
</rich:tabPanel>
</h:form>
<ui:include src="footer.xhtml" .../>
The <rich:tabPanel ../> needs to wrapped with a <h:form.../>. And since each of my tab is actually another xhtml page, some of them have controls like <rich:togglePanel ../> which also requires a <h:form ../> tag around it...!
So how do I handle this in the best possible way?
PS : I have referred to this question and may be even my question's answer lies in <a4j:region ../>
2) How do I use a4j:push in Richfaces 4? The documentation is still in progress. The sample code is here but I couldn't understand the following line -
<a4j:push address="#{channelName}#chat" .. />
Any help with these two is greatly appreciated! :)
Answers to above questions given by Max Katz in an email chain were
1) Use a global form. When you submit, only the current active tab components will be processed
2) Max Katz, Ilya Shaikovsky and guys at Exadel/Richfaces were kind enough to publish a how-to on ajax:push here
Can't thank them enough! :)

Resources