JSF + Primefaces - Dynamic include - jsf

Firstly, sorry for my english ^^
I've got problems with dynamic includes in my structure.
I've got a tabview, and the tabs are built dynamically..
The tabs are createed by different commandbuttons, and in one of my beans, are putted in one ArrayList of tab
This is the tabview:
<p:tabView value="#{indexBean.tabs}" var="tab" id="tabView" activeIndex="#{indexBean.selectedNewTab}"
And these are the tabs:
<p:tab title="#{tab.title}" closable="#{tab.closable}">
In the tab, I've got different .
I've got only one tab that is so defined:
<ui:include src="content/accordion.xhtml"/>
<ui:include src="content/toolbar.xhtml"/>
<ui:include src="content/dataTableRawResults.xhtml"/>
<ui:include src="content/dataTableCurves.xhtml"/>
<ui:include src="content/dataTableReports.xhtml"/>
<ui:include src="content/dataTableAdvancedStatistics.xhtml"/>
Every single page that is included has a rendered tag (in my bean I set different booleans so that I can specialize every that as I desire..)
That's work fine.. Except for one problem...
It is too slow!!
I suppose because of the rendering.. So I've tried different ways to solve it..
I tried with .. With query in src tag of .. But nothing seems to work fine..
With query, I open correctly the first tab.. But when I open the second one, the first one takes the same include of the second one (like if its attributes have been overrided)..
Thanks to all!
If I haven't explain well, please ask me and I'll try to be more precise!

If it is too slow maybe you could try to load the tabs dynamically by adding to your p:tabView the attribute dynamic="true":
<p:tabView dynamic=true ... >

Related

bootsfaces b:commandButton in ui:repeat not updating h:graphicImage

I'm using the 0.7 version of bootsfaces to create a simple page, which has something like the following:
<h:form id="some_form">
<ui:repeat id="some_elements" var="property" value="#{someBean.properties}">
<b:commandButton value="ShowProp" ajax="true" actionListener="#{someBean.showProperty(property)}" update=":some_form:some_elements:graphic"/>
<!-- This property is true -->
<ui:fragment rendered="#{someOtherBean.showGraphic}">
<h:graphicImage url="gen_image?id=#{property.id}" id="graphic"/>
</ui:fragment>
</ui:repeat>
</h:form>
Now, the idea is that on clicking the button, a property is updated and the image should be re-generated (in this case a jfreechart graph - but this is besides the point.) I tested this with primefaces commandButton and it works fine (the graph is redrawn..) However with bootsfaces commandButton, nothing happens once the ajax call completes (I can see the call on the server side, but the graph is not reloaded.) I think it's down to how it must reference the image in the repeated block, but now sure what is wrong - has anyone come across this?
(NOTE: reason I don't want to use primefaces is that it does not integrate well with bootstrap)
I've opened a bug on the project's bugtracker (https://github.com/TheCoder4eu/BootsFaces-OSP/issues/135).
Actually, why did you expect the update=":some_form:some_elements:graphic" to work in the first place? This expression is an id that doesn't exist. The id is some_form:some_elements:0:graphic. In other words: it contains the row number. PrimeFaces (and Mojarra and MyFaces) recognizes that the command button is part of a UIRepeat group and guesses the correct row number. But that's just a guess. Obviously a reasonable guess, because most of the time you want to update something that's in the vicinity of the command button.
The next version of BootsFaces is going to guess the correct row number, too :).

All tabs of tabpanel refreshed, when event happens in any one of the tab (Richface 3.3.4)

We have a tabPanel which has multiple tabs. When any event is performed in any of the tabs (e.g. click 'ajaxSubmit' button in tab1) all tabs are refreshed which is causing performance issues (e.g. getter of 'table' value is always invoked from tab3).
We tried to wrap the content of each tab in <a4j:region>, but the getters of components in tab3 are still invoked.
Please find the sample code snippet below:
<r:tabPanel id="tabWorkingPanel" styleClass="otTMcontainer" selectedTab="#{tabHandlerBean.activeTab}">
<rich:tab id="tab1">
<h:commandButton value="ajaxSubmit"/>
</rich:tab>
<rich:tab id="tab2" />
<rich:tab id="tab3">
<rich:dataTable id="table" value="#{bean.someValue}">...</rich:dataTable>
</rich:tab>
</r:tabPanel>
I think you should be using reRender so that only relevant tabs are refreshed. I think you should also wrap the contents of each tab in a form so that not everything is submitted on each submit, though perhaps that's what you were trying to do with region. I would carefully read the documentation to make sure you're using these correctly.
I have not used RichFaces, so I'm not positive this will work, but a similar approach works for PrimeFaces.
BalusC's description of process and update may be useful. He's discussing PrimeFaces, but I think the same concepts apply.

How to update a composite component form from another composite component?

I'm having problem trying to update an external form. To be more clear, I have a primary form that includes 2 different composite components, lets call include1 and include2. The page I want to update is the include2 being update after a search from a include1.
this is how the 2 pages are being included.
<ui:define name="include1">
<ui:param name="mbean" value="#{currentBean}" />
<libcomp:include1 />
</ui:define>
<ui:define name="include2">
<ui:param name="mbean" value="#{currentBean}" />
<libcomp:include2>
</ui:define>
Now, in include1 I have a button that tries to update the form inside include2
update="include2Form"
and in the include2 I have
<cc:implementation>
<h:form
id="include2Form">
When I try to load the page I always get an Error 500 saying that the "include2Form" has not been found!
I tried some research before coming here but none helped me, I tried to change the form to a div, tried to pass id by parameter, a panel, form with prependId=false etc...
Using fireBug I found out that JSF or Primefaces is adding an random String to my form/components ID...as
id="j_idt99:include2Form:myTable"
I think that is the reason of my problem and I'm trying to find a work around.
Could anyone help me please???
First of all, the additional string in your ID directly comes frome JSF, unrelated to PrimeFaces, because the Composite Component itself is a UINamingContainer. This is expected behavoir and even necessary, because otherwise you would end up in duplicate ID conflicts, when using the same CC multiple times in the same view.
In my opinion it is bad design to have a form inside a Composite Component at all. To improve reusability just get rid of that form and work with process, partialSubmit, maybe f:subView etc..
Beside that you should rethink your design. The point that one Composite Component has to update s.th. outside the component might be an indicator, that a Composite Component is not the perfect approach to cover your requirements.
However, if you really have to update some parts of your view outside the composite component, just pass the ID of what to update via a composite attribute to your CC and let the CC not care about what and where to update
<composite:interface>
<composite:attribute name="update" required="true" />
</composite:interface>

Layout and (nested?) DataTables in PrimeFaces

I am trying to dispose a p:dataTable beside a p:button. They need to lay in a p:tab that is contained in a p:tabView. The tabView is contained in the central p:layoutUnit of a p:layout.
I also need to put the dataTable inside a form for producing an ajax update of another component.
Before trying to add the button on the left of table, everything was fine:
<p:layout ...
<p:layoutUnit ....
<p:tabView ....
<p:tab ....
<h:form ....
<p:dataTable .....
But when adding an outer h:dataTable just out of the h:form, the tabView appears empty. If I try to use an outer p:dataTable, only one table is displayed without items.
Are there any limitations in putting a dataTable into another dataTable? If yes, are there other ways to reach this goal?
UPDATE
I have found that the right way is to use nested Layouts, a feature available since Primefaces 3.0 which is not yet fully documented.
Here is the link to the feature request and links to the showcase-lab.

How to use ui:include inside a forEach and use the loop variable inside the included page?

I'm upgrading to JSF 2.0.2 inside Tomcat 7.0.12 and I have a page with a variable number of reusable widgets on it. I used to use t:aliasBean for this purpose, but it doesn't seem to work. I'm now trying the following in my Xhtml:
<c:forEach items="${viewBean.currentView.parts}" var="part">
<t:div styleClass="div#{viewBean.partNumber[part]}">
<c:forEach items="${part.widgets}" var="widget">
<f:subview id="div#{viewBean.widgetId[widget]}">
<ui:include src="widgets/#{widget.widgetPage}">
<ui:param name="widget" value="#{widget}" />
</ui:include>
</f:subview>
</c:forEach>
</t:div>
</c:forEach>
What seems to happen is the next widget from the loop is used in the previous widget's page, so I get errors unless there is only one widget.
Edit: I've tried ui:repeat - it doesn't work. I've also tried removing the ui:include, just as a sanity test; the looping works fine. Also, I'm using Spring 2.5.6.SEC01 - though it shouldn't matter.
I propose to use ui:repeat instead of c:forEach.
Why?
The most important thing to understand
about the jstl tags in Facelets is
that they do not represent components
and never become a part of the
component tree once the view has been
built. Rather, they are tags which are
actually responsible for building the
tree in the first place. Once they
have done their job they expire, are
no more, cease to be, etc etc.
Source [here][1]. I really recommend to read the entire article.
UPDATE:
Please note that I do not say that c:forEach is bad. I want to underline that mixing it with ui:repeat it's not recommended.
[1]: https://rogerkeays.com/jsf-c-foreach-vs-ui-repeat

Resources