B4J Tutorial [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 MiniHtml object and chain it's methods to generate the attributes and finally output the object as String.

Advantages

• Type-safe or more structured way to build HTML compared to raw strings
• Easier to maintain and refactor web-generation code in B4X
• Integrates well with any CSS frameworks
• Integrates well with any JavaScript frameworks
• Works well with HTMX and AlpineJS to build interactive front-ends without a heavy front-end framework

Ideal Scenarios when

• we want to stay within B4X ecosystem
• building server-side web apps using B4J
• generating email HTML templates
• prototyping simple web UIs via B4X code

In other words, we can:

1. Use B4J as a single IDE for both backend and frontend logic
2. Use B4J server as live development server
3. Avoid B4J IDE auto-capitalize some keywords inside String Literals which will break JavaScripts
4. Easily use B4X to temporary comment out certain part of code
5. Focus on writing in B4X mindset
6. Direct access and mix the tag objects with B4X code

Create MiniHtml object

1. Add this sub to our project.
   

   Sub CreateTag (Name As String) As MiniHtml
       Dim tag1 As MiniHtml
       tag1.Initialize(Name)
       Return tag1
   End Sub

2. Now we can use it to create new tags.
3. To create a div tag, create a new sub as follow:
   

   Sub Div As MiniHtml
       Return CreateTag("div")
   End Sub

4. Now we can create a div tag using Div sub.
   

   Dim div1 As MiniHtml = Div.up(body1)
   div1.cls("d-flex align-items-center")
   div1.sty("height: 100vh")

5. It is recommend to call .up() once we have created a new MiniHtml object.
6. Exceptional case for not calling .up() is when we are creating a reusable sub that return the object.
7. We can chain more methods but it is more cleaner to make new method calls on new line of code.

Add to another MiniHtml object

1. We can call .up() method to add the current object to an existing MiniHtml object as it's child.
   

   Dim div1 As MiniHtml = Div.up(body1)

2. In this code, div1 will be added to the body1 children list.
3. The parent's tag will close itself.

Return the object as String

1. Calling .build will generate and return the object as HTML text.
   

   body1.build

2. The output will look like this:
   

   <body>
       <div class="d-flex align-items-center" style="height: 100vh">
       </div>
   </body>

Use in ServletResponse

1. We can also use .Append to add raw String to the object like using StringBuilder.
   

   Private Sub ShowIndexPage
       Dim doc As MiniHtml
       doc.Initialize("")
       doc.Append(IndexPage.build)
       Response.Write(doc.ToString)
   End Sub

 

[aeric]

Multiple ways of creating and adding child tag​

Style 1 (recommended)​

Assign to a new object once it is created.
In this way, div2 can be further chain with more methods.

Dim div2 As MiniHtml = Div.up(div1)
div2.cls("text-primary")
div2.text("Multiple lines")

This is clear that we have a new div2 tag for adding more methods or properties to itself.

Style 2​

The object is created without assigning to an object.
We still can chain other methods or properties on the same line.

Div.up(div1).text("One line")

Chaining other method is applying to the newly added child tag, not div1.
This is not useful because we cannot use this object again on next line.

Style 3​

Use parent to add new child.
This method can be confusing because the child tag is returned.

div1.add(Div).text("One line")

Chaining other method is applying to the newly added child tag, not div1.
Similar to Style 2, this method is not useful because we cannot use this object again on next line.

 

[aeric]

Tutorial is now updated based on MiniHtml v2.00
Edit: It is now updated to MiniHtml V3+

 

[Mashiane]

Beautiful.

 

[aeric]

Finding a parent to add more child​

If we have already built a page or component tree as MiniHtml, it is difficult to trace back the multi-levels of MiniHtml tags to find the parent tag we want to add more child tag.

Method 1 - using Children​

If we know the tag is the n-th child then we can insert a new MiniHtml to the list of Children.
Let say <html> tag's first child is <head> and we want insert another tag such as comment before <head>, we can use InsertAt.

Dim main1 As MainView 'class
main1.Initialize
main1.LoadContent(ContainerContent)
Dim page1 As MiniHtml = main1.Render

Dim commment As String = " Generated by MiniHTML3 "
Dim cmt As MiniHtml = MH.CreateTag("").text($"<!--${commment}-->"$)
'Prepend comment before head tag
page1.Children.InsertAt(0, cmt)

Method 2 - using ChildByIndex (or child)​

Similar to Children, we must know the tag is the n-th child of it's parent.
There is a possible risk this function returns null.

Dim tr1 As MiniHtml = CreateOrReadFromCache("Table Row")
tr1.child(0).text2(row.Get("id"))
tr1.child(1).text2(row.Get("name"))

Method 3 - using ChildById​

If we knew the unique id of the tag, it is easier to find the tag.

page1.ChildById("user_name").text(username)

Method 4 - using ChildByName​

We can find the first tag by name using deep search. For example, we have only 1 table in the page.
We can find the <tbody> tag to add more rows.

Dim table1 As MiniHtml = CreateOrReadFromCache("Product Table")
Dim tbody1 As MiniHtml = table1.ChildByName("tbody")

Method 5 - using ChildByClass​

We can find the first tag which is having the specified classes using deep search. Usually useful to find Bootstrap navbar, card or container.

Dim cardbody1 As MiniHtml = page1.ChildByClass("card-body")

Tips:​

1. It is easier to use Method 3, 4 and 5 to find a parent tag.
2. However it is common the project unable to find the correct tag and returning null.
3. We can test it first whether it is returning a MiniHtml object.
   Otherwise, we will encounter errors and difficult to debug.
   

   Dim nav1 As MiniHtml = page1.ChildByClass("navbar-nav")
   MH.NavLinkItem("Home", "/", "bi bi-house me-2", "Home").up(nav1)

   Only add a child tag if we able to find the parent.
   

   Dim nav1 As Object = page1.ChildByClass("navbar-nav")
   If Initialized(nav1) Then
       MH.NavLinkItem("Home", "/", "bi bi-house me-2", "Home").up(nav1)
   End If

4. Use MH helper class to keep small reusable components.