DML : User Web Module

#dml

I like this functionality very much.
Look how you can get a reference to the element newly created in the last line of the below sample.

You can test it here : UWM

<html lang="de">
  <head>
  <meta charset="utf-8">
    <title>title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://efpage.de/DML/DML_homepage/lib/DML-min.js"></script>
  </head>

  <body>
  <h1>
  User defined web modules
  </h1>

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

Top comments (3)

Eckehard • Jul 29 '21

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>