B4J Tutorial [Web] Break and Rebuild Strategy

Designing a web front end from scratch usually requires years of experience.

When you want to create a real world web app, you need to have a dashboard or user panel once the user has login.

The dashboard is usually designed in such a standard way where you have a top menu bar and a side bar on the left.

For novice developers, reinventing the wheel may not produce a good or professional user interface.

From my personal experience, I prefer to find a stable template which already have all the components ready.

There are many open source dashboard templates available. You can even experience the live demo before choosing the one right for you.

I recommend dashboard templates that build by HTML and Bootstrap without any modern JS framework (like React or Angular) if you want to work with B4X.

I am not saying it is impossible (to use these modern frameworks) but you will need to build the front end and back end separately then glue both of them through JSON API.

If you are working as a solo developer who wants to use B4X to develop your full stack web app, I recommend you check on my MiniHtml2 library which is still under development.

Using B4J IDE, you can work on the web server project with all available libraries created by the community.

First you have jServer. It can be use as a local development server but at the same time also production ready.

You can use SQL library for database communication. Optionally, you can use my MiniORMUtils library that make development started with SQLite then easily switch to MariaDB/MySQL.

Besides, I also build other libraries like WebApiUtils and EndsMeet which are open source. I also developed many server project templates where you can scaffolding a project instantly.

With all these libraries, you can create your own framework and build a full B4X server-client solutions.

Back to MiniHtml2 library. The aim of this library is to write the web front end using B4X syntax and B4J IDE features.

You can quickly turn on/off any part of the html attributes without breaking the html structure.

Each time you run the compilation or debug, the html is regenerated.

We are using the "old school" way of generating html which is not relying on complexity of modern web build tools like npm, webpack, etc.

Of course you still can use those build tools after you generated the html page if you like but that is another topic.

After talking so long, I still not explaining what the title means. Sorry about that.

Let me start with the break and rebuild strategy now.

First thing is to search for a nice dashboard template project which is open source.

Once you found the right template, download and unzip it.

Usually the one folder we are interested on is the "dist" folder. If you are unlucky, then you have to check the "src" folder.

You will find a lot of html files. Basically all the files have the same structure which has top panel and sidebar. Except for some full screen page like login or error page.

So the strategy is to take the index.html or dashboard.html and work from it.

Ignore other files at this moment. They will be only useful in the future or some you may not even use them.

Next is to convert the html into a template. Previously, you can use FreeMarker or Velocity libraries. However, MiniHtml2 library is a different way that provide a template like functionality.

Convert the html tags like <div class="text-primary">Hello</div> into Div.cls("text-primary").text(Value)
Then you can pass your value from B4X into the HTML.

Create you own reusable components like function to create buttons, modal dialog, toast or sidebar list items.

Once you have created your base template and components, you are ready to customize the layout you wish to have.

This is what I call break and rebuild strategy.

 

[Mashiane]

Convert the html tags like <div class="text-primary">Hello</div> into Div.cls("text-primary").text(Value)

Question, if you have an existing template, can you load it / read it and then get an element by id / class or whatever selector and then change something on it / add an event?

 

[Magma]

Something like: Reverse Engineering... only at parts we want...

Sometimes in development is better to start from zero and sometimes from the end... Those two have positives and negatives..

When from zero - you know everything and extend to anything - but you need to re-invent the wheel, and the time always ticking (never pause or stop)
When from end - you are limited and always have in back of your mind that something may be not go well because of a 3rd party error...

 

[aeric]

Question, if you have an existing template, can you load it / read it and then get an element by id / class or whatever selector and then change something on it / add an event?

I am not really get it.
You mean by using B4X and MiniHtml library?
If using MiniHtml library, yes. You can use ChildById method.
Add event? I use HTMX and AlpineJS which handle the Javascript interactivity. So there is no complex JavaScript.

 

[aeric]

Something like: Reverse Engineering... only at parts we want...

Sometimes in development is better to start from zero and sometimes from the end... Those two have positives and negatives..

When from zero - you know everything and extend to anything - but you need to re-invent the wheel, and the time always ticking (never pause or stop)
When from end - you are limited and always have in back of your mind that something may be not go well because of a 3rd party error...

Look like a very wisdom advice. I am not sure I could decipher the actual meaning behind this at the moment.
Everything in the Universe (I think so) has start and end. And when it is ended, it may start again. So it can be a cycle.

Talking about MiniHtml library, I found it so interesting for my B4J server apps. At least so far so good.
If only AI LLM has better knowledge of this library then one day I can ask it to generate such code instead of HTML.

 

[aeric]

Something like: Reverse Engineering... only at parts we want...

Sometimes in development is better to start from zero and sometimes from the end... Those two have positives and negatives..

When from zero - you know everything and extend to anything - but you need to re-invent the wheel, and the time always ticking (never pause or stop)
When from end - you are limited and always have in back of your mind that something may be not go well because of a 3rd party error...

You can say it is something like a reverse engineering but more like a reversal to an output of an existing tool.
Actually for me it is more to a more friendly development environment instead of what the mainstream is using.

On parts we want... YES, what the existing templates can offer is not always 100% what we wanted. That is why we need to customize it.

If I understand you correctly, you mean either we
1. start from scratch where we add each feature progressively
OR
2. take out feature by feature from the full template.

I agree that you say both have Pros and Cons.
Sometimes I work with #1 and sometimes I work with #2. Most of the time I will take #1. Because taking #2 seems nice to see at first but it is like lying to myself. Eventually, I will still need to go for #1.

 

[aeric]

Building from scratch is torturing.
That is why I have this idea.

MiniHtml Converter

Currently, MiniHtml2 library is under development https://www.b4x.com/android/forum/threads/b4x-web-minihtml2.170180/ Maybe for B4X developers, it has not much of any use. Even for myself, translating the html into B4X code by hand is really torturing. With Erel's MiniHtmlParser class, I have...

www.b4x.com

Edit: This tool is working very well except for little issues.