Foros de discusión

Check-box in accordion tab header for selection

Damien Guillermet, modificado hace 6 años.

Check-box in accordion tab header for selection

Junior Member Mensajes: 44 Fecha de incorporación: 9/07/15 Mensajes recientes
Hello!

I would like to enable a selection functionality in an accordion.
This functionality doesn't seems to exist currently so I implement the code bellow.

view.xtml

<alloy:accordion value="#{fooModelBean.items}" var="item">
	<alloy:tab>
		<f:facet name="header">
			<alloy:outputtext value="heading" />
			<alloy:selectbooleancheckbox>
				<f:attribute name="item" value="#{item}" />
				<f:ajax execute="@this" event="click" listener="#{fooBackingBean.clickListener}" render="@none" />
			</alloy:selectbooleancheckbox>
		</f:facet>
		<alloy:outputtext value="content" />
	</alloy:tab>
</alloy:accordion>


fooBackingBean.java

public void clickListener(final AjaxBehaviorEvent event) {
	_logger.debug("Entered in clickListener method.");
	try {
		final Object item = ((SelectBooleanCheckbox) event.getSource()).getAttributes().get("item");
		_logger.debug("Item: {}.", item);
	}
	catch (final Exception cause) {
		_logger.error("Failed to execute clickListener.", cause);
	}
}


When you click on the check-box it's marked as selected but ajax listener method (clickListener) is never called.
Results are same if I use valueChangeListener on selectBooleanCheckbox. Note that it doesn't only affect check-box but also commandButton components (for instance).

So my question is: is there any way to make this works or perhaps, another solution exists?

Configuration :
- Liferay 7 CE GA3
- Liferay Faces Alloy 3.0.0

Thank you for your responses.
Best regards.
Damien.
thumbnail
Kyle Joseph Stiemann, modificado hace 6 años.

RE: Check-box in accordion tab header for selection

Liferay Master Mensajes: 760 Fecha de incorporación: 14/01/13 Mensajes recientes
Hi Damien,
This seems like a bug, so I've created FACES-3065 to track it. Please watch the issue, if you would like to be alerted on its progress. Depending on your use-case, you may be able to workaround this issue by using alloy:accordion's tabExpand or tabCollapse events instead of ajax components in the "header" facet:

view.xtml:

<alloy:accordion value="#{fooModelBean.items}" var="item">
<f:ajax event="tabExpand" listener="#{fooModelBean.clickListener}" />
<f:ajax event="tabCollapse" listener="#{fooModelBean.clickListener}" />
<alloy:tab>
<f:facet name="header">
<alloy:outputText value="heading" />
</f:facet>
<alloy:outputText value="content" />
</alloy:tab>
</alloy:accordion>


FooBackingBean.java:

public void clickListener(AjaxBehaviorEvent ajaxBehaviorEvent) {

if (ajaxBehaviorEvent instanceof TabExpandEvent) {
TabExpandEvent tabExpandEvent = (TabExpandEvent) ajaxBehaviorEvent;
FacesRequestContext.getCurrentInstance().addScript(FacesContext.getCurrentInstance(),
"alert('item #" + tabExpandEvent.getRowData() + " clicked');");
}
else if (ajaxBehaviorEvent instanceof TabCollapseEvent) {
TabCollapseEvent tabCollapseEvent = (TabCollapseEvent) ajaxBehaviorEvent;
FacesRequestContext.getCurrentInstance().addScript(FacesContext.getCurrentInstance(),
"alert('item #" + tabCollapseEvent.getRowData() + " clicked');");
}
else {
FacesRequestContext.getCurrentInstance().addScript(FacesContext.getCurrentInstance(),
"alert('" + ajaxBehaviorEvent.getComponent().getClientId() + " clicked');");
}
}
Damien Guillermet, modificado hace 6 años.

RE: Check-box in accordion tab header for selection

Junior Member Mensajes: 44 Fecha de incorporación: 9/07/15 Mensajes recientes
Hello Kyle,
Thank you for your feedback and your advices.
I'll follow the 3065 issue. For now I'll the tabCollapse + Expand events workaround.
Damien.
thumbnail
Kyle Joseph Stiemann, modificado hace 6 años.

RE: Check-box in accordion tab header for selection

Liferay Master Mensajes: 760 Fecha de incorporación: 14/01/13 Mensajes recientes
Great! Thanks for using Liferay Faces!
Damien Guillermet, modificado hace 6 años.

RE: Check-box in accordion tab header for selection

Junior Member Mensajes: 44 Fecha de incorporación: 9/07/15 Mensajes recientes
I noticed that the fix is part of 3.1.0 alloy release. Do you have any idea about the release date? emoticon
thumbnail
Kyle Joseph Stiemann, modificado hace 6 años.

RE: Check-box in accordion tab header for selection

Liferay Master Mensajes: 760 Fecha de incorporación: 14/01/13 Mensajes recientes
Hi Damien,
Are you trying to visually show via checkbox that a tab is selected or expanded? Are you trying to do something like this:



If so, you can do everything you want on the front end with JavaScript. Here's the example code that I used to create that .gif:

<alloy:accordion clientKey="accordion" value="#{bean.items}" var="item">
<alloy:tab>
<f:facet name="header">
<alloy:outputText value="heading #{item}" />
<input class="header-checkbox" type="checkbox" />
</f:facet>
<alloy:outputText value="content #{item}" />
</alloy:tab>
</alloy:accordion>

<alloy:outputScript use="aui-toggler" target="body">
var accordion = Liferay.component('accordion');
var tabs = accordion.items;
tabs.forEach(function(tab) {
tab.on('expandedChange', function(event) {
var headerCheckbox = tab.get('header').one('.header-checkbox');
if(event.newVal) {
headerCheckbox.set('checked', true);
}
else {
headerCheckbox.set('checked', false);
}
});
});
</alloy:outputScript>


If the above code doesn't accomplish your goals, please let us know what you are trying to accomplish and why you require an input/button in the tab header.

Thanks,
- Kyle
Damien Guillermet, modificado hace 6 años.

RE: Check-box in accordion tab header for selection

Junior Member Mensajes: 44 Fecha de incorporación: 9/07/15 Mensajes recientes
Hello Kyle,

Thank you for your workaround well explained. I will try and see if it fill my goal. My goal was :
I have an accordion feeded with a data model entities and I would like to have the possibility to select multiple items via a visual select-box (similarly to data-table checkbox selection mode) in order to process massive actions (delete, ...). I could use something else than an accordion but I consider the functionnality of showing/hiding a sub panel required in my final case.

Damien.
thumbnail
Kyle Joseph Stiemann, modificado hace 6 años.

RE: Check-box in accordion tab header for selection

Liferay Master Mensajes: 760 Fecha de incorporación: 14/01/13 Mensajes recientes
Is there any reason that you can't use alloy:dataTable selectionMode="checkbox" and put an alloy:accordion inside the cells (alloy:columns) where you want to hide/expand data?

- Kyle