ux:Name and FuseJS

How-to Discussions
1

This might be a dumb question.

But how do actually trigger/reach markup stuff from the js code. Let’s say that I have a button;

<Button ux:Name="button1" Opacity="0.5"/>

And in the js;

setTimeout(delayedCall, 500);

function delayedCall() {
    //Here I want to change the opacity for the button
    //But I guess I somehow need to connect/declare button1 in the js code. 
    button1.opacity = 1;
}

module.exports = {
    delayedCall: delayedCall
};
2

Hi :slight_smile: There are no dumb questions here :slight_smile:

JS is not allowed to touch the view directly, so you have to invert the control:

var buttonOpacity = Observable(0.5);

function delayedCall()
{
    buttonOpacity.value = 1;
}

module.exports = {
    buttonOpacity: buttonOpacity,
    delayedCall: delayedCall
}

And in UX:

<Button Opacity="{buttonOpacity}" />
3

The above solution might seem a bit cumbersome, but in general you should not use JS to animate UI parameters (performance trouble). Use triggers and animators in pure UX instead.

If you describe what you want to acheive, we may have a more elegant solution for you :slight_smile:

4

Thanks for the quick reply. Yes actually I wasn’t trying to animate stuff. It just feelt like a good example :slight_smile:

In my case I wanted to automate a page navigation. To create a animation from the splashscreen. But I guess I can use the same aproach

<PageControl ux:Name="pageControl" Active="{activePage}">
    <Page ux:Name="splashScreen">
    </Page>
    <Page ux:Name="homeScreen">
    </Page>
</PageControl>

JS

var activePage = Observable("splashScreen");

function delayedCall()
{
       activePage.value = "homeScreen";
}
5

Yes :slight_smile: Except you use Handle="splashScreen" instead of ux:Name="splashScreen" .

ux:Name is used for internal references in the UX document, and in Uno code. For everything else, you use databinding.

For pages and navigation you can use Handle to give nodes a string identifier for data binding.

6

Sweet! Thanks for the help