B4J Library [B4X] MiniHTML4

Version 4.00
GitHub: https://github.com/pyhoon/MiniHTML4

MiniHTML library for B4X — a fluent HTML builder for B4J/B4A/B4i.

Overview​

MiniHTML4 lets you construct HTML documents programmatically in B4X using an object-oriented, chaining API. Instead of concatenating strings, you build a tree of MiniHtml tag objects, then call build to render the final HTML string.

 

[aeric]

Migration Guide — MiniHTML v3 → v4​

Please read:
https://github.com/pyhoon/MiniHTML4/blob/main/MIGRATION.md

 

[aeric]

In short, V4 removed many redundant methods, thanks to the new feature of B4J v10.7, optional parameters.

 

[William Lancee]

I am experimenting with MiniHTML4. I downloaded Library and selected in B4J Pages IDE
I am having some trouble with the just creating a simple html page. I had no problem with earlier versions - but I guess I don't know what all the defaults are.
Could you post one or more examples of using version 4 please.

 

[aeric]

I am experimenting with MiniHTML4. I downloaded Library and selected in B4J Pages IDE
I am having some trouble with the just creating a simple html page. I had no problem with earlier versions - but I guess I don't know what all the defaults are.
Could you post one or more examples of using version 4 please.

Hi William,
Thanks for testing MiniHTML4.

This version is not backward compatible to previous version.

You need to follow the Migration Guide posted in post #2.

To create a simple html page, follow these steps:

1. Add MiniHTML (v4) and MiniJS to a new project.
2. Create a Code Module and name it MH.
3. Inside MH.bas, after the line Sub Process_Globals, type "help" to activate the code snippet for "MiniHTML Helper".
4. Ignore the highlighted placeholders, just press Enter.
5. In Main, create a sub call BuildPage.
6. Copy the example code from README.md Quick Start section into BuildPage.
7. Call BuildPage sub from Appstart.
8. Find index.html inside Objects folder.

Sub BuildPage
    ' Build a simple HTML page
    Dim html1 As MiniHtml = MH.Html
    Dim head1 As MiniHtml = MH.Head.up(html1)
    MH.Title.up(head1).text("Hello")
    Dim body1 As MiniHtml = MH.Body.up(html1)
    Dim div1 As MiniHtml = MH.Div.up(body1)
    div1.cls("container")
    div1.text("Hello World!")
    File.WriteString(File.DirApp, "index.html", html1.build)
End Sub

 

[William Lancee]

I am about to retire for the day (11pm here).

Thanks for your response.
I am looking at how easy it is transform my generic text file to HTML.
https://www.b4x.com/android/forum/t...layout-conversion-library.172087/post-1052344

My first results are very promising. I use your build method on the map I create html from the conversion algorithm results.

After sleep I can look at how to package this.

William.

 

[aeric]

I had no problem with earlier versions - but I guess I don't know what all the defaults are.

Basically V4 is very similar to V3.
I thought V4 is a cleaner version by using the default parameters. Especially it is used in the Helper module (MH.bas)

My first results are very promising. I use your build method on the map I create html from the conversion algorithm results.

I never tested but as far as I concern, the FromMap (or FromJson) to MiniHtml to build html is still remaining the same.

 

[William Lancee]

You're right, for this I only needed MiniHTML (any version).
The helper and MiniJS modules are not needed for this.

It works quite well, but had to revise WiLXLayouts to expose two more methods.
I also discovered that I was wrong when I thought that the Main view was not needed in the generic txt file.
I have to do a little more work on WiLXLayouts.
I will include this translation to HTML as an example when I post my revisions - in a day or two.

Your MiniHTML library is a beautiful thing.

This is the generic layout text:

    Dim textLayout As String = $"
'________________________________________
name=*    type=Main
width=1000
height=1000
baseColor=0xFFFFDDDD
title="Test from Layout to HTML using MiniHTML"

'________________________________________
name=Pane5    type=Panel
eventName=Pane5
enabled=true    visible=true

width=700    fromLeft=350
height=120    fromTop=250
    
baseColor=White

borderWidth=3    borderColor=Blue    borderRadius=3

'________________________________________
name=Label5    type=Label
parent=Pane5    eventName=Label5
enabled=true    visible=true
    
width=*    fromLeft=10    fromRight=10
height=*    fromTop=10    fromBottom=10
    
baseColor=Blue
    
textContent="Popular Test\nThe Quick Brown Fox Jumped Over The Lazy Dog"
fontColor=Blue    fontSize=20
vAlign=CENTER    hAlign=CENTER    wordWrap=false
    "$

Here is the section of code related to the translation:

    Dim convert As WiLConverter
    convert.initialize(False)
    
    'This section and its helper subs will expand quite a bit for all the attributes, inline style, and content stuff
    Dim viewMap As Map = convert.parseVariant(variantList)
    Dim mainMap As Map = viewMap.Remove("*")

    'Translate the properties of the view maps to HTML terms
    Dim translatedMaps As Map = CreateMap()
    For Each viewName As String In viewMap.Keys
        Dim propMap As Map = addLowerCase(viewMap.Get(viewName))

        'translateView is the sub that does item by item conversion - I omitted it here (it is pretty boring)
        translatedMaps.Put(viewName, translateView (propMap, viewMap, mainMap))   
    Next
    
    'It isn't hard to build the generic view tree - it is a utility method of WiLConverter
    Dim viewTree As Map = convert.mapToTree(translatedMaps)

    'We do need to convert the htmtag property of the root and its children (recursively)
    Dim lst As List = emptyList
    For Each vwname As String In viewTree.Keys
        Dim viewMap As Map = viewTree.Get(vwname)
        lst.Add(convertToNew(viewMap))
    Next
    
    'add the html - head - body containers and body contents to a miniHTM map - using the HM helper code module works too
    Dim children As List = emptyList

    Dim headElements As List = emptyList
    headElements.Add(CreateMap("title": mainMap.Get("title").as(String).replace(QUOTE,"")))
    children.Add(CreateMap("head": CreateMap("children": headElements)))

    Dim bodyElements As List = emptyList
    bodyElements.Add(lst.Get(0))
    Dim color As String = mainMap.Get("basecolor")
    If color<> "" Then
        If color.StartsWith("0x") Then color = "#" & color.SubString(4).toLowerCase
        Dim colstr As String = $"background-color: ${color};"$
        children.Add(CreateMap("body": CreateMap("style": colstr, "children": bodyElements)))
    Else   
        children.Add(CreateMap("body": CreateMap("children": bodyElements)))
    End If
    
    Dim htmlMap As Map = CreateMap("html": CreateMap("lang": "en", "children": children))
    
    'use MiniHTML to do the heavy lifting
    Dim mht As MiniHtml
    mht.initialize("")
    File.WriteString(File.DirApp, "test.htm", mht.fromMap(htmlMap).build)

And this is the HTML String

#if html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test from Layout to HTML using MiniHTML</title>
  </head>
  <body style="background-color: #ffdddd">
    <div id="Pane5" class="panel" style="position: absolute; left: 350px; top: 250px; width: 700px; height: 120px; background-color: White; border: 3px solid Blue; border-radius: 10px">
      <p id="Label5" class="label" style="position: relative; left: 10px; top: 10px; width: 680px; height: 100px; color: Blue; font-size: 20pt; font-family: Arial; text-align: center">Popular Test<BR>The Quick Brown Fox Jumped Over The Lazy Dog</p></div>
  </body>
</html>
#end if