Changing TabBarControls TAB_PICKER menu

[levi]

Hi,

I like the TabPicker "menuitem" look a lot. How can I add my own menu actions to it (like Close All and other actions...)?

Right now, I exclude the TabPicker control and copied over the existing JavaScript functionality to Java and then added my own menu actions.

I put those in a MenuButton and added is a TabBarControl. But this renders a bit ugly compared to the standard TabPicker arrow.

[Isomorphic_Paul]

The standard TabPicker only shows up if its required (if there isn't enough space to show all tabs), so rather than attempting to hang functionality onto the menu shown by that special control, we'd recommend duplicating its appearance.

You can create your own ImgButton with the same source and size fairly easily -- here's an example:

                ImgButton customPicker = new ImgButton();
	        customPicker.setWidth(20);
	        customPicker.setHeight(23);
	        customPicker.setSkinImgDir("images/TabSet/");
	        customPicker.setSrc("[SKIN]picker_top.png");
	        customPicker.setShowRollOver(false);
	        customPicker.setShowDown(false);
	        customPicker.setShowFocused(false);

Note: If you add a click handler to this you can use ((Canvas)event.getSource()).getPageBottom() (and getPageLeft() ) or similar to determine the desired position for your menu.

[levi]

Hi,

thanks for the suggestion. I will do it that way.

Because I'm a bit lazy, is there a chance to add the Menu.js _showOffscreen and placeNear functions to SmartGWT (though my own implementation pretty much does the same stuff)?

I want to implement just the same behavior as the MenuButton.showMenu function does: I don't want the Menu to show up at the mouse coordinates, but at the fixed position calculated by SmartClient.

[levi]

Hi,

I finally managed to get a standalone repro for this issue.

I put a DynamicForm as custom control on my tabset control bar. Its values come from the server (async call) which potentially makes the dynamic form need to resize.
Whenever this happens, the menubutton control is losing its ability to be clicked on.
When you then add a new tab to the tabset, the menubutton regains its click ability again.


Repro case:
-load this example
-wait for the timer to finish
-the button is not clickable (NOK)

-add another tab via the add tab button
-button is clickable again


If you remove the somevalue.setValue and othervalue.setValue code, the button is clickable.

	VLayout result = new VLayout();
	
	final TabSet tabset = new TabSet();
	
	//our own menu button for the tabs
final ImgButton button = new ImgButton();
button.setWidth(20);
button.setHeight(23);
button.setSkinImgDir("images/TabSet/");
button.setSrc("[SKIN]picker_bottom.png");
button.setShowRollOver(false);
button.setShowDown(false);
button.setShowFocused(false);
button.addClickHandler(new com.smartgwt.client.widgets.events.ClickHandler() {
	
	public void onClick(ClickEvent event) {
		SC.say("Now button works");
	}
});

//custom control
final DynamicForm menuForm = new DynamicForm();
menuForm.setNumCols(4);
menuForm.setAlign(Alignment.RIGHT);

final StaticTextItem somevalue = new StaticTextItem();
somevalue.setWrap(false);
somevalue.setShowTitle(false);
somevalue.setDefaultValue("1");

final StaticTextItem pipe = new StaticTextItem();
pipe.setShowTitle(false);
pipe.setDefaultValue("|");

final StaticTextItem othervalue = new StaticTextItem();
othervalue.setWrap(false);
othervalue.setShowTitle(false);
othervalue.setDefaultValue("1");


//When this timer stops, the dynamic form elements get a new value
// which can result in a resize of the form.
//This results in our button control being placed more to the left
// but makes the button not clickable anymore.
new Timer() {
	
	@Override
	public void run() {
		//simulate RPC call via Timer
		
		somevalue.setValue("loaded my thing and");
		othervalue.setValue("here is some long text");
	}
}.schedule(5000);



menuForm.setItems(somevalue, pipe, othervalue, pipe);


tabset.setTabBarPosition(Side.BOTTOM);
tabset.setTabBarControls(TabBarControls.TAB_SCROLLER, button, menuForm);

Tab mainTab = new Tab();
mainTab.setCanClose(false);

// mainTab.setIcon(SKIN_ACTION_COLOR_SWATCH);
// //bug still not solved, so use workaround for icon:
mainTab.setTitle("<span>Tab"+tabset.getNumTabs()+"</span>");

HLayout canvasLayout = new HLayout();
HTMLFlow flow = new HTMLFlow("Hello, World!" + tabset.getNumTabs());
canvasLayout.addMember(flow);
mainTab.setPane(canvasLayout);

//add a tab
tabset.addTab(mainTab);
tabset.selectTab(mainTab);


Button addTabButton = new Button("Add new tab");
addTabButton.addClickHandler(new ClickHandler() {
	
	public void onClick(ClickEvent event) {
		Tab newTabToAdd = new Tab();
		newTabToAdd.setCanClose(false);

		// mainTab.setIcon(SKIN_ACTION_COLOR_SWATCH);
		// //bug still not solved, so use workaround for icon:
		newTabToAdd.setTitle("<span>Tab"+tabset.getNumTabs()+"</span>");

		HLayout canvasLayout = new HLayout();
		HTMLFlow flow = new HTMLFlow("Hello, World! " + tabset.getNumTabs());
		canvasLayout.addMember(flow);
		newTabToAdd.setPane(canvasLayout);
		
		//add a tab
		tabset.addTab(newTabToAdd);
		tabset.selectTab(newTabToAdd);
	}
});

result.addMember(tabset);
result.addMember(addTabButton);

return result;

SmartClient Version: SC_SNAPSHOT-2010-09-16/EVAL Deployment
IE8 GWT dev mode

[Isomorphic_Paul]

This was a bug - thanks for the test case.
Its fixed now. The fix will show up in the next nightly build.

[levi]

Thanks,
upgraded to build of 2010-10-15 and its fixed in there.