B4J Library [B4J][EasyHTML - Simplified HTML Element Creation] 🚀

What is EasyHTML? EasyHTML is a lightweight and intuitive library designed to simplify the creation of HTML elements using an object-oriented approach. With support for attributes, classes, styles, and even HTMX integration, EasyHTML makes it effortless to generate dynamic HTML structures programmatically.

Features:​

Chainable methods for easy and readable syntax
Support for inline styles, classes, and attributes
HTMX integration for enhanced interactivity
Page builder functionality with PageBuilderHTML class
Generates clean and valid HTML output

Classes and Functions​

EasyHTML (Main Class)​

• Initialize(Element As String): Initializes an HTML element
• AddElement(Item As String): Adds an internal element
• AddClass(Class As String): Adds a CSS class
• AddId(Identificador As String): Sets an ID for the element
• AddAttribute(Key As String, Value As String): Adds a custom attribute
• AddStyle(Property As String, Value As String): Adds an inline CSS style
• HX_GET(Path As String): HTMX GET request
• HX_POST(Path As String): HTMX POST request
• HX_PUT(Path As String): HTMX PUT request
• HX_DELETE(Path As String): HTMX DELETE request
• HX_Target(Selector As String): Defines the HTMX target
• HX_Trigger(Event As String): Sets the HTMX trigger
• HX_Swap(Strategy As String): Defines the HTMX swap strategy
• Mount() As String: Generates the final HTML string

PageBuilderHTML (Page Builder Class)​

• Initialize(): Initializes the page builder
• SetTitle(Name As String): Sets the page title
• AddElement(Item As String): Adds an element to the page body
• AddStyle(Href As String): Adds an external CSS file
• AddInlineStyle(CSS As String): Adds inline CSS
• AddScript(Src As String): Adds an external JavaScript file
• AddInlineScript(JS As String): Adds inline JavaScript
• AddMetaTag(Name As String, Content As String): Adds a meta tag
• SetFavicon(IconPath As String): Sets the page favicon
• Mount() As String: Generates the final HTML structure

Example Usage:​

Dim H1 As EasyHTML
H1.Initialize("h1").AddElement("To-Do App").Mount

Log(H1.ToString)

Download & Installation​

Library and example of use pinned to topic

 

[leozera]

[Reserved for More Information]

This section is currently reserved for additional details. Stay tuned for updates!

 

[leozera]

[Reserved for More Information]

This section is currently reserved for additional details. Stay tuned for updates!

 

[leozera]

[Reserved for More Information]

This section is currently reserved for additional details. Stay tuned for updates!

 

[leozera]

[Reserved for More Information]

This section is currently reserved for additional details. Stay tuned for updates!

 

[leozera]

The idea of using HTMLX is to make the application reactive

 

[jackywuqiang]

It's awesome,but how can i change the html lang?
I can't display Chinese characters now.

 

[leozera]

It's awesome,but how can i change the html lang?
I can't display Chinese characters now.
View attachment 161767

EasyHTML Library Update – New Features!

First of all, I’d like to thank @jackywuqiang for bringing up the question about character encoding! While it wasn’t actually an issue with the library itself (it just needed to be handled on the backend), it gave me the idea to add two new functions. So, thanks!

I'm posting this update as a new reply because I can't edit the main post.

What's New?​

The latest update of EasyHTML introduces two new functions to improve language and character set handling:

SetLang(Lang As String) – Set the language of the page.
SetCharset(Charset As String) – Define the character set.

These additions make it easier to work with multilingual content and different character encodings in HTML.

Handling UTF-8 Encoding in Requests​

Problems with certain characters can be handled in the B4J backend like this:

Dim b() As Byte = req.GetParameter("task").GetBytes("UTF-8")
Dim Task As String = BytesToString(b, 0, b.Length, "ISO-8859-1")

 

[jackywuqiang]

hi,thanks.
I have resolve the problem.
one more thing,can i insert raw HTML?
I use "mycomp.Initialize("").AddElement("<p>This is a <b>raw</b> HTML</p>")" this method, but a little thing that adds to "raw HTML".

 

[leozera]

hi,thanks.
I have resolve the problem.
one more thing,can i insert raw HTML?
I use "mycomp.Initialize("").AddElement("<p>This is a <b>raw</b> HTML</p>")" this method, but a little thing that adds to "raw HTML".
View attachment 161805

EasyHTML Update!

The new update brings an improvement to the Initialize function!

Now, if you pass an empty string in Initialize(""), you can add raw elements using AddElement.

Important: Other functions, except for AddElement, will not work in this mode. After all, the initial idea of the library is to write little or no HTML.

Let me know if you have any questions or suggestions!