Carousel with thumbnail images at the bottom

Question

In a Codenameone app, I'm trying to develop a carousel with a thumbnail list at the bottom. I've used Tabs control to display files (of diff types like images, video, text, button etc) in carousel style in the center of a form and another Tabs control to display thumbanail images (of the first carousel files) at the bottom of the form. When a user selects a thumbnail image in the bottom carousel, corresponding component should be displayed in the first carousel.

hi.add(BorderLayout.CENTER, mainCarousel);
hi.add(BorderLayout.SOUTH, bottom_tab);

bottom_tab.addSelectionListener((i1, i2) -> {            
       // bottom_tab.getTabComponentAt(i2).addPointerPressedListener((i) -> {
            mainCarousel.getTabComponentAt(i2).setVisible(true);
            mainCarousel.getTabComponentAt(i2).repaint();
       // });            
    });

But the component not getting displayed in the central carousel. Also, I tried to capture the event addPointerPressedListener, but it's not getting fired when I select a thumbnail image.

Answer 1

You can't set tab components to visible/invisible to show/hide them. That won't work. I'm guessing that what you want is a horizontal list for the bottom UI similar to the answer here.

I would suggest using pointer released always. Notice that this will only get delivered to focusable components or the form. To make sure you get the event you can register a pointer release listener on the form.