Android Tutorial [B4X] B4XTable with custom cells layout

Requires B4XTable v1.01+: https://www.b4x.com/android/forum/t...searchable-customizable-table.102322/#content

This example demonstrates the steps required to create cells with custom layouts.

Each cell in B4XTable is made of a Panel with a Label. The cells layouts are created as needed when more rows become visible. The cells are reused when the user switches to a different page (or whenever the data is updated).

To make it simpler to use custom layouts we start with:

B4XTable1.MaximumRowsPerPage = 10
B4XTable1.BuildLayoutsCache(10)

You can of course change the numbers.

The purpose of these two lines is to limit the maximum number of rows per page and to force B4XTable to create all the cells. This way we don't need to deal with cases where more rows become visible. For example when the form is resized in B4J.

Next step is to create the custom layout. In this case we want to add an ImageView to each of the flags column cells.

For i = 1 To FlagsColumn.CellsLayouts.Size - 1
   Dim pnl As B4XView = FlagsColumn.CellsLayouts.Get(i)
   Dim iv As ImageView
   iv.Initialize("")
   pnl.AddView(iv, 5dip, 5dip, FlagsColumn.Width - 10dip, B4XTable1.RowHeight - 10dip)
Next

Note that we start from cell #1. This is the second cell in the list. The first cell is the header (which you can customize as well).

The last step is to update the flags whenever the visible data changes:

Sub B4XTable1_DataUpdated
   For i = 0 To B4XTable1.VisibleRowIds.Size - 1
       Dim RowId As Long = B4XTable1.VisibleRowIds.Get(i)
       Dim pnl As B4XView = FlagsColumn.CellsLayouts.Get(i + 1) '+1 because the first cell is the header
       Dim iv As B4XView = pnl.GetView(1) 'ImageView will be the 2nd child of the panel. The built-in label is the first.
       If RowId > 0 Then
           Dim row As Map = B4XTable1.GetRow(RowId)
           iv.SetBitmap(xui.LoadBitmapResize(File.DirAssets, row.Get("Alpha2") & ".png", iv.Width, iv.Height, True))
       Else
           'empty row
           iv.SetBitmap(Null)
       End If
   Next
End Sub

In this case we take the value of the column named Alpha2 and we load an image based on that value.
The RowId of empty rows is set to 0. As the cells are reused we need to remove the bitmap.

B4A example is attached. The same code will work in B4J and B4i as well.

The flags and countries data source: https://github.com/stefangabos/world_countries/

 

[Erel]

B4J example is attached. Depends on xCharts.b4xlib: https://www.b4x.com/android/forum/threads/91830/#content

To make the layout simpler, the table width is static.
The chart is updated whenever the data is updated:

Sub B4XTable1_DataUpdated
   For i = 0 To B4XTable1.VisibleRowIds.Size - 1
       Dim RowId As Long = B4XTable1.VisibleRowIds.Get(i)
       Dim p As B4XView = GraphColumn.CellsLayouts.Get(i + 1)
       Dim chart As xChart = p.GetView(1).Tag 'Base panel is the 2nd view
       chart.ClearData
       If RowId > 0 Then
           Dim row As Map = B4XTable1.GetRow(RowId)
           chart.AddPie("", row.Get("V 1"), xui.Color_Red)
           chart.AddPie("", row.Get("V 2"), 0xFF007508)
           chart.AddPie("", row.Get("V 3"), xui.Color_Blue)
           chart.AddPie("", row.Get("V 4"), 0xFFD5D100)
       End If
       chart.DrawChart
   Next
End Sub

 

[Johan Hormaza]

Thanks EREL !!

 

[LUISTORRES]

Requires B4XTable v1.01+: https://www.b4x.com/android/forum/t...searchable-customizable-table.102322/#content

This example demonstrates the steps required to create cells with custom layouts.

Each cell in B4XTable is made of a Panel with a Label. The cells layouts are created as needed when more rows become visible. The cells are reused when the user switches to a different page (or whenever the data is updated).

To make it simpler to use custom layouts we start with:

B4XTable1.MaximumRowsPerPage = 10
B4XTable1.BuildLayoutsCache(10)

You can of course change the numbers.

The purpose of these two lines is to limit the maximum number of rows per page and to force B4XTable to create all the cells. This way we don't need to deal with cases where more rows become visible. For example when the form is resized in B4J.

Next step is to create the custom layout. In this case we want to add an ImageView to each of the flags column cells.

For i = 1 To FlagsColumn.CellsLayouts.Size - 1
   Dim pnl As B4XView = FlagsColumn.CellsLayouts.Get(i)
   Dim iv As ImageView
   iv.Initialize("")
   pnl.AddView(iv, 5dip, 5dip, FlagsColumn.Width - 10dip, B4XTable1.RowHeight - 10dip)
Next

Note that we start from cell #1. This is the second cell in the list. The first cell is the header (which you can customize as well).

The last step is to update the flags whenever the visible data changes:

Sub B4XTable1_DataUpdated
   For i = 0 To B4XTable1.VisibleRowIds.Size - 1
       Dim RowId As Long = B4XTable1.VisibleRowIds.Get(i)
       Dim pnl As B4XView = FlagsColumn.CellsLayouts.Get(i + 1) '+1 because the first cell is the header
       Dim iv As B4XView = pnl.GetView(1) 'ImageView will be the 2nd child of the panel. The built-in label is the first.
       If RowId > 0 Then
           Dim row As Map = B4XTable1.GetRow(RowId)
           iv.SetBitmap(xui.LoadBitmapResize(File.DirAssets, row.Get("Alpha2") & ".png", iv.Width, iv.Height, True))
       Else
           'empty row
           iv.SetBitmap(Null)
       End If
   Next
End Sub

In this case we take the value of the column named Alpha2 and we load an image based on that value.
The RowId of empty rows is set to 0. As the cells are reused we need to remove the bitmap.

B4A example is attached. The same code will work in B4J and B4i as well.

The flags and countries data source: https://github.com/stefangabos/world_countries/

hi, i a few problems with b4x, fisrt, where i got more rows than fit in the screen , itsnot scrollable to see more, other, cant edit a cell, and when i want edit need mark entire row with other color , there is something about that? can you help me pleases. thanks

 

[William Lancee]

This table view is meant to be 'paged', not scrolled. All visible rows should fit in a screen, to see more rows, use navigation arrows.

The editable table has seen significant improvement since the first version. See

https://www.b4x.com/android/forum/threads/b4x-cross-platform-editable-b4xtable-form-example.104766/