B4J Library [B4X][Web] MiniHtml

Version: 0.08

Yet the potential or use cases of this library may be unknown as you can literally write plain HTML and save it as a file.

Example 1:

H1.Text("Hello, World!")

Output:
Hello, World!

<h1>Hello, World!</h1>

Example 2:

Paragraph.up(main1) _
.Text("This is a ") _
.add(Span.Text("red text").addClass("text-danger")) _
.Text(" in a ") _
.add(Bold.text("paragraph"))

Output:
This is a red text in a paragraph

<p>This is a
    <span class="text-danger">red text</span> in a
    <b>paragraph</b>
</p>

Example using HTMX:

HTMX+Bootstrap5+MiniHTML+WebApiUtils+Server

This example uses B4X, specifically MiniHTML library cross over HTMX to generate interactive HTML based on Modal Dialogs in Bootstrap example on HTMX website to demonstrate mix usage of HTMX and Bootstrap 5 javascript served by B4J server through helper functions from WebApiUtils v3 library...

www.b4x.com

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

 

[EnriqueGonzalez]

i once made something very similar but it was easier as you didn't have to think in the end tags.

Basic To Html

Hello! I just recently began building a web with B4J and everything was OK until i found that if i wanted to create 4 pages that were almost identical (for example: same header, menu, etc.) i would need to mantain 4 different html files, without the possibility to merge them gracefully enough...

www.b4x.com

 

[aeric]

i once made something very similar but it was easier as you didn't have to think in the end tags.

Basic To Html

Hello! I just recently began building a web with B4J and everything was OK until i found that if i wanted to create 4 pages that were almost identical (for example: same header, menu, etc.) i would need to mantain 4 different html files, without the possibility to merge them gracefully enough...

www.b4x.com

I wish I didn't need to reinvent the wheel.
Thanks for sharing.
Maybe I can borrow part of your "wheel".

 

[EnriqueGonzalez]

Maybe I can borrow part of your "wheel".

Sure, be my guest!

 

[aeric]

Updated to version 0.03

 

[aeric]

Updated to version 0.04

 

[aeric]

Version: 0.05

What's New:

1. First B4Xlib
2. Added more code modules

 

[aeric]

I uploaded an example.

HTMX+Bootstrap5+MiniHTML+WebApiUtils+Server

This example uses B4X, specifically MiniHTML library cross over HTMX to generate interactive HTML based on Modal Dialogs in Bootstrap example on HTMX website to demonstrate mix usage of HTMX and Bootstrap 5 javascript served by B4J server through helper functions from WebApiUtils v3 library...

www.b4x.com

 

[aeric]

Version: 0.06

What's New:

1. Added more code modules
2. Fix i variable in For loop to support I code module
3. Add Build2
4. Add attr (pass attributes as Map)
5. Add attribute3 (attribute without value e.g required)
6. Add addStyle
7. Add removeStyle
8. Add updateClassAttribute (private)
9. Add updateStyleAttribute (private)
10. Add setParent and getParent for Parent property
11. Add addId
12. Add addName
13. Add LinkCss
14. Add required (attribute without value for text input)
15. Update Build replaces Build(-1)
16. Update add, add2, addTo, addTo2, up, up2, down, down2 by setting Parent
17. Update ClassesAsString
18. Update StylesAsString
19. Update removeClass
20. Update Raw
21. Update Comment

 

[aeric]

Version: 0.07

What's New:

1. Added JSON library as dependency
2. Renamed code modules to avoid conflicts
3. Added new code modules
4. Added AddId for DIV
5. Added cdnScript and cdnScript2
6. Added cdnStyle and cdnStyle2
7. Added some Htmx attributes
8. Update addStyle
9. Update linkCss
10. Renamed code modules with 3 characters or less changed to uppercase
11. Some code simplified
12. Error handling for addClass and addStyle

 

[Mashiane]

Hi, which sub do I use to inject an existing html block?

 

[aeric]

Hi, which sub do I use to inject an existing html block?

You mean raw HTML?
Previously I have Raw and Raw2 subs but renamed in latest version.
I think in most cases, just use Text sub.

Dim block As String = "<p>This is a <b>raw</b> HTML</p>"
div1.add(Html.create("").Text(block)) ' add a block to parent div1

 

[Mashiane]

You mean raw HTML?
Previously I have Raw and Raw2 subs but renamed in latest version.
I think in most cases, just use Text sub.

Yes raw html, ok thanks. Will check it out.

 

[Mashiane]

You mean raw HTML?
Previously I have Raw and Raw2 subs but renamed in latest version.
I think in most cases, just use Text sub.

Dim block As String = "<p>This is a <b>raw</b> HTML</p>"
div1.add(Html.create("").Text(block)) ' add a block to parent div1

Great, I hope you can afford a shortcut like addHTML that will just received the string add. Thanks..

 

[aeric]

Great, I hope you can afford a shortcut like addHTML that will just received the string add. Thanks..

I will think for a good way.

Actually the point of using this MiniHTML is to avoid writing raw HTML.

There is another reason why I say so.
I am trying to integrate this into my Simple HTML Editor as I mentioned here.

I want to make sure the attributes (especially style and class) added into Maps and List correctly.

Any item can be easily added or removed from the "tree" when needed.

 

[EnriqueGonzalez]

Actually the point of using this MiniHTML is to avoid writing raw HTML.

well yes, but raw html is also important, for sure there will be some scenarios that you wont be able to forsee or if you do, you will find the code move convoluted

look how BSS implements it:

Custom Code | Bootstrap Studio

Tutorials and Guides about Bootstrap Studio, the revolutionary web design tool.

bootstrapstudio.io

 

[aeric]

well yes, but raw html is also important, for sure there will be some scenarios that you wont be able to forsee or if you do, you will find the code move convoluted

look how BSS implements it:

Custom Code | Bootstrap Studio

Tutorials and Guides about Bootstrap Studio, the revolutionary web design tool.

bootstrapstudio.io

It is easy to add the raw or plain html.
I already done it.
But I want to proceed to parse the html as a child into inner tags.
I am now trying with Erel's MiniHtmlParser but getting an error.

B4J line: 290
If Input.Contains(\
shell\src\b4j\example\minihtmlparser_subs_0.java:1095: error: incompatible types: input cannot be converted to RemoteObject
if (true) return minihtmlparser._input;};
                               ^
1 error

Edit: I think there is a conflict with my "Input" module.

 

[aeric]

I have resolved variable name in MiniHtmlParser and create a sub to convert HtmlNode to Tag.

Dim loginForm As String = $"<form class="p-4 p-md-5 border rounded-3 bg-body-tertiary">
      <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">Email address</label>
      </div>
      <div class="form-floating mb-3">
        <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
        <label for="floatingPassword">Password</label>
      </div>
      <div class="checkbox mb-3">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
      <hr class="my-4">
      <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
    </form>"$

Dim root As HtmlNode = HtmlParser.Parse(loginForm)
If root.IsInitialized Then
    Dim newTag As Tag = ConvertTagNodeToTag(root.Children.Get(0))
    DIV.up(div2).addClass("col-lg-5 col-md-10 mx-auto").add(newTag)
End If
Return html1.build

 

[Mashiane]

Hi

I was thinking, the structure of a document will always be the same, html, head and body. As a first try on this lib i tried to test of

Sub Class_Globals
    Private mBuilder As StringBuilder
    Private mTabs As Int
    Private mFlat As Boolean
    Public html1 As Tag
    Public head1 As Tag
    Public body1 As Tag
End Sub

Public Sub Initialize(language As String)
    mBuilder.Initialize
    AppendDocType
    html1 = Html.lang(language)
    html1.comment(" generated by MiniHTML ")
    head1 = Head.up(html1)
    head1.meta_preset
    body1 = Body.up(html1)
End Sub

and then

Sub GenerateHtml As String
    Dim html1 As Tag = doc.html1
    Dim head1 As Tag = doc.head1
    Dim body1 As Tag = doc.body1
   
    head1.title("MiniHTML Demo")
    head1.linkcss("css/bootstrap.min.css")
    head1.script("js/bootstrap.bundle.min.js")
    '
    Dim main1 As Tag = Html.create("main").up(body1)
    main1.addClass("container").addStyle("margin-top: 30px")

 

[aeric]

I was thinking, the structure of a document will always be the same, html, head and body. As a first try on this lib i tried to test of

Yes but for general use, we should let it to be very flexible so anytime we can just generate a very simple H1 without any parent tag.
Developer can modify the class/module to their needs.

 

[aeric]

Once this "framework" has become more mature, we can create more web app project templates.