Custom UX Components

How-to Discussions
1

Hello there…

I need to build a maps based application, but since there’s no webview, I’d need to write a custom ux layer that would handle the map rendering. I’d also like to make that public so other people can use it in the future.

My questions are:

  • How can I create a new ux component that can be used as a tag. E.g.: and get that to preview in Fuse?

  • How can I access OS native functions from uno?

  • Can I put those on github during this beta phase?

Thanks

J

2

Hey there!

Thanks for wanting to contribute. We will look into things like MapView a bit later in the beta program.

How can I create a new ux component that can be used as a tag. E.g.: and get that to preview in Fuse?

All Uno classes can be used from UX as long as they

  • Are non-abstract
  • Are public
  • Have a parameterless constructor

So for example

public class Foo
{
    public Foo() {}
}

Can be used from UX like this:

<Foo />

How can I access OS native functions from uno?

Add a project reference to the Android and Experimental.iOS packages. You will then have all the Android and iOS APIs available in your project. Note that with the current version, build times can be quite long for projects that reference these packages (this is why they are not linked by default). We are working on improving that :slight_smile:

Can I put those on github during this beta phase?

Yes, please do! :slight_smile:

3

And to expand a little bit:

How can I create a new ux component that can be used as a tag. E.g.: and get that to preview in Fuse?

The simplest way of getting started and get something on screen (without diving into the layout framework) is probably to make an absolute sized component where you explicitly set Width and Height in the .ux. You can then focus on drawing something within that element. :slight_smile:

All you need for this is to extend Element and implement its OnDraw() method, where you can do either low-level rendering or use higher level primitives.

Here’s a small example that draws a quad inside it’s allocated area on screen and interacts a bit with the UI system:

using Uno;
using Fuse;
using Fuse.Elements;
using Uno.Graphics;
public class Example : Element
{
    public float Blue{get;set;}        // a property to play with
    override protected void OnDraw(Fuse.DrawContext dc)
    {
        draw
        {
            float2[] Vertices: new []
            {
                float2(0, 0), float2(0, 1), float2(1, 1),
                float2(0, 0), float2(1, 1), float2(1, 0)
            };
            float2 Coord: vertex_attrib(Vertices);
            ClipPosition: Vector.Transform(float4(Coord*ActualSize,0,1), dc.GetLocalToClipTransform(this));
            PixelColor: float4(Coord,Math.Clamp(Blue,0,1),1);
        };
    }
}

and some UX to test it:

<App Theme="Basic" ClearColor="#eeeeeeff">
    <Panel>
        <ScrollViewer ClipToBounds="true">
            <StackPanel>

                <Text>A bit of text to see we are laid out correctly.</Text>
                <Text Alignment="Right">(And you can scroll up/down if you want to)</Text>

                <Example ux:Name="exElement" Width="100" Height="40" Margin="10" Blue="0.5"/>

                <Button Text="Transforms work as well">
                    <Pressing>
                        <Rotate Target="exElement" Degrees="30" Duration="0.5" />
                        <Scale Target="exElement" Factor="0.6" Duration="0.5"/>
                    </Pressing>
                </Button>

            </StackPanel>
        </ScrollViewer>
    </Panel>
</App>

Of course, going down to triangle rendering is too low-level for most use cases which is why we’re building higher level components that can be customized, so this is mainly intended to be a minimal example. :slight_smile:

Edit: Small change in the uno code to comply with recent changes in the framework. Now works with the latest version of Fuse