How to work with WebForms Core in Elixir (Phoenix framework)

WebForms Core can be used with Elixir and the Phoenix framework to create server-controlled interactive web interfaces.

In Phoenix, the WebFormsCore package provides the server-side WebForms classes used to build UI commands. The generated response is executed in the browser by WebFormsJS.

The basic architecture is:

Phoenix Controller → WebForms → Commands → WebFormsJS → HTML DOM

View

Create a Phoenix view containing the HTML form and load the WebFormsJS runtime.

For example, create an index.html.heex file:

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

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

The initial request displays the complete HTML view. When the form is submitted, Phoenix sends the form data to the controller, where WebForms Core generates the commands required to modify the existing HTML DOM.

Controller

Create a controller such as my_controller.ex:

defmodule MyAppWeb.MyController do
  use MyAppWeb, :controller

  alias WebFormsCore.{WebForms, InputPlace}

  def index(conn, _params) do
    render(conn, :index)
  end

  def submit(conn, %{
        "txt_Name" => name,
        "txt_BackgroundColor" => background_color,
        "txt_FontSize" => font_size,
        "btn_SetBodyValue" => _button
      }) do
    form =
      WebForms.new()
      |> WebForms.set_font_size(InputPlace.tag("form"), String.to_integer(font_size))
      |> WebForms.set_background_color(InputPlace.tag("form"), background_color)
      |> WebForms.set_disabled(InputPlace.name("btn_SetBodyValue"), true)
      |> WebForms.add_tag(InputPlace.tag("form"), "h3", nil)
      |> WebForms.set_text(InputPlace.tag("h3"), "Welcome #{name}!")

    text(conn, WebForms.response(form))
  end
end

The controller creates a WebForms instance and adds UI commands to it. These commands are returned to the browser as the WebForms Core response.

For example, the code:

WebForms.set_font_size(InputPlace.tag("form"), String.to_integer(font_size))

generates a command that changes the font size of the <form> element.

Similarly:

WebForms.set_background_color(InputPlace.tag("form"), background_color)

changes the form background color, while:

WebForms.set_disabled(InputPlace.name("btn_SetBodyValue"), true)

disables the submit button.

The following commands add an <h3> element and set its text:

WebForms.add_tag(InputPlace.tag("form"), "h3", nil)
|> WebForms.set_text(InputPlace.tag("h3"), "Welcome #{name}!")

The controller finally returns the generated WebForms Core response:

text(conn, WebForms.response(form))

WebFormsJS receives this response and executes the commands against the browser DOM.

Router

Add routes for the controller to the Phoenix router:

defmodule MyAppWeb.Router do
  use MyAppWeb, :router

  scope "/", MyAppWeb do
    get "/", MyController, :index
    post "/", MyController, :submit
  end
end

The GET / route displays the initial view, while POST / processes the form submission and returns the WebForms Core commands.

WebFormsJS

The WebFormsJS runtime is required in the browser to execute the commands generated by the server.

Load it in the view:

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

WebFormsJS acts as the browser-side executor of WebForms Core commands. It interprets the server response and applies the requested operations to the HTML DOM.

The latest WebFormsJS source is available in the WebForms Core repository.

WebForms Core is a technology owned and developed by Elanat.

Official website: Elanat
WebForms Core page: WebForms Core WebForms Core repositories: GitHub — WebForms Core