B4J Question [ABMaterial] Grid Builder (proof of concept)

[alwaysbusy]

UPDATE: ABMaterial 2.20 now actually contains a grid builder

see: https://www.b4x.com/android/forum/threads/abmaterial-framework-for-webapps.60072/page-24

Despite the ease of use of the ABMaterial framework, a lot of people who want to use ABMaterial seem to have problems with the grid concept. They just don’t 'see it' with regards as to how the grid is built once, but is totally mobile responsive.

Understandable, it is not easy to grab your mind around 3 different devices at once. Although being a gazillion times easier and shorter than the final HTML you still have to write lines like this:

' create the page grid
page.AddRows(1,True, "").AddCells12(1,"")
page.AddRowsM(1,True,0,0, "").AddCellsOS(12,0,0,0,1,1,1,"")
page.AddRows(3,True, "").AddCells12(1,"")
page.AddRowsM(1,True,0,0, "").AddCellsOS(2,0,0,0,6,6,6,"")
page.AddRows(2,True, "").AddCells12(1,"")
page.AddRowsM(1,True,0,0, "").AddCellsOS(1,6,6,6,6,6,6,"")
page.AddRows(6,True, "").AddCells12(1,"")

Thinking on how I could make this easier, I got my inspiration from Shoelace for Bootstrap and adapted it to the needs of ABMaterial. Once finished, it should be able to generate these 'confusing' lines in B4J code. As for now, it can do what Shoelace can do. But now I'm going to try to take it a couple of levels further. (e.g. next step could be nested grids).

BTW: this has been my frist JavaFX program and I must say it has been fun al the way. Wrote this little thing in a night or two. Beat that '...' (Fill in any other programming language you know)!

So here is the first preview video for a Grid Builder for ABMaterial:


Time to start thinking how to proceed next. If you have ideas, please share! (I'm not writing a website builder, so please keep that in mind).

Alwaysbusy

 

[inakigarm]

Are you sure this is not a website builder beginning ??

As always, great job !

 

[Cableguy]

I'm not writing a website builder, so please keep that in mind.

Of course not! it an ABMaterial IDE! (in the making!)

Next, the ability to populate the cells with an ABControl (no the contend nor behaviour ot it) and of course, the header/footer and the side menu.

 

[imbault]

Very good Alain, as always. Something available for working with?
j'ai un stagiaire que j'aimerais mettre sur nouveau type de site ABMaterial pour notre société.

Merci

 

[alwaysbusy]

@imbault No, this is a proof of concept. It cannot generate usefull code yet. It will take many more weeks to actually build the tool.

 

[Mashiane]

Despite the ease of use of the ABMaterial framework, a lot of people who want to use ABMaterial seem to have problems with the grid concept. They just don’t 'see it' with regards as to how the grid is built once, but is totally mobile responsive.

Understandable, it is not easy to grab your mind around 3 different devices at once. Although being a gazillion times easier and shorter than the final HTML you still have to write lines like this:

' create the page grid
page.AddRows(1,True, "").AddCells12(1,"") 
page.AddRowsM(1,True,0,0, "").AddCellsOS(12,0,0,0,1,1,1,"")
page.AddRows(3,True, "").AddCells12(1,"")
page.AddRowsM(1,True,0,0, "").AddCellsOS(2,0,0,0,6,6,6,"")
page.AddRows(2,True, "").AddCells12(1,"")
page.AddRowsM(1,True,0,0, "").AddCellsOS(1,6,6,6,6,6,6,"")
page.AddRows(6,True, "").AddCells12(1,"")

Thinking on how I could make this easier, I got my inspiration from Shoelace for Bootstrap and adapted it to the needs of ABMaterial. Once finished, it should be able to generate these 'confusing' lines in B4J code. As for now, it can do what Shoelace can do. But now I'm going to try to take it a couple of levels further. (e.g. next step could be nested grids).

BTW: this has been my frist JavaFX program and I must say it has been fun al the way. Wrote this little thing in a night or two. Beat that '...' (Fill in any other programming language you know)!

So here is the first preview video for a Grid Builder for ABMaterial:


Time to start thinking how to proceed next. If you have ideas, please share! (I'm not writing a website builder, so please keep that in mind).

Alwaysbusy

Wow, this is so brilliant. Thank you so much. My idea will be reverse engineering code to the grid, as an example, in your demo you have a lot of these grids defined, it would be nice to see how they look like inside this grid builder. Is it possible then to add a section where one can paste a grid definition as per code above and the builder generates it, that will be marvelous.

A million thanks...

 

[ivanomonti]

hi everyone and sorry my english from google tranlsate.

I'm looking for a very trivial example in ABMaterials without using databases at the moment.

template would be fine too but I find it for me who is a beginner after years that I don't develop a clean and clear example that already gives me the opportunity to experience library