customizing snapbar appearance

[bbruyn]

I'm currently using the EnterpriseBlue theme, which is great, but I need to change the appearance of the snapbars to look more like those found in the Simplicity theme. (i.e., having arrows providing a more obvious visual cue to the end user that the layout can be expanded / collapsed.)

Do I need to create my own theme as outlined in the QuickStart guide to make any such customization?

[Isomorphic]

With any such change you always have the two options explained in the Skinning topic - create a new skin, or take the JavaScript for the settings you want to override and place it in a JSNI method that you call from onModuleLoad(). Grab the most recent build (smartclient.com/builds) if you're running a version where the docs do not explain this.

[bbruyn]

I hadn't seen the blurb in the skinning guide about using JSNI, but I guess that makes good sense.

I gave it a try using the following JSNI (Power Nightly 2011-07-18 tested w/ Firefox 3.5)

public static native void reskin() /*-{
        
        $wnd.isc.StretchImgSplitbar.addProperties({
            capSize:10,
            showGrip:true,
            showOver : false
        });

        $wnd.isc.Snapbar.addProperties({
            vSrc:"skin/snapbar/vsplit.gif",
            hSrc:"skin/snapbar/hsplit.gif",
            baseStyle:"splitbar",
            items : [
                {name:"blank", width:"capSize", height:"capSize"},
                {name:"blank", width:"*", height:"*"},
                {name:"blank", width:"capSize", height:"capSize"}
            ],
            showDownGrip:false,
            gripBreadth:5,
            gripLength:35,
            capSize:0,
            showRollOver : false,
            showDown : false
        });

        $wnd.isc.Layout.addProperties({
            resizeBarSize:9,
            // Use the Snapbar as a resizeBar by default - subclass of Splitbar that
            // shows interactive (closed/open) grip images
            // Other options include the Splitbar, StretchImgSplitbar or ImgSplitbar
            resizeBarClass:"Snapbar"
        });
        
}-*/;

and while it looks like my customizations are applied initially, I am greeted with the following when clicking on my new splitbar:

12:05:16.388:MUP3:WARN:Log:TypeError: this.items.clearProperty is not a function
    StretchImg.setState(_1=>"") @ scratchpad/sc/modules/ISC_Foundation.js:732
    unnamed({Obj}, undef) @ scratchpad/sc/modules/ISC_Foundation.js:1110
    StatefulCanvas.handleActivate(_1=>{Obj},  _2=>undef) @ scratchpad/sc/modules/ISC_Foundation.js:320
    StatefulCanvas.handleClick(_1=>{Obj},  _2=>undef) @ scratchpad/sc/modules/ISC_Foundation.js:322
    [c]EventHandler.bubbleEvent(_1=>{Obj},  _2=>"click") @ scratchpad/sc/modules/ISC_Core.js:1637
    [c]EventHandler.handleClick(_1=>{Obj}) @ scratchpad/sc/modules/ISC_Core.js:1482
    EventHandler._handleMouseUp([object MouseEvent], undef) @ scratchpad/sc/modules/ISC_Core.js:1469
    [c]EventHandler.handleMouseUp(_1=>[object MouseEvent]) @ scratchpad/sc/modules/ISC_Core.js:1460
    [c]EventHandler.dispatch(_1=>isc_c_EventHandler_handleMouseUp,  _2=>[object MouseEvent]) @ scratchpad/sc/modules/ISC_Core.js:1701
    anonymous([object MouseEvent]) @ scratchpad/sc/modules/ISC_Core.js:60
    unnamed() @

[Isomorphic]

Hmm, that's a subtle JSNI side-effect of your literal Array for items. It doesn't look like you actually need to specify that items Array, so you can probably just delete it. But if you did need to, use "new $wnd.Array();" to create the Array in the right context, then add each of the items via the typical "arr[arr.length] = {...}".