B4J Question [ABMATERIAL] Help with GRID

[hibrid0]

Hi I want some of how to work the GRID on ABMaterial because for me now is black magic. Not understand the number and how generate the rows, columns and sizes.

 

[Harris]

    ' create the page grid
    page.AddRowsM(1,False, 10,0,"rowtheme").AddCells12(1, "cnter")
    page.AddRowsM( 1,False, -3,  3, "rowtheme").AddCellsOSMP(1,0,0,0,  4,4,4,  5 , 5, 0,0,"cnter").AddCellsOSMP(1,0,0,0,4,4,4,5 ,5,0,0,"cnter").AddCellsOSMP(1,0,0,0,4,4,4,5,5,0,0,"cnter")
    page.AddRowsM(1,False, 0,-10,"").AddCells12(1, "cnter")
    page.AddRows(5,False, "").AddCellsOSMP(2,0,0,0, 12, 12,  6,0,0, 15,0,"") 
    page.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components

This is probably the most complex subject in ABMaterial. It isn't difficult - it is just hard to remember.

There are many ways to create a grid (rows and cells) - as you should study in the demo.
I have not mastered this yet, try as I might. It takes much experimenting to get it right.

Basically, you have to understand the AddRows and AddCells variants. The themes parameter of each will also affect how it is displayed. This IS where the magic comes to play.


If you are talking about a CRUD grid, well that is a different matter. That is, in fact, easier. AB created a generator to produce the code. Another study....

 

[alwaysbusy]

@Harris @hibrid0 Indeed, the grids are the most complex part. I advice any starter to take a piece of paper, draw the desired grid on it and then start reproducing the AddRows/AddCells part. Start with simple grids and as you get more familiar with it, you can go more complex.

 

[Harris]

Some more help... Actually, grids make the whole system like magic. It is the foundation of modern web design. Put anything you want in a row (unlimited) and a cell (max 12).


page.AddRowsM( [this is row] 1, False, 10, 0, "rowtheme") .AddCellsOSMP( [this is cell] 2,0,0,0, 12, 12, 6, 0, 0, 15,0,"")

Row part:
AddRowsM - means add rows with top and bottom margins - check other methods...

1, means create 1 row (or 500 if you desire)
False, means make row full width of screen (on any device) - True would pad it centered on the screen (with margins)
10, means add 10px as top margin to row
0, means add 0px as bottom margin to this row
"rowtheme" means apply this stuff to my row (shown below)...

theme.AddRowTheme("rowtheme")
theme.Row("rowtheme").BackColor = ABM.COLOR_BLUE
theme.Row("rowtheme").BackColorIntensity = ABM.INTENSITY_LIGHTEN1
theme.Row("rowtheme").BorderColor = ABM.COLOR_GREY
theme.Row("rowtheme").BorderColorIntensity = ABM.INTENSITY_DARKEN4
theme.Row("rowtheme").BorderWidth = 3

Cell Part:
AddCellsOSMP - means add (one or more) cells with lots of stuff - check other methods
2, add 2 cells to this row (note: you don't have to use all of them...)
0, offsetSmall - experiment using this to see how it works - as with other offsets
0, offsetMedium
0, offsetLarge
12, sizeSmall - on phones - this will show ONE cell (since 12 means full width)
12, sizeMedium - on tablets (or very large phones), this will show ONE cell..
6, sizeLarge - on desktop or laptop (big screens), this will show TWO cells (columns) since we have the screen width to use this
0,0,15,0, - padding for top, bottom, left, right
"" - theme (if used)


Until you play with all the variants (methods) of row and cell, you won't truly understand what they do.
When you have mastered these, you shall appreciate what a wonderful framework ABMaterial is!


Thanks

 

[stanmiller]

Hi I want some of how to work the GRID on ABMaterial because for me now is black magic. Not understand the number and how generate the rows, columns and sizes.

Start with Google's explanation of the grid philosophy here: Layout - Responsive UI. That will explain the origin of the '12' cells to a row. Then continue with Harris' good counsel.

Also, as you learn the framework replace any "magic" number in your project with constants. That will make it easier to follow.

For example, you can replace the 'False' below with what it does.

' create the page
gridpage.AddRowsM(1,False, 10,0,"rowtheme").AddCells12(1, "cnter")

Private Const CENTER_IN_ROW=True As Boolean
Private Const DO_NOT_CENTER=False As Boolean

' create the page
gridpage.AddRowsM(1,DO_NOT_CENTER, 10,0,"rowtheme").AddCells12(1, "cnter")

 

[Harris]

Nice to see others chiming in on this matter. Yes, setting up constants will help in this regard. Clever....
In fact, we should have a set of constants that allow us to easily define Row and Cell properties.

It 'should' make it easier to set each param. Yet, one still has to understand what each param expects. This obviously comes with knowledge of the framework.

We are getting closer to this goal. The more I experiment, the more I understand (sometimes - the limited usage).
You work with what you can currently, and ask for future enhancements. AB has no idea of what you want to do - or f it is even possible.

I have made several suggestions and have been amazed with the results - well beyond my expectations.

Thanks

 

[alwaysbusy]

I already made it so that with most of the multi params you can use ABM.

But if there is a need, I could add some extra like the consts you suggested.

This is one thing I miss as a library developer in the B4J IDE. For me, the ideal scenario would be to be able to use Enums in the java methods.

e.g. me in Java

enum CENTERROW{
CENTER_IN_ROW (true),
NO_CENTER_IN_ROW (false);
}

public void AddRowsM(int numberOfRows, CENTERROW centerInPage, String themeName) {
...
}

So that in the B4J IDE you would be able to do (dropdown when you type the , ) and you can select one of my predefined options in the Enum:

gridPage.AddRowsM(1,
------------------
|CENTER_IN_ROW |
|NO_CENTER_IN_ROW|
---------------------

Resulting in:

gridPage.AddRowsM(1, CENTER_IN_ROW, 10, 0, "rowtheme").AddCells12(1, "cnter")

Maybe one day this will be possible in the B4J IDE. But this is up to Erel

 

[stanmiller]

Nice to see others chiming in on this matter. Yes, setting up constants will help in this regard. Clever....
In fact, we should have a set of constants that allow us to easily define Row and Cell properties.

It 'should' make it easier to set each param. Yet, one still has to understand what each param expects. This obviously comes with knowledge of the framework.

We are getting closer to this goal. The more I experiment, the more I understand (sometimes - the limited usage).
You work with what you can currently, and ask for future enhancements. AB has no idea of what you want to do - or f it is even possible.

I have made several suggestions and have been amazed with the results - well beyond my expectations.

Thanks

This is a remarkable framework. Thank you AB.

And Harris your tutorials are fantastic for those learning the framework from a developer perspective. Well done!

About constants. Booleans are particularly distracting to our binary minds. We can pass over a string of numbers. Those are just numbers to be sorted out later.

But a boolean (True/False, Yes/No, Off/On) - that's a decision! What was decided? Our unconscious minds get stuck. So when you're in learning mode an ambiguous boolean can be a snag. The solution is to simply replace them with constants which speak to the resolution (e.g. CENTER_IN_ROW ), then resume the learning flow...

 

[stanmiller]

I already made it so that with most of the multi params you can use ABM.
But if there is a need, I could add some extra like the consts you suggested.
...
Maybe one day this will be possible in the B4J IDE. But this is up to Erel

I'd wait for more feedback. Prior to B4A all my work was in C/C++ so I like enums and constants as proxies for magic.

But I also see value for those learning the framework to create constants in their own words. That will make them more "sticky" for the developer.

 

[Harris]

What the hell are enums anyway? (just kidding)...

Looks like you are well on your way to success with ABM.
Like most, we seem apprehensive at first... what does all this shit mean... Then we discover - it means exactly we have known all along (just a we bit different).

A bit more code than B4A - but substantially less than php, javascript and the like - and FAR less confusion. Most of this code can be written for you - error free.

If I boasted anymore about the virtues of ABM, he would have to put me on the payroll. But 0 + 0 = nut'in bits... For webapps, and now web front ends - ABM cannot be beat.

Even thou at times my posts seem like harsh criticisms, they are (in my mind) only incentives to excel. - Strange how my f$%#ked brain works - eh? (red wine fueled)...

Enjoy.

 

[alwaysbusy]

(red wine fueled)

At 4:42AM? Or you are celebrating something or you may consider talking to someone about this...

 

[Harris]

It is 10 pm here, and heading off to sleep. Up for early rise since I need to complete my site before heading off on road trip - marketing and fishing trip vacation.
Wish me luck! Gosh you get up early...

Thanks

 

[alwaysbusy]

Good luck and enjoy!

 

[Mashiane]

@stanmiller , I have also just written an article about this, hope it helps... All the best with your ABMaterializing..

https://www.b4x.com/android/forum/threads/abmaterial-my-take-on-the-grid.71612/#contenthttps://www.b4x.com/android/forum/threads/abmaterial-my-take-on-the-grid.71612/#content

 

[Harris]

And Harris your tutorials are fantastic for those learning the framework from a developer perspective. Well done!

Thanks for the kind words... This means alot for a no-account like me coming from an educated engineer as yourself. All the credit has to go to AB since he provides the remarkable framework - I just put it to practical use and quite frankly, I would be spiraling into a black hole of despair without it (as I was for many years...).

When I create these simple modules (then tutorials), I still can't believe what I have accomplished with so little effort !!!

I shall keep posting tut's as I go forward - hopefully inspiring others to join the club.

PM me and I will send a link to my website (app) I just completed - using 100% ABM (as if there is anything else...).