B4J Tutorial 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.

Button.attribute2(CreateMap("hx-get": "/modal", _
"hx-target": "#modals-here", _
"hx-trigger": "click", _
"data-bs-toggle": "modal", _
"data-bs-target": "#modals-here", _
"class": "btn btn-primary text-uppercase")) _
.Text("Open Modal")

Output:

<button hx-get="/modal" hx-target="#modals-here" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#modals-here" class="btn btn-primary text-uppercase">Open Modal</button>

 

[William Lancee]

@aeric

I tried your example.
What an elegant way to create a B4X-based Web App!

 

[Mashiane]

My my... this is awesome Aeric, and the learning curve enough for a 5 year old.

Congrats mate! Keep it up. Please consider examples without HTMX, with events also.

 

[William Lancee]

It also works great with AlpineJS
(I had to add a Span module - just copied the P module - and recode the ' to ` [the Alpine code for smart strings])

Sub GenerateIndex As String
    Dim html1 As Tag = Html.lang("en")
    html1.comment(" generated by MiniHTML ")
    Head.up(html1).Meta_Preset.Title("AlpineJS Demo") _
    .Script("https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js")
    Dim body1 As Tag = Body.up(html1)
    Dim div1 As Tag = Div.attribute("x-data", "{ pronoun: 'men' }").up(body1)
    Button.attribute("x-on:click", "pronoun = 'people'").Text("Fix It").up(div1).uniline
    Span.attribute("x-text", "'all ${pronoun} are created equal'").up(div1).uniline
    Return html1.Build(-1)
End Sub

 

[aeric]

My my... this is awesome Aeric, and the learning curve enough for a 5 year old.

Congrats mate! Keep it up. Please consider examples without HTMX, with events also.

@Mashiane
I think @William Lancee has showed a great example of creating button onclick event, replacing HTMX with AlpineJS.

 

[Mashiane]

AlpineJS

Noted, but that is the thing, having the dependencies that need to be added, thus my request for a pure vanilla javascript approach. What if someone does not want to use neither of these dependecies? I am not saying they are not good, they are in their own rights, thing is it brings a level of being opinionated or bias in their favour.

There are examples of people starting projects and leaving them these falling unto being unmaintained, a grave risk. I'm not saying this might happen for Alpine / HTMX, its just trying to be on the "safe" side.

I will look into that example and see what is there either way. Thanks.

 

[Mashiane]

It also works great with AlpineJS
(I had to add a Span module - just copied the P module - and recode the ' to ` [the Alpine code for smart strings])

View attachment 161141

View attachment 161142

Sub GenerateIndex As String
    Dim html1 As Tag = Html.lang("en")
    html1.comment(" generated by MiniHTML ")
    Head.up(html1).Meta_Preset.Title("AlpineJS Demo") _
    .Script("https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js")
    Dim body1 As Tag = Body.up(html1)
    Dim div1 As Tag = Div.attribute("x-data", "{ pronoun: 'men' }").up(body1)
    Button.attribute("x-on:click", "pronoun = 'people'").Text("Fix It").up(div1).uniline
    Span.attribute("x-text", "'all ${pronoun} are created equal'").up(div1).uniline
    Return html1.Build(-1)
End Sub

Wow. Awesome. I see some vue-like functionality here. Amazing.

 

[aeric]

You can add any vanilla JS using the script tag.

 

[Mashiane]

You can add any vanilla JS using the script tag.

Definately. Perhaps I am confusing issues. In the back of my head I am thinking JServer's JQueryElement.

 

[William Lancee]

@Mashiane

This approach does not imply any framework, you can use any you like or none.
It is a tool to generate HTML using B4X syntax. What @aeric has done is to make that process more B4X-centric.

I like it because I prefer simplicity over complexity, tools over frameworks, imperative over declarative, and ontology over teleology.

 

[William Lancee]

There is some flexibility in coding style. The code below does the same as #4, plus I have added some plain vanilla JS.

Sub GenerateIndex As String
    Dim html1 As Tag = Html.lang("en").comment(" generated by MiniHTML ")
   
    Dim head1 As Tag = Head.up(html1).Meta_Preset.Title("AlpineJS Demo")
    Script.up(head1).attribute("src", "https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js")
    Script.up(head1).text("alert('Hello World')")
   
    Dim body1 As Tag = Body.up(html1)
   
    Dim div1 As Tag = Div.up(body1).attribute("x-data", "{ pronoun: 'men' }")
    Button.up(div1).attribute("x-on:click", "pronoun = 'people'").Text("Fix It").uniline
    Span.up(div1).attribute("x-text", "`all ${pronoun} are created equal`").uniline
   
    Return html1.Build(-1)
End Sub

<!DOCTYPE html>
<html lang="en">
    <!-- generated by MiniHTML -->
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>AlpineJS Demo</title>
        <script src="https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js"></script>
        <script>alert('Hello World')</script>
    </head>
    <body>
        <div x-data="{ pronoun: 'men' }">
            <button x-on:click="pronoun = 'people'">Fix It</button>
            <span x-text="`all ${pronoun} are created equal`"></span>
        </div>
    </body>
</html>