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
}
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>
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()))
}
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>`)
}
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)
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>
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
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)