B4J Library [B4X][Web] MiniHtml v2

Version: 2.00

Generate type safe HTML tags using B4X.

GitHub: https://github.com/pyhoon/MiniHtml2-B4X

Tutorial: https://www.b4x.com/android/forum/threads/web-minihtml-quick-tutorial.169429/

Reason for a new version:
The previous version used modules as a shortcut to create Tag object.
The modules name has some conflicts with other libraries such as p for period and Tr for TextReader.

Code Generator Tool: https://www.b4x.com/android/forum/threads/minihtml2-code-generator.170204/

Note: This library is not backward compatible with code generated with MiniHtml library v0.XX.
Older version: https://www.b4x.com/android/forum/threads/b4x-web-minihtml.158846/

 

[aeric]

Current release 2.00-alpha is still under development. It is created in a few hours without thoroughly tested.

This version is not backward compatible with previous version which is currently v0.90

Key differences from previous version are:

1. MiniHtml object/class instead of Tag.
2. No modules for quick tag creation.
3. You need to initialize the object first.
4. However, you can create a reusable function named CreateTag.
5. This is more flexible because you can name the CreateTag function to any other name you like, eg NewTag.
6. Many functions are removed so it is more cleaner and lightweight
7. No Bootstrap data, Htmx or AlpineJS functions
8. Smaller file size
9. Less conflicts with other libraries or variables name
10. Promote more readable code practice

 

[aeric]

No tutorial is shared at the moment but you can check the GitHub project and run the EndsMeet server example.

There is an example in /source/Index.bas

    Dim body1 As MiniHtml = CreateTag("body").up(html1)
    Dim div1 As MiniHtml = CreateTag("div").up(body1)
    div1.cls("d-flex align-items-center")
    div1.sty("height: 100vh")
    Dim div2 As MiniHtml = CreateTag("div").up(div1)
    div2.sty("margin: auto")

    Dim div3 As MiniHtml = CreateTag("div").up(div2)
    div3.attr("id", "modals-here")
    div3.cls("modal modal-blur fade")
    div3.sty("display: none")
    div3.attr("aria-hidden", "false")
    div3.attr("tabindex", "-1")

 

[peacemaker]

Pardon, stupid dummy's question: isn't the aim of the lib to allow building HTML by "dummies" with minimal HTML tag knowledge ?
Like "create a block", "centered", "max width = 77%", "white background color", "green text of 14 size" ...

 

[aeric]

isn't the aim of the lib to allow building HTML by "dummies" with minimal HTML tag knowledge ?
Like "create a block", "centered", "max width = 77%", "white background color", "green text of 14 size" ...

My answer is no.

For dummy web designers, they can use any existing HTML templates created by another developer.

I am also not good in frontend design or write JavaScript.

By using this library, I can convert any nice template which works perfectly into B4X code.
Choose a template which is already making use of other CSS library or frameworks such as Bootstrap and AlpineJS.

With B4X code, I am not switching my mind into html files.

B4J allows me to comment any line of codes and reusing some functions.

This library generates html output that avoid missing or extra html closing tags. The output is always beautiful and perfect.

I can't say it can minimize html tags. It only make me feel comfortable writing in B4X.

You can also check this tutorial but it is for version 0.x

[Web] MiniHtml quick tutorial

A New Paradigm Shift MiniHtml is a B4X library to create html markup. Instead of writing html using opening and closing tags, we declare tag object and chaining it's methods to generate the attributes and finally output the object as String. Below is what ChatGPT understandings of this library...

www.b4x.com

 

[aeric]

Some functions from Html module in MiniHtml v0.90 will be available in MiniHtml class of MiniHtml2 library.
Document class in MiniHtml v0.90 will be removed and some of the functions will be merged into MiniHtml class of MiniHtml2 library.

Conclusion:
MiniHtml2 library only contains 2 classes; MiniHtml and MiniHtmlParser.

 

[aeric]

MiniHtml2 Code Generator

GitHub: https://github.com/pyhoon/MiniHtml-Code-Generator Latest updates: There is now a text input to input the sub name on the top left. By default, it is set to "GeneratePage". The Auto checkbox when checked changes the sub name to "" and disable the text input. This will produce the output...

www.b4x.com

 

[aeric]

Current release 2.00-beta

Some important additions:

• getAttributes As Map
• setAttributes (keyvals As Map)
• getChildren
• setChildren (Children As List)
• Child (tagIndex As Int) As MiniHtml
• ChildById (value As String) As MiniHtml
• ChildByName (value As String) As MiniHtml
• ConvertToBytes As Byte()
• ConvertFromBytes (Buffer() As Byte) As MiniHtml
• ConvertToMiniHtml (node1 As HtmlNode) As MiniHtml

 

[aeric]

Version 2.00 is now released.

Note: The library is now renamed to MiniHtml.b4xlib (not MiniHtml2.b4xlib)

 

[aeric]

Previous tutorial is updated.
https://www.b4x.com/android/forum/threads/web-minihtml-quick-tutorial.169429/