wfc

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

[WebForms Core](https://github.com/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:

```html
<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`:

```elixir
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:

```elixir
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:

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

changes the form background color, while:

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

disables the submit button.

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

```elixir
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:

```elixir
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:

```elixir
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:

```html
<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](https://github.com/webforms-core/Web_forms) is available in the WebForms Core repository.

**WebForms Core is a technology owned and developed by Elanat.**

Official website: [Elanat](https://elanat.net)  
WebForms Core page: [WebForms Core](https://elanat.net/webforms-core)
WebForms Core repositories: [GitHub — WebForms Core](https://github.com/webforms-core)