Change value from a ux:Global

General
1

Hi guys,

I am creating a button to change the colors of my app. I have two main colors that are saved in a ux: Global. How do I change this value according to the selected theme?

2

Hey Samuel!

You can use ux:Key attribute to change ux:Global value.

This example should help:

<App>
    <JavaScript>
    var Observable = require("FuseJS/Observable");
    var greenTheme = Observable(false);

    module.exports = {
        greenTheme: greenTheme
    }
        
    </JavaScript>
    <float4 ux:Global="MAIN" ux:Value="#16f" />
    <WhileTrue Value="{Read greenTheme}">
        <float4 ux:Key="MAIN" ux:Value="#181" />
    </WhileTrue>
    <WhileFalse Value="{Read greenTheme}">
        <float4 ux:Key="MAIN" ux:Value="#16f" />
    </WhileFalse>
    <Panel>
        <Rectangle Color="{Resource MAIN}" Layer="Background" />
        <StackPanel>
            <Text Value="Change color" FontSize="18" Alignment="Center" Color="#fff" Padding="8" Margin="8"/>
            <Switch Value="{greenTheme}"/>
        </StackPanel>
    </Panel>
</App>
1 Like
3

Arturs wrote:

Hey Samuel!

You can use ux:Key attribute to change ux:Global value.

This example should help:

<App>
    <JavaScript>
    var Observable = require("FuseJS/Observable");
    var greenTheme = Observable(false);

    module.exports = {
        greenTheme: greenTheme
    }
        
    </JavaScript>
    <float4 ux:Global="MAIN" ux:Value="#16f" />
    <WhileTrue Value="{Read greenTheme}">
        <float4 ux:Key="MAIN" ux:Value="#181" />
    </WhileTrue>
    <WhileFalse Value="{Read greenTheme}">
        <float4 ux:Key="MAIN" ux:Value="#16f" />
    </WhileFalse>
    <Panel>
        <Rectangle Color="{Resource MAIN}" Layer="Background" />
        <StackPanel>
            <Text Value="Change color" FontSize="18" Alignment="Center" Color="#fff" Padding="8" Margin="8"/>
            <Switch Value="{greenTheme}"/>
        </StackPanel>
    </Panel>
</App>

Thanks man!!! That was all I needed!