Resources in their own file, replacement for Style

How-to Discussions
1

Hello,

Up to 0.12 I’ve been placing a list of Keys (for colors) inside a <Style> tag and saving it in a separate file, which I would ux:Include into MainView.ux and that would work great.

However in 0.12 any instance of the Style tag will throw an error (see here: https://www.fusetools.com/community/forums/bug_reports/error_after_upgrading_to_012?page=1). I migrated all of my code to use ux:Class where applicable, but in the case of these files it is not working. The app does not load any of the color resources and also doesn’t print any error.

Colors.ux before (worked)

<Style>
    <float4 ux:Value="#0D1C2F" ux:Key="azul03" />
    <float4 ux:Value="#1A385D" ux:Key="azul02" />
    <float4 ux:Value="#26548B" ux:Key="azul01" />
    <float4 ux:Value="#3370BA" ux:Key="azul00" />
</Style>

Colors.ux now (does not work)

<Panel ux:Class="ColorsInclude">
    <float4 ux:Value="#0D1C2F" ux:Key="azul03" />
    <float4 ux:Value="#1A385D" ux:Key="azul02" />
    <float4 ux:Value="#26548B" ux:Key="azul01" />
    <float4 ux:Value="#3370BA" ux:Key="azul00" />
</Panel>

This is how I’m declaring the list now. Since it’s a ux:Class I’m not ux:Including it in MainView.ux. I’ve also tried using a Panel with no class and ux:Including it, but no good. What should be the proper root element of this file so that my Resource keys are available to my code?

2

Hey

The coming version of fuselibs will have support for adding resources directly to triggers, and so the correct way of dealing with case would be to wrap them in some type of trigger.

In the mean time, i’ve put together a small class which you can use for this purpose.

Edit: The project shows how to use the uno class:

ResourceContainer.uno:

using Fuse;
using Uno.UX;
using Uno.Collections;
using Fuse.Resources;

public class ResourceContainer : Behavior
{
    IList<Resource> _resources = new List<Resource>();

    [UXContent]
    public IList<Resource> Resources { get { return _resources; } }

    protected override void OnRooted(Node parentNode)
    {
        foreach (var r in _resources)
        {
            parentNode.Resources.Add(r);
        }

    }

    protected override void OnUnrooted(Node parentNode)
    {
        foreach (var r in _resources)
        {
            parentNode.Resources.Remove(r);
        }
    }
}
3

Hi Kristian,

Ok I’ll try the code, thanks!

4

Hi Fernando,

Use the class that Kristian posted above, then do:

<!-- Colors.ux -->
<ResourceContainer ux:Class="MyColors">
    <float4 ux:Value="#0D1C2F" ux:Key="azul03" />
    <float4 ux:Value="#1A385D" ux:Key="azul02" />
    <float4 ux:Value="#26548B" ux:Key="azul01" />
    <float4 ux:Value="#3370BA" ux:Key="azul00" />
</ResourceContainer>

Then somewhere:

<MyColors />
5

Thanks guys, works like a charm!

When you update the documentation, please add this case to the “Migrating from Style” part? Thanks!

6

Here is a version of the above code which works on 0.20:

using Fuse;
using Uno.UX;
using Uno.Collections;
using Fuse.Resources;

public class ResourceContainer : Behavior
{
    IList<Resource> _resources = new List<Resource>();

    [UXContent]
    public IList<Resource> Resources { get { return _resources; } }

    protected override void OnRooted()
    {
        foreach (var r in _resources)
        {
            Parent.Resources.Add(r);
        }

    }

    protected override void OnUnrooted()
    {
        foreach (var r in _resources)
        {
            Parent.Resources.Remove(r);
        }
    }
}