Friday, July 29, 2011

Alternative to Drop Down List Box !


I just wanted to update on the Drop Down List Box, 

GWT Incubator
Drop Down List BoxNot planned at this time, but some people use a vertical MenuBar to achieve the same effect


While trying to achieve the above I managed to get a drop down or drop up list in a different way, with popup ups and menuBar. Hope this helps if you are looking to achieve something similar. While I tried to use a MenuBar instead of a Popup it always lists down which I didn't want. It is definitely nicer when it lists up !! There are other options as well. You can use labels instead of a the menubar. You just have to add the labels in the PopupPanel in a vertical Panel, and define a clickHandler for each Label. Please do update if you have a better solution.

               // below PopUp panel to show the options that the user can click
PopupPanel mainPopup = new PopupPanel(true, true);

// Commands to be executed when user clicks the option
Command option1 = new Command() {

@Override
public void execute() {
Window.alert("Option 1");
                                select.setText("Option 1");
}

};

Command option2 = new Command() {

@Override
public void execute() {
Window.alert("Option 2");
                                select.setText("Option 1");
}

};

// MenuBar that will contain the options

MenuBar options = new MenuBar(true);
options.addItem("Option 1", option1);
options.addItem("Option 2", option2);

// A Label that triggers the PopUp

Label select = new Label("Select");

// Click handler for the Label

select.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {

if (!mainPopup.isShowing()) {
mainPopup.showRelativeTo(select);
} else {
mainPopup.hide();
}
}
});

// finally we add the options to the popup
mainPopup.add(options);
}


** I wish there was a code box widget here :-) so that I can easily show the code I want in a preformatted way. ***


--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/DRxeGXm4ZsgJ.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.

No comments:

Post a Comment