setting tabbar baseline properties for one instance of tabbar

[mathias]

Hey there,

I'm using the load_skin.js to change some tabset/tabbar baseline properties. However, i have the need to alter that behaviour for ONE specific instance of a tabset.

I can't see how i do that, since the

isc.TabBar.addProperties({     
           baseLineCapSize:10,
            baseLineSrc:"[SKIN]baseline.png"

        })

are then used for all tabbars i create. I have a specific TabBar class (NubaTabBar) but i can't see how i'd change the tabbar baseline properties for that class only.


Pointers appreciated!

[Isomorphic]

This exact scenario is covered in the Skinning topic in the "docs" package - heading is "Multiple looks for the same component type".

[mathias]

Oh, thank you so much for responding! Please read on :)

Thanks for pointing out the docs. I have read that section but i can't make it work in this specific scenario, hence this post.

My problem is this:

I have managed to define my own class, and make it apply to one single instance of the tabbar via

setScClassName()

HOWEVER, only some of the properties seem to work!

isc.defineClass("MyTabSet", "TabSet");
    if (isc.MyTabSet) {
        isc.MyTabSet.addProperties({
            paneContainerClassName:"mytabsetcontainer",
            styleName: "mytabset",
            tabBarProperties : {        	  	
            	baseLineSrc:"[SKIN]baseline.png",
            	baseLineCapSize: 10,
            	layoutStartMargin:230,

        		}         		
        })        
    }

The layoutstartmargin works fine, my single instance is moved when i change it. BUT the baseline stuff makes no difference!

I think it's because the "default" TabSet baseline properties still are applied in the "MyTabSet"

default:

isc.TabBar.addProperties({
  ....
  // have the baseline overlap the top edge of the TabSet, using rounded media
  baseLineConstructor:"Canvas",            
  baseLineProperties:{
      backgroundColor:"#C0C3C7",
      overflow:"hidden",
      height:1
  }
        })

I have noticed, that if you have the baselineconstructor and baselineproperties set, it doesn't matter if you set the baselinesrc and baselinecapsize afterwards. So it seems that the default baseline params get applied to my "specific" tabset.

I tried to see if i could do something with the "baselineconstructor" property, but i have found zero documentation. I'd love some input.

----
Basically, my question is: How can i "remove" the tabset default baselineparameters so that my "baselinesrc" and "baselinecapsize" parameters get applied in my custom tabset instance?
----

Pointers extremely appreciated!

[jornn]

Any update on this?

I am trying to create two types of tabs, and I'm able to skin the buttons IN the two tabs differently, but I am not able to tweak the css style for the TabBar for my 'new' TabSet type.

I need to get that div to be a different css style, such as 'primaryToolbarTop'.

The reason for this is that I need to use bottom padding on my 'secondary' toolbar so the TabSet looks properly.

The primary tabset has standard looking tabs which extend all the way down to the 'next' container.
The secondary tabset has buttons that are pushed in from the top and the bottom.


See screenshots for examples.

Here is my example css:

.tabBarTop,
.primaryTabBarTop
{
  background-color: $hover-clr-rgb;
  padding-top: 5px;
}

/* TODO: Get this style to be used for Secondary TabSet/TabBar */
.primaryTabBarTop
{
  padding-bottom:5px;	
}

The following is load_skin.js:

    isc.defineClass("PrimaryTabSet", "TabSet");
    if (isc.PrimaryTabSet) {
        isc.PrimaryTabSet.addProperties({
            styleName: "primaryTabSet",
            tabBarProperties : {
                styleName: "primaryTabBar"        	  	
        	}         		
        })        
    }

    isc.defineClass("PrimaryTabBar", "TabBar");
    if (isc.PrimaryTabBar) {
       isc.PrimaryTabBar.addProperties({
           styleName:"primaryTabBar"
       });
    }

And here is my PrimaryTabSet class that I've attempted to create/use:

public class PrimaryTabSet extends TabSet
{
  public PrimaryTabSet()
  {
    super();
    init();
  }

  private void init()
  {
    setScClassName("PrimaryTabSet");
    setUseSimpleTabs(true);
    setSimpleTabBaseStyle("primaryTabButton");
    setStyleName("primaryTabSet");

    // neither of these two attempts seem to work in setting the css style for the tab bar to 'PrimaryTabBar<Top>':
    if(true)
    {
      Record rec = new Record();
      
      rec.setAttribute("backgroundColor", "orange"); // This works and causes the tab bar div to have orange background color
            
      rec.setAttribute("scClassName", "PrimaryTabBar"); // but this,...  
      rec.setAttribute("styleName", "primaryTabBar"); // and this does not work... the class for the div remains class="tabBarTop" :-(
       
      JavaScriptObject jso = rec.getJsObj();

      this.setAttribute("tabBarProperties", jso, true);
    }
    else
    {
      // is I use this, the tabbar shows a green background color... but the div is still class="tabBarTop".
      
      TabBar tabBarProperties = new TabBar();
      tabBarProperties.setScClassName("PrimaryTabBar");
      tabBarProperties.setStyleName("primaryTabBar");
      tabBarProperties.setBackgroundColor("green");

      setTabBarProperties(tabBarProperties);
    }
  }
}

[beckyo]

Figured this out!!!

Hi guys, I just noodled through this and thought it would be good to document. Even though it's well over a year later the skinning docs don't correlate the auto child concept to the JS config well enough. Hopefully someone else who is struggling will find this!

The reason why the baseLine settings weren't working is because TabBar is an auto child of TabSet, so when you create your own custom TabSet in load_skin.js you have to add properties for TabBar *within* your custom TabSet, *and* keep the name TabBar, because this is the auto child class name:

isc.defineClass("MyCustomTabSet", TabSet);

if (isc.MyCustomTabSet) 
{
        isc.MyCustomTabSet.addProperties(
        {
            .....
        });
        
        isc.TabBar.addProperties(
        {
            baseLineConstructor:"Canvas",
            baseLineProperties : 
            {
                backgroundColor: "#D5D5D5",
                overflow:"hidden",
                height:5
            },
			
	    baseLineSrc:"[SKIN]baseline.png",
    	    baseLineThickness:1,
    	    baseLineCapSize:4
        });
}