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

This is the commander class and should not be confused with the client-only WebFormsJS Executor library.

This WebForms class is written in JavaScript and is used on the front-end, unlike other WebForms classes that are used on the server or Web Assembly.

Note: Please note that the WebForms Core technology consists of two parts. One is the Commander and the other is the Executor. Commanders are WebForms classes for all programming languages; Executor is a front-end library called WebFormsJS (with the physical name "web-forms.js"). WebFormsJS is placed only in the head section of the HTML and you will not do anything with it other than the initial configuration and your focus is solely on working with the WebForms class functions.

To use WebForms Core, first copy the WebForms class file in this directory to your project. Then create a new View file similar to the one below.

The following file is a simple HTML page with a load event assigned to the page in the script tag. The reason for this is so that we can control the page in front-end.

Note: Usually, to control the initial page in server, we use the HTML page with the output of the "exportToHtmlComment" method and WebFormsJS automatically extracts the Action Controls in the page and then executes them. Here, since the page is static, we have to assign the FrontBack method directly to the page load event.

<!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>

After the page loads, the following module ("main.js") is executed by the "FrontBack" method. Modules that are executed under the "FrontBack" method must have a main method called "PageLoad" with an evt argument.

Note: You can call the "FrontBack" method with an unlimited number of arguments, in which case the arguments are added and called after the evt argument.

When this module is executed, a "FrontBack" method is added to the "Button1" button event using the "setFrontEvent" method.

JavaScript module ("/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();
}

If the user clicks on the button, the following module will be executed. After executing this module, several changes will be made to the HTML page using the methods of the WebForms.js class. First, an h2 tag is added to the body tag, then the text "New H2 Tag" is written inside this tag, and the next command changes the text color to orange. Finally, the background color will change to green after two seconds.

JavaScript module ("/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 learning this simple example, you can take advantage of the powerful capabilities of WebForms Core technology.

As you can see, the WebFormsJS script has been added in the header section of the View file above.

The latest version of the WebFormsJS script is available through the link below.

https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

To use WebForms Core, first copy the WebForms class file in this directory to your project. Then create a new View file similar to the one below.

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}`);
});

In the upper part of the View file, it is first checked whether the submit button has been clicked or not, if it has been clicked, an instance of the WebForms class is created, then the WebForms methods are called, and then the response method is printed on the screen, and other parts Views are not displayed. Please note that if the submit button is not clicked (initial request), the view page will be displayed completely for the requester.

As you can see, the WebFormsJS script has been added in the header section of the View file above.

The latest version of the WebFormsJS script is available through the link below.

https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js