B4A Library Grid/Table and ListView Library

COBRASoft · Apr 27, 2012

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.

stefanobusetto · Apr 27, 2012

Tanks.
obviously i have to study the sources.

mrjaw · Apr 28, 2012

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 · Apr 28, 2012

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 · Apr 28, 2012

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 · Apr 28, 2012

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 · Apr 28, 2012

stefanobusetto said:
@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 · Apr 28, 2012

@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 · Apr 29, 2012

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 · May 4, 2012

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

Gianni M · May 5, 2012

eccellente

Hi Stefano,

your lib xnObj is easy and powerfull.
complimenti

COBRASoft · May 6, 2012

@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 · May 6, 2012

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!

stefanobusetto · May 6, 2012

inside b4a
to the right side of the ide window
select the libraries tab
and check xnObjects

tmighty · May 6, 2012

Hi Stefano,

thank you, I found it.

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

Best greetings.

stefanobusetto · May 6, 2012

correct

stefanobusetto · May 7, 2012

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

kaplanerkan · May 7, 2012

A big thank you stefanobusetto

now i can add/delete the rows at runtime...

greet job.

Gianni M · May 7, 2012

il mio piccolo contributo

Code:

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

stefanobusetto · May 8, 2012

great!
i didn't have time to write a database example

you can also use:
MapAppendRow
MapInsertRow

B4A Library Grid/Table and ListView Library

Attachments

Active Member

Active Member

Active Member

Active Member

Active Member

Active Member

Expert

Active Member

Active Member

Expert

Well-Known Member

Active Member

Member

Active Member

Member

Active Member

Active Member

Member

Well-Known Member

Active Member

Similar Threads