Assigning property to Observable

Hi,

I have an array of buttons displayed in an Each, each having a StateGroup with some states. In one of the states, I am attempting to assign Move.X to an Observable member, set in each of the corresponding JS objects:

<Move RelativeTo="Size" X="{offset}" Duration="1" Delay="1" />

At compile time I get “Expression is a generic type definition but is used as a type”. If I remove the line and add it at runtime (hot compile), it works just fine.

What’s the proper way of linking properties to js vars and observables?

Thanks, Costin

  1. Hot compile is a little less strict than compiling. This is most often a bug, and should (in my opinion) be fixed before relase version. :slight_smile:

  2. The reason it doesn’t compile is a bug in the UX compilation of this line. It probably should be something more like this:

--- .cache/GeneratedCode/MainView.g.uno 2015-12-23 09:35:33.000000000 +0100
+++ MainView.uno        2015-12-23 09:37:47.000000000 +0100
@@ -1,9 +1,9 @@
 public partial class MainView: Fuse.App
 {

Hopefully someone from the UX-compiler team will see this, and decide on the right course of action.

Well… May it be fixed, then! :slight_smile: Guess I’m stuck until then.

Hi guys,

Sorry for the inconvenience. We’ve made several fixes to the UX compiler the last few days, which will roll out as soon as possible.

Note that this should work on most properties, its just some are problematic. It’s actually strange that you get that error on that one. Can you please provide a test case? What version is this?

The last 2 QA builds - I’got them in order to use the new PositionOffset mode.

Here goes…

UX

<StackPanel Orientation="Horizontal" Alignment="Center" ItemSpacing="16">
                <Each Items="{languages}">
                    <LangButton ux:Name="self">
                        <StateGroup Active="{state}">
                            <State ux:Name="none" />
                            <State ux:Name="active">
                                <Change Target="intro.Opacity" Value="0" Duration="1" />
                                <Move RelativeTo="PositionOffset" RelativeNode="pnlActiveLang" Duration="1" Delay="1" />
                            </State>
                            <State ux:Name="inactive">
                                <Change Target="self.Opacity" Value="0" Duration="1" />
                                <Move RelativeTo="PositionOffset" RelativeNode="pnlActiveLang" Duration="1" Delay="1" />
                                <Move RelativeTo="Size" X="{offset}" Duration="1" Delay="1" />
                            </State>
                            <State ux:Name="selectable">
                                <Change Target="self.Opacity" Value="1" Duration="0.5" />
                                <Move RelativeTo="PositionOffset" RelativeNode="pnlActiveLang" Duration="1" />
                                <Move RelativeTo="Size" X="{offset}" Duration="1" />
                            </State>
                        </StateGroup>

                        <Clicked>
                            <Callback Handler="{setState}" />
                        </Clicked>
                    </LangButton>
                </Each>
            </StackPanel>

Relevant JS

function Language()
{
    this.state = Observable("none");
    this.offset = Observable(0);

    this.setState = function()
    {
        var offset = 1;

        if (this.state.value == "none") {
            this.state.value = "active";

            for (var i in languages) {
                if (languages[i].code != this.code) {
                    languages[i].state.value = "inactive";
                    languages[i].offset.value = offset++;
                } else {
                    languages[i].offset.value = 0;
                }
            }
        } else if (this.state.value == "active") {
            for (var i in languages) {
                if (languages[i].code != this.code) {
                    languages[i].state.value = "selectable";
                }
            }
        }
    }.bind(this);
}

If you give me an email address, I can send you the whole thing, so you can just run it.

This does not compile for me:

<App Theme="Basic">
        <JavaScript>
                var Observable = require('FuseJS/Observable');
                offset = Observable(-100);
                module.exports.offset = offset;
        </JavaScript>
        <StackPanel>
                <Button Text="Text">
                        <Clicked>
                                <Move RelativeTo="Size" X="{offset}" Duration="1" Delay="1" />
                        </Clicked>
                </Button>
        </StackPanel>
</App>

$ fuse --version
Fuse version 0.9.5 (build 5414)
Copyright (C) 2015 Fusetools

Found it. Hunting down the bug now, thanks.

And FIXED. Hoping to get this into 0.9.6

Thanks!