B4J Question [ABmaterial] Adding rows and cells to Grid.

[Eme Fibonacci]

Adding rows and cells to Grid (A beginner's question)

How to add rows and cells?

First row with only one cell.
Second row with 12 cells.
Rows occupy 100% of the screen width.

What I want:

╔════════════════════════════════╗
║************************************║
╠════════════════════════════════╣
║bnt1|** |** |**|**|**|**|**|**|**|**|btn2║
╚════════════════════════════════╝

What did I do:

page.AddRowsM (1, False, 0,0, ""). AddCells12 (1, "")
page.AddRowsM (1, False, 0,0, ""). AddCellsOS (12,0,0,0,1,1,1, "")
page.BuildGrid

'Add buttons
Dim btn1 As ABMButton
btn1.Text = "AA"

Dim btn2 As ABMButton
btn2.Text = "BB"

page.Row (2) .Cell (1) .AddComponent (btn1)
page.Row (2) .Cell (12) .AddComponent (btn2)

Result:
╔═══════╗
║bnt1|btn2║
╚═══════╝

Why empty cells don't keep size?
What am I doing wrong?

Also you know how to put an image as the background of a row?

Thank you

 

[Mashiane]

Define a component, e.g. ABMLabel, set its text to {NBSP} and add it to each of the empty cells.

If you want to put stuff there, then you can replace the cell contents. The space is 'empty' because it has nothing in it. Using a blank label will be like a 'trick', it might just work.

 

[alwaysbusy]

The correct way is using the offsets in the addcells methods (see the grids part in the demo app), not using empty labels. Use the gridbuilder to design your grid.

 

[Mashiane]

Yes, using the offset like ABM explained will mean that instead of

page.Row (2) .Cell (12) .AddComponent (btn2)

you use

page.Row (2) .Cell (2) .AddComponent (btn2)

to add your second button as you will have TWO cells in that row and not 12 anymore.

 

[Eme Fibonacci]

now it's better.

page.AddRowsM(1,False,0,0,"").AddCellsOS(1,0,0,0,1,1,1,"").AddCellsOS(1,10,10,10,1,1,1,"")
page.BuildGrid
  
page.Row(1).Cell(1).AddComponent(btn1)
page.Row(1).Cell(2).AddComponent(btn2)

Results
╔════════════════════════════════╗
║bnt1|** |** |**|**|**|**|**|**|**|**|btn2║
╚════════════════════════════════╝

 

[alwaysbusy]

On putting a background picture in the background of a container, there seems to be something broken (since a long time).

Normal usage example (will not work until the fix in 4.26):

...
Dim cont As ABMContainer
cont.Initialize(page, "cont", "")
cont.AddRows(1,False,"").AddCellsOSMP(1,0,0,0,12,12,12,0,0,0,0,"")
cont.BuildGrid
   
cont.SetFixedHeight("500px") ' IMPORTANT
   
cont.SetBackgroundImage(ABM.COLOR_BLACK, ABM.INTENSITY_NORMAL, "../images/bg2.jpg", ABM.CONTAINERIMAGE_REPEAT_NOREPEAT, ABM.CONTAINERIMAGE_POSITION_COVER)
   
page.Cell(1,1).AddComponent(cont)
   
' refresh the page
page.Refresh
...

Temporary workaround for this code:

Dim cont As ABMContainer
cont.Initialize(page, "cont", "")
cont.AddRows(1,False,"").AddCellsOSMP(1,0,0,0,12,12,12,0,0,0,0,"")
cont.BuildGrid
   
cont.SetFixedHeight("500px") ' IMPORTANT
   
page.Cell(1,1).AddComponent(cont)
   
' refresh the page
page.Refresh
' Tell the browser we finished loading
page.FinishedLoading
' restoring the navigation bar position
page.RestoreNavigationBarPosition

' IMPORTANT, AFTER Page.Refresh   
page.ws.Eval($"$('#cont').css({"background":"#000000 url('../images/bg2.jpg') no-repeat center center fixed","-webkit-background-size": "cover", "-moz-background-size": "cover", "-o-background-size": "cover", "background-size": "cover" });"$, Null)
page.ws.Flush

 

[Eme Fibonacci]

On putting a background picture in the background of a container, there seems to be something broken (since a long time).

Normal usage example (will not work until the fix in 4.26):

...
Dim cont As ABMContainer
cont.Initialize(page, "cont", "")
cont.AddRows(1,False,"").AddCellsOSMP(1,0,0,0,12,12,12,0,0,0,0,"")
cont.BuildGrid
  
cont.SetFixedHeight("500px") ' IMPORTANT
  
cont.SetBackgroundImage(ABM.COLOR_BLACK, ABM.INTENSITY_NORMAL, "../images/bg2.jpg", ABM.CONTAINERIMAGE_REPEAT_NOREPEAT, ABM.CONTAINERIMAGE_POSITION_COVER)
  
page.Cell(1,1).AddComponent(cont)
  
' refresh the page
page.Refresh
...

Temporary workaround for this code:

Dim cont As ABMContainer
cont.Initialize(page, "cont", "")
cont.AddRows(1,False,"").AddCellsOSMP(1,0,0,0,12,12,12,0,0,0,0,"")
cont.BuildGrid
  
cont.SetFixedHeight("500px") ' IMPORTANT
  
page.Cell(1,1).AddComponent(cont)
  
' refresh the page
page.Refresh
' Tell the browser we finished loading
page.FinishedLoading
' restoring the navigation bar position
page.RestoreNavigationBarPosition

' IMPORTANT, AFTER Page.Refresh  
page.ws.Eval($"$('#cont').css({"background":"#000000 url('../images/bg2.jpg') no-repeat center center fixed","-webkit-background-size": "cover", "-moz-background-size": "cover", "-o-background-size": "cover", "background-size": "cover" });"$, Null)
page.ws.Flush

Thanks you a lot. Now I can continue the design. I'm using this workaround right now.

 

[Eme Fibonacci]

If someone needs to put a background that repeats on x and y:

page.ws.Eval($"$('#cont').css({"background":"#000000 url('../images/background.png')","-webkit-background-size": "auto", "-moz-background-size": "auto", "-o-background-size": "auto", "background-size": "auto" });"$, Null)
page.ws.Flush