B4A Library Grid/Table and ListView Library

This library allows to create easely grids/tables and
from version 2.50
list views too!
Enjoy!
:)

The original post has been moved
http://www.b4x.com/android/forum/threads/grid-library.16381/page-10#post-168452"

Version 2.50 beta
- Added support for multiline rows

Version 2.51 beta
- Bug fixes

Version 2.52 beta
- Added Typeface support for rows and hedaer

Version 2.53
- Added SingleLine property for columns

sample code and usage hints can be found here
http://www.b4x.com/android/forum/threads/grid-library.16381/page-15#post-194602

Version 2.55
- Added object b4aActivityContext

Version 2.56
- Added and modified event hendlers
https://www.b4x.com/android/forum/threads/grid-and-listview-library.16381/page-19#post-297198

Version 2.57
- Added Columns Builders
https://www.b4x.com/android/forum/threads/grid-and-listview-library.16381/page-19#post-299406

Version 2.58
- Bug fixes

Version 2.59
- Added RowHeight for each column
- Added HeaderHeight for each column
https://www.b4x.com/android/forum/threads/grid-and-listview-library.16381/page-19#post-304465

Version 2.60
- Added TouchX() and TouchY()
- Added FirstVisiblePosition() and LastVisiblePosition()
https://www.b4x.com/android/forum/threads/grid-and-listview-library.16381/page-19#post-304905

Version 2.65
- Added Button Columns
https://www.b4x.com/android/forum/threads/grid-and-listview-library.16381/page-19#post-306507

Version 2.67
- Added CellProps event
- Removed PropSetColor / PropSetTextColor
https://www.b4x.com/android/forum/threads/grid-table-and-listview-library.16381/page-19#post-307490

Version 2.71
- Added OnSelectAllow event
- Added selection on row background
https://www.b4x.com/android/forum/threads/grid-table-and-listview-library.16381/page-21#post-347618

Version 2.73
- Added OnRowProps event
https://www.b4x.com/android/forum/threads/grid-table-and-listview-library.16381/page-21#post-349404

Version 2.76
- Fixed dubug log bug
https://www.b4x.com/android/forum/threads/grid-table-and-listview-library.16381/page-21#post-375965

If you like my grid.
You can support the development.


 

Attachments

  • xnGridSample200beta.zip
    3.6 KB · Views: 2,042
  • xnGrid2xx_1.png
    xnGrid2xx_1.png
    77.2 KB · Views: 5,090
  • xnObjects267.zip
    75.7 KB · Views: 776
  • xnObjects272.zip
    87.2 KB · Views: 581
  • xnObjects273.zip
    87.5 KB · Views: 678
  • xnObjects276.zip
    87.2 KB · Views: 1,413
Last edited:

COBRASoft

Active Member
Licensed User
Longtime User
Just a little more info to make a beast of a grid :)...

In my sample you just have a data and a column list variable. It is possible to add another list to the grid object with the positions, rowindex, selected and other properties per record. This way editing, selection, ... would become a lot easier by replacing the current record.
The autoheight property will give a problem here if you have e.g. a small text and replace it with a long text. This would require some more logic to remove all records below the current one and place only those records from the current position. If replacing them is too slow, you could change their top position with the difference in height of the current record.

As said before, I can't give my pro grid since it's an inhouse solution (NDA's and stuff). But the explanation above should help a developer a lot further.

P.S.: Thanks Harris, the real credits go to Erel, he made B4A possible. I'm using my 20+ years experience in Basic to grasp all the built-in possibilities.
 
Last edited:

mrjaw

Active Member
Licensed User
Longtime User
There is any example,real, that can I use to test ?

I tried to use that you have but really I dont know how.

Thks
 

mrjaw

Active Member
Licensed User
Longtime User
Hi!
There is a real example how to use this library grid. I am trying to use this but I dont know how

The example here is incomplete and confuse.. at last for me , a newbie
Thks
 

COBRASoft

Active Member
Licensed User
Longtime User
Thread Hijack (again). :sign0013:

Look here, I've added more functionality like selection and value changes without redrawing the grid.

Please, investigate the code, use the debugging mode of B4A and step through the code to see what happens.

Greetings,
Sigurd
 

stefanobusetto

Active Member
Licensed User
Longtime User
example code :

'Activity module
Sub Process_Globals
'These global variables will be declared once when the application starts.
'These variables can be accessed from all modules.

End Sub

Sub Globals
'These global variables will be redeclared each time the activity is created.
'These variables can only be accessed from this module.
Dim gg As xnGrid
Dim tt As xnTable
End Sub

Sub Activity_Create(FirstTime As Boolean)
Dim bt_create As Button
Dim bt_clear As Button
Dim bt_multi As Button

' create 2 buttons
bt_create.Initialize("bt_create")
bt_create.Text = "create"
bt_create.TextSize = 14
Activity.AddView ( bt_create , 0dip , 10dip , 80dip , 40dip )

bt_clear.Initialize("bt_clear")
bt_clear.Text = "clear"
bt_clear.TextSize = 14
Activity.AddView ( bt_clear , 100dip , 10dip , 80dip , 40dip )

bt_multi.Initialize("bt_multi")
bt_multi.Text = "multi"
bt_multi.TextSize = 14
Activity.AddView ( bt_multi , 200dip , 10dip , 80dip , 40dip )
End Sub

Sub bt_create_click
' **************************************************************************
' create a table object with the data to be displayed in the grid
' **************************************************************************
tt.Initialize ( Array As String ( "cod" , "des" , "grp" , "other" ) )
For r = 0 To 40
tt.Append ( Array As String ( "c=" & r , "d=" & r , "g=" & r , "o=" & r ) )
Next

' **************************************************************************
' create the grid object and then grid column objects
' **************************************************************************
gg.Initialize("gg")
gg.RowHeight = 40dip

gg.HeaderColor = Colors.Red
gg.RowEvenColor = Colors.Green
gg.RowOddColor = Colors.Yellow

gg.HeaderTextSize = 15
gg.RowTextSize = 20

' customize
' gg.??? = ???

' set to true or false to test the single click selection or the multiselection
gg.Multiselect = True

Dim c0 As xnGridCol
Dim c1 As xnGridCol
Dim c2 As xnGridCol

gg.SelectedOddColor = Colors.DarkGray
gg.SelectedEvenColor = Colors.Magenta


c0.Initialize2 ( "Cod." , "cod" , 40dip , Gravity.FILL)
gg.Columns.Add ( c0 )

c1.Initialize2 ( "Des." , "des" , 120dip , Gravity.CENTER_VERTICAL )
gg.Columns.Add ( c1 )

c2.Initialize2 ( "Grp." , "grp" , 60dip , Gravity.CENTER_HORIZONTAL )
gg.Columns.Add ( c2 )

' **************************************************************************
' add the view and display the grid
' no horizontal scroll with vertical scroll
' **************************************************************************
Activity.AddView ( gg , 10dip , 50dip , 520dip , 700dip )
gg.GridCreate2 ( tt , False , True )
End Sub

Sub bt_clear_click
' **************************************************************************
' clear the grid
' **************************************************************************
gg.GridClear
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub gg_select
' **************************************************************************
' handling the on select event
' **************************************************************************
Msgbox ( "value of the first column = " & tt.GetValue ( gg.RowSelected , 0 ) , "row selected = " & gg.RowSelected )
End Sub

Sub bt_multi_click
' **************************************************************************
' handling the multiselection
' **************************************************************************
For i = 0 To gg.RowsSelected.Length - 1
Msgbox ( "value of the first column = " & tt.GetValue ( gg.RowsSelected(i) , 0 ) , "row selected = " & gg.RowsSelected(i) )
Next
End Sub
 

Harris

Expert
Licensed User
Longtime User
@harris
what do you mean with
"2. Display the grid at the location specified (fit all screen sizes - which is nearly impossible - for me anyway)."

Sorry buddy,

This was not directed towards you. It is Android in general. I see what you are trying to do. If I have a grid smaller than my screen, and I change your grid background color - without centering the grid within the view, it looks (well not great). If I position the grid (left, top, width, hieght) for the known screen res, it looks professional.

Like all of of us have stated, dealing with the different form factors (screen denisties and sizes) is most challenging. ICS was "supposed" to help us out - but we experience no change - the basstods lied...

The underlying business logic works fine on ANY device. However, if I create a custom layout (which are many) I find myself creating a new .bal for each device I wish to support. This may mean eliminating controls that fit on a larger (ie 1024x600 - 1280x720 - or WHATEVER) as opposed to when trying to work on a Galaxt S II (800x480 - 1.5) - no room .... It is not impossible - it is I am lazy (not really - I dont have time to screw around designing screen layouts - business logic is more important). I spend MUCH more time adjusting for variuos form factors than doing the business logic. That's just wrong - but unfortuantly - thats the way it is... with Android - at the moment. Hey - we have to have something to bitch about. (otherwise Android is the best thing I have ever seen - and B4A (aka Erel) makes that all real - otherwise I would not be writing this post).

Speaking of lazy, do you people follow the comments on the Verge (and others)? They state thst the apps we develop are (often) never upgraded to fit tablet devices - so they look shitty. They work - however they dont take advantage of the larger screen. This, I beleive, is because what I stated above - and they call us lazy. This is why (they claim) iOS rocks in sales while we languish.

I could write a book about this SH*@ - so I shall stop now

Thanks
 

COBRASoft

Active Member
Licensed User
Longtime User
@Harris: Sorry, I don't agree with you. This is not Androids fault at all. On the desktop (Windows, Linux, ...) you have exactly the same problem. Some of my customers have 1024x768 resolution and others have higher widescreen resolutions. When designing my forms I have to take this into account too. The main difference is, that it is easier on the desktop because I use DevExpress layoutcontrol. This control can use % for width and height as well as fixed sizes in a designer. For Webdesign you have exactly the same problem.

It is up to the developer to take care of this. .bal files are nice and easy for small things. When you want real good layouts, you have to do them in code. You'll have much more control and you can make it work for any resolution you want. My inhouse app supports even different fontsizes 'on the fly'. The user can slide the font size and sees the changes realtime (yes, the views are completely redrawn/replaced).

E.g. my grid is a good example of this. When the width of an activity is more than 480, you could add 1 or more columns to the grid before adding the grid to the activity.
 

stefanobusetto

Active Member
Licensed User
Longtime User
I agree with cobrasoft and also I write complex interfaces by code. Surely it more complex but you have a better control. You can also manage easily different layout.
 

Harris

Expert
Licensed User
Longtime User
Sorry in reply delay. I have been removing the tranny out of my 2000 Dakota to replace the clutch. This project again re-afirms why I gave up auto-mechanics 30 years ago. Fortunately, I and my good neigbor who has the hoist, are in no hurray.

" The main difference is, that it is easier on the desktop because I use DevExpress layoutcontrol. "

Is there an equivilant for B4A? Talk was from Google, that ICS would address our screen res and pos issue - must have read it wrong (again).

I was hoping for an automatic solution. say you create a layout for 1024 x 600 (my Acer A100) in both portrait and landscape (or some standard size - like ICS stated 1280x720?). Based on this initial layout, the OS would adjust / compensate for all other known screen sizes and densities based on the initial design. Shrink, grow, expand, contract, increase/decrease font - whatever it took to make the controls look as designed on the initial design and fit the current screen. How hard can that be? Apparently - extremely difficult.... (or Erel would have already solved it).

I have tried coding to compensate for this with varying degress of success. Each view has to be addressed individually - sized, placed and font control based on the current screen. Due to the nature of many of my forms, I find this extremely laborious. Typically, I resort to creating a .bal because I don't like the trial and error of coding placement. I am sure that my projects do not differ that much from yours, yet I struggle (most likely cause I lack the ability to comprehend what you have explained and know).

One thing is certain. The person who cracks this nut shall be held in high regard. Maybe what we need is a code generator that takes the .bal and produces the %x / %y code - like you are currently hand coding...???

Looking forward to your latest grid update.

:sign0152:

Harris
 

giannimaione

Well-Known Member
Licensed User
Longtime User
eccellente

Hi Stefano,

your lib xnObj is easy and powerfull.
complimenti
 

COBRASoft

Active Member
Licensed User
Longtime User
@Harris: I know it's not 'drag & drop' easy on Android, but it is easy if you know how to make 'resizable' code. Yes, you have to do this for every view in every activity. If you create modules like my grid and make a seperate module which contains contant values for different settings like horizontal/vertical spacing between views, to add views to an activity, ... this makes coding UI's a lot easier and much more powerful. You don't have to take care for 'every' resolution out there. You have some standards like 320x240, 800x480, 1024x768. You know these resolutions in your Main activity's Create event and can adjust your 'constants' to this. You can e.g. place views on a vertical scrollview. No matter what size the screen is, this will work and look nice. Another thing to do is show the label above a field or in front of it. This last 'trick' can help landscape/portrait at the same time.

So, this is a long description and deeper explanation how things can be done in code. It's harder, but it makes the developer think better about optimizing the UI overall too.
 

tmighty

Member
Licensed User
Longtime User
Missing reference

Edit: I found the "libs" tab. It is located on the right bottom corner.
-------------------------------------------------------------------
Dear Stefano,

thank you for the great submission.

I wanted to try your grid control. I downloaded the file xnObjects121.zip and extracted the contents to c:\Program Files (x86)\Anywhere Software\Basic4android\Libraries.

Then I changed the sample project (the one which starts when you simply load B4A) this way:

'Activity module
Sub Process_Globals
'These global variables will be declared once when the application starts.
'These variables can be accessed from all modules.
Dim gg As xnGrid
Dim tt As xnTable
End Sub

Then I tried to debug/run it, and the compiler said "Unknown type: xngrid. Are you missing a library reference?".

I did not find any way to tell B4A that I want to include a certain library, so I thought that simply extracting your xnObjects.jar and xnObjects.xml to the B4A folder would be sufficient.

Can you please tell me where I went wrong?

Thank you very much!
 
Last edited:

tmighty

Member
Licensed User
Longtime User
Hi Stefano,

thank you, I found it.

There is no way to add images to the cells of the grid, right?

Best greetings.
 

stefanobusetto

Active Member
Licensed User
Longtime User
new version ( rewritten from scratch )
changes in the data are now visible in the grid
see attached example (in the main post)
xnTable no longer exist!
even if i consider this version still a beta
i've found no errors till now
bug reports are highly welcome
 

giannimaione

Well-Known Member
Licensed User
Longtime User
il mio piccolo contributo

B4X:
Sub Make_Grid
        Dim Sql1 as SQL
SQL1.Initialize(File.DirInternal,"clienti.db",True)
   Dim Conto As String
   Dim Griglia As xnGrid
   Dim Tabella(3) As xnGridCol
   Griglia.Initialize("eventoT")
   Tabella(0).Initialize("Codice","Codice",20%x)
   Tabella(1).Initialize("Nominativo","Ragsoc",50%x)
   Tabella(2).Initialize2("Saldo","Saldo",30%x,Gravity.RIGHT)
'''' 20%x+50%+30x%=100%x  ' ;)
   Griglia.AppendCol(Tabella(0))
   Griglia.AppendCol(Tabella(1))
   Griglia.AppendCol(Tabella(2))
   Dim CURSORE As Cursor
   Dim text As String
   Dim Codcli As String
   Dim Ragsoc As String
   Dim Saldo As String
   text="SELECT * FROM CLIENT ORDER BY RAGSOC ASC"
   CURSORE=Main.SQL1.ExecQuery(text)
   For I=0 To CURSORE.RowCount-1
      CURSORE.Position=I
      Codcli=CURSORE.GetString("CODCLI")
      Ragsoc=CURSORE.GetString("RAGSOC")
      Saldo=CURSORE.GetString("SALDO")
      Griglia.Appendrow(Array As String(Codcli,Ragsoc,Saldo))
   Next
   Griglia.HeaderTextSize = 15
   Griglia.RowTextSize = 15
   Griglia.RowHeight = 60dip
   Activity.AddView (Griglia , 0 , 0 , 100%x , 100%y)
   Griglia.GridCreate2(False,True)
End Sub
Sub eventoT_Select
   Dim a1 As Int
   a1=Griglia.RowSelected
   Conto=Griglia.GetValue(a1,0)
        msgbox(Conto,"Your Choice")
'''   StartActivity("vidsch"):' show detail of account
End Sub
 
Last edited:

stefanobusetto

Active Member
Licensed User
Longtime User
great!
i didn't have time to write a database example

you can also use:
MapAppendRow
MapInsertRow
 
Top