Close icon hover in TabSet

[kylemwhite]

SmartClient 2017-07-20
Skin: Tahoe

I've always wanted to see something different while hovering over the close icon on a tab. I've never seen it, even in the showcase so I figured that it was just not an option without a bunch of work. Today, I was poking around in the image folders and I noticed that the close icon comes from [SKIN]/images/TabSet/close.png and in that same folder is an image named close_Over.png which looks to be a good image to show while hovering over the close icon. This implies that there is a mechanism to show a different icon when hovering over the close icon but I cannot find it. Is there a built-in way to turn this feature on?

[Blama]

Hi kylemwhite,

to me it seems that all close-related methods in the TabSet docs only accept a string as path to the icon.
Also, Tab does not mention any autoChild for the closeIcon. If it did, I asssume that you could make the Img stateful and using different images for over/focus.

Best regards
Blama

[Isomorphic]

Since the TabSet uses StatefulCanvas.icon support to render the close icon, you can set showRollOverIcon on an individual tab or on all tabs to create a rollover effect for the close button.

[kylemwhite]

Yes, if I do this:

myTab.showRollOverIcon = true;

It works. However.....

This violates the 'use the setter or setProperty rule' (or maybe that doesn't apply to objects?). And since setProperty does not exist on a Tab object, we cannot use that.

And since Tab does not inherit from anything (according to the docs), there is no way to discover this property, one has to just 'know'.

So, is there a way to modify the documentation so that these types of properties are discoverable both for a human reading the docs and for the TypeScript generator to create the appropriate interface?

[Isomorphic]

The "use the setter" rule indeed does not (could not) apply to objects.

Depending on your setting for useSimpleTabs, you can know that the Tabs are ImgTab or Button instances, and hence know such properties apply.

[kylemwhite]

Depending on your setting for useSimpleTabs, you can know that the Tabs are ImgTab or Button instances, and hence know such properties apply.

Well, sort of. At design time, I can certainly know that (if I read the description of useSimpleTabs) but the IDE cannot know that (for TypeScript compilation) because a tab is just a Tab, it's not a Button nor ImgTab. I.e. getSelectedTab() returns a Tab and the .tabs property is an array of Tab. Nothing returns a Button or ImgTab (that I know of). Simlarly at run time, if I call getSelectedTab() I get an object that does not have the setProperty method nor isA() method (because they're not really classes). In the documentation (as far as I can tell), there is no link between Tab and Button or ImgTab except for the description of the useSimpleTabs property.

Would it make sense if Button and ImgTab were defined to implement an interface (called ITab or Tabbable or something) so that common functionality (like showRollOverIcon) could be defined in one place, searched on, and used for code generation?

[Isomorphic]

Tabs can be multiple different types of widgets, or there may be no widget per se (like grid cells are not widgets), so we can't really advertise the complete Button API, or even lower-level APIs like StatefulCanvas. Not to mention that some features of such APIs aren't valid with tabs since the TabSet uses such features itself.

So this is just a case where the IDE can't have complete information, and the docs must be read.