dynamic tabView

[lyahim]

Hi all,

I tried to create dynamically datatables inside tabview with modal. The goal was generate a tabview with more tabs, inside the tab there is a datatable per tab. In the tables there are a delete button with confirmation dialog. I try to make 2 solutions, but every doors are closed :)
But I have lot's of experience what I try to share with you.

Scenario 1)

<h:form id="tabList">
<b:tabView id="tabView" >
<c:forEach items="" var="">
<b:tab id="tab">
<b:dataTable id="table" var="" value="">
<b:dataTableColumn label="" value="" />
<b:dataTableColumn label="">
<b:button value="" look="danger" onclick="$('#tabList\\:table\\:rowIndex\\:confirmDelete').modal();"/>
	<b:modal id="confirmDelete" title="" closable="false" close-on-escape="false" backdrop="false">
											<p><h:outputText escape="false" value="" /> </p>
											<hr />
											<div>
												<b:commandButton value="#{msg['default.yes']}" look="danger" update="@form" process="@this" 
												actionListener="" oncomplete="$('.modal-backdrop').remove();" />
											    <p:spacer width="10" />
											    <b:button value="#{msg['default.no']}" dismiss="modal" />       	
											</div>
									   	</b:modal>
</b:dataTableColumn>
</b:dataTable>
</c:forEach>
</b:tabView>
</h:form>

In this scenario I used c:forEach. The problem was with the generated html ID-s. The first tab was correct, but the others clouldn't use the id attribute to generate html ID-s.
Show in the picture:

The result after the first tab I cannot find the modal component :S

Scenario 2)

<h:form id="tabList">
<b:tabView id="tabView" >
<ui:repeat items="" var="">
<b:tab id="tab">
<b:dataTable id="table" var="" value="">
<b:dataTableColumn label="" value="" />
<b:dataTableColumn label="">
<b:button value="" look="danger" onclick="$('#tabList\\:table\\:rowIndex\\:confirmDelete').modal();"/>
	<b:modal id="confirmDelete" title="" closable="false" close-on-escape="false" backdrop="false">
											<p><h:outputText escape="false" value="" /> </p>
											<hr />
											<div>
												<b:commandButton value="#{msg['default.yes']}" look="danger" update="@form" process="@this" 
												actionListener="" oncomplete="$('.modal-backdrop').remove();" />
											    <p:spacer width="10" />
											    <b:button value="#{msg['default.no']}" dismiss="modal" />       	
											</div>
									   	</b:modal>
</b:dataTableColumn>
</b:dataTable>
</ui:repeat>
</b:tabView>
</h:form>

In scenario 2 I changed the c:forEAch to ui:repeat.
In this case when the tabview rendered by JSF the tab elements didn't exists, therefor I got IndexOutOfBound exception in TabViewRenderer line 213.

I have no more idea for reach my goal. If you have any idea please help me.

Thank you,
Mihaly

[stephanrauh]

This is a feature we don't support yet. I prefer to implement the <ui:repeat /> variant, because it matches the lifecycle of JSF2 better that <c:forEach />.

Alternatively, we could also add a tabs (plural) attribute, but I'd like to avoid that because it's less flexible.

[stephanrauh]

Trying to use <ui:repeat /> turns out to be too difficult because the implementation differs between Mojarra and MyFaces. However, it should be possible to reach the same goal by implementing a new component <b:tabs value="#{myBean.myArray}" var="currentTab" />.

[jepsar]

See also #209

[lyahim]

Thank you Guys,

There will be a good solution. I have just one question, the value will be a model object or a simple collection? What do you think?

Thank you,
Mihaly

[stephanrauh]

If I manage to do that, it'll be the same mechanism <ui:repeat /> employs. I guess that's the model object. The challenges are that I want to work the solution with both Mojarra and MyFaces, I don't want to simply copy the code due to copyright considerations and I'm not entirely sure I can wrap my head around it. The "pro" side is that the model object is much more flexible than the simple collection.

BTW, my job keeps distracting me from my open source project. If you don't hear from me a week or so, nudge me every once in a while so I don't forget about the really important projects :).

[ggam]

Trying to use <ui:repeat /> turns out to be too difficult because the implementation differs between Mojarra and MyFaces.

PrimeFaces even created a custom Repeat component: https://www.primefaces.org/showcase/ui/data/repeat.xhtml
Could it be worth creating a BootsFaces Repeat component that would be reusable for e.g. dynamic datatable columns?

[lyahim]

@ggam Thanks for idea, I tried it, but p:repeate looks like work similar like ui:repeate because throw the same exception. And I dont think to good idea to force the Bootsfaces customer to use primefaces dependency if want use repeate. But It's just my opinion.

[ggam]

@lyahim Sorry for the confusion. My proposal is to implement a new b:repeat component that can handle this situation.
Another option might be to override the ui:repeat component class (via taglib declaration) to acommodate its behaviour. But that's maybe a bit risky.

[lyahim]

@stephanrauh good point to develop a solution for both JSF implementation, because I use both in different projects :)
I agree with the object more flexible, but if they haven't add value, maybe will just boilerplate.

[stephanrauh]

The next version of BootsFaces is going to be a small bugfix version. This change is surprisingly difficult, so I've reluctantly delayed it to the next version.

[stephanrauh]

@lyahim I've got good news for you, Mihaly. I've resumed work on the dynamic tabs, and it looks promising. I'm sure all kinds of things are still broken, so consider it just an early pre-alpha :).

<b:tabView contentStyle="border: 1px solid #ddd;padding:10px;"
				    content-disabled="#{testBean.contentDisabled}">
  <b:tab title="static tab">
    This tab is static. It's content is static, too.
  </b:tab>
  <b:tab title="dynamic tab #{status.index}" value="#{testBean.tabs}" var="currentTab" varStatus="status">
    <p>
    The content of this tab is not important. It's just a dynamically created tab.
    </p>
    <p>
    #{currentTab} / #{status}
    </p>
  </b:tab>
  <b:tab title="final static tab">
    This final tab is static. It's content is static, too.
  </b:tab>
</b:tabView>

@ManagedBean
@ViewScoped
public class TestBean implements Serializable {
       private List<String> tabs = new ArrayList<>();
	public TestBean() {
		tabs.add("first tab");
		tabs.add("second tab");
		tabs.add("third tab");
	}
}

[stephanrauh]

@lyahim You can test the feature now. I've uploaded a new version of BootsFaces-1.2.0-SNAPSHOT to Maven Central. See #369 on how to get it.