TabSet, baseline still visible on hidden TabBar

[Ozi]

Hi folks,

we are using (may be quite specific) behavior for the TabSet component: when there is only one Tab visible, the TabBar (autoChild component) is hidden to not show the single Tab.

This worked quite well for years. But after upgrade to SmartGWT 5.0p, SmartClient Version: v10.0p_2015-02-24/LGPL Development Only (built 2015-02-24), there is a problem with the "baseLine", which remains visible.

I've been able to reproduce it also in the SC showcase on the current build, with minor modifications (see the attached screenshot):
http://www.smartclient.com/#closeableTabs

This is the modified code for the closeableTabs example (simulating behavior described above):

isc.TabBar.addProperties({
                baseLineConstructor:"Canvas",
                baseLineProperties : {
                    backgroundColor: "pink",
                    overflow:"hidden"
                },
                baseLineThickness:1
 });

isc.TabSet.create({
    ID: "tabSet",
    tabBarPosition: "top",
    width: 400,
    height: 200,
    tabs: [
        {title: "Blue", canClose: true,
         pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})},
        {title: "Green",
         pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_green.png"})}
    ],
    hideTabBar : function () {
                if(this && this.tabBar) {
                  var tmpTabBarHeight = this.tabBar.getHeight();
                  this.tabBarOverlap = tmpTabBarHeight;
                  this.tabBar.hide();
                  this.fixLayout();
                }
            },
    showTabBar : function () {
        if(this && this.tabBar) {
          this.tabBarOverlap = null;
          this.tabBar.show();
          this.fixLayout();
        }
    }
});

isc.HLayout.create({
    top: 215,
    membersMargin: 15,
    members: [
        isc.IButton.create({
            title: "Add Tab",
            click: function () {
                // alternate between yellow pawn and green cube
                if (tabSet.tabs.length % 2 == 0) {
                    tabSet.addTab({
                        title: "Yellow",
                        canClose: true,
                        pane: isc.Img.create({autoDraw: false, width: 48, height: 48, 
                                              src: "pieces/48/pawn_yellow.png"})
                    });
                } else {
                    tabSet.addTab({
                        title: "Green",
                        canClose: true,
                        pane: isc.Img.create({autoDraw: false, width: 48, height: 48, 
                                              src: "pieces/48/cube_green.png"})
                    });            
                }
                if (tabSet.tabs.length == 1) tabSet.selectTab(0);
                if (tabSet.tabs.length > 1) tabSet.showTabBar();
            }
        }),
        isc.IButton.create({
            title: "Remove Tab",
            click: function () {
                tabSet.removeTab(tabSet.tabs.length-1);
                if (tabSet.tabs.length == 1) {
                    tabSet.hideTabBar();
                }
            }
        })
    ]
});

Any hint would be appreciated.

[Ozi]

Please, anyone from Isomorphic guys? I'd like to kindly ask for reaction.

I've found the difference in the TabSet implementation, or at least in the created DOM structure.
Please take a quick look on the attached images.
In the SGWT 4.x the baseLine element is only one for the TabSet (child of TabBar).
But in the SGWT 5.x there are TWO baseLines. One is autoChild of the TabBar. But the second one is child of TabSet and thats why it is not hidden together with the TabBar...

Is there any way how to achieve the behavior described above (hide TabBar for the TabSet with only one Tab)?

[Ozi]

Very ugly workaround:
Override TabSet and add the following method to get the "second" baseLine.
On the returned Canvas call show/hide.

private Canvas getTabBarBaseLine() {
		for (Canvas c : this.getChildren()) {
			if (c.getID() != null && c.getID().indexOf("tabBar_baseLine") > 0) {
				return c;
			}
		}
		return null;
	}

[Isomorphic]

Hi Ozi,
The newer logical structure was implemented as part of a rework to improve support for TabSets on mobile browsers.

We don't have built in support for what you're trying to do. The right "fix" here would be for us to add an explicit framework feature allowing developers to show and hide the tab-bar for a tabSet at runtime by calling a method.
This isn't currently a feature on our roadmap but we will make a note that it has come up for future consideration. If you'd like it prioritized, it might be eligible for feature sponsorship. Let us know if this is something you'd like us to consider

Regards
Isomorphic Software