WebForms.js

WebForms.js is an isomorphic WebForms class that can be executed on both the server side and the client side.

This is the Commander class of WebForms Core and should not be confused with WebFormsJS (web-forms.js file), the client-only Executor library.

WebForms Core Architecture

WebForms Core consists of two main parts:

• Commander — WebForms classes implemented for different programming languages. Commanders generate WebForms Core commands that describe changes to the HTML document.
• Executor — WebFormsJS, the client-side JavaScript library that receives and executes those commands in the browser. Its physical file name is web-forms.js.

The Commander can run in different environments, including the browser, server-side applications, and WebAssembly, depending on the implementation.

The Executor is only loaded into the HTML document and is responsible for executing the commands generated by the Commander.

Important: WebFormsJS is not the Commander. WebFormsJS is the Executor. This package contains WebForms.js, the WebForms Core Commander written in JavaScript.

WebForms Core is a technology developed by Elanat.

Installation

Installation via Package

npm package: https://www.npmjs.com/package/webformscore

CLI:

npm install webformscore

Download / Copy the File

• WebFormsJS on Elanat: https://elanat.net/webforms-core
• WebFormsJS on GitHub: https://github.com/webforms-core/WebFormsClasses

How to Work with WebForms Core in the Front-end

The WebForms.js class in this package is written in JavaScript and can be executed directly in the browser.

Unlike the server-side WebForms classes, this allows WebForms Core commands to be generated and executed from front-end JavaScript modules.

Note: In a typical server-side WebForms Core application, the server generates HTML containing Action Controls, usually using the exportToHtmlComment method. WebFormsJS automatically extracts those Action Controls from the HTML and executes them.

In a static front-end application, there is no server-side page generation. Therefore, the FrontBack method can be assigned directly to the page load event to execute a WebForms.js module.

1. Add WebFormsJS to the HTML

First, add the WebFormsJS Executor to the <head> section of the HTML page.

<!DOCTYPE html>
<html>
<head>
  <title>Using WebForms Core</title>
  <script type="module" src="/script/web-forms.js"></script>
</head>
<body>
    <button id="Button1">Click me!</button>

    <script>
        window.addEventListener("load", (event) => {
            FrontBack(event, "/script/module/main.js");
        });
    </script>
</body>
</html>

The FrontBack method loads and executes the specified WebForms.js module after the page has loaded.

Note: FrontBack accepts an unlimited number of arguments. Any additional arguments are passed to the module after the evt argument.

2. Create the Front-end Commander Module

Modules executed through FrontBack must export a PageLoad function.

The PageLoad function receives the browser event through the evt argument.

/script/module/main.js

import { WebForms, HtmlEvent } from "./WebForms.js";

export function PageLoad(evt)
{
    const form = new WebForms();

    form.setFrontEvent(
        "Button1",
        HtmlEvent.OnClick,
        "/script/module/change-color.js"
    );

    return form.response();
}

The setFrontEvent method assigns another WebForms.js module to the Button1 click event.

When the user clicks the button, the following module is executed.

3. Execute WebForms Commands

/script/module/change-color.js

import { WebForms, InputPlace } from "./WebForms.js";

export function PageLoad(evt)
{
    const form = new WebForms();

    form.addTag("<body>", "h2");
    form.setText("<h2>", "New H2 Tag");
    form.setTextColor("<h2>", "orange");

    form.setBackgroundColor(
        InputPlace.tag("body"),
        "lightgreen"
    );

    form.assignDelay(2000);

    return form.response();
}

After this module is executed, WebForms Core performs the following operations:

1. Adds an <h2> element to the <body>.
2. Sets its text to New H2 Tag.
3. Changes the text color to orange.
4. Changes the body background color to light green.
5. Applies a two-second delay where specified by the generated commands.

The important point is that the JavaScript module does not directly manipulate the DOM. Instead, the WebForms.js Commander generates WebForms Core commands, which are then executed by WebFormsJS.

This separation between command generation and command execution is a fundamental part of WebForms Core.

WebFormsJS Executor

The HTML page above contains:

<script type="module" src="/script/web-forms.js"></script>

This script is the WebFormsJS Executor.

Developers normally do not work directly with the Executor. It is loaded into the page and configured when necessary, while application logic is written using the WebForms class functions.

Installation WebFormsJS

The latest WebFormsJS Executor is available here:

Installation via Package

npm package: https://www.npmjs.com/package/webformsjs

CLI:

npm install webformsjs

Download / Copy the File

• WebFormsJS on Elanat: https://elanat.net/webforms-js
• WebFormsJS on GitHub: https://github.com/webforms-core/WebFormsJS

How to Work with WebForms Core in NodeJS (Express)

The same WebForms.js Commander can also be used in NodeJS applications.

The following example uses the Express framework.

1. Install Express

Create a NodeJS project and install Express:

npm install express body-parser

Then copy the WebForms.js file from this directory into your project.

2. Create the Express Application

const express = require('express');
const bodyParser = require('body-parser');
const { WebForms, InputPlace } = require('./WebForms');

const app = express();
const PORT = 3000;

app.use(express.static('public'));

app.use(bodyParser.urlencoded({ extended: true }));

app.get('/', (req, res) => {
    res.send(`
        <!DOCTYPE html>
        <html>
        <head>
          <title>Using WebForms Core</title>
          <script type="module" src="/script/web-forms.js"></script>
        </head>
        <body>
            <form method="post" action="/">
                <label for="txt_Name">Your Name</label>
                <input name="txt_Name" id="txt_Name" type="text" />
                <br>

                <label for="txt_FontSize">Set Font Size</label>
                <input
                    name="txt_FontSize"
                    id="txt_FontSize"
                    type="number"
                    value="16"
                    min="10"
                    max="36"
                />
                <br>

                <label for="txt_BackgroundColor">
                    Set Background Color
                </label>

                <input
                    name="txt_BackgroundColor"
                    id="txt_BackgroundColor"
                    type="text"
                />
                <br>

                <input
                    name="btn_SetBodyValue"
                    type="submit"
                    value="Click to send data"
                />
            </form>
        </body>
        </html>
    `);
});

app.post('/', (req, res) => {

    if (req.body.btn_SetBodyValue) {

        const Name = req.body.txt_Name;
        const BackgroundColor = req.body.txt_BackgroundColor;
        const FontSize = parseInt(req.body.txt_FontSize, 10);

        const form = new WebForms();

        form.setFontSize(
            InputPlace.tag('form'),
            FontSize
        );

        form.setBackgroundColor(
            InputPlace.tag('form'),
            BackgroundColor
        );

        form.setDisabled(
            InputPlace.name('btn_SetBodyValue'),
            true
        );

        form.addTag(
            InputPlace.tag('form'),
            'h3'
        );

        form.setText(
            InputPlace.tag('h3'),
            `Welcome ${Name}!`
        );

        res.send(form.response());
    }
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

How the Express Example Works

When the user initially requests /, Express returns the complete HTML page.

The page contains the WebFormsJS Executor:

<script type="module" src="/script/web-forms.js"></script>

When the form is submitted, the browser sends the form data to the server.

The server checks whether the submit button was included:

if (req.body.btn_SetBodyValue)

If it was submitted, a new WebForms Commander is created:

const form = new WebForms();

The server then generates WebForms Core commands:

form.setFontSize(InputPlace.tag('form'), FontSize);
form.setBackgroundColor(InputPlace.tag('form'), BackgroundColor);
form.setDisabled(InputPlace.name('btn_SetBodyValue'), true);

Finally, the generated WebForms Core response is returned:

res.send(form.response());

WebFormsJS receives this response in the browser and executes the commands.

If the submit button is not included in the request, the initial HTML page is returned normally.

Note: In Express, static files are served from the public directory by default in this example. Therefore, the WebFormsJS Executor can be placed under the appropriate location inside public.

Commander and Executor

The relationship between the two components can be summarized as follows:

                    WebForms Core
                         │
              ┌──────────┴──────────┐
              │                     │
          Commander              Executor
              │                     │
         WebForms.js            WebFormsJS
              │                web-forms.js
              │                     │
     Generates commands ──► Executes commands
              │                     │
              └───────────► Browser DOM

The Commander describes what should happen.

The Executor performs those commands in the browser.

This architecture allows the same WebForms Core programming model to be used across different programming environments while keeping the browser-side execution layer centralized in WebFormsJS.