B4A Library B4A - DeclarativeUI Library (Beta)

Hi everyone,

After too many long power cuts, I apparently had the questionable idea of
writing a small declarative UI wrapper for B4A.

DeclarativeUI is an experiment inspired by Flutter and other modern UI
frameworks. It lets you describe a screen as a tree of widgets instead of
creating and positioning every native view manually.

Dim body As UIColumn
body.Initialize _
    .Spacing(12dip) _
    .AddChild(title) _
    .AddChild(description) _
    .AddChild(actionButton)

The library currently includes state binding, natural layout, themes,
navigation inside one Activity, dialogs, snackbars, animations and native
view interoperability.

It is not intended to replace B4A or B4X, and it is definitely not a complete
Flutter implementation. It is just a small beta project with rough edges,
created to explore whether this style of UI development feels useful in B4A.

Is it revolutionary? Probably not. Is it useful? Maybe.

I am sharing it mainly to get feedback. If you try it, I would be interested
in hearing what feels clear, what feels unnecessarily complicated and which
parts should be removed rather than expanded.

Purists may want to look away now.

 

[Mashiane]

Hi

From someone who has been doing webdev in this forum forever and is now relearning everything about b4a I like this, a lot. I have always been fascinated by flutter and still believed that it can still be done with something like b4x without one having to learn dart, same with reactive native.

The State component is very interesting and I like the consistency you maintained when writing the components, the licensing is generous too. A personal thanks again for your contribution in this forum, Brilliant stuff. You are really here to change the world!

Q, Are you planning to make this fully cross platform?
Q, When can we see a fully working app? besides the two examples?
Q. Can you include more examples in the future, with screenshots please?

C. Just a heads up... something that I've also picked up when I was doing the B4XDaisyUIKit because I was so focused on UI creation with code too and are experiencing some layout issues here and there.

Building the layout programmatically -> using the designer when possible:
If you are only developing with B4A then building the layout programmatically is a mistake but not a huge one.
B4J and B4i handle screen resizes differently and it is much more difficult to handle the changes programmatically (there is video tutorial about it).
Most custom views can only be added with the designer (there are workarounds that allow adding them programmatically).
It is very simple to copy and paste designer layouts between different platforms and projects.

You will recall that there was a question previously about challenges experienced when creating long layouts or something.

That quote was sourced from...

[B4X] Features that Erel recommends to avoid

Many things have changed in B4X and also in the underlying platforms. I will try to list here all kinds of (old) features that have better alternatives. B4X is backward compatible so these features still work. The recommendations are more relevant for new projects or when implementing new...

www.b4x.com

All the best and keep up the good work you are doing!.

 

[Mashiane]

After too many long power cuts,

Reminds me of Load Shedding back home for so many years... askies.

 

[Mashiane]

Counter example error... with b4a 13.50

Unknown member: bottom
Unknown member: right
Unknown member: top
Unknown member: left
Unknown member: getcontentrect

Error compiling program.
Error description: Unknown member: getcontentrect
Error occurred on line: 155
Dim contentRect As Rect = mIme.GetContentRect
Word: getcontentrect

 

[Mashiane]

So instead of getters and setters you use the "State" which does everything! Wow.

This seems like some kind of speed-demon framework.

Would be interesting to see benchmarks from normal b4x code, abstract designer and this. #Wishful thinking... ignore me on this, ha ha ha...

So the nova is multi-page app. pLease fix the error above otherwise I cant run.

I understand you are running the beta version of b4a with edege to edge. Not all of us are...

 

[Maxcfgos]

So instead of getters and setters you use the "State" which does everything! Wow.

This seems like some kind of speed-demon framework.

Would be interesting to see benchmarks from normal b4x code, abstract designer and this. #Wishful thinking... ignore me on this, ha ha ha...

So the nova is multi-page app. pLease fix the error above otherwise I cant run.

I understand you are running the beta version of b4a with edege to edge. Not all of us are...

Thanks for such detailed feedback and the kind words!

1. Please re-download the library
2. Comment out this line: #EdgeToEdgeOldDevices: True
3. You can ignore the warnings about the SDK and the logs — the IME library isn't needed for any B4A version anymore
4. The examples should work fine now

Regarding the layout/measurements point: the library works similarly to Flutter, so since it's B4A-only it doesn't need manual measurements or the kind of cross-platform adjustments you mentioned.

• I'm still not sure if I'll make it cross-platform
• I'll be showing more complex/complete examples soon

 

[Mashiane]

My... the simplicity of your demos is amazing.

The fact that one is not thinking about Top, Left, Height, Width is so amazing. The Nova example pushed the bar.

So you didnt include images in your posts... I think you didnt do justice to your post. I would have, but then again its absolutely your choice.

It would be interesting to see this working with b4xpages.

The Nova Tasks is a simple app, large apps?

You have indeed brought flutter code styling to b4x.

1. The number in the first example needs padding, it clipped at the bottom.
2. The task descriptions could use multi-line if long, they wrap but clip.
3. Consider adding helpers e.g. VerticalAlignment, HorizontalAlignment.
4. Brilliant theming.
5. Redrawing the UI each time? e.g. theme changing... its not noticeable... might be expensive #just a thought.

Will be watching this attentively.

 

[Mashiane]

This is amazing... Did this just to get clarity on how this works... hope you dont mind. Im just still fascinated by this...

Retrofitting B4A with a Declarative UI

Use the power of AI for quick summarization and note taking, Gemini Notebook is your powerful virtual research assistant rooted in information you can trust.

notebook.google.com

Engineering a Declarative UI Framework

Use the power of AI for quick summarization and note taking, Gemini Notebook is your powerful virtual research assistant rooted in information you can trust.

notebook.google.com