B4J Library [Web] [B4X] MiniHtml

Updates​
Version 2.00 is now available​

Version: 0.90

Generate Html with B4X code.
Added HTMX attributes such as hx-get and hx-trigger.

Example 1:
B4X: Copy 
H1.text("Hello, World!")

Output:
Hello, World!
HTML: Copy 
<h1>Hello, World!</h1>

Example 2:
B4X: Copy 
Dim p1 As Tag = Paragraph.text("This is a ")
p1.add(Span.cls("text-danger").text("red text"))
p1.text(" in  a ").add(Bold.text("paragraph"))

Output:
This is a red text in a paragraph
HTML: Copy 
<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 www.b4x.com

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

Attachments

Last edited:
Click to expand...
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 www.b4x.com
 
EnriqueGonzalez said:
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 www.b4x.com
Click to expand...
I wish I didn't need to reinvent the wheel.
Thanks for sharing.
Maybe I can borrow part of your "wheel".
 
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 www.b4x.com
 
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
 
Last edited:
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 said:
Hi, which sub do I use to inject an existing html block?
Click to expand...
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.

B4X: Copy 
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
 
Last edited:
aeric said:
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.

B4X: Copy 
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
Click to expand...
Great, I hope you can afford a shortcut like addHTML that will just received the string add. Thanks..
 
Mashiane said:
Great, I hope you can afford a shortcut like addHTML that will just received the string add. Thanks..
Click to expand...
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.
 
aeric said:
Actually the point of using this MiniHTML is to avoid writing raw HTML.
Click to expand...
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:
bootstrapstudio.io

Custom Code | Bootstrap Studio

Tutorials and Guides about Bootstrap Studio, the revolutionary web design tool.
bootstrapstudio.io bootstrapstudio.io
 
EnriqueGonzalez said:
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:
bootstrapstudio.io

Custom Code | Bootstrap Studio

Tutorials and Guides about Bootstrap Studio, the revolutionary web design tool.
bootstrapstudio.io bootstrapstudio.io
Click to expand...
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.

B4X: Copy 
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.
 

Attachments

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

B4X: Copy 
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="[email protected]">
        <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
 

Attachments

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

Code: Copy 
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

Code: Copy 
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")
 
Mashiane said:
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
Click to expand...
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.
 
Once this "framework" has become more mature, we can create more web app project templates.
 
You must log in or register to reply here.

Similar Threads

aeric
  • Article Article
B4J Library [B4X] MiniHTML4
Replies
8
Views
1K
aeric
aeric
aeric
  • Article Article
B4J Library [B4X] MiniHTML3
Replies
15
Views
4K
aeric
aeric
Abdull Cadre
  • Article Article
Android Code Snippet [B4X] [B4A][B4J] [Snippet] AC_WebBridge - Native HTML/B4X communication
Replies
0
Views
1K
Abdull Cadre
Abdull Cadre
aeric
  • Article Article
B4J Library [Web] [B4X] MiniHtml2
Replies
14
Views
7K
aeric
aeric
Mashiane
Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
7 8 9
Replies
164
Views
124K
bridge1
B
Back
Top