A few days ago, version 2 of WebForms Core technology was released by Elanat for several programming languages. WebForms Core is a technology based on the Commander–Executor pattern that manages the communication between the server and the client in a command-based manner.
In this architecture:
Commander is a server-side class that includes a rich set of methods for:
Executor is a JavaScript library called WebFormsJS whose sole purpose is to execute commands sent by Commander.
In WebForms Core, the Commander class is implemented in several popular web languages (including Python, PHP, and C#).
WebForms Core for Python
The WebForms.py class has recently been upgraded to version 2, enabling Python support for WebForms Core 2.
Get the WebForms class for the Python programming language from the following path:
https://github.com/webforms-core/Web_forms_classes
Also get the WebFormsJS library from the following path:
https://github.com/webforms-core/Web_forms
In this article, we will review some of the new features of version 2 in the form of Python + Flask, including:
Loading JavaScript modules
Calling module methods from the server and client
Placeholder and Replace capabilities
New Offline Comment Event feature
Example structure
In the following example:
A JavaScript module called "math-utils.js" is loaded.
We have several buttons, each displaying a different type of WebForms Core interaction.
The addition and multiplication operations are performed without refreshing the page and even in offline mode (Comment Event).
Complete Flask + WebForms code
from flask import Flask, request, render_template_string, send_from_directory
from WebForms import WebForms, InputPlace, HtmlEvent, HtmlEventListener, Fetch
app = Flask(__name__)
@app.route("/script/module/<path:filename>")
def serve_module(filename):
return send_from_directory("static/script/module", filename)
@app.route("/", methods=["GET", "POST"])
def index():
form = WebForms()
if request.method == "GET" and "load_module_method1" in request.args:
form.call_module_method("message", ["Message from server!"])
return form.response()
form.load_module("/script/module/math-utils.js", ["add", "multiply", "message"])
form.set_get_event("<button>", HtmlEvent.ON_CLICK, "?load_module_method1")
form.set_module_method_event_listener(
"<button>1",
HtmlEventListener.CLICK,
"message",
["Message from client!"],
)
form.set_comment_event("<button>2", HtmlEvent.ON_CLICK, "add")
form.set_comment_event_listener(
"<button>3",
HtmlEventListener.CLICK,
"multiplication",
)
form.start_index("add")
form.replace("<p>", "@sum", Fetch.module_method("add", ["12", "8"]))
form.start_index("multiplication")
form.replace(
"<p>",
"@multiplication",
Fetch.module_method("multiply", ["12", "8"]),
)
return render_template_string(
"""
<!DOCTYPE html>
<html>
<head>
<title>Using WebForms Core</title>
<script type="module" src="/static/script/web-forms.js"></script>
</head>
<body>
<button>Click to load module method "message" (From server)</button>
<button>Click to load module method "message" (From client)</button>
<button>Click to load module method "add" (with comment event)</button>
<button>Click to load module method "multiplication" (with comment event listener)</button>
<p>
The sum of two numbers is @sum.
The multiplication of two numbers is @multiplication.
</p>
</body>
</html>
"""
+ form.export_to_html_comment()
)
if __name__ == "__main__":
app.run(debug=True)
Step-by-step explanation of the example logic
1. Load the JavaScript module
form.load_module("/script/module/math-utils.js", ["add", "multiply", "message"])
In this step, the JavaScript module along with its allowed methods is introduced to WebForms Core.
The JavaScript module codes that are called are specified below.
JavaScript module ("/script/module/math-utils.js")
export function add(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}
export function message(text) {
alert("Message from module: " + text);
}
2. First button – execute method via server
form.set_get_event("<button>", HtmlEvent.ON_CLICK, "?load_module_method1")
Clicking this button sends a GET request to the server.
The server calls the "call_module_method" method.
The result is sent to the client as a WebForms command.
This method is very useful for important interactions such as CRUD.
3. Second button – Directly execute the method on the client
form.set_module_method_event_listener("<button>1", HtmlEventListener.CLICK, "message", ["Message from client!"])
No requests are sent to the server.
The "message" method is executed directly on the client.
Suitable for lightweight and fast UI interactions.
4. What is a Comment Event?
Comment Event is a new feature of WebForms Core v2 that allows:
Execution logic to be sent to the page in the form of an HTML Comment .
Events to work even in offline mode.
Processing to be done without re-requesting to the server.
5. Third button – Comment Event with index "add"
form.set_comment_event("<button>2", HtmlEvent.ON_CLICK, "add")
To support this event:
form.start_index("add")
form.replace("<p>", "@sum", Fetch.module_method("add", ["12", "8"]))
6. Fourth button – Comment Event Listener with index "multiplication"
form.set_comment_event_listener("<button>3", HtmlEventListener.CLICK, "multiplication")
And the replacement text:
form.start_index("multiplication")
form.replace("<p>", "@multiplication", Fetch.module_method("multiply", ["12", "8"]))
Initial HTML output (with WebForms comments)
<!DOCTYPE html>
<html>
<head>
<title>Using WebForms Core</title>
<script type="module" src="/static/script/web-forms.js"></script>
</head>
<body>
<button>Click to load module method "message" (From server)</button>
<button>Click to load module method "message" (From client)</button>
<button>Click to load module method "add" (with comment event)</button>
<button>Click to load module method "multiplication" (with comment event listener)</button>
<p>
The sum of two numbers is @sum.
The multiplication of two numbers is @multiplication.
</p>
</body>
</html>
<!--[web-forms]
Ml=/script/module/math-utils.js|add|multiply|message
Eg<button>=onclick|?load_module_method1
EX<button>1=click|message|Message from client!
Eb<button>2=onclick|add|
EB<button>3=click|multiplication|
#=add
gt<p>=r|$[at];sum|$[at];cMadd,12,8|0|0
#=multiplication
gt<p>=r|$[at];multiplication|$[at];cMmultiply,12,8|0|0
-->
These comments are automatically read and executed by WebFormsJS after the HTML page loads.
Note: The list of commands is truncated if they reach the new index. In this example, only the first 5 commands are executed.
Server response to the first button
[web-forms]
lM=message|Message from server!
In this case, only the command needed to execute is sent to the client, not the entire HTML.
Conclusion
What we have covered in this article is just a small part of the capabilities of WebForms Core version 2; however, this example shows that this technology is not just a tool for dispatching events or simple DOM replacement, but rather a structured approach to managing client-side interactions through server-side logic . The Commander–Executor pattern allows for fine-grained, step-by-step control of user interface behavior without relying on heavy client-side frameworks.
Capabilities such as module loading, calling JavaScript methods from the server or client, dynamic replacement in HTML text, and using Comment Events to execute commands even without returning to the server demonstrate that WebForms Core can cover a wide range of interaction scenarios. These capabilities allow for reduced JavaScript code complexity and better integration of application logic, especially in projects where the main logic is concentrated on the server side.
WebForms Core v2 can be considered a flexible framework for developing web applications that focuses on controlling user interface behavior rather than directly managing complex client-side states. This approach, without completely replacing common web patterns, is a viable option for developing forms-driven, interactive, and server-based systems.