More complex dropdowns

[David Clayworth]

I'm just starting to investigate Blockly, so apologies if this already has a well known answer.

We are going to need a more complex version of the dropdown menus. Our users may have to choose from hundreds of options, and will need search and filter facilities.

Is there a known or standard way to replace the dropdowns with our own UI elements?

[Coda Highland]

In my project, I subclass Field and open a dialog in the onMouseDown_ event.

/s/ Adam 

[David Clayworth]

Thanks Adam, that sounds like a good approach. 

If I wanted to do something simpler, like have a dropdown menu but with a filter box at the top of it where I could type in strings at the top and filter down the visible options, any example code of how I might get started on that?

David

[Coda Highland]

I mean, there's no fundamental difference between a dialog and a dropdown. They're both transient layers floating over the rest of the UI that intercept mouse events for the whole browser. Dialogs usually block them while dropdowns interpret them as a "cancel" action, but otherwise they're the same. 

The only catch when it comes to a dropdown is figuring out where to position it. You can use BlockSvg.getBoundingRectangle() for that, but unless you intend to implement your dropdown in SVG (not a bad idea, but outside the scope of familiarity for most JS devs) I haven't quite figured how to convert workspace coordinates into page coordinates.

/s/ Adam

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/615ffa84-5aed-4d82-9929-e2b2a8fa9e9c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Rachel Fenichel]

Hi David,

I don't have sample code, but I can give you a few pointers.

- The dropdown that we use is from the closure UI library.  It's an instance of goog.ui.Menu.

- Dropdowns (and similar things) live in the WidgetDiv.  It's a floating div that lets you render HTML and place it over Blockly.

- FieldDropdown.createWidget_ takes in a menu and puts it in the widget, which is then positioned above the field.  

- The set of calls here is

  - createMenu_

    - getOptions

  - positionMenu

    - createWidget

    - positionWithAnchor

So you should be able to 

- extend FieldDropdown

- override createWidget to insert a text box into your widget, above your menu

- generate menu options dynamically based on the text in the text box

- call showEditor when the text changes

Hope this helps,

Rachel

[David Clayworth]

Thanks. Appreciate it.