B4J Question How to create an html page with js functions

[Diego2494]

Hello all.

I am trying to create a page that can create qr codes, it has html and js code

But it loads the html but not the function in js, which generates the code

the html code is:

<input id="text" type="text" value="https://hogangnono.com" style="width:80%" /><br />
<div id="qrcode"></div>

and the js code is:

var qrcode = new QRCode("qrcode");

function makeCode () {      
    var elText = document.getElementById("text");
   
    if (!elText.value) {
        alert("Input a text");
        elText.focus();
        return;
    }
   
    qrcode.makeCode(elText.value);
}

makeCode();

$("#text").
    on("blur", function () {
        makeCode();
    }).
    on("keydown", function (e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    });

I am trying to do this in a b4j file with the BANano library.

but I don't know how to apply the js so that it looks and can be executed

Sub Process_Globals
    Dim Banano As BANano'ignore

End Sub
'
Sub AppStart
    Banano.Header.AddJavascriptFile("jquery.min.js")
    Banano.Header.AddJavascriptFile("qrcode.js")
End Sub

Sub Initialize 'ignore
    Dim body As BANanoElement = Banano.GetElement("#body")
    body.Append($"<input id="text" type="text" value="https://hogangnono.com" style="width:80%" /><br /><div id="qrcode"></div>"$)
   
    Dim container As BANanoElement = body.Append($"<canvas width="100" height="100" style="display: none;"></canvas>"$)
    container.SetStyle(Banano.ToJson(CreateMap("margin": 0, "padding": 0)))
   
    Banano.RunJavascriptMethod("makeCode", Array( "QRCode" ) )

End Sub

#If Javascript

  var qrcode = new QRCode(document.getElementById("qrcode"), {
      width : 100,
      height : 100,
      useSVG: true
  });

  function makeCode () {      
      var elText = document.getElementById("text");

      if (!elText.value) {
          alert("Input a text");
          elText.focus();
          return;
      }

      qrcode.makeCode(elText.value);
  }

  makeCode();

  $("#text").
      on("blur", function () {
          makeCode();
      }).
      on("keydown", function (e) {
          if (e.keyCode == 13) {
              makeCode();
          }
      });

#End If

I can only see the input, without any function

thanks for your help, i am something new with this language

source code: https://codepen.io/davidshimjs/pen/NdBYrg

 

[alwaysbusy]

I would write it in pure BANano code:

Sub Process_Globals
    Private BANano As BANano 'ignore                
   
    ' create our elements
    Dim TextElem As BANanoElement
    Dim QRCodeElem As BANanoElement
    ' and the qrcode javascript library
    Dim qrcode As BANanoObject
End Sub

Sub AppStart
   ' you can change some output params here
    BANano.Initialize("BANano", "BANanoQRCode",1)
   
    ' only qrcode is needed, no jquery
    BANano.Header.AddJavascriptFile("https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js")
            
    ' start the build
    BANano.Build(File.DirApp)
    
    ExitApplication
End Sub

Sub BANano_Ready()
    Dim body As BANanoElement = BANano.GetElement("#body")
    ' return the element with id "qrcode"
    QRCodeElem = body.Append($"<input id="text" type="text" value="https://hogangnono.com" style="width:80%"/><br><div id="qrcode"></div>"$).Get("#qrcode")
     ' get the element with id "text"
    TextElem.Initialize("#text")
    
    ' initalize the qrcode library        
    qrcode.Initialize2("QRCode", Array(QRCodeElem.ToObject, CreateMap("width" : 100, "height" : 100, "useSVG": True)))    
    
    ' add some events to the text element (see note below)
    TextElem.On("blur keydown", Me, "HandleMakeCode")
    
    ' make the code initialy   
    MakeCode
End Sub

public Sub MakeCode()
    If Not(TextElem.GetValue) Then
        BANano.Alert("Input a Text")
        TextElem.RunMethod("focus", Null)
        Return
    End If
    
    qrcode.RunMethod("makeCode", TextElem.GetValue)
End Sub

public Sub HandleMakeCode(event As BANanoEvent)
    ' if it was a key it must be 13, if not a key (from the blur), do it too
    If Not(event.KeyCode) Or event.KeyCode = 13 Then
        MakeCode
    End If
End Sub

After you ran the code, in Objects the generated website will be there. Open the index.html file and it should work.

Note: there is something wrong with the original code with the blur/enter events when empty, but I have not looked into that.

 

[Diego2494]

Thank you very much for your help, the truth i was a bit confused with the js, now I understand better how to use BANano and b4j.

Your code works perfect, thanks again,

regards.