WebForms Core is a modern and high-level technology for managing DOM elements in HTML from the server. WebForms Core is now available to everyone on the Ruby programming language. Elanat has updated the WebForms class for Ruby with the latest version of WebFormsJS, 1.6. The WebForms class on the server and the WebFormsJS library on the client constitute the WebForms Core technology.
WebForms Core technology supports all HTML events, so it works very well in creating highly interactive and dynamic user interfaces. It supports real-time updates and provides a pure user experience. Using WebForms Core technology, you will experience the benefits of back-end programming and the benefits of front-end programming together.
It does not matter whether the scale of the application is large or small, because projects under WebForms Core technology can be configured as both CSR and SSR, simplifying the development of large and small projects. WebForms Core handles large-scale applications with complex state management, more efficiently than front-end frameworks.
Download Links
You can download the WebForms class for the Go programming language from the link below.
To download the latest version of WebFormsJS, visit the following link.
Example: Using WebForms Core in Sinatra
In this example, using WebForms Core technology, we detect and respond to two events on an HTML page: click and mouse enter. First, an example is designed that displays the rest of the text when the user clicks. Then, when the user moves the mouse over the paragraph, the paragraph is deleted and its text is placed in a textarea.
In the view page below, a variable named "@web_forms_tag" has been added. In this variable, the basic WebForms Core commands are added. In WebForms Core technology, the server sends commands to the client (WebFormsJS). The name of these commands is action controls which are sent from the server to the client in INI format. If you want to manipulate the original HTML with WebForms Core technology, you either need to add the response tag to the HTML page using the "export_to_web_forms_tag" method or make another request to the server after the page loads. So in this example, we wanted to manage the span tag and we needed the response tag.
View (index.erb)
<!DOCTYPE html>
<html>
<head>
<title>WebForms Core</title>
<script type="text/javascript" src="/script/web-forms.js"></script>
<Style>
textarea
{
width:500px;
height:200px
}
</style>
</head>
<body>
<h1>WebForms Core Technology in Ruby</h1>
<p id="Content1"><%= @content1 %><span> ... Read more</span></p>
<%= @web_forms_tag %>
</body>
</html>
In the Ruby code section, we defined three states:
- First response: This state is for the initial request made by the browser. The HTML page is initialized in it. In this state, the click event is added to display the continuation of the text.
- Read more: This state is for the response created after the user click event. In this state, the mouse entry event is added to display the text in the textarea.
- Set to textarea: This state is for the response created after the user mouse enter event.
Ruby code
require 'sinatra'
require_relative 'WebForms'
TEXT = "WebForms Core is a new technology belonging to Elanat (elanat.net). With the release of WebForms Core, Elanat offers a new approach to managing HTML elements on the server side. In this technology, the WebFormsJS library on the client side renders the control action sent from the server and then applies it to the HTML page. In this technology, processing is done on the client side and the server sends an INI struct as a response to the client. Using WebForms Core, there is no need to develop front-end and everything is controlled from the server. This new structure creates a big challenge for front-end frameworks like React, Vue and Angular."
get '/' do
form = WebForms.new
form.set_get_event("Content1|<span>", HtmlEvent.on_click, "/read_more");
form.set_style_with_name_value("Content1|<span>", "cursor", "pointer");
form.set_font_bold("Content1|<span>", true);
@web_forms_tag = form.export_to_web_forms_tag
@content1 = TEXT[0, 50]
erb :index
end
get '/read_more' do
form = WebForms.new
form.add_text("Content1", TEXT[50..-1]);
form.delete("Content1|<span>");
form.set_get_event("Content1", HtmlEvent.on_mouse_enter, "/to_textarea");
form.assign_delay(1)
return form.response
end
get '/to_textarea' do
form = WebForms.new
form.save_text("Content1");
form.delete("Content1");
form.add_tag("<body>", "textarea");
form.set_text("<textarea>", Fetch.saved);
return form.response
end
The GIF image below shows how the above code works.
First response get '/'
To use the WebForms class in Ruby, you need to add the WebForms.rb class path to the Ruby code at the beginning of the code.
require_relative 'WebForms'
The code below is the response to the initial request made by the browser. The HTML page is completely called here. In this code, an instance of the WebForms class is first created, then a click event is added to the span tag to display the continuation of the text in the "/read_more" path. Then, a style is added to the span tag and the font of this tag is made bold.
get '/' do
form = WebForms.new
form.set_get_event("Content1|<span>", HtmlEvent.on_click, "/read_more");
form.set_style_with_name_value("Content1|<span>", "cursor", "pointer");
form.set_font_bold("Content1|<span>", true);
@web_forms_tag = form.export_to_web_forms_tag
@content1 = TEXT[0, 50]
erb :index
end
Using the capabilities of Ruby and the Sinatra framework, only the first 50 characters of the content text are added to the p tag.
Note: When we use WebForms Core technology, we can do web development in both SSR and CSR. Here, we could have initialized the p tag using the
set_textmethod in the WebForms class. We could also have added the style in the HTML as usual instead of using the WebForms class methods.
Finally, because we want to use the WebForms class in the initial request, we initialize the "@web_forms_tag" variable with the export_to_web_forms_tag method.
Read more get '/read_more'
The code below is created to respond to the request after the user clicks on the span tag. In this section, the rest of the text is added to the p tag and the span tag is removed a little. Next, the mouse enter event is added to the p tag to display the text in the textarea at the path "/to_textarea" with a 1 second delay; this delay is added to better demonstrate the performance of the mouse enter event. Finally, the response method sends the response to the server.
get '/read_more' do
form = WebForms.new
form.add_text("Content1", TEXT[50..-1]);
form.delete("Content1|<span>");
form.set_get_event("Content1", HtmlEvent.on_mouse_enter, "/to_textarea");
form.assign_delay(1)
return form.response
end
Set to textarea get '/to_textarea'
The code below is also created to respond to the request after the user's mouse enter event on the p tag. In this section, the text content of the p tag is first saved temporarily and then this tag is deleted. Next, a textarea tag is added to the body tag and then the saved content inside the textarea tag is added. Finally, the response method sends the response to the server.
get '/to_textarea' do
form = WebForms.new
form.save_text("Content1");
form.delete("Content1");
form.add_tag("<body>", "textarea");
form.set_text("<textarea>", Fetch.saved);
return form.response
end
Note: Please note that when the HTML page is requested for the first time, if you are using the WebForms class, use the
export_to_web_forms_tagmethod. For secondary requests, use theresponsemethod.
You can get the sample code in link below.
WebForms Class in Ruby Update to WebFormsJS 1.6
Conclusion
WebForms Core technology offers a powerful and modern solution for managing DOM elements from the server in Ruby. With the integration of WebFormsJS on the client side and the updated WebForms class for Ruby, developers can create highly interactive and dynamic user interfaces with ease. The technology supports all HTML events and provides real-time updates, combining the advantages of both back-end and front-end programming.
The provided example demonstrates the practical implementation of WebForms Core in Sinatra, highlighting its capabilities in managing HTML events and updating the UI dynamically. By leveraging the power of Ruby and the Sinatra framework, developers can seamlessly integrate WebForms Core into their projects, enhancing the user experience and streamlining development.
WebForms Core technology in Ruby represents a significant advancement in web development, offering a comprehensive solution for creating responsive and interactive web applications.
Top comments (0)