[nicole.baz]

Many thanks, but it didn't work either :(

Thanks a lot for your help, but it still didn't work, unfortunately.
As soon as I put the lines you wrote, i get an error when i start my application and it doesn't load:

com.google.gwt.core.client.JavaScriptException: (TypeError): '$wnd.isc.DetailTabSet' is null or not an object
number: -2146823281
description: '$wnd.isc.DetailTabSet' is null or not an object
at com.sns.fms.common.client.DetailTabSet.create(Native Method)

I tried putting the code inside an "if (isc.DetailTabSet)", i tried putting it after the "isc.defineClass("DetailTabSet", "TabSet")" and i even tried putting it before. But, it always gives the same error.
I tried putting alerts inside the load_skin.js before and after defining the DetailTabSet. None of the alerts pops up if i have these new lines of code in, no matter where i put them. But if i remove them, those alerts all pop up. It's as if the whole file is not being read when i have these lines in it.

Any idea what i'm doing wrong?
Thanks

[Isomorphic]

You still need to have the call to defineClass() that defines the new class DetailTabSet, it doesn't magically spring into existence.

[nicole.baz]

Hi Isomorphic,

Of course i still need the defineClass. I didn't remove it.

If you check my code, which i pasted in a previous post, you'll see that it's there. I just added the changeDefaults line as you suggested, and that's when the error came up.

Thanks.

[Isomorphic]

There was a typo in the changeDefaults() code we posted previously (missing "{"), however if that's what was wrong, you need to be able to figure that out using Firebug, which gives a clear and obvious error.

[nicole.baz]

thanks a lot!

Thanks a lot, I can't believe i didn't notice the missing {. sorry about that.

I've never used Firebug, coz it's the first time i work on js. but, i downloaded it now for Firefox and I'll check it out.

thanks again!

[beckyo]

So how does one associate a TabSet to a TabBar in load_skin.js?

Can't find documentation on this - point me to it if you've got it? Tried tabBarConstructor: xxx but no luck:

isc.defineClass("TabBarWorkbook", TabBar);
    if (isc.TabBarWorkbook) 
    {
	    isc.TabBarWorkbook.addProperties
	    ({
	    	//distance between tabs
	        membersMargin: 6,
	        //left/right (or top/bottom depending on layout) tab distance from edge
	        layoutStartMargin: 8,
	        layoutEndMargin: 8,
	    	
	        styleName:"tabBarWorkbook",	
	        leftStyleName:"tabBarWorkbookLeft", //declared but not using in css
	        topStyleName:"tabBarWorkbookTop",	//ETL Ribbon Bar tabs
	        rightStyleName:"tabBarWorkbookRight", //not using
	        bottomStyleName:"tabBarWorkbookBottom",  //ETL Spreadsheet tabs
	
	        // have the baseline overlap the top edge of the TabSet, using rounded media
	        baseLineConstructor:"Canvas",
	        baseLineProperties: 
	        {
	        	styleName: "tabBarWorkbookBaseline",
	            overflow: "hidden",
	            height: 5
	        },
			
			baseLineSrc: "[SKIN]baseline.png",
			baseLineThickness: 1,
			baseLineCapSize: 4
	    });
    }
    
    
    
    isc.defineClass("TabSetWorkbook", TabSet);
    if (isc.TabSetWorkbook) 
    {
        isc.TabSetWorkbook.addProperties
        ({
            showEdges: true,
            paneContainerClassName: "tabSetWorkbookContainer",
            //how high to make the tab bar
            tabBarThickness: 24,
            //how high to make the tabs in the tab bar
            defaultTabHeight: 24,
            tabBarConstructor: "TabBarWorkbook"
        });
    }

[Isomorphic]

We suspect this must be showing an error in the developer console - try setting tabBarConstructor: isc.TabBarWorkbook

[beckyo]

Thank you!

That is the secret link, thanks. :)
For those searching the forum here's a skinny working version:

isc.defineClass("MyTabBar", TabBar);
isc.MyTabBar.addProperties
({
    //whatever properties you need to set
});
    
isc.defineClass("MyTabSet", TabSet);
isc.MyTabSet.addProperties
({
    //whatever properties you need to set
    tabBarConstructor: isc.MyTabBar
});

[beckyo]

One more thing - Center aligning a top tab bar.

Team one last question related to Tab Bars. I've got a tab bar along the top of my tab set, but I need to align its tabs in the center, as opposed to the left or the right.

setTabBarAlign() takes an Enum with options for left/right (or top/bottom for side tabs), but no center/middle concept.

I tried various flavors of alignment in load_skin.js (within my TabBar properties) that did not work:
align: "center"
defaultLayoutAlign: "center"
layoutAlign: "center"

The only thing that worked was to clobber the attributes of TabBar, and only by setting the property via the JS object. (calling setTabBarProperties with a TabBar instance that has various centered align/layoutalign didn't work either):

Record tabBarProps = new Record();
tabBarProps.setAttribute("align", Alignment.CENTER);
myTabSet.setAttribute("tabBarProperties", tabBarProps.getJsObj(), true);

Is that the only way to get it done at the moment or is there a more "elegant" way?

Thanks,
-B

[Isomorphic]

Have you not seen TabSet.tabBarAlign? Its not documented as such, but setting this to "center" will get the effect you want. We'll consider covering that in the public doc.

Your first issue, by the way, has been addressed - setting tabBarConstructor to a class name is a valid usage and will be supported correctly from builds dated January 8 onward.

[Isomorphic]

Apologies, some confusion in our last response - your last question was a SmartGWT one, where the previous one had been SmartClient.

Yes, in SmartGWT, setTabBarAlign() is currently limited to left and right - for now, the best option is to set it (or align on the tabBar directly, as you have) to "center" in JS.

[beckyo]

Thanks again

Thanks for addressing both my Qs team.

[Isomorphic]

Note that, as of builds dated January 10 and later, you can now set tabBarAlign to an Alignment as well as a Side, so you can now set Alignment.CENTER

[beckyo]

Great news, thanks. I'm about half way with a major refactor to get the code base past this issue: http://forums.smartclient.com/showthread.php?t=28821 then looking forward to the upgrade.

[mariusachim]

TabSet/TabBar/ImgTab

(SmartGwt 3.1p Power)
Hello all and thank you for the valuable information discussed in this thread.

However, I am also struggling a bit with the skinning of the TabSets.
What we want is very similar to the discussed case:
* general TabSet style works
* paneContainerClassName - works!

* tabBarConstructor - Ignored
* buttonConstructor - Ignored

Java Code:

tabSet1.setScClassName("PWC_ProcessResultsTabSet");
tabSet2.setScClassName("PWC_ProcessDetailsTabSet");

load_skin.js:

isc.defineClass("ImgTabProcess", TabBar);
if (isc.ImgTabProcess) {
        isc.ImgTabProcess.addProperties({
			skinImgDir:"images/TabProcess/",
        })
    }
console.log("ImgTabProcess class created");
	
isc.defineClass("TabBarProcess", TabBar);
if (isc.TabBarProcess) {
	isc.TabBarProcess.addProperties(
	    {
		/*buttonConstructor:isc.ImgTabProcess*/
		baseLineProperties : {
                backgroundColor: "red",
                overflow:"hidden",
                height:10
            },
            baseLineThickness:10
        })
}
console.log("TabBarProcess class created");
	
isc.defineClass("PWC_ProcessDetailsTabSet", TabSet);
if (isc.PWC_ProcessDetailsTabSet) 
{
	isc.PWC_ProcessDetailsTabSet.addProperties(
	{
		paneContainerClassName:"pwc-processDetailsTabSetContainer"
	});
}
	
isc.defineClass("PWC_ProcessResultsTabSet", TabSet);
if (isc.PWC_ProcessResultsTabSet) 
{
	isc.PWC_ProcessResultsTabSet.addProperties(
	{
		paneContainerClassName:"pwc-processTabSetContainer",
		tabBarConstructor: isc.TabBarProcess
	});
		isc.PWC_ProcessResultsTabSet.changeDefaults("tabBarDefaults",  {
		tabBarConstructor:isc.TabBarProcess
	});
}

By the way, seeing the latest comments, got the latest SGwt 3.1p.
Same, unfortunatelly, no effect.

Does anyone see a problem in the code above?
I would reallly appreciate any hint or suggestion.

Many thanks and best regards,
Marius