TypeScript can be used with WebForms Core as an isomorphic WebForms Commander. This means the same WebForms class can be executed on both the server and client side.
Instead of directly manipulating the DOM, the WebForms class creates WebForms Core commands. These commands are then executed by WebFormsJS in the browser.
Installation via npm
The TypeScript WebForms class is available through npm.
npm install webformscore-ts
The package provides the TypeScript WebForms Commander for WebForms Core.
Commander and Executor
webforms.ts 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.
WebForms Core consists of two main parts:
- Commander: WebForms classes available for different programming languages.
-
Executor: WebFormsJS, a front-end library whose physical file is
web-forms.js.
The Commander creates WebForms Core commands, while the Executor executes those commands in the browser.
WebFormsJS is normally placed in the <head> section of the HTML page. Other than its initial configuration, you work with the WebForms class functions rather than directly with WebFormsJS.
This separation allows the same command-based programming model to be used in different environments.
How to Work with WebForms Core in Front-End
The TypeScript WebForms class can also be used directly on the front-end.
Unlike WebForms classes that are primarily used on the server or WebAssembly, the TypeScript WebForms class is isomorphic and can run in both front-end and server-side environments. Since the TypeScript class is isomorphic, it can execute in a browser environment as well.
To use it on the front-end, first make the WebForms class available in your project. Then create a simple 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">Set Dynamic Random Color</button>
<script>
window.addEventListener("load", (event) => {
FrontBack(event, "/script/module/main.ts");
});
</script>
</body>
</html>
Usually, when the initial page is controlled from the server, the server can return HTML together with the output of the exportToHtmlComment() method. WebFormsJS automatically finds the Action Controls in the HTML comments and executes them.
In this example, however, the page is static. Therefore, the FrontBack method is assigned directly to the page load event.
After the page loads, FrontBack executes the specified module.
Modules executed through FrontBack must provide a PageLoad function with an evt argument.
Additional arguments can also be passed to FrontBack. When provided, they are added after the evt argument when PageLoad is called.
TypeScript Module
The following is /script/module/main.ts:
import { WebForms, HtmlEvent, Fetch } from "./webforms.ts";
export function PageLoad(evt)
{
const form = new WebForms();
form.setCommentEvent("Button1", HtmlEvent.OnClick, "random-color");
form.startIndex("random-color");
form.removeCommentEvent("Button1", HtmlEvent.OnClick);
form.repeat((f) => {
f.addSaveValue("color", "rgb({{R}}, {{G}}, {{B}})");
f.replaceSaveValue("color", "{{R}}", Fetch.random(256));
f.replaceSaveValue("color", "{{G}}", Fetch.random(256));
f.replaceSaveValue("color", "{{B}}", Fetch.random(256));
f.setBackgroundColor("<body>", Fetch.save("color"));
f.delay(500);
}, 31536000);
return form.response();
}
Here, the WebForms class first assigns an event to Button1. When the button is clicked, the random-color command sequence starts.
The sequence generates three random values for red, green, and blue, creates an RGB color, and changes the page background. The repeat operation runs the sequence repeatedly with a 500 millisecond delay.
When the user clicks the button, the background color therefore changes to a new random RGB color every 500 milliseconds.
The important point is that the TypeScript Commander does not directly perform the DOM operation. It creates WebForms Core commands, and WebFormsJS executes those commands in the browser.
Using TypeScript with Node.js and Express
The same TypeScript WebForms class can be used on the server.
The following example uses Node.js and Express to process an HTML form and return WebForms Core commands.
import express from 'express';
import bodyParser from 'body-parser';
import { WebForms, InputPlace } from './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 this example, Express receives the submitted form values. The TypeScript WebForms class then creates commands that modify the existing page.
The server can change the font size, change the background color, disable the submit button, add an h3 element, and set its text.
The response is generated with:
form.response();
The browser receives the WebForms Core commands and WebFormsJS executes them.
One Commander, Multiple Environments
TypeScript makes it possible to use the WebForms Core Commander in both browser and server environments.
The same programming model can therefore be used for:
- Front-end TypeScript modules
- Node.js applications
- Express applications
- Server-side HTML responses
- Other JavaScript-compatible environments
The architecture remains simple:
TypeScript WebForms Class
↓
WebForms Core Commands
↓
WebFormsJS
↓
HTML DOM
The TypeScript class decides what should happen, while WebFormsJS performs the execution in the browser.
WebFormsJS
As shown in the examples, WebFormsJS is included in the HTML <head>:
<script type="module" src="/script/web-forms.js"></script>
The WebFormsJS library is the Executor layer of WebForms Core. Application logic can remain focused on the WebForms class rather than directly manipulating the DOM.
The latest WebFormsJS script is available in the WebForms repository.
Conclusion
With the TypeScript WebForms class, WebForms Core can be used from both sides of a web application.
The Commander can run in TypeScript on the server or in the browser, while WebFormsJS provides the client-side execution layer.
This makes TypeScript a natural environment for building WebForms Core applications with the same command-based programming model across front-end and back-end development.
Related links
On Elanat:
On GitHub:
On npm:
