Creating a toggle button

How-to Discussions
1

Hi again,

I’m trying to create a toggle button based on some of the example code as below. This works in terms of user interaction, but I want to extend this to manage a property representing the On/Off state.

<Panel ux:Class="Switch" Width="60" Height="30">
	<bool ux:Property="On" />
	<SwipeGesture ux:Name="swipe" Length="30" Direction="Right" Type="Active" />
	<WhileTrue Value="{Property On}">
		<SetSwipeActive Target="swipe" Value="True" />
	</WhileTrue>
	<SwipingAnimation Source="swipe">
		<Move Target="handle" X="30" />
	</SwipingAnimation>
	<Clicked>
		<Toggle Target="{Property On}" />
		<DebugAction Message="On: {ReadProperty On}" />
	</Clicked>
	<Rectangle ux:Name="handle" Width="24" Margin="3" Alignment="Left"
		Color="#ffffffff" CornerRadius="12" />
	<Rectangle ux:Name="background" Layer="Background" Color="#000000ff"
		CornerRadius="15" />
</Panel>

So firstly, I want to use a property as the on/off value and I’d like to toggle this with a click. So I tried:

<Clicked>
	<Toggle Target="{Property On}" />
	<DebugAction Message="On: {ReadProperty On}" />
</Clicked>

…but the debug shows that the property is not toggled. Is it possible to do this?

I’m then trying to set the SwipeGesture to active using:

<WhileTrue Value="{Property On}">
	<SetSwipeActive Target="swipe" Value="True" />
</WhileTrue>

…but although this works in side Clicked eg.

<Clicked>
	<SetSwipeActive Target="swipe" Value="True" />
</Clicked>

…it doesn’t seem to work inside WhileTrue.

Finally, I’d like to be able to detect the end of the swipe (or toggle) by the user and update the On property accordingly. But I can’t figure out how to detect this event and bind it to the On property.

Would you be able to point me in the right direction?

Many thanks (again!)

2

Could you please post a complete, minimal app to show how you’re using the component?

3

Sorry, yes of course. Please see below.

I want to create a Switch component that I can parameterise with an Observable on/off object (called “on”).

I also want the “on” object to update when the Switch is switched.

Below I have commented out the bits that I added to try to bind to “on”. The user interaction works fine (swipe, click etc) but I’m struggling with binding to “on”.

<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable")
		var on = Observable(false)
	</JavaScript>
	<Panel ux:Class="Switch" Width="60" Height="30">
		<bool ux:Property="On" />
		<SwipeGesture ux:Name="swipe" Length="30" Direction="Right" Type="Active" />
		<!--WhileTrue Value="{Property On}">
			<SetSwipeActive Target="swipe" Value="True" />
		</WhileTrue-->
		<SwipingAnimation Source="swipe">
			<Move Target="handle" X="30" />
		</SwipingAnimation>
		<Clicked>
			<ToggleSwipeActive Target="swipe" />
			<!--Toggle Target="{Property On}" />
			<DebugAction Message="On: {ReadProperty On}" /-->
		</Clicked>
		<Rectangle ux:Name="handle" Width="24" Margin="3" Alignment="Left"
			Color="#ffffffff" CornerRadius="12" />
		<Rectangle ux:Name="background" Layer="Background" Color="#000000ff"
			CornerRadius="15" />
	</Panel>
	<Switch On="{on}"/>
</App>
4

Not to go into details on ux:Property and two-way data-binding, we actually have an example and another example for custom switches.

The idea is to use the ToggleControl base class, which allows you to data-bind to its Value property directly. The rest is handled nicely with swipe gestures, clicks etc. - everything you’d expect.

Hope this helps!

1 Like
5

Hi, the examples were great. Got it all to work based on one of those.
Thanks.

6

The link isn’t working !

7

All the links to the examples in this forum are not working because are pointing to the old web site www.fusetools.com. The new FuseTools web site is www.fuseopen.com.