How to get tree inside an accordion work

I have a split panel in my application. In the left hand side, i have an accordion containing various tabs.

In each tab there is a tree.

I want to know a way in which i can add a listener to each tree and make it work like showing content in Right hand side of the split panel.

Thank you,


Add an ItemClickListener (or a ValueChangeListener) to each tree and change the second component of the split panel in the listener.

A quick (and dirty) example where the content is stored in a property (you probably want to implement this a bit smarter):

public class AccordionApplication extends Application {

    private SplitPanel splitPanel;

    public void init() {
        Window window = new Window();
        splitPanel = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL);
        splitPanel.setSecondComponent(new Label("The default contents"));

    private Component createAccordion() {
        Accordion accordion = new Accordion();
        Tree tree1 = createNavigationTree();
        addItem(tree1, "Show a TextField", new TextField("",
                "It's a TextField!"));
        addItem(tree1, "Show a Button", new Button("It's Button!"));

        Tree tree2 = createNavigationTree();
        addItem(tree2, "Show another TextField", new TextField("",
                "It's another TextField!"));
        addItem(tree2, "Show another Button",
                new Button("It's another Button!"));

        ItemClickListener myListener = new ItemClickListener() {

            public void itemClick(ItemClickEvent event) {
                Item clicked = event.getItem();
                Component c = (Component) clicked.getItemProperty("view")


        accordion.addTab(tree1, "The first tree", null);
        accordion.addTab(tree2, "The second tree", null);

        return accordion;

    private void addItem(Tree t, String text, Component c) {
        Object id = t.addItem();
        Item item = t.getItem(id);


    private Tree createNavigationTree() {
        Tree tree = new Tree();

        tree.addContainerProperty("caption", String.class, null);
        tree.addContainerProperty("view", Component.class, null);


        return tree;



Thanks Artur…

You were of much help and i was ablw to salve my problem indeed.