Help understanding and working with a DropDown

,
1

I’m trying to properly use a dropdown, but am not able to get the individual dropdown item, and also am not understanding some parts.

My main.xml (patterned after component-examples demo/basic.xml) looks like:

<vbox style="padding: 5px;" width="100%" height="100%">
    <dropdown id="dropDown1" text="Select" width="100%">
        <data>
            <item id="dd1i1" value="Item 1" />
            <item id="dd1i2" value="Item 2" />
            <item id="dd1i3" value="Item 3" />
            <item id="dd1i4" value="Item 4" />
            <item id="dd1i5" value="Item 5" />
            <item id="dd1i6" value="Item 6" />
        </data>
    </dropdown>
</vbox>

(“dd1i1” == “dropdown-1 item-1”, and so on.)

In Main.hx I import haxe.ui.components.DropDown;, and in my Main.main function I grab the event and set the handler with:

var dd1 = main.findComponent("dropDown1", DropDown);
dd1.onChange = handleDropDown1;

It seems to work. For the handleDropDown1 function I’ve got:

public static function handleDropDown1(e) {
    var dd = cast(e.target, DropDown);
    trace('${dd}, ${dd.id}, ${dd.selectedIndex}');
}

and when I build and run the app it starts out blank (no choice selected):

drop-down-screen-1

When with the dropdown, I choose item 1, item 2, then item 3 (only once each), and it prints out:

src/Main.hx:34: DropDown, dropDown1, 0
src/Main.hx:34: DropDown, dropDown1, 0
src/Main.hx:34: DropDown, dropDown1, 1
src/Main.hx:34: DropDown, dropDown1, 1
src/Main.hx:34: DropDown, dropDown1, 2
src/Main.hx:34: DropDown, dropDown1, 2

My questions are:

  • How do I choose one of the items in the dropdown to be initially selected when the app starts?

  • In the main.xml <dropdown tag, what would I use the text="Select" for? I don’t see it in my GUI anywhere.

  • Why does the trace in handleDropDown1() print out twice for each single time I select
    an item in the dropdown?

  • How do I get at the individual dropdown item’s (id’s “dd1i1”, “dd1i2”, etc.)? Or, maybe I don’t even need to assign and use them if I have the .selectedIndex's?

Any other feedback on how the above looks is much appreciated as well!

By the way, I don’t see the docs for DropDown at http://haxeui.github.io/haxeui-api/.

Thanks!

2
  • So, the selectedIndex propery can be used to select an initial item.
  • text can be used in other backends to have “free text” in the there (like say, “Select Item”) but i dont think this is possible with the way wxWidgets works
  • I dont think the event should fire twice, seems like a bug - ill check
  • Right, normally you should have been able to use .selectedItem (eg .selectedItem.id or .selectedItem.somethingElse) but i just tried it and for composite backends (html5, openfl, etc) its fine, but it errors on hxwidgets… so a bug which ill fix - nice find!
1 Like
3

Yay! If I change my main.xml to “<dropdown id="dropDown1" selectedIndex="0" ...”, then the GUI starts up with item 1 as the initial value. :slight_smile:

Thanks for looking into the handler firing twice issue!

Glad the issue with .selectedItem was uncovered!

4

Ok, so those two issues are fixed now:

  • selectedItem should work on haxeui-hxwidgets now
  • events shouldnt fire twice (or more!)… this was actually a bug in hxWidgets ( :open_mouth: ) so actually a really really nice find! :wink:

You’ll need latest haxeui-hxwidgets (master) and latest hxWidgets (haxelib is fine - 1.0.8)

Cheers,
Ian

5

Hi Ian,

I have the similar bug but with a different behavior in Kha. So I have a ListView with an item renderer. Here is the xml:

<listview id="feed" width="100%"  >
    <item-renderer id="t-petition" layoutName="horizontal" width="100%">
        <checkbox id="completed" />
        <label id="name" width="100%" />
        <label id="description" />
    </item-renderer>
</listview>

When clicking an Item I do:

main.findComponent("feed").onClick = function (e){
            var feed = main.findComponent("feed",ListView);
            trace([feed.selectedIndex]);
            if(feed.selectedIndex != -1){
                // feed.hidden = true;
                main.addComponent(feed.selectedItem);
                
            }
        }

The issue I am having is this:

  • When clicking item one of the list I get UIManager.hx:55: [0]
  • When clicking item two of the list I get UIManager.hx:55: [0] again.
  • When clicking item two again then I get UIManager.hx:55: [1].

Clicking also seems to have a limited detection zone with item renderer where when clicking on an item I will only get the onClick event sometimes even though the checkbox will have been checked.

6

Hi,

Would it be possible to have a simpler example, preferably without you UI.use(...) stuff… im sure thats not the issue, but it just makes it hard for me to reproduce. Also, have you tried using onChange rather than onClick?

Cheers,
Ian

7

Just edited the code for your use. I will try it yes and get back to you. onChange works perfectly; Probably just an issue with onClick I guess.

8

(Edit: - was already added as a bug on github, ignore please.)

It seems the dropdown is malfunctioning in the openfl backend in the android build. You can get the dropdown list to appear, but it appears in the wrong place. And you can’t select an item from the list. I don’t have time to go into more detail. I did put it in a scrollview.

(As a sidenote scrollviews and mouse interaction with components in the scrollview is flaky… sometimes both respond. For instance triggering the android software keyboard while you were trying to scroll. Perhaps a long-click could be used a a solution when you want to interact with components in a scrollview.
Also scrollview with a child vbox percentwidth 100, and the vbox clipping because of it’s children does not trigger the scrollview. Setting scrollviews’ percentContentWidth also often stops the scrollview from triggering.
Ideally a scrollview would prevent any clipping from occurring.)