B4J Tutorial HTMX+Bootstrap5+MiniHTML+WebApiUtils+Server

aeric · Saturday at 3:49 PM

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.

B4X:

Button.Text("Open Modal") _
.hxGet("/modal") _
.hxTarget("#modals-here") _
.hxTrigger("click") _
.attribute2(CreateMap("data-bs-toggle": "modal", "data-bs-target": "#modals-here")) _
.addClass("btn btn-primary text-uppercase") _
.up(div2)

Output:

B4X:

<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 · Saturday at 4:50 PM

@aeric

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

Mashiane · Saturday at 5:16 PM

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 · Saturday at 9:20 PM

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])

B4X:

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 · 2025-01-26T00:39:49+0000

Mashiane said:
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 · 2025-01-26T10:26:18+0000

aeric said:
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 · 2025-01-26T10:31:14+0000

William Lancee said:

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

B4X:

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 · 2025-01-26T10:31:26+0000

You can add any vanilla JS using the script tag.

Mashiane · 2025-01-26T10:35:11+0000

aeric said:
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 · 2025-01-26T14:26:27+0000

@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 · 2025-01-26T15:44:27+0000

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

B4X:

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

B4X:

<!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>

aeric · 2025-01-27T10:50:37+0000

Example in post #1 updated to use MiniHTML v0.07

B4J Tutorial HTMX+Bootstrap5+MiniHTML+WebApiUtils+Server

Attachments

William Lancee

Well-Known Member

Mashiane

Expert

William Lancee

Well-Known Member

aeric

Expert

Mashiane

Expert

Mashiane

Expert

aeric

Expert

Mashiane

Expert

William Lancee

Well-Known Member

William Lancee

Well-Known Member

aeric

Expert

Similar Threads

B4J Tutorial HTMX+Bootstrap5+MiniHTML+WebApiUtils+Server

Attachments

Well-Known Member

Expert

Well-Known Member

Expert

Expert

Expert

Expert

Expert

Well-Known Member

Well-Known Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency