Generic Button Click Handler?

How-to Discussions
1

Hi,

I am a beginner with FUSE but I am already impressed about its possibilities.

In an app I would like to let the user enter numbers with UI buttons, instead of using the system keyboard. I searched the forum and the internet to find a smart way, but did not find anything.

So is there a more generic way rather repeating code 10 times?

<App Theme="Basic">

    <Grid ColumnCount="3">
        <Button Clicked="{bNum1}" Text="1" Name="button1" />
        <Button Clicked="{bNum2}" Text="2" Name="button2" />
        ...
    </Grid>

</App>


var bNum0 = function () {
    console.log("Button 1 was clicked"  ) ;
}
...
var bNum9 = function () {
    console.log("Button 9 was clicked" ) ;
}

module.exports = {
    bNum1: bNum1,
    bNum2: bNum2,
    ...
};

Sorry, I did not find the code to get syntax high-lighting for javascript?

2

Hi. I am learning to program and also learnig fuse, so I dont know if this will help you, but I had a similar need and I solved it this way,


        function createNumbers(){
            var numbers = [];
            for(var i = 0; i < 10; i++){
                numbers.push({number: i, name: 'button' + i});
            }

            return numbers;
        }

        var numbers = createNumbers();

        function  handler(args) {
            console.log("Button " + args.data.number + " was clicked")
        }

        module.exports = {
            numbers: numbers,
            handler: handler
        };

Basically just create an array of objects and then use the Each tag

<StackPanel>
    <Each Items="{numbers}">
        <Button Clicked="{handler}" Text="{number}" Name="{name}" />
    </Each>
</StackPanel>
3

Thanks!

I’ve tried similar, the main issue then is, how to arrange the buttons. E.g. A Keypad is usually 3 rows with 4 columns. Without using ‘Each’, is it possible to address the individual array elements, like

<Button Clicked="{handler}" Text="{number[x]}" Name="{name[x]}" />   x: 0-9?

With ‘Each’ I do not know how to nicely arrange the buttons.

4

Something like this:

<App Theme="Basic">
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var typed = Observable('');
        var buttons = [1,2,3,4,5,6,7,8,9,'none',0,'none'];
        function click(args) {
            console.log(JSON.stringify(args));
            typed.value = typed.value + args.data;
        }
        module.exports = {
            buttons: buttons,
            typed: typed,
            click: click
        }
    </JavaScript>
    <DockPanel>
        <Text Value="{typed}" Dock="Top" />
      <Grid ColumnCount="3" RowCount="4" Dock="Fill">
          <Each Items="{buttons}">
              <Panel>
                  <Match Value="{}">
                      <Case String="none">
                          <Panel />
                      </Case>
                      <Case String="other" IsDefault="true">
                        <Button Clicked="{click}" Text="{}" />
                    </Case>
                </Match>
            </Panel>
          </Each>
      </Grid>
    </DockPanel>

</App>
5

Great, exactly what I was looking for!

Thanks a lot.