0

I am looking for a way to create a popup dialog box when a user double clicks a textinput field that will contain a scroll-able list (from database table) where the user can select a field, hit ok, and have it placed into the textbox when popup closes.

The other major requirement is to have a filter/ or search field in the popup to aid the user in finding the correct option to select from quicker.

What is the best way to implement this?

Modification to gwt's popup panel? maybe a JOptionPane? are there any simple solutions already designed for free commercial use?

TheJavaBeast
  • 163
  • 3
  • 16

1 Answers1

0

You could implement this with a com.google.gwt.user.client.ui.PopupPanel. You can make a PopupPanel that contains a ListBox with your data from the database, along with a OK button. When a user selects a value and hits OK, you should utilize an EventBus along with a custom Event that will pass the value to the field on the page. The page will have an event handler that will catch the event and put it into the field.

Another option is to use a com.google.gwt.user.client.ui.SuggestBox. It is a box that autocompletes / suggests values as you type, kind of like the Youtube search bar.

I can offer more resources to help you accomplish this, if you'd like.

Community
  • 1
  • 1
Churro
  • 4,166
  • 3
  • 25
  • 26
  • Thanks for the input! Some clarification: a list box is a a drop-down menu, correct? I already use a list box on the field the user would double click on, but since there are over 20 options in it, the user wants a popup menu to enhance UI if desired. So it would need to be a fixed, scrollable list. Also the suggestbox will not work. It needs to be a search that narrows down the "scrollable list" when search is pressed( which would be an additional button in the popup). – TheJavaBeast Aug 01 '13 at 21:00
  • Yes, the ListBox is a drop down menu, [but it also has a "multiple" option, which converts it to a box that shows multiple items](http://www.gwtproject.org/doc/latest/RefWidgetGallery.html#listbox). – Churro Aug 01 '13 at 21:04
  • For a fixed, scrollable list, you can use a `com.google.gwt.user.client.ui.VerticalPanel` and add your items into it, so they line up vertically. You would then wrap that in a `com.google.gwt.user.client.ui.ScrollPanel` to make it scrollable. You can then place that ScrollPanel in your PopupPanel, show it pops up when the user double-clicks. That is the easiest way, but you can avoid using a ScrollPanel by using CSS. – Churro Aug 01 '13 at 21:11
  • cool, but how would I narrow down the list box options based on a user search all in the popup panel? For example: if the listbox options are "fish""fly""fiddle" and the user searches "fi" the list box would need to repopulate with only "fish" and "fiddle" as selectable options. – TheJavaBeast Aug 01 '13 at 21:28
  • I guess i would have the text input(search field) submit a SQL query for "fi%" and send the results to the listbox to display? – TheJavaBeast Aug 01 '13 at 21:31
  • Based on those comments, I still think a SuggestBox would be the best solution. If you are only worried about the number of results, SuggestBox has the option to limit your responses. If this is still not a viable solution, you can implement the suggestion in my previous comment as a custom widget. You can pass "fish", "fly", or "fiddle" as an argument in to the constructor of your custom widget, which would execute a RPC call and grab data from the database, then display it on your popup. – Churro Aug 01 '13 at 21:49
  • Making good progress on this now, thanks. Question though, how can i change the css to a selected row within the verticalPanel? It currently just changes the text color and it doesn't really work that well. Could it be better to use a cell table? – TheJavaBeast Aug 22 '13 at 20:22
  • You can make a css class and name it something like "selcted" and make it change the background color: `.selected { background: #3498DB; }`. Then when the user clicks on an item, you can add that class to it: `item.addStyleName("selected");` Don't use a Cell table because that's a table that allows sorting, filtering, and paging of a large data set (which is not what you need). – Churro Aug 22 '13 at 22:36
  • the issue im running into with that is I have something like "final SingleSelectionModel SelectionModel= new Single Selection Model(); table.setSelectionModel(selectionModel); etc... public void onSelectionChange(selectionChangeEvent event)" etc... However I have no reference to specify the"item" in which to add the style to. – TheJavaBeast Aug 23 '13 at 14:50
  • I have tried table.setStyleName("myCSS") and that compiles fine, but it changes the entire table, as expected. this.setStyleName or selected.setStyleName, or anything else i try fails. I suppose i need to override a gwt method or submit a call to get the cell reference number? – TheJavaBeast Aug 23 '13 at 14:55
  • I am able to get the object, "myLOVBox selected =selectionModel.getSelectedObject();" – TheJavaBeast Aug 23 '13 at 15:04
  • Hi, sorry for the late response. I'm not familiar with the way `SelectionModel` works, but I am almost certain there should be a way to target your selected items with a CSS rule. Try using firebug while selecting items and firebug will show you if any HTML attributes change when you make selections. If it does, you can use that to write a CSS rule for selection coloring. – Churro Aug 27 '13 at 18:03