tab background

[esmith]

Hello,

Using Smart GWT 3.1p, with GWT 2.5.1

How do I set the background of the tab. I see the setBackground which changes the background of the canvas on the tab. if I have a new tab("home"). I want to change
the background of the "tab" part behind the "home".

Thanks,
Evan

PS Here is what I tried, which does change the background of the canvas.

HTMLPane htmlPane = new HTMLPane();
htmlPane.setAutoDraw(false);

htmlPane.setContentsURL("./html/Home/index.html");
htmlPane.setContentsType(ContentsType.PAGE);
htmlPane.setBackgroundColor("#BFFF9F");

htmlPane.setWidth100();
htmlPane.setHeight100();
htmlPane.setPadding(0);
tabHome.setPane(htmlPane);
tabHome.setPaneMargin(0);

[esmith]

Hello

Attached is a screen shot of the tabs, "home" is currently selected. And notice that the background is on the canvas below "home" (the green), but not behind the text of "home". I wonder looking at it if it is the enterprise blue style from smart gwt that is doing it. As there seems to be a gradient on the region behind "home".

What do I do to just override that? And keep the css for the theme, if that is the problem.

I am using smart gwt version
SmartClient Version: v8.3p_2013-04-19/PowerEdition Deployment (built 2013-04-19)

Thanks,
Evan

[esmith]

tabHome.getTabCanvas().setBackgroundColor(colorHom e);

so the call
tabHome.getTabCanvas().setBackgroundColor(colorHome);

Is I think what I am looking for.

However as the documentation says the tabcanvas is null till the widget is drawn.

I have a vlayout that has these tabs in it, and a .draw of the vlayout.

I tried overriding "ondraw" and after super putting in this call, still null.

Where can I put this call to change color, so that at least after it is show on the screen the colors are right. Or better can I get a enw tab and then set the tab canvas ... so before everything drawn.

Evan

[Isomorphic]

A more convenient way to set this on a per-tab basis is to use tab.setAttribute("backgroundColor", "theColorString").

This will only work if all browsers use CSS3Mode, whereas the default is to use it only for modern browsers (aka not IE). See the Skinning Guide for details.

Also see the Skinning Guide if your intent was really to change the default styling for selected or unselected tabs, system-wide.

[esmith]

ok

Hello,

Yes that sort of works, it changes the color for a second just as selecting, but does not keep it once selected.

I could not find the "skinning guide". I did find
http://www.smartclient.com/smartgwtee/javadoc/com/smartgwt/client/docs/Skinning.html

Which references chapter 9 of quick start.

Was this what you mean?

Where might I look for a list of all the possible attributes I could set on a tab? I will look for the .css files, but am not sure which one nor if it will list all of the attributes.

Thanks,
Evan

[Isomorphic]

Yes that's the Skinning Guide, and it answers the question you just asked about Tabs - please give it a read.

[esmith]

almost found the doc

Found the java doc, but nothing jumped out at me as what I needed.

doc/javadoc/com/smartgwt/client/widgets/tab/Tab.html

Reading the
http://www.smartclient.com/smartgwtee/javadoc/com/smartgwt/client/docs/Skinning.html

Got me to convert my smartgwtpower jar to a zip and find the theme for enterprise. But again no background color changes for Tabs.

Could you point me to the list of properties of set attributes that I might try?

Sorry to be so dense, the documentation once I understand its structure will surely be easier.

Thanks,
Evan

[esmith]

firebug

Hello,

Well I am trying to use firebug to debug the problem, as I could not find the setting to change.

It looks like I am getting a "background-image" that is causing the selecxted button background to not be set. How do I remove an attribute setting that is in the css? I don't want to edit the enterprise style, but other than setting to "" (which did not seem to do it) I am at a loss at what call to make.

Here is the css from firebug.

Evan


.tabButtonTopSelected {
background-color: #F0F8FF;
background-image: -moz-linear-gradient(center top , #F0F8FF 0%, #F0F8FF 4%, #E7F0FE 4%, #FFFFFF 100%);

[esmith]

firebug is helpful

How do I set the background-color attribute of the following styles on my Tab to null. I edited them in firebug and when they were removed my original background-color worked.

Not sure if this is the "correct" way to approach this problem, but if I could remove these settings it would work. They come from the enterpriseblue style, and firebug tells me the line and file of the skin (skin_styles.css).

// tabButtonTopSelected
// tabButtonTopSelectedOver
// tabButtonTopOver

Thanks,
Evan


for example

.tabButtonTopSelected {
background-color: #F0F8FF;
background-image: -moz-linear-gradient(center top , #F0F8FF 0%, #F0F8FF 4%, #E7F0FE 4%, #FFFFFF 100%);


I tried the following, which is not right I guess.


private void addHomeTab() {
HTMLPane htmlPane = new HTMLPane();
htmlPane.setAutoDraw(false);

htmlPane.setContentsURL("./html/Home/index.html");
htmlPane.setContentsType(ContentsType.PAGE);
String strColor = "#BFFF9F";
htmlPane.setBackgroundColor(strColor);

htmlPane.setWidth100();
htmlPane.setHeight100();
htmlPane.setPadding(0);
tabHome.setPane(htmlPane);
tabHome.setPaneMargin(0);
tabHome.setAttribute("backgroundColor", strColor);
tabHome.setAttribute("background-color", strColor);
tabHome.setAttribute("background-image.background-color", "");
tabHome.setAttribute("tabButtonTopSelected.background-color", "");
tabHome.setAttribute("tabButtonTopSelectedOver.background-color", "");
tabHome.setAttribute("tabButtonTopOver.background-color", "");

// remove background-image for the following so can get the color we want all the time
// tabButtonTopSelected
// tabButtonTopSelectedOver
// tabButtonTopOver
AppUtils.addTabToTabsetWithHover(this, tabHome, 0);

}

[esmith]

guide

http://www.smartclient.com/docs/8.3/docs/SmartClient_Quick_Start_Guide.pdf

The skinning link
http://www.smartclient.com/smartgwtee/javadoc/com/smartgwt/client/docs/Skinning.html

says " Full instructions are provided in Chapter 9 of the QuickStart Guide. "

And the quick start guide link above is the "first one" on a page of links. However, chapter 9 is "Smart Client Server Framework" and does not seem to talk about tabs and attributes. What is the correct chapter? I find no reference to "backgroundcolor" and I am also using GWT and this document seems to be directly about javascript.

Thanks,
Evan

[Isomorphic]

Clicking the first link in a given page isn't always a reliable strategy :) In this case, the product you are using is SmartGWT, so you want the SmartGWT QuickStart Guide.

The link to the QuickStart in this case is just for modifying skins and the relevant section is "Customizing Themes" - the chapter number is indeed stale and we'll get that corrected.

However there's no need to customize the theme or to remove those CSS styles. CSS definitions are additive, so if you simply define additional styles for tabButtonTopSelected et al, you can change the background-color in those additional styles, and there is no need to modify the skin.

However please bear in mind what we previously said about CSS3 mode. If you only change the background color in CSS you will not affect the appearance in non-CSS3 mode, which uses StretchImg-based rendering using actual image files - see the Skinning Guide for details on this.