Custom Splitbar CSS Class

[Orelia]

Hi,

I've been trying to set a custom CSS class for the splitbars.
I've created a Java class that extends Splitbar, with a custom style name (setStyleName()). Now, I'm supposed to set the resize bar class, by using the setResizeBarClass() method, but the argument is a String, and is supposed to be the name of the class to use. Fine. Can I get some help there?
What exactly is to be set as the argument to the setResizeBarClass? I've tried juste the name of the class "HorizontalSplitbar", no success, I've tried with the full java path: ca.domain.package....HorizontalSplitbar, I've tried with slashes, I've tried with the WEB-INF path, still can't find how to make this work.

Thanks for any help!

[nicole.baz]

Facing the same problem

Hi,

I am facing the same issue. My customized Splitbar is never getting called.
I also tried to find a way to change the tab's looks as well.

The only way i was able to change the tab, for example, was in changing its images (left, right, middle, selected, etc) in the smartgwt-skins.jar, which is not what i want to do. Because if i do it this way, it means that all my tabs have to look the same and i have to change all the images in the jar everytime i get an update, if any updates are posted online.

So, how can i just override the styles of tabs and splitbars (among other things, like the scroll bar, etc...) from css or from Java?

Please let me know if you have an answer.
Thanks in advance.

[Isomorphic]

Use the SmartClient skinning system to change the appearance of the tab. See the sticky thread on SmartGWT documentation in this forum for starters.

[Orelia]

But what about the splitbars? Because we can't figure out how to change the Java class to use for them (which would allow us to use special CSS classes).
Any idea?

[Isomorphic]

@Pulse that too you can do via SmartClient's skinning system. Creating a different SmartClient class in order to carry different skinning properties is extremely simple and entirely declarative:

isc.defineClass("MySplitbar", "Splitbar").addProperties({src:"someImage.png"});

[nicole.baz]

subclass for TabSet?

Hi,

Thanks a lot for your reply, Isomorphic.
I checked the documentation that you recommended and I followed the steps to have my own version of the stylesheet and js, based on the theme that is closest to what i want.

Now, it seems straightforward to override a specific component's looks. I guess all i need to do is to copy it and paste it at the bottom of the file and change whatever properties i want to change.

But, what i am trying is to have different looks for "different instances" of the "same component". I am trying it for the tabset.
I tried to follow the example that is mentioned in the Skinning/Theming section of the smartclient reference, by adding the following at the bottom of my load_skin.js:

        isc.defineClass("DetailTabSet", "TabSet");   
        isc.defineClass("DetailImgTab", "ImgTab").addProperties({
            src:"[SKIN]detailTab.png",
            capSize:3,
            showRollOver:true,
            showDown:false,
            showDisabled:false,
            titleStyle:"tabTitle"
        });
        isc.DetailTabSet.addProperties({
            tabBarThickness:40,
            scrollerButtonSize:18,
            pickerButtonSize:19,
       
            scrollerVSrc:"[SKIN]vscrollnew.png",
            scrollerHSrc:"[SKIN]hscrollnew.png",
            pickerButtonHSrc:"[SKIN]hpickernew.png",
            pickerButtonVSrc:"[SKIN]vpickernew.png",
            
            closeTabIconSize:24,

            showEdges:false,
            paneContainerClassName:"tabSetContainer",
            
            paneMargin:5,
            
            showScrollerRollOver: true,
            
            buttonConstructor:isc.DetailImgTab
        });
        if (isc.DetailTabSet) {
        isc.DetailTabSet.changeDefaults("paneContainerDefaults", {
            showEdges:false
        })
        isc.DetailTabBar.addProperties({
            membersMargin:4,
            
            styleName:"tabBar",

            layoutStartMargin:4,
            layoutEndMargin:4,

            // have the baseline overlap the top edge of the TabSet, using rounded media
            baseLineConstructor:"Canvas",
            baseLineProperties : { 
                backgroundColor: "#6AA0BB",
                overflow:"hidden",
                height:1
            },
            //baseLineSrc:"[SKIN]baseline.png",
            //baseLineCapSize:2,
            baseLineThickness:1

        })
    } 
    if (isc.DetailImgTab) {
        isc.DetailImgTab.addProperties({
            src:"[SKIN]detailtab.png",
            capSize:3,
            showRollOver:true,
            showDown:false,
            showDisabled:false,
            titleStyle:"tabTitle"
        })
    }

What I am trying to do is to have a DetailTabSet that is exactly like the TabSet, but with a different ImgTab src. In order to use this DetailTabSet in my GWT application, I created a new SmartGWT Widget that extends SmartGWT's TabSet and in it, i put the following native method:

protected native JavaScriptObject create()/*-{
    var config = this.@com.smartgwt.client.widgets.BaseWidget::getConfig()();
    var widget = $wnd.isc.DetailTabSet.create(config);
    this.@com.smartgwt.client.widgets.BaseWidget::doInit()();
    return widget;
}-*/;

Now, when i run my application, i can see that my new DetailTabSet is being used correctly because of the huge size i put for its closeicon (24), but the ImgTab is still the same, even though i am pointing to a new image in my DetailImgTab.

I am guessing that the problem is in how i am trying to link my new DetailTab to the DetailImgTab. I did it by adding to my DetailTab the property "buttonConstructor:isc.DetailImgTab". I don't know how else to make the link. Should i do a TabBar or something?

I am sorry if this sounds very silly, but i am a beginner in smartclient, js, and css.

I really appreciate your help.
Thanks in advance.

[Isomorphic]

There is no buttonConstructor property on TabSet, it's on TabBar. Move that setting to your TabBar subclass.

Note you should really remove all the copy and pasted default properties, none of which are needed.

[nicole.baz]

but how do i link the tabbar to my detailtabset?

Hi,

Thanks again for replying. Sorry i pasted everything, but i didn't know if i was doing things right and i hoped you could tell me if you saw what i did.

anyway, i tried moving the property to my tabbar, but nothing changed. how can i link my detailtabset to this new tabbar, instead of the regular tabbar?

basically, what i'm confused about is this: in order to change the looks of one tab, i need to override the tabset, tabbar, and imgtab? if yes, how do i link the new subclasses to each other and keep everything else the same?

I really appreciate your help.
Thanks for your time.

[nicole.baz]

I tried changing the splitbar, but customizations at the end of the file are ignored

Hi,

I have also been trying to change the splitbar's width and grip.
I started by copying the Splitbars section of the load_skin.js file and pasting it at the bottom of the file.
Then, i edited and edited, and no changes took place.
So, i deleted the original Splitbars section which was in the file, and the splitbar's looks disappeared. It's as if the section i added at the bottom, although it's exactly identical to the one on top, is being ignored.

I returned the file to the way it was and i edited the original section directly, without copying and pasting. and, this time, my changes took effect.

any idea what i could be doing wrong? maybe i'm putting my customizations in the wrong place? (i tried putting them at the very end of the file, and i also tried putting them right before the line "isc.Page.checkBrowserAndRedirect" and both didn't take effect.)

I'm a beginner with this theming and styling and i'm really confused about it.
Your help is really appreciated.
Thanks again.

[shad]

Customizing multiple tab bars

Hi Isomorphic,

I am also facing the same issue like Nicole whereby I need to create multiple instances/versions of the same tab set, thus I need to customize my own tabset, tabbar, and imgtab.

Also, I am wondering how I can increase the width of the "_start" and "_end" images of the tab. They seem to be automatically shrunk down even if I put a large image.

Thanks in advance.

Shad

[Isomorphic]

@shad See the Skinning Guide and related/linked materials. You will ultimately set ImgTab.capSize.

[nicole.baz]

can't create a subset of the tabset, tabbar, and imgtab

Hi again,

I tried working again on extending the TabSet component, in order to have another look for it.

I created a SmartGWT component called DetailTabSet which extends TabSet. In it, i put the following:

 
protected native JavaScriptObject create()/*-{
    var config = this.@com.smartgwt.client.widgets.BaseWidget::getConfig()();
    var widget = $wnd.isc.DetailTabSet.create(config);
    this.@com.smartgwt.client.widgets.BaseWidget::doInit()();
    $wnd.isc.DetailTabSet.tabBar = $wnd.isc.DetailTabBar.create($wnd.isc.DetailTabBar.addProperties({
    buttonConstructor:$wnd.isc.DetailImgTab.create($wnd.isc.DetailImgTab.addProperties({src:"[SKIN]detailTab.png", capSize:13}))}));
    return widget;
}-*/;

In the load_skin.js, i put the following at the bottom:

isc.defineClass("DetailTabSet", "TabSet");   
    isc.defineClass("DetailImgTab", "ImgTab").addProperties({
        src:"[SKIN]detailTab.png",
        capSize:13
    });
    isc.defineClass("DetailTabBar", "TabBar").addProperties({
        buttonConstructor:isc.DetailImgTab
    });

In my application, I put an instance of TabSet and another instance of DetailTabSet, to see the difference. They're both appearing the same. The new DetailImgTab is not getting used, neither is the capSize of 13.

PS: I also tried putting this in my load_skin.js (also didn't work):

isc.DetailTabSet.tabBar = isc.DetailTabBar.create(isc.DetailTabBar.addProperties({
    buttonConstructor:isc.DetailImgTab.create(isc.DetailImgTab.addProperties({src:"[SKIN]detailTab.png", capSize:13}))}));

Please help point me in the right direction. I can't see what i'm doing wrong.
Thanks.

[Isomorphic]

There's no association between your DetailTabSet and your DetailTabBar. Set tabBarConstructor as a property on the DetailTabSet to relate them.

[nicole.baz]

i can't find tabBarConstructor property

Thanks a lot for replying again.

I tried it but nothing changed.
I didn't find such a property in the TabSet.js anyway. In fact, i searched the entire smartgwt.jar for the word "tabBarConstructor" and it wasn't found anywhere.
I even downloaded the latest nightly build just to be sure, but nothing there either.

In the TabSet.js, there's the following:

this.tabBar = this._tabBar = isc.TabBar.create(tabBarProperties);

This is why i tried to put this line in the load_skin.js:

isc.DetailTabSet.tabBar = isc.DetailTabBar.create(isc.DetailTabBar.addProperties({
    buttonConstructor:isc.DetailImgTab.create(isc.DetailImgTab.addProperties({src:"[SKIN]detailTab.png", capSize:13}))}));

It didn't work either.
What else should i do?

I really appreciate your help because I feel like i reached a dead end with this.
Thanks in advance.

[Isomorphic]

Apologies, tabBarConstructor wasn't supported (it is now in SmartClient - change should reach SmartGWT SVN soon). However it's not necessary for this use case because you can use tabBarDefaults:

isc.DetailTabSet.changeDefaults("tabBarDefaults",  {
     buttonConstructor:isc.DetailImgTab
});

In this way you don't need a custom TabBar class at all.