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.
    B4X: 
    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:
    B4X: 
    Sub Div As MiniHtml
    Return CreateTag("div")
End Sub
  4. Now we can create a div tag using Div sub.
    B4X: 
    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.
    B4X: 
    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.
    B4X: 
    body1.build
  2. The output will look like this:
    HTML: 
    <body>
    <div class="d-flex align-items-center" style="height: 100vh">
    </div>
</body>
Use in ServletResponse
  1. We can also use .Write to add raw String to the object like using StringBuilder.
    B4X: 
    Private Sub ShowIndexPage
    Dim doc As MiniHtml
    doc.Initialize("")
    doc.Write("<!DOCTYPE html>")
    doc.Write(body1.build)
    Response.Write(doc.ToString)
End Sub
 
Last edited:
Click to expand...
aeric

aeric

Expert
Licensed User
Longtime User

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

aeric

Expert
Licensed User
Longtime User
Tutorial is now updated based on MiniHtml v2.00
 
You must log in or register to reply here.

Similar Threads

aeric
  • Article
Share My Creation MiniHtml2 Code Generator
Replies
11
Views
802
aeric
aeric
aeric
  • Article
B4J Library [B4X][Web] MiniHtml v2
Replies
9
Views
822
aeric
aeric
aeric
  • Article
B4J Tutorial HTMX+Bootstrap5+MiniHTML+WebApiUtils+Server
Replies
11
Views
3K
aeric
aeric
aeric
  • Article
B4J Library [B4X][Web] MiniHtml
2 3
Replies
50
Views
13K
aeric
aeric
aeric
  • Article
Share My Creation [Project Template] EndsMeet Server
Replies
12
Views
5K
aeric
aeric
Top