Opacity / isEnabled / State

How-to Discussions
1

I am still learning Fuse – thanks to your help I have the hang of routers and most of the basic UX controls and Java ineraction.

I would like to have multiple states on a page. I am not clear on Layer=Background, IsEnabled=True as to when they matter and what they really do. I can make a code example if I need to but I could just a pointer on some good documentation or a video that really covers multiple states on a page.

The best example I see is StateAnimation.ux and it defines a stategroup and states in a file that make good sense, but I can’t when the stategroup or states every get told to do anything. I see there are Change commands to change to a particular state, but what actually activates a state.

I could use a simple example with two rectanges where one is enabled initially and then the other is enabled and the first one goes away when the second one appears in the same place as the first button. I can get that to work with just opacity, but when I make one of the buttons be a textinput I have not gotten that to work just by changing opacity which makes me think layers and enabling are needed.

As I said if this is too vague of a question I can crank out examples, but was hoping this would be good enough to provide some helpful dialog.

Thanks.

2

Hi David,

I think you may have to crank out an example as it’s still not quite clear to me what you’re asking about.

Anyway, Layer="Background" is basically used to say “This element should be used as the background decoration of its parent”. It has nothing to do with state management / state machines.

Likewise, IsEnabled is used to control whether the element in question should accept input (and otherwise do whatever is meant to be the default “active behaviour” of that specific component).

I suspect the StateGroup documentation is more along the lines of what you’re looking for? Other than that it’s also quite common to use triggers such as WhileEnabled to manage states in UX.

If it’s simple stuff with a low number of different states then you can manage it all from UX (by using <Set> or <Change> on different triggers). If it’s more complex stuff you’ll probably want to do the actual statemanagement in JavaScript instead and simply update observables that are bound to UX properties (for instance: setting the Active property of a stategroup by updating it’s bound observable in JS).

3

Thanks – this is exactly what I needed.