component to right and left of tabs

[mathias]

Hello, we're looking into possibly redesigning our main application tab.

We already have controls to the right of our tabs, but we'd also like a logo to the left. Since we want the tabs to take up 100% width, i'm not sure how to accomplish this within the tab component.

Is there any way to do this you can help me with?

[Isomorphic]

Why not just float an ImgButton or similar control at the top left of the TabSet? The gap before the first tab is controlled by tabBar.layoutStartMargin.

[mathias]

You mean in a layout to the left of the tabset? I would like the tab canvas to take up the entire width of the browser?

Or did you mean that i could add an imagebutton as a tab? If that's the case it might work, not sure how i would do it in the java code though (the "float an ImgButton" part...).

[claudiobosticco]

Why not just float an ImgButton or similar control at the top left of the TabSet? The gap before the first tab is controlled by tabBar.layoutStartMargin.

I'm interested in this approach, actually I've tried it and works, but I see that layoutStartMargin is not documented, could you please add it to SmartClient docs?

[mathias]

Cool, how would i go about adding the imgbutton to the left of the tabs with java code? Any tips?

[claudiobosticco]

Well, it's javascript because I'm using SmartClient, not SmartGWT:

isc.IButton.create({ID:"aButton", title:"foobar", width:95, snapTo:"TL"})

isc.TabSet.create({
    ID: "tabSet",
    tabBarProperties:{layoutStartMargin:100}, // layoutLeftMargin also seems to work
    width: 300,
    height: 200,
    children:[aButton],
    tabs: [
        {title: "Blue", icon: "pieces/16/pawn_blue.png", iconSize:16,
         pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})},
        {title: "Green", icon: "pieces/16/pawn_green.png", iconSize:16,
         pane: isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_green.png"})}
    ]
});
aButton.delayCall('bringToFront')

I don't know if it's normal that I've got to call bringToFront on the button.
Strangely enough, I have to call it in a separated thread, otherwise it won't work.

Also note that layoutLeftMargin seems to work as layoutStartMargin, but layoutRightMargin has no effect.

[mathias]

I got it working throug addChild. Thanks a lot mate!

[Isomorphic]

layoutLeftMargin would be the right one to use here.

The brightToFront() call is required because you are creating the Button before the various subelements of the TabSet have been created (TabBar, etc). Another approach would be to create the Button after the TabSet draws.

[claudiobosticco]

Why not just float an ImgButton or similar control at the top left of the TabSet? The gap before the first tab is controlled by tabBar.layoutStartMargin.

Hello, could you please document that property?

[Isomorphic]

We have added docs for these properties which will be available as of tomorrow's builds, May 7.

Regards
Isomorphic Software