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

alwaysbusy

Expert
Licensed User
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:

B4X:
' 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
 
Last edited:

Cableguy

Expert
Licensed User
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

Well-Known Member
Licensed User
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
 

Mashiane

Expert
Licensed User
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:

B4X:
' 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

Well-Known Member
Licensed User
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
 
Top