Click handling for childs of node x

How-to Discussions
1

Hi,

I played a while with the xml declarations. To get the next level I want to create a small calculator app for better understanding of Fuse.

During this I got challenged by implementing the click logic for my calculator buttons. I created a grid with nodes of my custom CalculatorButtons, which are Rectangle based and provided via the ux:Class tag.

My simplified view looks like:

<Grid Rows="1, 9">
<Grid Columns="2,2,2,1">
<CalculatorButton LabelText="m+" ux:Name="m_plus" Clicked="{calculatorClickHandler}" />
</Grid>

<Grid Columns="6,1" >
<Grid Columns="2,2,2" >
<CalculatorButton LabelText="7" ux:Name="n_7" Clicked="{calculatorClickHandler}" />
</Grid>

<Grid Rows="1,1,1,1,4" >
<CalculatorButton LabelText="÷" ux:Name="a_divide" Clicked="{calculatorClickHandler}" />
</Grid>

</Grid>

The according JS-Part:

<JavaScript>
 var calculatorClickHandler = function(args) {
    console.log(args.sender);
  }

  module.exports = {
    calculatorClickHandler : calculatorClickHandler
  }
  </JavaScript>

Now I have two questions:

  1. Question - how to handle mit clicked target: I looks like the only thing I can access from JS regarding my clicked target are the values provided by the arguments of calculatorClickHandler. I did not found any way to access more details of my clicked target, like the instance, or even better data properties of my target.

I played around with internal properties like: <string ux:Property="LabelText" />

Also if I tried to generate bindable properties I was not able to access them from outside by JS. Is there nothing like public properties for custom classes, which are accessible via JS?

  1. Question - bubbling of click event For better code style I tried to move Clicked-handling-declaration to the „root“-node of my grid, to prevent to declare x times the Clicked bounding. Is such bubbling of events possible? I did not find any solution for this.
2

Each button requires it’s own JS click handler. This is the preferred way to differentiate the clicks. It only feels a bit odd on a calculator since all the digits could be handled similarly. If you were to think of a scientific calculator with many advanced functions it’d be more apparent why each click should be a unique function.

There is event bubbling, but the node with the Clicked will be the one that handles that. If you need to differentiate buttons you need to put a clicked on each of the buttons individually.

Do do have future plans (timeline unknown) to introduce parameters into the JS callbacks: Clicked="{calculationButton('6')}".

3

Okay, thank you for the feedback.

A possible “workaround” to prevent the need of multiple click handlers could be the reuse of the click handler for each target node. As argument the sender is provided which seems to be equal to the ux:Name property. So I think it can be handled by a case switch which handles the sender property.

For the provided feature plan it would be great if the parameter could be binded to a variable, like an action constant. As example Clicked="{calculationButton(ActionMove)}" or better a wrapper object which provides global action constant command like Clicked="{calculationButton(Actions.Move)}".

Thank you very much for your feedback.