B4J Question [SOLVED][BANano] High Order Component > To BANano?

Mashiane · May 6, 2024

Hi

I found this interesting code...

B4X:

const Hoc = (updateCounter) => {
    let counter = 0;

    // Hoc function
    function increaseCounter() {
      counter++;
      updateCounter(counter);
    }

    return { increase: increaseCounter };
  };

  const btn = document.getElementById('btn');
  const label = document.getElementById('label');

  const buttonHoc = Hoc((count) => {
    btn.textContent = `Btn clicks count: ${count}`;
  });

  const labelHoc = Hoc((count) => {
    label.textContent = `Mouse out count: ${count}`;
  });

  // Adding event listeners
  btn.addEventListener('click', () => buttonHoc.increase());
  label.addEventListener('mouseout', () => labelHoc.increase());

I'm curious, how does one create this in BANano? I can understand some of the portions here but..., how do I write this in BANano to a working example?

Thanks in advance.

alwaysbusy · May 7, 2024

This is something typical for React and even in their community it is a rather controversial subject. Not a fan here as you can guess as it is not very 'B4J'-like. But for the sake of demonstrating the power of BANano here is how it could be done:

New Class: Hoc

B4X:

Sub Class_Globals
    Private BANano As BANano 'ignore
    Private Counter As Int
    Private mUpdateCounter As BANanoObject
End Sub

'Initializes the object. passes the function to be executed
Public Sub Initialize(updateCounter As BANanoObject)
    mUpdateCounter = updateCounter
End Sub

public Sub Increase
    Counter = Counter + 1
    ' execute the passed function
    mUpdateCounter.Execute(Array(Counter))
End Sub

Using it:

B4X:

Sub BANano_Ready()
    Dim body As...

alwaysbusy · May 7, 2024

This is something typical for React and even in their community it is a rather controversial subject. Not a fan here as you can guess as it is not very 'B4J'-like. But for the sake of demonstrating the power of BANano here is how it could be done:

New Class: Hoc

B4X:

Sub Class_Globals
    Private BANano As BANano 'ignore
    Private Counter As Int
    Private mUpdateCounter As BANanoObject
End Sub

'Initializes the object. passes the function to be executed
Public Sub Initialize(updateCounter As BANanoObject)
    mUpdateCounter = updateCounter
End Sub

public Sub Increase
    Counter = Counter + 1
    ' execute the passed function
    mUpdateCounter.Execute(Array(Counter))
End Sub

Using it:

B4X:

Sub BANano_Ready()
    Dim body As BANanoElement
    body.Initialize("body")
  
    ' just creating a label and a button
    body.Append($"<div id="label">Mouse out count: 0</div><button id="btn">Btn clicks count: 0</button>"$)
  
    'var btn = document.getElementById('btn');
    Dim btn As BANanoElement
    btn.Initialize("#btn")
    'var label = document.getElementById('label');
    Dim label As BANanoElement
    label.Initialize("#label")
  
    ' for the anonymous functions and B4J needs the variable to be declared else you get an syntax error in the IDE
    Dim count As Int
  
    ' anonymous button function to pass to the Hoc Class
    Dim buttonHocFunc As BANanoObject 'ignore
    buttonHocFunc.Sub(count)
        btn.SetText("Btn clicks count: " & count)
    buttonHocFunc.EndSub
  
    Dim buttonHoc As Hoc
    buttonHoc.Initialize(buttonHocFunc)
  
    ' anonymous label function to pass to the Hoc Class
    Dim labelHocFunc As BANanoObject 'ignore
    labelHocFunc.Sub(count)
        label.SetText("Mouse out count: " & count)
    labelHocFunc.EndSub
  
    Dim labelHoc As Hoc
    labelHoc.Initialize(labelHocFunc)
  
    ' add the event listeners
    btn.AddEventListener("click", BANano.CallBack(buttonHoc,"Increase", Null), Null)
    label.AddEventListener("mouseout", BANano.CallBack(labelHoc,"Increase", Null), Null)
End Sub

Alwaysbusy

B4J Question [SOLVED][BANano] High Order Component > To BANano?

Mashiane

Expert

alwaysbusy

alwaysbusy

Expert

Similar Threads

B4J Question [SOLVED][BANano] High Order Component > To BANano?

Mashiane

Expert

alwaysbusy

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency