DEV Community

Cover image for Modular Development in WebFormsJS
Elanat Framework
Elanat Framework

Posted on

Modular Development in WebFormsJS

WebFormsJS is a client-side library of WebForms Core technology that, along with the WebForms class on the server side, enables the integrated use of this technology for web development.

WebForms Core technology is built on the "Server-Commands/Client-Execution" concept. In this technology, the server sends direct commands to the client, and the client interprets and then executes the commands.

In the new version of WebForms Core technology, we have included the possibility of extending the WebFormsJS library. From now on, you can add your own special commands to this technology. The extension section is located at the end of the WebFormsJS library and starts with the /* Start Extension */ comment and ends with the /* End Extension */ comment. In this section you can extend the WebForms Core technology and modify the following examples. It includes several methods that we will explain below.

Please Note: WebForms Core technology does not require writing JavaScript except in extremely specific scenarios such as native client computing or extreme client applications. Also, for situations where you don't need Action Control flow data, it's better to create a new method and call that method with the CallMethod method in the Fetch section of the WebForms server class.

When should we use new modular commands?
When we want to implement a specific and new application and WebForms Core technology does not support that command and has no intention of supporting it.

Note: If you think a new command or feature is needed to be added to WebForms Core technology, be sure to let us know.

To create a new command, you must first specify the character structure of your command. To avoid any conflicts, please try to start the Action Control command with numbers and use only ASCII format; using letters and characters increases the possibility of conflicts in current or future versions.

Set WebForms Value

This method is executed before the tag management interpretation flow and the output true continues the interpretation and the output false stops the interpretation and ignores the Action Controls regardless of their number. In this method, you can write the interpretation code before you manage the behavior of the tags (which is possible in the next method).

function cb_SetWebFormsValuesExtension(evt, ActionOperation, ActionFeature, Value, LastElementPlaceList, TransientDOM)
{
    switch (ActionOperation)
    {
        case '0':
            switch (ActionFeature)
            {
                case '0': alert("Hello " + Value); return true;
            }
    }
}
Enter fullscreen mode Exit fullscreen mode

By default, this method has a code interpreter that uses alert to display the message. In this test example, for a command like 00=My text alert, the browser opens and the text "Hello My text" is displayed in the alert. And then the value true is returned to continue the tag management interpretation flow.

We can create new such code interpreters for development in this section. You can delete this default interpreter. We decided to create a new command to create an animation on the page that interprets this command.
The structure of this command is as follows:

01={duration}
Enter fullscreen mode Exit fullscreen mode

The following codes also interpret the above command.

function cb_SetWebFormsValuesExtension(evt, ActionOperation, ActionFeature, Value, LastElementPlaceList, TransientDOM)
{
    switch (ActionOperation)
    {
        case '0':
            switch (ActionFeature)
            {
                case '0': alert("Hello " + Value); return true;
+               case '1':
+                   document.body.style.transition = "background-color 0.5s ease";
+                   document.body.style.backgroundColor = "lightblue";

+                   setTimeout(() =>
+                   {
+                       document.body.style.backgroundColor = "";
+                   }, Value);

+                   return true;
            }
    }
}
Enter fullscreen mode Exit fullscreen mode

Server code

form.AddLine("01", "3000"); // Value is animation duration
Enter fullscreen mode Exit fullscreen mode

We can call the command using the "AddLine" method in the WebForms class on the server.

Action Control result

[web-forms]
01=3000
Enter fullscreen mode Exit fullscreen mode

Note: You can convert a value to multiple values ​​with the "|" character.

Note: Instead of using the "AddLine" method, you can use the advanced constructs of your desired programming language to create advanced methods. The following article is a good reference for extending WebForms class methods in C#:
https://dev.to/elanatframework/extending-methods-in-webforms-core-57jj

Set Value To Input Extension

This method is used to manage tags. Through CurrentElement we can have full access to Input Place. This is a very powerful method; in this method you can do anything you want with the tags you specify.

function cb_SetValueToInputExtension(evt, ActionOperation, ActionFeature, CurrentElement, Value)
{
    switch (ActionOperation)
    {
        case '1':
            switch (ActionFeature)
            {
                case '0': console.log(CurrentElement.outerHTML + "|" + Value);
            }
    }
}
Enter fullscreen mode Exit fullscreen mode

In the default example of this method, the complete structure of a tag (along with a value) is displayed in the Console section of the browser with the console.log method.

Usage example:

10<p>2=Text
Enter fullscreen mode Exit fullscreen mode

In the above example, the third p tag along with the value entered in the browser is logged.

<p class="menu">
<a href="/about">About</a>
</p>|Text
Enter fullscreen mode Exit fullscreen mode

We have created a new command to add a placeholder, suitable for input tags.

11{InputPlace}=Placeholder text
Enter fullscreen mode Exit fullscreen mode

The following codes also interpret the above command.

function cb_SetValueToInputExtension(evt, ActionOperation, ActionFeature, CurrentElement, Value)
{
    switch (ActionOperation)
    {
        case '1':
            switch (ActionFeature)
            {
                case '0': console.log(CurrentElement.outerHTML + "|" + Value); break;
+               case '1': CurrentElement.placeholder = Value;
            }
    }
}
Enter fullscreen mode Exit fullscreen mode

Server code

form.AddLine("11" + "Textbox1", "Enter name");
Enter fullscreen mode Exit fullscreen mode

Action Control result

[web-forms]
11Textbox1=Enter name
Enter fullscreen mode Exit fullscreen mode

Note: You can convert a value to multiple values ​​with the "|" character.

Fetch Value

This method works based on the Fetch class (which is a function of the WebForms class on the server). The Fetch structure is as follows: it takes the Value data and modifies it.

function cb_FetchValueExtension(evt, ActionOperation, ActionFeature, Value)
{
    switch (ActionOperation)
    {
        case '2':
            switch (ActionFeature)
            {
                case '0': return "Hello " + Value;
            }
    }
}
Enter fullscreen mode Exit fullscreen mode

For example, the following code adds the user's name to the b tag by calling the "prompt" method:

Server code

form.AddText("<b>", Fetch.Script("prompt('Please enter name','Your name')"));
Enter fullscreen mode Exit fullscreen mode

Of course, you can also write the above code as follows, but it is never recommended.

form.AddText("<b>", "@_prompt('Please enter name','Your name')");
Enter fullscreen mode Exit fullscreen mode

We have created a new Fetch command to display the amount of data in the HTML page.

{ac}{InputPlace}=@21{Encoding type};
Enter fullscreen mode Exit fullscreen mode

The following codes also interpret the above command.

function cb_FetchValueExtension(evt, ActionOperation, ActionFeature, Value)
{
    switch (ActionOperation)
    {
        case '2':
            switch (ActionFeature)
            {
                case '0': return "Hello " + Value;
+               case '1':
+                   var htmlContent = document.documentElement.outerHTML;

+                   if (Value === "ASCII")
+                       return "Page size (ASCII): " + htmlContent.length + " characters";

+                   if (Value === "UTF8")
+                   {
+                       var encoder = new TextEncoder();
+                       var utf8Bytes = encoder.encode(htmlContent);
+                       return "Page size (UTF8): " + utf8Bytes.length + " bytes";
+                   }

+                   return "Unknown encoding type: " + Value;
            }
    }
}
Enter fullscreen mode Exit fullscreen mode

Server code

form.AddText("<b>", "@21" +"UTF8");
Enter fullscreen mode Exit fullscreen mode

Action Control result

[web-forms]
at<b>=@21UTF8
Enter fullscreen mode Exit fullscreen mode

Note: You can convert a value to multiple values ​​with the "," character.

Save Value

This method is used when you want to save a data. You can save information from a tag; for example, in this method you can get and save the number of attributes of a tag. You can save data in two parts Local and Session and then retrieve them with the Fetch.Saved and Fetch.Cache methods.

Example

Server code

form.SetValue("Textbox1", Fetch.Saved("my-key"));
Enter fullscreen mode Exit fullscreen mode

The "cb_SetStorage" method saves the data in Local if true is entered in the first argument and temporarily stores it in the session if it is negative. The second argument is "Name" and is usually used as a Key.

function cb_SaveValueExtension(evt, ActionOperation, ActionFeature, Name, CurrentElement)
{
    switch (ActionOperation)
    {
        case '3':
            switch (ActionFeature)
            {
                case '0': cb_SetStorage(true, Name, "Hello saved in local storage"); break;
                case '1': cb_SetStorage(false, Name, "Hello saved in session storage");
            }
    }
}
Enter fullscreen mode Exit fullscreen mode

For example, the following code checks for the presence of a script tag in the tag and stores the value 1 or 0 in the session depending on the check.

@33{InputPlace}={Key}
Enter fullscreen mode Exit fullscreen mode

The following codes also interpret the above command.

function cb_SaveValueExtension(evt, ActionOperation, ActionFeature, Name, CurrentElement)
{
    switch (ActionOperation)
    {
        case '3':
            switch (ActionFeature)
            {
                case '0': cb_SetStorage(true, Name, "Hello saved in local storage"); break;
                case '1': cb_SetStorage(false, Name, "Hello saved in session storage"); break;
+               case '3': cb_SetStorage(false, Name, (CurrentElement.getElementsByTagName("script").length > 0) ? "1" : "0");
            }
    }
}
Enter fullscreen mode Exit fullscreen mode

Server code

form.AddLine("@33" + "MyTag", "my-key");
Enter fullscreen mode Exit fullscreen mode

Action Control result

[web-forms]
@33MyTag=my-key
Enter fullscreen mode Exit fullscreen mode

Check Condition

This method is an advanced construct for adding conditions that are used to control the state. The state control construct can allow dependent Action Controls to execute synchronously and asynchronously when its control structure returns true.

function cb_CheckConditionExtension(evt, Action, Control)
{
    switch (Action)
    {
        case "40": return (Control == "Hello");
    }
}
Enter fullscreen mode Exit fullscreen mode

Returning null when using timed conditions causes us to exit the condition.

Example

[web-forms]
{et={FirstValue}|{SecondValue}
sw{InputPlace}={Width}
Enter fullscreen mode Exit fullscreen mode

Server Code

form.IsEqualTo("500", Fetch.Saved("my-key"));
form.SetWidth("<form>", 300);
Enter fullscreen mode Exit fullscreen mode

Result

[web-forms]
{et=500|@clmy-key
sw<form>=300px
Enter fullscreen mode Exit fullscreen mode

Here we have added a new command to check whether the entered number is a prime number or not.

{41={Value}
Enter fullscreen mode Exit fullscreen mode

The following codes also interpret the above command.

function cb_CheckConditionExtension(evt, Action, Control)
{
    switch (Action)
    {
        case "40": return (Control == "Hello"); break;
+       case "41":
+           if (Control <= 1)
+               return false;
+           if (Control === 2)
+               return true;
+           if (Control % 2 === 0)
+               return false;

+           const sqrt = Math.sqrt(num);
+           for (let i = 3; i <= sqrt; i += 2)
+               if (num % i === 0)
+                   return false;

+           return true;
    }
}
Enter fullscreen mode Exit fullscreen mode

Server code

form.AddLine("{41", "59");
Enter fullscreen mode Exit fullscreen mode

Action Control result

[web-forms]
{41=59
Enter fullscreen mode Exit fullscreen mode

Conclusion

With the introduction of the Extension section in version 1.9 of WebFormsJS, developers can add new behaviors and custom commands without changing the core of the library.
WebFormsJS takes an important step towards modularizing the WebForms Core architecture with Extensions. This feature is invaluable for teams using WebForms Core, as it allows them to extend client-side behavior in a customized and controlled manner, without having to worry about changes to the lower layers of the system.

Top comments (0)