Primefaces TabView throwing a null-pointer on third load of tab - jsf-2

I have a tab view with three tabs. The tab view seems to work correctly in the first two tab changes, but on the third I get a null-pointer as in
java.lang.NullPointerException
at org.primefaces.component.tabview.TabViewRenderer.encodeEnd(TabViewRenderer.java:59)
Also, TabChangeEvents have null data at this point.
Making the contents of the tabs minimal (just a line of text), I can see that the contents of the tabs are being appended onto each other. Once this happens, the issues begin.
Looking at the PrimeFaces source code, it seems that it's when trying to work with the tabToLoad variable that is retrieved with the generated tabClientId. I'm not certain that it should be in the branch of logic that deals with new tabs either.
My tab view looks as follows:
<p:tabView styleClass="entities-tabview" id="tabs" dynamic="true">
<p:ajax event="tabChange" listener="#{action.onTabChange}"
update="first-tab,second-tab"/>
<p:tab title="First Tab" id="first-tab">
tab one content
</p:tab>
<p:tab title="Second Tab" id="second-tab">
tab two content
</p:tab>
<p:tab title="Other Tab" id="other-tab">
// tab content
</p:tab>
</p:tabView>
It seems that the code checks if the var parameter is set on the TabView. As we do not use one, it is null, so it goes into the new tab branch. The tab index is set on the tabview though. Any ideas about what could be wrong?
After some more investigation, I see that on a tab change the tab that should be changed to is specified via the request parameter with the client ID with _newTab appended to it. The first two times this is set correctly, but on changing back to the tab it is not set, hence not being able to find the tab and the subsequent NPEs.
Updated Cause
With the tabs being dynamic, and the ajax event firing, the tabs are changed and subsequently the ajax updates the tabs. This seems to cause the issue where both tabs are loaded into the same tab, which most likely is messing up the parameters later on.
But how to be able to do the tab change functions and have its details display in the tab?

The issue here is that you have the ajax updating both of the tabs.
It seems that when it does this, the state of the tabs gets confused and you end up with the content of both tabs in one.
You can get around it by inserting the content into an h:panelGroup and updating the panelgroup instead of the tab
example below
<p:tabView styleClass="entities-tabview" id="tabs" dynamic="true">
<p:ajax event="tabChange" listener="#{action.onTabChange}"
update="one-content,two-content,other-content"/>
<p:tab title="First Tab" id="first-tab">
<h:panelGroup display="block" id="one-content">
tab one content
</h:panelGroup>
</p:tab>
<p:tab title="Second Tab" id="second-tab">
<h:panelGroup display="block" id="two-content">
tab two content
</h:panelGroup>
</p:tab>
<p:tab title="Other Tab" id="other-tab">
<h:panelGroup display="block" id="other-content">
// tab content
</h:panelGroup>
</p:tab>
</p:tabView>

Related

False representation with o:tree and p:panelGrid

I want to build a tree which has p:oanelGrid as nodes. Like this:
<o:tree value="#{plannedElementsBean.tree}" var="item">
<o:treeNode level="0">
<o:treeNodeItem>
<p:panelGrid columns="6">
<f:facet name="header">
<h:outputText value="Header" />
</f:facet>
<o:treeInsertChildren />
<p:panel><h:outputText value="Inner" /></p:panel>
<f:facet name="footer">
<h:outputText value="Footer" />
</f:facet>
</p:panelGrid>
</o:treeNodeItem>
</o:treeNode>
</o:tree>
The problem is, that the vertical lines between the children are missing. p:panelGrid renders vertical lines between its children. And I tested it, with static markup. But all the children inserted by the o:tree are treated as if they where the first child, and thus rendered into the first part, while the inner panel is rendered into a second part, divided by a vertical line. I would like to have all inserted children and the inner panel be divided by a vertical line. What is going wrong here?
This is indeed expected behavior. The <o:tree> and friends are UI components like <ui:repeat> and not tag handlers like <c:forEach>. The <p:panelGrid> renders a <td> per UI component child.
You seem to think that <o:tree> (and equivalently <ui:repeat>) recursively generates multiple JSF components which end up in place of <o:treeInsertChildren>. This is not true. There's really physically only one JSF component in the component tree which repeatedly generates its HTML output depending on the current iteration state. There's physically only one <o:treeInsertChildren> component whose all the HTML output ends up in a single <td> of <p:panelGrid>.
Your best bet is just using left-floating divs with a fixed width of 16% so that they break to next line after each 6 items. Note that you can easily reuse PrimeFaces standard CSS classes on plain HTML elements, if necessary.
See also:
c:forEach inside primefaces(e.g. p:panelgrid) inside ui:repeat
ui:repeat JSF 2.0 cannot render iterate p:row primefaces
create table columns dynamically in JSF

JSF selectOneRadio, rendering only certain items

Is there any possibility rendering just certain items (based on their value) of radio buttons in jsf
e.g this below: (but this approach doesn't work)
<h:selectOneRadio value="#{user.favColor3}">
<f:selectItems rendered="c.colorValue eq 'red'" .... var="c"
</h:selectOneRadio>
So, I want to iterate over the items, and showing only the red item.
Thanks in advance.
Cs

Reset Button does not work after form submit

In my application I placed a <p:panel> in a <h:form>. Now in this panel I have some <p:inputText> and at the end of panel I have two button one is Submit another is
Reset. Reset button works properly if it is pressed before submit the form. But if Once I submit the form and some text fields fails to validate
then that fields are containing the previous entered data. Now if I press Reset button to clear all the fields then it is not working.
My Reset button's code :
<p:commandButton value="#{Bundle['resetButton']}" process="#this" update="addCustomerPanel" immediate="true" />
The form is like :
<h:form id="customerForm">
<p:panel id="addCustomerPanel">
.......text fields and two buttons placed here
</p:panel>
<h:form>
Update
I have solved this problem by navigate to the same page on reset button click.

Target specific tabs of a p:tabView in p:printer

I am trying to print multiple tabs but want to exclude some.
I tried the following:
<p:printer target="tabs:tab0,tabs:tab2" />
and
<p:printer target="tabs:tab0" />
<p:printer target="tabs:tab2" />
Neither worked.
I played somewhat around it and it works only for a specific tab if the tab is visible. You can thus definitely not specify multiple tabs. You might want to post an issue report about that to PrimeFaces, although solving that would be relatively hard.
As of now, to get it to work for a specific tab, you'd need to toggle the desired tab visible in the button's onclick handler before print action is performed. You can use the select() function of the <p:tabView> widget for this wherein you pass the zero-based tab index.
Here's a kickoff example.
<h:form id="form">
<p:tabView id="tabs" widgetVar="tabs">
<p:tab id="tab1" title="tab1">tab1</p:tab>
<p:tab id="tab2" title="tab2">tab2</p:tab>
<p:tab id="tab3" title="tab3">tab3</p:tab>
</p:tabView>
<p:commandButton type="button" icon="ui-icon-print" value="Print tab2" onclick="tabs.select(1)">
<p:printer target="tabs:tab2" />
</p:commandButton>
</h:form>

p:tabView tabIndex access

I have a code like below.
<p:tabView value="#{bean.entityList}" id="tabView" var="item">
<p:tab title="#{item.name}">
.
.
.
</p:tab>
</p:tabView>
I want to access the index of the tab just like datatable's rowIndexVar. How can I get the tab index?
There is a very horrible workaround for this, which I don't recommend but it's the best I could come up with. It involves having a bit of Javascript to keep track of the tab count, and within each tab using more Javascript to generate the HTML that needs the tab index.
In the <head>of your page, initialise the tab counter;
<head>
<script>
// Global tab counter
tabCount = -1;
</script>
</head>
Then when you draw each tab, increment the counter. Within the tab, whenever you need the tab index, make a small script to generate the HTML with the index. For example:
<p:tabView value="#{bean.entityList}" id="tabView" var="item">
<p:tab title="#{item.name}">
<script>
// Increment the tab counter
tabCount++;
</script>
<!-- Now the tab content -->
The index of this tab is:
<script>
document.write(tabCount);
</script>
</p:tab>
</p:tabView>
As I said, it's horrible and makes me wince whenever I see it, but it works.

Resources