How to assign a handler to a ux:Class element

How-to Discussions
1

Hi,

I have the following incomplete value entry helper class:

<Grid ux:Class="ButtonIconEntry" Columns="1*, 2*, 6*, 1*" Margin="0, 10, 0, 10" ImageColor="#FFF" LabelColor="#FFF">
  <ImageSource ux:Property="Image" />
  <float4 ux:Property="ImageColor" />
  <string ux:Property="Label" />
  <float4 ux:Property="LabelColor" />
  <string ux:Property="Text" />
  <float4 ux:Property="TextColor" />

  <Image Source="{Property this.Image}" Width="25" Height="25" Alignment="BottomLeft" 
    Color="{Property this.ImageColor}" />
  <Text Value="{Property this.Label}" TextColor="{Property this.LabelColor}" 
    FontSize="15" Alignment="BottomLeft" />
  <TextInput Value="{Property this.Text}" TextColor="{Property this.TextColor}" CaretColor="{Property this.TextColor}" FontSize="15" Alignment="BottomLeft" />
  <Image File="../assets/icons/arrow-right-02.png" Width="20" Color="#018bdb" Clicked="???" />
</Grid>

The last Image object will be clickable to show, for example something like selection window, etc., to the user instead of entering values by hand. The problem is, this class can be used from everywhere and I don’t what is the correct way of assigning generic handlers to the Class elements.

  • I’ve tried to define a property of type object and assigned a function to this property but unfortunately it didn’t work. I don’t get any errors but function is not called.

  • I’ve tried to add a Dependency of type Callback on the class. But I couldn’t find a place on the page to declare the Callback that will be assigned to this class. I got the following error: 'Callback' doesn't fit here. 'Page' does not have any content properties that accept 'Callback'

  • The last one is raising errors which I haven’t tried yet. Because it seems so cumbersome while we may have the option of assigning Function type properties and I wasn’t able to do it correctly. May be I assigned the wrong type for the property.

So that’s why I wanted to ask, what is correct way to do this?

Thanks in advance,

Ipek

2

Hi!

If I understand your use case correctly, the correc thing to use is the UserEvent feature:

https://www.fusetools.com/docs/basics/creating-components#events-userevent

3

Thanks for the reply Anders.

Then I’ll use UserEvent but wouldn’t it be much nicer if we could assign a function as a property? Is what I think meaningless?

Thanks again

4

Actually, single-function events are quite low level and limited compared to UserEvents.

UserEvents allow you to do full UX triggers in response to your event, as well as function callbacks:

<OnUserEvent ...>
    <Callback Handler="{someFunction}" />
    <Change ..
5

Yes, I understand what you mean. When you have to trigger more than two things or have to trigger in both JS and UX UserEvent is capable to do that.

What I aimed to do was to make a simple function call and in order do that, binding a function to a “Clicked” handler seemed to me as the nicer way (by defining a function type Property on the class and the function arguments will be the DataContext of the class).

Anyway, thanks for the explanation. I’ll use what I’ve got :slight_smile:

6

Yes, for now UserEvent is the way to go.

We have something along the lines of ux:Event (analogous to ux:Property) on the drawing board, but still just idea stage and I’m not sure it will really be needed.

7

Thanks Anders,

May be I still don’t have the “Fuse way of thinking” and therefore some other solutions seem more straightforward to me :slight_smile:

But still just to call a simple function from a handler inside a class shouldn’t need three steps (Define an event, raise event, catch the event) while there is the option of binding. Or may be these steps can be more seamless as you may or may not be implementing in the future.

Thanks again