Accordion Extension to capture all tab click events

Hi,
I am trying to create an extension to capture clicks on accordion tabs no matter if they are already selected or not.
I’ve been able to create the server side extension and connector :

My UI looks like this:

package test;

import test.client.extension.listener.TabClickedListener;

import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Accordion;
import com.vaadin.ui.Label;
import com.vaadin.ui.TabSheet.Tab;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

/**

  • Main UI class
    */
    @SuppressWarnings(“serial”)
    public class ClickableAccordionUI extends UI {

    private Label label;
    @Override
    protected void init(VaadinRequest request) {
    VerticalLayout layout = new VerticalLayout();
    layout.setSizeFull();

     Accordion accordion = new Accordion();
     Tab tab = accordion.addTab(new Label("Test"));
     tab.setCaption("Test tab");
     Tab tab2 = accordion.addTab(new Label("Test 2"));
     tab2.setCaption("Test tab 2");
     Tab tab3 = accordion.addTab(new Label("Test 3"));
     tab3.setCaption("Test tab 3");
     
     accordion.setSizeFull();
     
     ContextMenuExtension extension = new ContextMenuExtension(accordion); //register the extension
     extension.addTabClickedListener(new TestTabClickedListener()); 
     
     layout.addComponent(accordion);
     
     label = new Label("Test");
     layout.addComponent(label);
    
     }
    

    private class TestTabClickedListener implements TabClickedListener{

     @Override
     public void tabClicked(int tabIndex) {
         label.setCaption("Tab index clicked " + tabIndex);
     }
    
     @Override
     public void addTab() {
         label.setCaption("Add new tab"); 
     }
    
     @Override
     public void editTab(int tabIndex) {
         label.setCaption("Edit tab with index " + tabIndex); 
     }
    
     @Override
     public void removeTab(int tabIndex) {
         label.setCaption("Remove tab with index " + tabIndex);
     }
    
     @Override
     public void debug(String message) {
         label.setCaption(message);
     }
    

    }
    }

Extension class looks like this :

package test;

import java.util.ArrayList;
import java.util.List;
import java.util.logging.Logger;

import test.client.extension.listener.TabClickedListener;
import test.client.extension.rpc.TabClickedRpc;

import com.vaadin.server.AbstractExtension;
import com.vaadin.ui.Accordion;

public class ContextMenuExtension extends AbstractExtension {

/**
 * 
 */
private static final long serialVersionUID = -5013226130802706886L;

private List<TabClickedListener> listeners;

private static final Logger log = Logger.getLogger(ContextMenuExtension.class.getName());

private TabClickedRpc rpc = new TabClickedRpc() {
    
    /**
     * 
     */
    private static final long serialVersionUID = 1771794965928919707L;

    @Override
    public void tabClicked(int tabIndex) {
        log.info("Tab clicked " + tabIndex); 
        
        for (TabClickedListener listener : listeners) {
            listener.tabClicked(tabIndex); 
        }
    }
    
    @Override
    public void removeTab(int tabIndex) {
        for (TabClickedListener listener : listeners) {
            listener.removeTab(tabIndex); 
        }
    }
    
    @Override
    public void editTab(int tabIndex) {
        for (TabClickedListener listener : listeners) {
            listener.editTab(tabIndex); 
        }
    }
    
    @Override
    public void addTab() {
        for (TabClickedListener listener : listeners) {
            listener.addTab(); 
        }
    }

    @Override
    public void debug(String message) {
        for (TabClickedListener listener : listeners) {
            listener.debug(message);
        }
    }
};

public ContextMenuExtension(Accordion accordion) {
    super.extend(accordion);
    listeners = new ArrayList<>(); 
    registerRpc(rpc); 
}

public void addTabClickedListener(TabClickedListener listener){
    listeners.add(listener);
}

public void removeTabClickedListener(TabClickedListener listener){
    listeners.remove(listener);
}

}

And my Client side connector is this:

package test.client.extension;

import test.ContextMenuExtension;
import test.client.extension.rpc.TabClickedRpc;

import com.vaadin.client.ComponentConnector;
import com.vaadin.client.ServerConnector;
import com.vaadin.client.communication.RpcProxy;
import com.vaadin.client.extensions.AbstractExtensionConnector;
import com.vaadin.client.ui.VAccordion;
import com.vaadin.shared.ui.Connect;

@Connect(ContextMenuExtension.class)
public class ContextMenuConnector extends AbstractExtensionConnector {

/**
 * 
 */
private static final long serialVersionUID = -8181696087962182981L;

TabClickedRpc tabClickedRpc = RpcProxy.create(TabClickedRpc.class, this);

public ContextMenuConnector(){
}

@Override
protected void extend(ServerConnector target) {
    final VAccordion accordion = (VAccordion)((ComponentConnector) target).getWidget();
    tabClickedRpc.debug("Tab keys size " + accordion.tabKeys.size());
}

}

When runnning the application, i only get “Tab keys size 0” on Test label, which means there aren’t any tabs on accordion.
Am I doing anything wrong ? I thought the extend method was only called when creating the extension and associating it with the component itself. Since I am doing this after adding the tabs I don’t know where the problem might be.

Regards,
Ivan Frias