WhilePressed and Clicked does not work

How-to Discussions
1

Hi,

I want to design a Material Floating Button. I wanted to create a While Pressed function which changes the color of the button.

Here’s my Code (Elements,ux):

<Panel ux:Class="FloatingButton" Width="56" Height="56" >

        <float4 ux:Property="BackgroundColor" />
        <string ux:Property="Goto" />

        <Rectangle Layer="Background" ux:Name="fbtn_background" CornerRadius="28" Color="{Property this.BackgroundColor}"></Rectangle>

        <WhilePressed>
            <Change Target="fbtn_background.Color" Value="#000" />
        </WhilePressed>

        <Clicked>
            <JavaScript>
                router.push("AddPage");
            </JavaScript>
        </Clicked>

    </Panel>

And here’s the code of List.ux:

<FloatingButton BackgroundColor="#27ae60" />

But If I click the button, nothing happens…

(Working on the Desktop-Simulator)

2

Hi,

On what platforms doesn’t it work?

Can you please provide a complete test project + steps to reproduce the problem?

3

The JavaScript tag doesn’t work like you’re attempting to use it. It only attaches JavaScript to the node. Your Clicked handler simply adds the JavaScript to the parent, and then removes it immediately again. That likely results in nothing happening (the JavaScript doesn’t have a chance to be called).

The correct way to do this is something like:

<JavaScript>
    exports.clicked = function() {
           router.push("AddPage")
    }
</JavaScript>
<Clicked Handler="{clicked}"/>
4

Ok it works now.

I had this item in another .ux file called Elements.ux and I declared elements in it ..

_

No router etc.

Then I imported it into the other files and used it (e.g. )

_

Now I moved the declaration to the main List.ux file and everything works ..

Thank you for your help!