E2009: Where am I doing wrong?

General
1

ComboBox.ux

<Panel ux:Class="mr60fps.ComboBox" Margin="10" Alignment="Top">
    <Font ux:Global="FontAwesome" File="FontAwesome.otf" />

    <object ux:Property="Options" />
    <object ux:Property="Selected" />

    <JavaScript>
        var Observable = require("FuseJS/Observable");

        var self = this;
        var options = self.Options.inner();
        var selected = self.Selected.inner();

        var isOpen = Observable(false);

        module.exports = {
            isOpen: isOpen,
            options: options.map(function(option) {
                return {
                    title: option,
                    isSelected: Observable(function() {
                        return selected.value === option;
                    }),
                    clicked: function() {
                        selected.value = option;
                        if (self.Selected.value instanceof Observable) {
                            self.Selected.value.value = option;
                        }
                        isOpen.value = false;
                    }
                }
            }),
            selected: selected,
            toogleOpen: function() {
                isOpen.value = !isOpen.value;
            }
        }
    </JavaScript>

    <Panel ux:Name="header" Color="#ddd" Clicked="{toogleOpen}" HitTestMode="LocalBoundsAndChildren">
        <Text Alignment="CenterLeft" Margin="20" Value="{selected}" />
        <Text Value="&#xf0d7;" Font="FontAwesome" FontSize="26" Alignment="CenterRight" Margin="20" />
        <WhilePressed>
            <Change header.Color="#bbb" Duration="0.05" DurationBack="0.1" />
        </WhilePressed>
    </Panel>
    <Panel ux:Name="dropdown" Color="#eee" LayoutRole="Inert" Alignment="Top" MaxHeight="300">
        <Translation RelativeTo="Size" RelativeNode="this" Y="1" />
        <ScrollView>
            <StackPanel>
                <Each Items="{options}">
                    <Panel ux:Name="item" Clicked="{clicked}">
                        <Each Count="1" TemplateSource="this" TemplateKey="Option">
                            <Panel Color="#eee">
                                <Text Margin="20" Value="{title}" />
                                <WhilePressed>
                                    <Change item.Color="#ddd" Duration="0.05" DurationBack="0.1" />
                                </WhilePressed>
                                <WhileTrue Value="{isSelected}">
                                    <Change item.Color="#ddf" />
                                </WhileTrue>
                            </Panel>
                        </Each>
                    </Panel>
                </Each>
            </StackPanel>
        </ScrollView>
        <WhileFalse Value="{isOpen}">
            <Change dropdown.Opacity="0" Duration="0.15" Easing="CubicOut" />
            <Change dropdown.Visibility="Hidden" Delay="0.2" />
            <Move Y="-300" Duration="0.2" Easing="CubicIn" />
        </WhileFalse>
    </Panel>
</Panel>

MainView.ux

<App>
    <JavaScript>
        var Observable = require('FuseJS/Observable');

        var pets = Observable("Cat", "Dog", "Bird", "Sneak");
        var favPet = Observable("Dog");

        var colors = Observable("Red", "White", "Blue", "Black", "Maroon");
        var favColor = Observable("Blue");

        favPet.onValueChanged(function(newValue) {
            console.log("Fav pet changed to: " + newValue);
        })

        favColor.onValueChanged(function(newValue) {
            console.log("Fav color changed to: " + newValue);
        })

        module.exports = {
            pets: pets,
            favPet: favPet,
            colors: colors,
            favColor: favColor
        }
    </JavaScript>

    <StackPanel>
        <mr60fps.ComboBox Options="{pets}" Selected="{favPet}">
            <Panel ux:Template="Option" Color="Red" Margin="4">
                <Text Margin="20" Value="{title}" />
            </Panel>
        </mr60fps.ComboBox>    </StackPanel>
</App>

Error

Clean completed.
Fuse 0.21.0 (build 6650)
Build started: FullCompile
Configuring (7.80s)
Compiling syntax tree
build/Android/Preview/cache/mr60fps.ComboBox.g.uno(63.39): E2009: Call to ComboBox_FuseControlsPanel_Color_Property(Fuse.Controls.Panel,Uno.UX.Selector) has some invalid arguments (mr60fps.ComboBox.Template,Uno.UX.Selector)
/Users/baran/workspace/fuse/components/combobox/build/Android/Preview/cache/mr60fps.ComboBox.g.uno(63,40,63,108): Error E2009: Call to ComboBox_FuseControlsPanel_Color_Property(Fuse.Controls.Panel,Uno.UX.Selector) has some invalid arguments (mr60fps.ComboBox.Template,Uno.UX.Selector)
(5.34s)

Build completed in 13.15 seconds
    1 error
Build ended
fuse: Failed to compile project
2

Hey!

I’m pretty sure this project should have given a UX-compiler error and simply not work, but does so while the preview is already running for some reason. If you were to comment out the Panel in the inner most Each the project compiles. You can then uncomment and the project still runs.

The reason for this is that the item in the inner each reffers to a name which it doesn’t have access to. I modified the code so that this doesn’t happen:

Now, the “default template” only refers to names it defines itself because i moved the color to the inner Panel itself (within the template definition).

I am not 100% sure if this is a bug (meaning it should work), or if the compiler is just missing an error message, but i’ll make a ticket to have it looked at.

Let me know if you need any more help :slight_smile:

3

Thank you so much!

4

Hi,

The underlying UX compiler issue has now been fixed and will roll out in a near future release. Thanks for reporting!

5

Hi,

It was my pleasure. :slight_smile: