Changing the style of an instance of TabSet

[daniel_gabriel]

Hi,

I'm using SmartGWT/Eclipse. I have a tabset inside a tab of another tabset. I'd like to change the color of individual tabs of the inner tabset. I would prefer not to modify the skin but rather do this programmatically. setStyle() will require a redefinition of everything already defined for a tabset in the skin. I'm looking for a way to just modify specific style properties (like background-color) of the tabs.

I read chapter 9 of the Quick Start guide but didn't find any way of doing this. Can this even be done?

Thanks,
-Daniel

[Isomorphic]

Yes, but at the moment, it requires JSNI / JavaScript object. Build up a Map of properties you want to set, in this case, "backgroundColor" : "#000000" would be one entry. Use JSOHelper to convert to a JavaScriptObject and apply to the tabProperties attribute via setAttribute().

[daniel_gabriel]

Great, this works. But I have more questions. backgroundColor - this is an HTML attribute, not CSS, correct? How would I go about changing, say, the background image for the selected tab (the tabbar piece, not the background of the pane), since this is part of a class definition in the CSS? In other words, this gives me access to the tab properties in general, but not to individual tabs. Is there a way to drill down more?
Also, what entry in the map should I use to change the font size (I tried "font size", "font-size", and "fontSize", none of them worked)?

Thanks in advance,
-Daniel

[Isomorphic]

By setting backgroundColor you are doing the equivalent of Canvas.setBackgroundColor(). Any such settings will work - you are basically calling setters on an instance of StretchImgButton.

You can set the CSS style in use via "styleName", but bear in mind, tabs use a triple-image rendering. To really change the appearance you'll need to change the media.

[daniel_gabriel]

Is there a way to assign a new set of images to an individual tab inside an individual tabset though, not to all tabs in all tabsets? And that without having to create a whole new tabset CSS class?

Thanks,
-Daniel

[Isomorphic]

Yup. Remember, setting properties this way is like calling setters - see StretchImgButton.setSrc()

[daniel_gabriel]

Ok, here is a code snippet:

Tab tab = new Tab(categoryName, "document.jpg");

// set properties for the tabs
HashMap<String, String> map = new HashMap<String, String>();
// set prefix for tab image files
map.put("src", "./tab");
JavaScriptObject jso = JSOHelper.convertMapToJavascriptObject(map);

// what attribute name should be used?
tab.setAttribute("tabProperties", jso);

this.addTab(tab);

This is a snippet from a class that extends TabSet. What attribute name should I use when setting the property map?

Or, how do I get a StretchImgButton from the Tab?

Thanks,
-Daniel

[Isomorphic]

To set a property for a single Tab, just call setAttribute on the tab.

[daniel_gabriel]

You mentioned .setSrc() on the StretchImgButton class. If I understand correctly, I need to somehow invoke .setSrc() on the Tab. The Tab class doesn't have such a method, so I need to call tab.setAttribute(...), passing it my changes. The .setAttribute() method takes 2 parameters, the first being the property name. Question is, which property name to use in order to get the tab to use a different set of images when drawing? In the code above, I put "tabProperties" as the name, which is incorrect.

Thanks,
-Daniel

[Isomorphic]

It's like Java beans, property/attribute names correspond to getter and setter names. setAttribute("src", "something") on a Tab is like calling setSrc("something").

[daniel_gabriel]

Ok, got it. I thought you meant I had to set a map of properties on the Tab using the setAttribute() method, but I only had to set a single property - "src". Thanks for the explanation, that worked great.

[tomhj]

I'm trying to do exactly the same thing. I have two levels of tabs and I'd like to style the nested tabs differently than the outer tabs.

My first idea was to copy the tab* CSS styles and create a nestedTab* set of styles (and I was going to alter those styles and such from there). I called TabSet's setStyleName("nestedTab") but was disapppointed to see that none of the other styles (tab, tabBar, tabSelected, tabTitleSelected, etc.) changed along with it. There isn't a way to set the style name for a Tab object itself.

I have tried calling Tab.setAttribute("backgroundColor", "red") for instance but that didn't have any effect.

I would like to customize the entire appearance of the row of tabs and the background of the tab content (at least the border area around it).

Any way to do this?

[Isomorphic]

Hi Tom,

It's odd, but it looks like you haven't read this thread, which tells you how to do what you want. Can you take another read?

[tomhj]

I have read through the thread several times. Here is a sample program [or contents of an onModuleLoad()] illustrating what I'm trying to do:

        TabSet outerTabSet = new TabSet();
        outerTabSet.setHeight100();
        outerTabSet.setWidth100();
        
        Tab outerTab1 = new Tab("Outer Tab 1");
        outerTabSet.addTab(outerTab1);
       
        Tab outerTab2 = new Tab("Outer Tab 2");
        outerTab2.setPane(new Label("Content for outer tab 1"));
        outerTabSet.addTab(outerTab2);

        TabSet nestedTabSet = new TabSet();
        nestedTabSet.setHeight100();
        nestedTabSet.setWidth100();
        
        // Trying to set the background color for a tab to be Red for instance.
        Tab nestedTab1 = new Tab("Nested Tab 1");
        nestedTab1.setAttribute("backgroundColor", "red");
        nestedTab1.setPane(new Label("Content for nested tab 1"));
        nestedTabSet.addTab(nestedTab1);
        
        Tab nestedTab2 = new Tab("Nested Tab 2");
        nestedTab2.setPane(new Label("Content for nested tab 2"));
        nestedTabSet.addTab(nestedTab2);

        outerTab1.setPane(nestedTabSet);
        
        outerTabSet.draw();

You mention in the thread using a Map and using JSOHelper.convertMapToJavascriptObject(map). Daniel gives a little code snippet as part of a question: what attribute name should be used in the first argument to the tab.setAttribute() call? But I couldn't understand your answer.

I tried this too:

        Tab nestedTab1 = new Tab("Nested Tab 1");
        
        HashMap<String,String> map = new HashMap<String,String>();
        map.put("backgroundColor", "red");
        
        nestedTab1.setAttribute("backgroundColor", map);
        nestedTab1.setPane(new Label("Content for nested tab 1"));
        nestedTabSet.addTab(nestedTab1);

But that didn't have any effect either.

Any hints on how to style the nested tabs would be greatly appreciated.

thanks,
Tom

[tomhj]

Just to be clear though - what I really want to be able to do is style the nested tabs differently. So for instance, instead of the selected tab being white and the unselected tabs being gray, I'd like the selected tab to be a different shade of white and the unselected tabs to be a different shade of gray so the nested tabs stand out from the top-most tabs.

If that means custom "media" or images to get the tab edges, etc. - I'm fine with that. But I don't want to change the style of all the tabs - just the nested ones.