Discussion on: DML : User Web Module

[Eckehard]

Nice, this is the way it was intended to use. We can call "myInput" a generator function, as it generates a new UI element or a group of elements.

Just, inputText already implemented this functionality, so this gives the same result:

  <script>
    function myInput(s, width) {
      let ret = inputText(s, {
        baseAttrib: "margin: 3px; ",
        fieldWidth: [100, 100],
      });
      return ret; // Return reference for access
    }
    h1("Input-Test");
    myInput("Short");
    myInput("VeryLong");
    let rmedium = myInput("Medium");
    rmedium.oninput = (e) => console.log(e.target.value)
  </script>

(It seems the documentation is outdated and needs some urgfent update...)

Interestingly, it is possible put also some callback functions inside the "generator" function, so you can also implement some general behavoir. In the following example, a key filter was implemented inside the myInput:

 <script>  "use strict";
    // Make the input elements / key filter
    function myInput(txt, rule) {
      // Create text and input field
      idiv(txt, "width: 100px;")
      let inp = make("input", { value: 1 })
      br()

      // Key filter
      inp.onkeydown = (e) => { if (e.key.length == 1) if (!e.key.match(rule)) e.preventDefault() } // Filter keys
      return inp
    }

    // Build the page
    h1("Binary converter")
    sidiv("", _box + _bigPadding)
    let b = myInput("binary", "[0,1]")
    let d = myInput("decimal", "[0-9]")
    b.oninput = () => d.value = parseInt(b.value, 2)
    d.oninput = () => b.value = ( parseInt(d.value,10) >>> 0).toString(2);
  </script>

(see examples->Binary)

[artydev]

Thank you Eckehard :-)

[Eckehard]

Just updated this part of the documentation...