B4J Tutorial [Pen&Paper] with Source Code Preview

Hi there

I have been working on a helper tool for ABMaterial as discussed in this post.

One of the most amazing feautures that have been added now is the ability to see the source code that will be generated by your component definition as you are defining your component.

Whilst MyMaterial.Show helps one to generate the design of your WebApp based on ABMaterial, at the current moment it is not complete. The MyMaterial project attached was in its entirety created by MyMaterial.Show using the same approach of creating pages, creating components per pages etc.

At the end I'd like MyMaterial.Show to be able to create a fully functional WebApp, of course this will be a phased approach.

As part of learning I added the Preview Source Code Feature so that one can see the output of their component definition.

Whilst MyMaterial.Show is currently based on the ABMaterial demo app, it is however a flexible tool as more functionality is added once available. As you will note, currently the components marked green are complete and the rest being done on a daily basis.

I hope MyMaterial.Show will help you with your learning curve of the ABMaterial Framework and also make your development faster, smooth and an enjoyable experience.


  • PreviewSourceCode.png
    21.8 KB · Views: 442
  • PreviewSourceCode1.png
    54.2 KB · Views: 438
  • ImageSlider.png
    70.2 KB · Views: 512
  • AddImagSlider2.png
    24.6 KB · Views: 410
Last edited:


Licensed User
Longtime User
Could you please use something else in your forum subject titles instead of [ABMaterial] when you talk about your tool? I would prefer it did not contain the word ABMaterial. Be creative and find a unique name for it. AB stands for AlwaysBusy and Alain Bailleul and I consider it kind of my trademark for libraries/tools I wrote the last 20 years.

Note that I use this forum to follow up on questions, requests, possible bug reports and this is getting very confusing for me and the readers as you start posting for your product all around the forum using this tag. Erel suggested I use this [ABMaterial] tag just for this very reason as ABMaterial grew bigger and it made it easier for everyone which topics talk about my library, not projects build using the library. I want to be able to search for 'ABMaterial' and only see stuff that concerns me as this was the whole point of it.

Also, I want it to be clear for everyone MyMaterial.Show/ABMaterial.Show is in no way affiliated with the ABMaterial library and I will not give support for it nor for what it generates. Writing/maintaining the ABMaterial library is a big enough job on its own.

So with the new tag it would also be easier to identify questions about your tool and what needs to be addressed by you.
Last edited: