Accessing UX components and their properties in JS?

How-to Discussions
1

If I have a timeline in UX, how can I access it in JS? If I have a timeline like:

<Timeline ux:Name="timeline" >
   ...
</Timeline>

and I try to access it in JS:

<JavaScript>
    function test()
    {
        console.log(timeline.Progress); // <-- prints NULL
    }
</JavaScript>

It doesnt seem to find it, I get a null and undefined. What am I missing? I dont need module.exports (as it comes from UX–JS), so whats wrong? =)

2

Any help would be appreciated =)

3

Timeline.Progress is a two-way bindable property, so Progress="{jsProgress}" should work.

Not all properties are two-way bindable however, generally only Value parameters and special ones like this. Unfortunately we don’t have a good way to mark them yet in our documentation.

4

Thanks,
this is all very confusing, to say the least =(

What I discovered now, if I make the change as you said above:

I have a TextView to display the jsProgress:

<TextView ux:Name="tv1" Value="{jsProgress}" TextColor="#fff" Width="50" Height="20" Alignment="TopLeft"/>

then I have the timeline:

<Timeline ux:Name="timeline" Progress="{jsProgress}" >

and then the js code:

<JavaScript>
	
        var Observable = require("FuseJS/Observable");
        var jsProgress = Observable(0);
        module.exports = {
		    jsProgress : jsProgress
		};

	</JavaScript>

And lastly, the button to start the animation:


	<MyButton ux:Name="btnStart" Text="START" Width="100" Height="100">
		<Clicked>
			<Set timeline.TargetProgress="1" />
		</Clicked>
	</MyButton>

What happens if I press the button is that the animation “steps” through the animation, it doesnt smoothly go from start to finish. first time I click, it looks like this:

file

So, its on Progress 0.006

If I keep pressing, eventually the animated stuff comes into view:

file

This behaviour disappears if I remove the textview_

<TextView ux:Name="tv1" Value="{jsProgress}" TextColor="#fff" Width="50" Height="20" Alignment="TopLeft"/>

Is this expected behaviour? Why? Isnt the textview just displaying the value?

5

Try using a <Text /> instead. <TextView /> is the multiline equivalent to <TextInput /> and is meant for editing text. I guess that there is a valuechanged feedback loop between the Timeline and the TextView causing the animation to misbehave