Creating a custom checkbox control using WhileTrue / While false and binding to an observable

How-to Discussions
1

Hi,

I’m trying to create a custom checkbox that will be used in an <Each></Each> loop. I creted it in an external Checkmark.ux file like this:

<Panel ux:Class="Checkmark" Focus.IsFocusable="true" ux:Name="chk">
    <bool ux:Property="Value" />
    <WhileFalse ux:Name="uncheckedState">
        <Change bgFill.Color="ColorCheckmarkInactiveBg" Easing="QuadraticInOut" Duration="0.1" />
        <Change shadowFill.Color="ColorDarkShadow" Easing="QuadraticInOut" Duration="0.1" />

        <Change tickLeftFill.Color="ColorCheckmarkInactiveTick" Easing="QuadraticInOut" Duration="0.1" />
        <Change tickRightFill.Color="ColorCheckmarkInactiveTick" Easing="QuadraticInOut" Duration="0.1" />
    </WhileFalse>

    <WhileTrue ux:Name="checkedState">
        <Change bgFill.Color="ColorSuccess" Easing="QuadraticInOut" Duration="0.1" />
        <Change shadowFill.Color="ColorSuccessShadow" Easing="QuadraticInOut" Duration="0.1" />

        <Change tickLeftFill.Color="ColorSuccessDarker" Easing="QuadraticInOut" Duration="0.1" />
        <Change tickRightFill.Color="ColorSuccessDarker" Easing="QuadraticInOut" Duration="0.1" />
    </WhileTrue>

    <WhilePressed>
        <Set Target="chk.Value" Value="true" />

        <Move X="2" Y="2" Target="tick" Easing="QuadraticInOut" Duration="0.1" />
        <Move X="2" Y="2" Target="tickBg" Easing="QuadraticInOut" Duration="0.1" />
        <Move X="1" Y="1" Target="tickBgShadow" Easing="QuadraticInOut" Duration="0.1" />
        <Change tickBgShadow.Width="42" Easing="QuadraticInOut" Duration="0.1" />
        <Change tickBgShadow.Height="42" Easing="QuadraticInOut" Duration="0.1" />
    </WhilePressed>

    <Panel X="8" Y="17" ux:Name="tick">
        <Rectangle Width="18" Height="5" CornerRadius="5" TransformOrigin="TopLeft">
            <SolidColor ux:Name="tickLeftFill" Color="ColorCheckmarkInactiveTick" />
            <Rotation Degrees="45" />
        </Rectangle>

        <Rectangle X="8.5" Y="13" Width="23" Height="5" CornerRadius="5" TransformOrigin="TopLeft">
            <SolidColor ux:Name="tickRightFill" Color="ColorCheckmarkInactiveTick" />
            <Rotation Degrees="-55" />
        </Rectangle>
    </Panel>

    <Circle ux:Name="tickBg" X="0" Y="0" Width="41" Height="41">
        <SolidColor ux:Name="bgFill" />
    </Circle>
    <Circle ux:Name="tickBgShadow" X="1" Y="2" Width="43" Height="43">
        <SolidColor ux:Name="shadowFill" />
    </Circle>
</Panel>

Now I want to use it in the loop like this:

<Each Items="{tasks}">
    <Checkmark X="116" Y="5" Value="{completed}" />
</Each>

The JS looks something like:

var Observable = require('FuseJS/Observable');
var Task = (function () {
    function Task(name, completed) {
        this.name = name;
        this.completed = completed;
    }
    return Task;
}());
var tasks = [
    new Task('Meditate', Observable(true)),
    new Task('Save some expenses', Observable(false)),
    new Task('Learn to type faster', Observable(false))
];
module.exports = {
    tasks: tasks
};

How can I make the checkbox “toggle” the value when clicked and also bind to the property in my JS?

Appreciate any help!

Cheers,

Maks

2

You want to bind the Value property of CheckBox to the WhileFalse and WhileTrue like so:

<WhileFalse Value="{Property chk.Value}">.....<WhileFalse>
<WhileTrue Value="{Property chk.Value}">.....<WhileTrue>

And set the default value like so:

<Panel ux:Class="Checkmark" Focus.IsFocusable="true" ux:Name="chk" Value="false">

Which doesn’t need to be an Observable btw

You can also get rid of the WhileFalse completely by setting those properties to the actual elements, because the WhileTrue will change them via Change and when that WhileTrue is no longer active the elements will go back to their default state

Also if you’re on the latest fuse version you don’t need the ux:Name="chk" you can just use this when targeting the checkmark panel

3

Awesome, thank you! That’s exactly the ingredient I’ve been missing:

<WhileFalse Value="{Property chk.Value}">.....<WhileFalse>

The docs (https://www.fusetools.com/learn/fuse#keyword-whiletrue) aren’t clear about how to bind WhileTrue to a property.

4

That’s because its not only tied to WhileTrue its for anything: https://www.fusetools.com/learn/fuse#ux-property

5

@Maksymilian You might want to try using <ToggleControl /> instead of <Panel /> for this, it already covers the boolean Value property then you can just do <WhileTrue> and <WhileFalse> binding only the property when you declare it.

6

@Edwin, but it’s not WhileTrue has a Value property @Fernando, yeah that’s a good approach.