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

Eme Fibonacci · Apr 15, 2018

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:

B4X:

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 · Apr 15, 2018

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 · Apr 15, 2018

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 · Apr 15, 2018

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

B4X:

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

you use

B4X:

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 · Apr 16, 2018

now it's better.

B4X:

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 · Apr 16, 2018

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):

B4X:

...
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:

B4X:

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 · Apr 16, 2018

alwaysbusy said:

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):

B4X:

...
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:

B4X:

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 · Apr 16, 2018

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

B4X:

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

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

Eme Fibonacci

Well-Known Member

Mashiane

Expert

alwaysbusy

Expert

Mashiane

Expert

Eme Fibonacci

Well-Known Member

alwaysbusy

Expert

Eme Fibonacci

Well-Known Member

Eme Fibonacci

Well-Known Member

Similar Threads

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

Well-Known Member

Expert

Expert

Expert

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency