gwtgwt-tablayoutpanelgwt-widgets

Adding Arbitrary Text Beside Tabs with GWT's TabLayoutPanel


Currently, I have a TabLayoutPanel with a few tabs, inside of each tab is a set of breadcrumbs. I would like to be able to display my breadcrumbs right next to the tabs (inside the TabBar itself). I haven't yet seen any instance of someone having done this, and I'm beginning to believe I might end up rewriting their TabLayoutPanel class myself and implementing that where needed, but obviously I'd rather not go that route unless there's no alternative.

Anyone have any guidance on this?


Solution

  • Just came across the same problem. Here are most of the relevent code snippets. I added a Unicode arrow when the tab was selected, and removed it when the tab was deselected.

        private final String htmlStr ="\u25bb";
    
            private String getTabTitle(String html){
            // Designed to work for this example input.
            //If you pass a different string you will need to do different matching.
            if(html.indexOf("\u25bb") < 0)
                return html;
            else
                return html.substring(html.indexOf("\u25bb")+1);
        }
    
    
        @Override
     public void onBeforeSelection(BeforeSelectionEvent<Integer> event) {
            if(!getSelectedIndex().equals(event.getItem())) {
                notifyCurrentTabOfClosing();
                selectedIndex = event.getItem();
                String tabtitle = getTabTitle(getTabBar().getTabHTML(selectedIndex));
                getTabBar().setTabHTML(selectedIndex, htmlStr+tabtitle);
                }
            }
        }
    
    public void selectTab(Widget widget) {
            int widgetIndex = getWidgetIndex(widget);
            selectTab(widgetIndex);
            String tabtitle = getTabTitle(getTabBar().getTabHTML(widgetIndex));
            getTabBar().setTabHTML(widgetIndex, htmlStr+tabtitle);
        }