Simple test not working across platforms

[D-a-n-i-l-o]

Simple test code:

import feathers.layout.TiledRowsLayout;
import feathers.controls.LayoutGroup;
import feathers.layout.FlowRowsLayout;
import feathers.controls.ComboBox;
import feathers.layout.HorizontalAlign;
import feathers.data.ArrayCollection;
import feathers.controls.ListView;
import feathers.skins.RectangleSkin;
import feathers.layout.VerticalLayout;
import feathers.layout.HorizontalLayout;
import openfl.display.Sprite;
import feathers.controls.Panel;
import feathers.controls.Application;
import feathers.controls.Label;
import feathers.controls.Button;
import feathers.events.TriggerEvent;

//
// Run:
//
//   openfl test neko
//   openfl test mac
//   openfl test html5
//
// Build:
//
//   openfl build neko
//   openfl build mac
//   openfl build html5
//
//
class HelloWorld extends Application {
    public function new() {
        super();

        var panel = new LayoutGroup(); //Panel();
        var layout = new TiledRowsLayout(); //new FlowRowsLayout(); //new VerticalLayout();
        //layout.width = 500;
        layout.requestedColumnCount = 4;
        panel.layout = layout;
        addChild(panel);

        var label = new Label();
        label.text = "Hello World";
        panel.addChild(label);

        var listView = new ListView();
        // listView.dataProvider = new ArrayCollection(["A", "B", "C"]);
        listView.dataProvider = new ArrayCollection();
        // listView.setSize(200,200);
        // listView.height = 200;
        //listView.width = 200;
        // var layout = new VerticalLayout();
        // layout.horizontalAlign = HorizontalAlign.CENTER;
        // listView.layout = layout;

        panel.addChild(listView);

        var child2 = new Sprite();
        child2.graphics.beginFill(0xcccccc);
        child2.graphics.drawRect(0.0, 0.0, 100.0, 30.0);
        child2.graphics.endFill();
        panel.addChild(child2);

        var button = new Button();
        button.text = "Button 1";
        button.addEventListener(TriggerEvent.TRIGGER, (event) -> {
            trace("button triggered!");
            listView.dataProvider.add("Button 1 pressed.");
        });
        panel.addChild(button);

        var button2 = new Button();
        button2.variant = Button.VARIANT_PRIMARY;
        button2.text = "Button 2";
        button2.addEventListener(TriggerEvent.TRIGGER, (event) -> {
            trace("button triggered!");
            var item = "Button 2 pressed.";
            listView.dataProvider.add(item);
        });
        panel.addChild(button2);

        var button3 = new Button();
        button3.variant = Button.VARIANT_DANGER;
        button3.paddingTop = 15.0;
        button3.paddingRight = 18.0;
        button3.paddingBottom = 15.0;
        button3.paddingLeft = 18.0;
        button3.text = "Button 3";
        button3.addEventListener(TriggerEvent.TRIGGER, (event) -> {
            trace("button triggered!");
            var item = "Button 3 pressed.";
            listView.dataProvider.add(item);
        });
        panel.addChild(button3);

        var button4 = new Button();
        button4.text = "Button 4";
        button4.addEventListener(TriggerEvent.TRIGGER, (event) -> {
            trace("button triggered!");
            var item = "Button 4 pressed.";
            listView.dataProvider.add(item);
        });
        var skin = new RectangleSkin();
        skin.border = SolidColor(1.0, 0x999999);
        skin.fill = SolidColor(0xcccccc);
        skin.width = 64.0;
        skin.height = 32.0;
        button4.backgroundSkin = skin;
        panel.addChild(button4);

        var comboBox = new ComboBox();
        comboBox.dataProvider = new ArrayCollection([
            "Item 1",
            "Item 2",
            "Item 3"
        ]);
        panel.addChild(comboBox);
    }
}

Now I tried this using different methods:

1.) openfl test neko

• Everything works as expected: Clicking the buttons (multiple times) adds new entries to the ListView. The ComboBox shows 3 entries.

2.) openfl test mac

• Clicking the buttons adds text to the ListView only one time. On second button click, empty entries are added to the ListView.
• Means, every button adds text to the ListView for the first click, and empty entries on every 2nd, 3rd, 4th click, etc.

3.) openfl test html5

• Not working at all
• The Web App starts and display is okay
• Can't click any of the 4 buttons. The App hangs or something like that. No entry is added to the ListView.
• ComboBox doesn't open on click to show the 3 entries. A very small Rect of 5px x 5px or so opens.
• Tested with Google Chrome on macOS

Shouldn't this run with the same behaviour on all platforms?

[joshtynjala]

var item = "Button 2 pressed.";
listView.dataProvider.add(item);

From the dataProvider documentation:

Additionally, all items in the collection must be unique object instances. Do not add the same instance to the collection more than once because a runtime exception will be thrown.

You are adding duplicate strings, which are not unique. You should add the strings as fields of new objects instead (you can also define a class, if you prefer not to use anonymous structures).

var item = {text: "Button 2 pressed."};
listView.dataProvider.add(item);

You will need to create an itemToText function on the ListView to display the string in the item renderers.

[D-a-n-i-l-o]

Thanks, it's working now on all platforms! 👍

import feathers.layout.TiledRowsLayout;
import feathers.controls.LayoutGroup;
import feathers.layout.FlowRowsLayout;
import feathers.controls.ComboBox;
import feathers.layout.HorizontalAlign;
import feathers.data.ArrayCollection;
import feathers.controls.ListView;
import feathers.skins.RectangleSkin;
import feathers.layout.VerticalLayout;
import feathers.layout.HorizontalLayout;
import openfl.display.Sprite;
import feathers.controls.Panel;
import feathers.controls.Application;
import feathers.controls.Label;
import feathers.controls.Button;
import feathers.events.TriggerEvent;

//
// Run:
//
//   openfl test neko
//   openfl test mac
//   openfl test html5
//
// Build:
//
//   openfl build neko
//   openfl build mac
//   openfl build html5
//
//
class HelloWorld extends Application {
    public function new() {
        super();

        var panel = new LayoutGroup(); //Panel();
        var layout = new TiledRowsLayout(); //new FlowRowsLayout(); //new VerticalLayout();
        layout.requestedColumnCount = 4;
        panel.layout = layout;
        addChild(panel);

        var label = new Label("Hello World");
        panel.addChild(label);

        var listView = new TextListView();

        panel.addChild(listView);

        var child2 = new Sprite();
        child2.graphics.beginFill(0xcccccc);
        child2.graphics.drawRect(0.0, 0.0, 100.0, 30.0);
        child2.graphics.endFill();
        panel.addChild(child2);

        var button = new Button("Button 1", (event) -> {
            trace("button triggered!");
            listView.addItem("Button 1 pressed.");
        });
        panel.addChild(button);

        var button2 = new Button("Button 2", (event) -> {
            trace("button triggered!");
            listView.addItem("Button 2 pressed.");
        });
        button2.variant = Button.VARIANT_PRIMARY;
        panel.addChild(button2);

        var button3 = new Button("Button 3", (event) -> {
            trace("button triggered!");
            listView.addItem("Button 3 pressed.");
        });
        button3.variant = Button.VARIANT_DANGER;
        button3.paddingTop = 15.0;
        button3.paddingRight = 18.0;
        button3.paddingBottom = 15.0;
        button3.paddingLeft = 18.0;
        panel.addChild(button3);

        var button4 = new Button("Button 4", (event) -> {
            trace("button triggered!");
            listView.addItem("Button 4 pressed.");
        });

        var skin = new RectangleSkin();
        skin.border = SolidColor(1.0, 0x999999);
        skin.fill = SolidColor(0xcccccc);
        skin.width = 64.0;
        skin.height = 32.0;
        button4.backgroundSkin = skin;
        panel.addChild(button4);

        var comboBox = new TextComboBox();
        comboBox.addItem("Item 1");
        comboBox.addItem("Item 2");
        comboBox.addItem("Item 3");
        panel.addChild(comboBox);
    }
}

class TextListView extends ListView {
    public function new() {
        super();
        this.dataProvider = new ArrayCollection();
    }
    public override function itemToText(item:Dynamic ): String {
        return item.text;
    }
    public function addItem(text:String) {
        var item = {text: text};
        this.dataProvider.add(item);
    }
}

class TextComboBox extends ComboBox {
    public function new() {
        super();
        this.dataProvider = new ArrayCollection();
    }
    public override function itemToText(item:Dynamic ): String {
        return item.text;
    }
    public function addItem(text:String) {
        var item = {text: text};
        this.dataProvider.add(item);
    }
}