XUI FlexGrid

Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
For some time I have been thinking of creating a view that has grids.
The (great) Class Flexible Table (by @klaus) already exists and is used continuously.

But I thought of something different, a grid to which you could add are not cells containing text and numbers, but also checkboxes, and images (and who knows even buttons)
A grid that could be used to determine the width of each column and the height of each row.You could change the color to a single cell, select a row or a column or a single cell, let the cells be editable ... etc. ...
Also something that was good for Android and for IOS. (XUI)

Yesterday so I started to throw something down in my spare time (little) and this is what I did in a couple of hours ....

B4X: 
Activity.LoadLayout("Layout1")
    ' Set Header Text
    FlexGrid1.ColsName=Array As String("Num","Selc","Name","Img","Digit")
    ' Set Clumn Width
    FlexGrid1.ColsWidth=Array As Int(75dip,50dip,100dip,40dip,150dip)
    ' Set Type of Dates
    FlexGrid1.ColsType=Array As Int(FlexGrid1.TypeInt,FlexGrid1.TypeCheck,FlexGrid1.TypeString,FlexGrid1.TypeImage,FlexGrid1.TypeFloat)
    FlexGrid1.ColsAlignment=Array As String("CENTER","CENTER","LEFT","LEFT","RIGHT")
 
    Dim B As Boolean=False
    For i=1 To 25
        B=Not(B)
        FlexGrid1.AddRow(Array As Object(i,B,"User " & i,Null,Rnd(50,10000)/100))
        ' AddRow2 can set rowWidht
        'FlexGrid1.AddRow2(Array As Object(i,B,"User " & i,LoadBitmap(File.DirAssets,"b4a.png"),Rnd(50,10000)/100),60dip)
    Next
 
    FlexGrid1.SetCell(0,0,100)
    FlexGrid1.SetCell(1,2,"User 200")
    FlexGrid1.SetCell(0,3,LoadBitmap(File.DirAssets,"b4a.png"))
    FlexGrid1.SetCell(2,3,LoadBitmap(File.DirAssets,"b4j.png"))
    FlexGrid1.SetCell(4,3,LoadBitmap(File.DirAssets,"b4i.png"))
    'FlexGrid1.SetRowHeight(1,60dip)
    'FlexGrid1.SetColWidth(3,40dip)
    FlexGrid1.Invalidate

Video1.gif


I am keen to find out how this project will evolve
 
Last edited:
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
Thank you for your suggestion. I have never used xCustomListView and I do not know if it is possible to access the contents of the single cell that is image, string or other.
But I am sure that the idea of making the cells editable is not contained. I'm trying to recreate something like MS Excel.

Then you know how the projects go sometimes, start with a direction in mind and make the path changes.
 
Peter Simpson

Peter Simpson

Expert
Licensed User
Longtime User
I've used xCLV in a number of my clients projects, it's seriously powerful and easy to use. When B4A users ask a question about list with text boxes, spinners and check boxes, I always respond with 'have you looked at xCustomListView, it's easy enough to to implement' or words to that effect.

Anyway keep up the good work SD, you're a credit to this community...
 
Peter Simpson

Peter Simpson

Expert
Licensed User
Longtime User
Three screenshots showing xCLV.

xCLV with Labels, EditText and Checkbox
Screenshot_1540719489.png


xCLV with Labels and Checkbox
Screenshot_1540719497.png


xCLV is extreamly simple to use and is seriously powerful. The screenshots above don't use lazy loading for obvious reasons. I always use xCLV with LL for all larger lists (or future potentially large lists) like the mix list below (or for example invoice lists that obviously gets larger over time). I usually have LL set to load 50 lines at a time.

Mix list created using xCLV which utilises Lazy Loading. Even with thousands of mixes the list should still load really quickly as I'm loading the minimal about of data into the Types before loading X * 50 lines at a time into the list.
Screenshot_1540720774.png


The screenshots are just ideas for @Star-Dust, might give him some ideas, might not...
 
Last edited:
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
I would also like to see the written code that allowed us to create such a grid.
Sometimes the custom listview to create such panels you have to write a lot of code that you would do first to create a scrollview and a sub that you can poolate it.
My goal is to create a Vista that allows you to create a versatile grid by writing as few codes as possible.

There are several libraries that create grids including the one I gave before @klaus. I think they are very useful even if the same result can be obtained with a personalized listview.

I prefer to have a library that was created specifically for this purpose. But obviously everyone has his own point of view.

PS . I wonder if you can select single-cell I have to column inside to xCustomlistview without having to go crazy
 
Last edited:
Peter Simpson

Peter Simpson

Expert
Licensed User
Longtime User
Star-Dust said:
I would also like to see the written code that allowed us to create such a grid.
Click to expand...

When I turn my development laptop back on in a few hours time, I'll send you an excellent but simple example @Star-Dust, IIshould have one in my test code folder.

The example above connects to an MySQL database, but I do have some simple test code that just reacts to CheckBox clicks and reading from EditText.
 
Last edited:
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
I downloaded the DEMO that is attached to the xCLV Thread: (These are the main steps)
B4X: 
Sub Globals
    ......
    Private clv2 As CustomListView
    .....
End Sub

Sub Activity_Create(FirstTime As Boolean)
    .......
    For i = 1 To 20
        clv2.Add(CreateListItem($"Item #${i}"$, clv2.AsView.Width, 60dip), $"Item #${i}"$)
    Next
End Sub

Sub CreateListItem(Text As String, Width As Int, Height As Int) As Panel
    Dim p As Panel
    p.Initialize("")
    p.SetLayout(0, 0, Width, Height)
    p.LoadLayout("CellItem")
    Label1.Text = Text
    Return p
End Sub

Sub clv2_ItemClick(Index As Int, Value As Object)
    clv2.AsView.BringToFront
    Log(Index & " = " & Value)
    ...
End Sub

So I would do it with ScrollView and almost the same code:
B4X: 
Sub Globals
    ......
    Private SV As ScrollView
    .....
End Sub

Sub Activity_Create(FirstTime As Boolean)
    .......
   For i = 1 To 20
        SV.Panel.Addview(CreateListItem($"Item #${i}"$,$"Item #${i}"$),0,SV.Panel.Height,SV.Width,60dip)
        SV.Panel.Height=SV.Panel.Height+60dip
    Next
End Sub

Sub CreateListItem(Text As String, Value As Object) As Panel
    Dim p As Panel
    p.Initialize("Item")
    'p.SetLayout(0, 0, Width, Height)
    p.LoadLayout("CellItem")
    Label1.Text = Text
    p.Tag=Value
    Return p
End Sub

Sub Item_Click
    Dim P As Panel = Sender
    Dim Index As Int = P.Top/60dip
    Dim Value As Object = P.Tag
    Log(Index & " = " & Value)
End Sub

In my library:
B4X: 
    Private FlexGrid1 as Flexgrid

Sub Activity_Create(FirstTime As Boolean)
    FlexGrid1.ColsName=Array As String("Text","Button","Check")
    FlexGrid1.ColsWidth=Array As Int(75dip,250dip,100dip)
    FlexGrid1.ColsType=Array As Int(FlexGrid1.TypeString,Flecgrid1.TypeButton,FlexGrid1.TypeCheck)
 
    For i=1 To 20
        FlexGrid1.AddRow(Array As Object($"Item #${i}"$,"Click Me",True)
    Next
End Sub

Sub FlexGrid1_CellClick(Row As Int, Col As Int)
    Dim Value As Object = FlexGrid1.GetCell(Row,Col)
    Log("Col:" & col & "  Row:" & row & " ---" & Value)
End Sub

Conclusions: xCLV is an excellent customisable solution but in grids it is not less complicated than using a ScrollView, you can use them scabiously, you have few advantages.
A library that was created to create a grid allows you to get the same things in a more transparent way for the developer, without having to write too much code and enter in the specific.

I repeat: It is my opinion, and I am sure that others do not agree and this is quite natural. Everyone can, and must, see things from their own point of view, this is the beauty of life ... having different opinions.
 
Last edited:
Peter Simpson

Peter Simpson

Expert
Licensed User
Longtime User
xCLV is an excellent solution for cross platform solutions, I use it all the time and it's extremely customisable and flexible too, one fits all.

So far your library does look good though and I for one can't wait for you to finish it so that I can try it out for myself, as usual :)
 
Last edited:
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
PS. In the future this line will not be necessary
B4X: 
FlexGrid1.ColsType=Array As Int(FlexGrid1.TypeString,Flecgrid1.TypeButton,FlexGrid1.TypeCheck)
You will not need to specify what type of data will contain each column because the class will recognize the type of each individual cell
 
Peter Simpson

Peter Simpson

Expert
Licensed User
Longtime User
Star-Dust said:
PS. In the future this line will not be necessary
B4X: 
FlexGrid1.ColsType=Array As Int(FlexGrid1.TypeString,Flecgrid1.TypeButton,FlexGrid1.TypeCheck)
You will not need to specify what type of data will contain each column because the class will recognize the type of each individual cell
Click to expand...

Really, that's a clever way of doing it, the less lines of code the better.

Hey I'll gladly beta test it for you hint hint hint lol ;)
 
Star-Dust

Star-Dust

Expert
Licensed User
Longtime User
Today I had half an hour free and I continued my project.
Here is a small step forward ... Cell Selection
Video2.gif

Are you able to do this with XCustomListView?
 
Last edited:
You must log in or register to reply here.
Top