How can I open the Bootstrap Dropdown programmatically? - gwt

Question

I develop the GWT application. Also I use Twitter Bootstrap library and GWTQuery. There is the DropdownButton. I want to open it programmatically.
ui.xml like this:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"
xmlns:g='urn:import:com.google.gwt.user.client.ui'
...
<b:DropdownButton text="Test" ui:field="dropdownButton">
<g:FlowPanel ui:field="contentPanel"/>
</b:DropdownButton>
I can open it via inspector of Google Chrome - add 'open' class to 'btn-group'. But it is impossible programmatically. I don't know why. Usages of addClassName / addStyleName methods are ignored.
Also I have tried to simulate click event via Document.get().createClickEvent, but the dropdown hasn't handlerManager. I have tried to call trigger and click with help of JQuery/GWTQuery.
Is it possible to open Dropdown programmatically?

Answer 1

You can try subclassing DropDownButton, adding a getter for the trigger button (at the end of the class), like this:
public class CustomDropdownButton extends DropdownBase {
private Button trigger;
/**
* Creates a DropdownButton without a caption.
*/
public CustomDropdownButton() {
super("div");
addStyleName("btn-group");
}
/**
* Creates a DropdownButton with the given caption.
*
* #param caption
* the button's caption
*/
public CustomDropdownButton(String caption) {
this();
setText(caption);
}
/**
* {#inheritDoc}
*/
#Override
protected IconAnchor createTrigger() {
trigger = new Button();
trigger.setCaret(true);
return trigger;
}
/**
* Sets the button's size.
*
* #param size
* the button's size
*/
public void setSize(ButtonSize size) {
trigger.setSize(size);
}
/**
* Sets the button's type.
*
* #param type
* the button's type
*/
public void setType(ButtonType type) {
trigger.setType(type);
}
/**
* Sets the button's icon.
*
* #param type
* the icon's type
*/
#Override
public void setIcon(IconType type) {
setBaseIcon(type);
}
/**
* {#inheritDoc}
*/
#Override
public void setBaseIcon(BaseIconType type) {
trigger.setBaseIcon(type);
}
#Override
public HandlerRegistration addClickHandler(ClickHandler handler) {
return trigger.addClickHandler(handler);
}
/**
* {#inheritDoc}
*/
#Override
public void setIconSize(IconSize size) {
trigger.setIconSize(size);
}
/**
* {#inheritDoc}
*/
#Override
public void setCustomIconStyle(String customIconStyle) {
trigger.setCustomIconStyle(customIconStyle);
}
/**
* {#inheritDoc}
*/
#Override
public void setIconPosition(IconPosition position) {
trigger.setIconPosition(position);
}
public Button getButton(){
return trigger;
}
}
Now you will have in your uiBinder xml :
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:c='urn:import:com.example.packageWithCustomDropDown'
...
<c:CustomDropdownButton text="Test" ui:field="dropdownButton">
<g:FlowPanel ui:field="contentPanel"/>
</b:CustomDropdownButton>
And now you can call, the click function, on the button : dropDownButton.getButton().click();
I don't test it, but it should work.
Hope it helps. :)