TabBar Controls

[nickc]

How would you place a button to the left of tabs?



I can you use the tabbarcontrol to add a button to the right of the tabs (purple circle) but I would also like to add a button to left of the tabs (red circle).

Can it be done? If so how?

Thank you

[Isomorphic]

Call addChild() on theTabSet and use absolute positioning. Be sure to call bringToFront() in case it gets occluded.

[nickc]

Thank you that works perfectly.

[nickc]

There is a minor issue with the button I have placed in the tabBarControls (purple circle) with it not always being clickable.

I have adjusted the tabset.tabBar.width by -32 which is the width of the button(red circle) I added via addChild(). This works most of the time but if the tabset gets resized it stop working.

The button(red circle) remains visible at all times just not always clickable.

[Isomorphic]

Don't try to muck with width, add a layoutLeftMargin instead.

[nickc]

Thanks that is now working.

[Halabe]

Hi,

I added a button to the left of my tabset (the tabs are on the right).

I used tabset.addChild(myButton).

The button works fine in IE but does not work in Firefox nor Chrome.

What should I do to make it work?

Thank you.

[Isomorphic]

As mentioned above:

Be sure to call bringToFront() in case it gets occluded.

[Halabe]

Hi,

I already did that but it is not working.

[Isomorphic]

Use the Watch tab to check that your widget is where you think it is.

If you can't solve it, post a standalone runnable test case.

[jventurini]

Specs:
SmartGwt 3.0 EE, FireFox 11.0, Windows 7

Similar to nickc, I am trying to implement a TabSet with a button on the left as well as a button on the right. Using 'addChild' I can get the button on the left to show and using 'setTabBarControls' I can get the button on the right to show.

My problem is the button on the left is obscured by the leftmost tab (I know it is there from the developer console). Based on this post:

Don't try to muck with width, add a layoutLeftMargin instead.

It sounds like I need to 'add a layoutLeftMargin' to the TabSet. The problem is TabSet extends Canvas, not Layout so there is no 'setLayoutLeftMargin' API to call.

How can I offset the leftmost tab so the left button is visible?

Thks

[Isomorphic]

The TabBar subcomponent of TabSet is a Layout - that's where you want to set layoutLeftMargin. If this an app-wide setting, do it via the skinning API (see load_skin.js for a sample - layoutLeftMargin is already set in most skins).

[jventurini]

This would only be for this specific TabSet so I would not want to do this via skinning.

I do not see a way to get the TabBar subcomponent via the TabSet API - is there some other way?

Thanks

[Isomorphic]

Via the AutoChild system - you can setAttribute("tabBarProperties", JavaScriptObject) where the JavaScriptObject should have the property layoutStartMargin set to the value you want.

[jventurini]

That worked great and both buttons (right and left of the tabs) are visible and functional in IE8.

However in FireFox 11 the button on the left (added with addChild) is visible but is not accepting mouse events. The button on the right (added with setTabBarControls works fine). Bringing up the developer console shows both ImgButtons in the 'Watch' list, however in the 'Results' pane when I mouse over the button on the left the 'Mouse event target' still shows the TabBar not the ImgButton. Attached is an image of FireFox with the developer console showing this.



Here is the source code to reproduce the issue. Thanks for your help.

package com.jeppesen.fpo.client.component.weather;


import com.google.gwt.core.client.JavaScriptObject;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.types.Positioning;
import com.smartgwt.client.types.Side;
import com.smartgwt.client.types.TabBarControls;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.ImgButton;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;

public class TestTabSetView extends TabSet {
	

	public TestTabSetView() {

		this.setID("TestTabSetView");
		setWidth100();
		setHeight100();
		setTabBarThickness(36);
		setTabBarPosition(Side.TOP);
		setShowResizeBar(false);
		setAnimateTabScrolling(false);
		setShowTabScroller(false);
		setShowTabPicker(true);
		setBackgroundColor("#4a7fb6");

		init();
	}

	private void init() {
			
		//offset the TabBar
		JavaScriptObject jso = setTabBarLayoutStartMargin(50);
		this.setAttribute("tabBarProperties", jso, true);
		
		Tab mapTab = new Tab("  Map  ");
		addTab(mapTab);

		Tab wxTab = new Tab(" Weather ");
		addTab(wxTab);

		//buttons appear on right side of Tabs
		setTabBarControls(TabBarControls.TAB_SCROLLER,
				TabBarControls.TAB_PICKER, createSizingButton());	
		
		//button appears on left side of Tabs
		ImgButton drawerButton = createDrawerButton();
		addChild(drawerButton);
		drawerButton.bringToFront();
	}

	private ImgButton createDrawerButton()
	{
		// Button for Drawer
		ImgButton drawerButton = new ImgButton();
		drawerButton.setSrc( "[SKIN]/Drawer/drawerDown.png" );
		drawerButton.setID("drawerButton");
		drawerButton.setShowFocused( false );
		drawerButton.setShowRollOver( true );
		drawerButton.setShowDown( true );
		drawerButton.setSize( 32 );
		drawerButton.setAnimateTime( 800 );
		
		drawerButton.setPosition(Positioning.ABSOLUTE);
		drawerButton.setLeft(8);
		drawerButton.setTop(1);

		drawerButton.addClickHandler( new ClickHandler()
		{
			public void onClick(ClickEvent event)
			{
				SC.say("drawerButton has been clicked!");
			}
		} );
		
		
		return drawerButton;
	}
	
	
	/*
	 * Button to allow sizing of the weather pane
	 */
	private ImgButton createSizingButton() {
		final ImgButton sizingButton = new ImgButton();
		sizingButton.setID("sizingButton");

		sizingButton.setSize(36);

		sizingButton.setShowSelectedIcon(true);
		sizingButton.setShowDownIcon(true);
		sizingButton.setShowRollOverIcon(true);

		sizingButton.setSrc("icon-maxmin.png");

		sizingButton.addClickHandler(new ClickHandler() {
			public void onClick(ClickEvent event) {
				SC.say("sizingButton has been clicked!");
			}
		});

		return sizingButton;
	}
	
	//Offsets the TabBar start position to give room for a button 
	private JavaScriptObject setTabBarLayoutStartMargin(int offset)
	{
		Record rec = new Record();
		rec.setAttribute("layoutStartMargin", offset);
		
		JavaScriptObject jso = rec.getJsObj();
		
		return jso;
	}

}