DEV Community

Cover image for WebForms Core Technology in Rust, Ruby, Swift, GO, R, Elixir
elanatframework
elanatframework

Posted on

WebForms Core Technology in Rust, Ruby, Swift, GO, R, Elixir

#go #rust #ruby #swift

This article is a continuation of the previous article. In the previous article, we explained the WebForms Core technology completely, please read the previous article completely before reading this article.

You can see the previous article in the link below:
https://dev.to/elanatframework/webforms-core-technology-in-python-php-java-nodejs--2i65

Currently, WebForms Core technology is available in 6 programming languages ​​including Rust, Ruby, Swift, GO, R and Elixir.

Rust (Actix-web framework)

To use WebForms Core, first copy the WebForms class file in below link to your project. Then create a new View file similar to the one below.

Rust WebForms class link:
https://github.com/elanatframework/Web_forms_classes/blob/elanat_framework/rust/WebForms.rs

View file

use actix_web::{web, App, HttpResponse, HttpServer, Responder};
use actix_web::middleware::Logger;

#[derive(Debug, Deserialize)]
struct FormData {
    txt_name: String,
    txt_backgroundcolor: String,
    txt_fontsize: i32,
    btn_setbodyvalue: Option<String>,
}

async fn index() -> HttpResponse {
    let html = r#"
    <!DOCTYPE html>
    <html>
    <head>
      <title>Using WebForms Core</title>
      <script type="text/javascript" src="/script/web-forms.js"></script>
    </head>
    <body>
        <form method="post" action="/submit" >
            <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>
    "#;

    HttpResponse::Ok()
       .content_type("text/html")
       .body(html)
}

async fn submit_form(form: web::Form<FormData>, web_form: web::Data<WebForms>) -> impl Responder {
    let name = &form.txt_name;
    let background_color = &form.txt_backgroundcolor;
    let font_size = form.txt_fontsize;

    web_form.set_font_size(InputPlace::tag("form"), font_size);
    web_form.set_background_color(InputPlace::tag("form"), background_color.clone());
    web_form.set_disabled(InputPlace::name("btn_SetBodyValue"), true);
    web_form.add_tag(InputPlace::tag("form"), "h3");
    web_form.set_text(InputPlace::tag("h3"), format!("Welcome {}!", name));

    HttpResponse::Ok().body(web_form.response())
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    let web_form = WebForms::new();

    HttpServer::new(move || {
        App::new()
            .app_data(web::Data::new(web_form.clone()))
            .wrap(Logger::default())
            .route("/", web::get().to(index))
            .route("/submit", web::post().to(submit_form))
    })
    .bind("127.0.0.1:8080")?
    .run()
    .await
}
Enter fullscreen mode Exit fullscreen mode

In the upper part of the View file, it is first checked whether the submit button has been clicked or not, if it has been clicked, an instance of the WebForms class is created, then the WebForms methods are called, and then the response method is printed on the screen, and other parts Views are not displayed. Please note that if the submit button is not clicked (initial request), the view page will be displayed completely for the requester.

As you can see, the WebFormsJS script has been added in the header section of the View file above.

The latest version of the WebFormsJS script is available through the link below:
https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

Ruby (Sinatra framework)

To use WebForms Core, first copy the WebForms class file in below link to your project. Then create a new View file similar to the one below.

Ruby WebForms class link:
https://github.com/elanatframework/Web_forms_classes/blob/elanat_framework/ruby/WebForms.rb

View file

require 'sinatra'
require_relative 'WebForms'

post '/' do
  if params['btn_SetBodyValue']
    name = params['txt_Name']
    background_color = params['txt_BackgroundColor']
    font_size = params['txt_FontSize'].to_i

    form = WebForms.new

    form.set_font_size(InputPlace.tag('form'), font_size)
    form.set_background_color(InputPlace.tag('form'), background_color)
    form.set_disabled(InputPlace.name('btn_SetBodyValue'), true)

    form.add_tag(InputPlace.tag('form'), 'h3')
    form.set_text(InputPlace.tag('h3'), "Welcome #{name}!")

    return form.response
  end

  erb :form
end

__END__

@@form
<!DOCTYPE html>
<html>
<head>
  <title>Using WebForms Core</title>
  <script type="text/javascript" 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>
Enter fullscreen mode Exit fullscreen mode

In the upper part of the View file, it is first checked whether the submit button has been clicked or not, if it has been clicked, an instance of the WebForms class is created, then the WebForms methods are called, and then the response method is printed on the screen, and other parts Views are not displayed. Please note that if the submit button is not clicked (initial request), the view page will be displayed completely for the requester.

As you can see, the WebFormsJS script has been added in the header section of the View file above.

The latest version of the WebFormsJS script is available through the link below:
https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

Swift (Vapor framework)

To use WebForms Core, first copy the WebForms class file in below link to your project. Then create a new View file similar to the one below.

Swift WebForms class link:
https://github.com/elanatframework/Web_forms_classes/blob/elanat_framework/swift/WebForms.swift

View file

import Vapor

func routes(_ app: Application) throws {
    app.post { req -> Response in
        guard let data = try? req.content.decode(FormData.self) else {
            throw Abort(.badRequest)
        }

        let name = data.txt_Name
        let backgroundColor = data.txt_BackgroundColor
        let fontSize = data.txt_FontSize

        let form = 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)!")

        return form.response()
    }
}

struct FormData: Content {
    var txt_Name: String
    var txt_BackgroundColor: String
    var txt_FontSize: Int
}

func renderForm() -> String {
    return """
    <!DOCTYPE html>
    <html>
    <head>
      <title>Using WebForms Core</title>
      <script type="text/javascript" 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.get { req in
    return Response(status: .ok, body: .init(string: renderForm()))
}
Enter fullscreen mode Exit fullscreen mode

In the upper part of the View file, it is first checked whether the submit button has been clicked or not, if it has been clicked, an instance of the WebForms class is created, then the WebForms methods are called, and then the response method is printed on the screen, and other parts Views are not displayed. Please note that if the submit button is not clicked (initial request), the view page will be displayed completely for the requester.

As you can see, the WebFormsJS script has been added in the header section of the View file above.

The latest version of the WebFormsJS script is available through the link below:
https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

GO

To use WebForms Core, first copy the WebForms class file in below link to your project. Then create a new View file similar to the one below.

Go WebForms class link:
https://github.com/elanatframework/Web_forms_classes/blob/elanat_framework/go/WebForms.go

View file

package main

import (
    "fmt"
    "net/http"
    "strconv"
)

func main() {
    http.HandleFunc("/", handleForm)
    http.ListenAndServe(":8080", nil)
}

func handleForm(w http.ResponseWriter, r *http.Request) {
    if r.Method == http.MethodPost {
        name := r.FormValue("txt_Name")
        backgroundColor := r.FormValue("txt_BackgroundColor")
        fontSize, err := strconv.Atoi(r.FormValue("txt_FontSize"))
        if err != nil {
            fontSize = 16
        }

        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+"!")

        fmt.Fprint(w, form.response())
        return
    }

    fmt.Fprint(w, `<!DOCTYPE html>
<html>
<head>
  <title>Using WebForms Core</title>
  <script type="text/javascript" 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>`)
}
Enter fullscreen mode Exit fullscreen mode

In the upper part of the View file, it is first checked whether the submit button has been clicked or not, if it has been clicked, an instance of the WebForms class is created, then the WebForms methods are called, and then the response method is printed on the screen, and other parts Views are not displayed. Please note that if the submit button is not clicked (initial request), the view page will be displayed completely for the requester.

As you can see, the WebFormsJS script has been added in the header section of the View file above.

The latest version of the WebFormsJS script is available through the link below:
https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

R (Shiny framework)

To use WebForms Core, first copy the WebForms class file in below link to your project. Then create a new View file similar to the one below.

R WebForms class link:
https://github.com/elanatframework/Web_forms_classes/blob/elanat_framework/r/WebForms.R

View file

library(shiny)

ui <- fluidPage(
    titlePanel("Using WebForms Core"),
    tags$head(
        tags$script(src = "/script/web-forms.js")
    ),
    sidebarLayout(
        sidebarPanel(
            textInput("txt_Name", "Your Name"),
            numericInput("txt_FontSize", "Set Font Size", value = 16, min = 10, max = 36),
            textInput("txt_BackgroundColor", "Set Background Color"),
            actionButton("btn_SetBodyValue", "Click to send data")
        ),
        mainPanel(
            uiOutput("response")
        )
    )
)

server <- function(input, output, session) {

    observeEvent(input$btn_SetBodyValue, {
        Name <- input$txt_Name
        BackgroundColor <- input$txt_BackgroundColor
        FontSize <- as.numeric(input$txt_FontSize)

        form <- 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"), paste("Welcome", Name, "!"))

        output$response <- renderUI({
            HTML(form$response())
        })
    })
}

shinyApp(ui = ui, server = server)
Enter fullscreen mode Exit fullscreen mode

In the upper part of the View file, it is first checked whether the submit button has been clicked or not, if it has been clicked, an instance of the WebForms class is created, then the WebForms methods are called, and then the response method is printed on the screen, and other parts Views are not displayed. Please note that if the submit button is not clicked (initial request), the view page will be displayed completely for the requester.

As you can see, the WebFormsJS script has been added in the header section of the View file above.

The latest version of the WebFormsJS script is available through the link below:
https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

Elixir (Phoenix framework)

To use WebForms Core, first copy the WebForms class file in below link to your project. Then create a new View file similar to the one below.

Elixir WebForms class link:
https://github.com/elanatframework/Web_forms_classes/blob/elanat_framework/elixir/WebForms.ex

View file

<!DOCTYPE html>
<html>
<head>
  <title>Using WebForms Core</title>
  <script type="text/javascript" src="/script/web-forms.js"></script>
</head>
<body>
  <form method="post" action="<%= Routes.form_path(@conn, :create) %>">

    <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>
Enter fullscreen mode Exit fullscreen mode

Also, create a Controller class file as follows.

Controller class

defmodule MyAppWeb.FormController do
  use MyAppWeb, :controller

  alias MyApp.WebForms

  def index(conn, _params) do
    render(conn, "index.html")
  end

  def create(conn, %{"txt_Name" => name, "txt_BackgroundColor" => background_color, "txt_FontSize" => font_size}) do
    font_size = String.to_integer(font_size)

    form = %WebForms{}

    form =
      form
      |> WebForms.set_font_size(InputPlace.tag("form"), 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")
      |> WebForms.set_text(InputPlace.tag("h3"), "Welcome #{name}!")

    response = WebForms.response(form)

    conn
    |> put_flash(:info, response)
    |> redirect(to: "/")
  end
end
Enter fullscreen mode Exit fullscreen mode

In the upper part of the View file, it is first checked whether the submit button has been clicked or not, if it has been clicked, an instance of the WebForms class is created, then the WebForms methods are called, and then the response method is printed on the screen, and other parts Views are not displayed. Please note that if the submit button is not clicked (initial request), the view page will be displayed completely for the requester.

As you can see, the WebFormsJS script has been added in the header section of the View file above.

The latest version of the WebFormsJS script is available through the link below:
https://github.com/elanatframework/Web_forms/blob/elanat_framework/web-forms.js

Please share your success or failure in implementing WebForms Core in the comments section.

Top comments (0)

Read next

paradeto profile image

Implement React v18 from Scratch Using WASM and Rust - [27] Implement useTransition

ayou -

ali-alkhawaja profile image

How to set-up Ruby & Gems paths - Ruby snap package version

Ali Al Khawaja -

jetthoughts-dev profile image

Rails 8: Introducing the New Default Asset Pipeline – Propshaft

JetThoughts Dev -

alhiane profile image

ValidatorKit: Simplify iOS Data Validation with Swift

Alhiane Lahcen -