XUI FlexGrid

Discussion in 'Chit Chat' started by Star-Dust, Oct 26, 2018.

  1. Star-Dust

    Star-Dust Expert Licensed 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 ....

    Code:
    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: Oct 26, 2018
    f0raster0, ilan, Mashiane and 16 others like this.
  2. Peter Simpson

    Peter Simpson Expert Licensed User

    This is excellent work as usual SD, 5/5 from me :D
     
    Johan Hormaza and Star-Dust like this.
  3. Erel

    Erel Administrator Staff Member Licensed User

    I would have used xCustomListView for this. You will get many features "for free". The horizontal movement can be added quite easily. You can check CLVSwipe code which handles more complicated gestures.
     
  4. Star-Dust

    Star-Dust Expert Licensed 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.
     
  5. LucaMs

    LucaMs Expert Licensed User

    Wrong. In xCustomListView you create each item as you wish, even with all EditTexts, if you want.
     
    Johan Hormaza and Erel like this.
  6. Peter Simpson

    Peter Simpson Expert Licensed 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...
     
    Johan Hormaza likes this.
  7. Filippo

    Filippo Expert Licensed User

    Here is an example with label, text box, radio button, button, checkbox.
    lic-manager.png
     
    Johan Hormaza, Mashiane and LucaMs like this.
  8. Peter Simpson

    Peter Simpson Expert Licensed 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: Oct 28, 2018
  9. Star-Dust

    Star-Dust Expert Licensed 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: Oct 28, 2018
  10. Peter Simpson

    Peter Simpson Expert Licensed User

    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: Oct 28, 2018
  11. Erel

    Erel Administrator Staff Member Licensed User

    You don't need to write any code. You create the cell layouts with the designer.
     
    Filippo likes this.
  12. Star-Dust

    Star-Dust Expert Licensed User

    I downloaded the DEMO that is attached to the xCLV Thread: (These are the main steps)
    Code:
    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(
    00, 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:
    Code:
    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:
    Code:
    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: Oct 28, 2018
    Peter Simpson likes this.
  13. Peter Simpson

    Peter Simpson Expert Licensed 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: Oct 28, 2018
  14. Star-Dust

    Star-Dust Expert Licensed User

    PS. In the future this line will not be necessary
    Code:
    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 likes this.
  15. Peter Simpson

    Peter Simpson Expert Licensed User

    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 ;)
     
    Johan Hormaza likes this.
  16. Star-Dust

    Star-Dust Expert Licensed 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: Oct 31, 2018
    Filippo, Erel, Johan Hormaza and 2 others like this.
  17. LucaMs

    LucaMs Expert Licensed User

    Yes.
     
  18. Peter Simpson

    Peter Simpson Expert Licensed User

    I don't know as I've not tried it, I can't think how I would do that in xCLV though as I've never had to.

    Keep up the fantastic work Sal..., and my beta tester offer still stands ;)

    Cheers...
     
    Star-Dust likes this.
  19. Star-Dust

    Star-Dust Expert Licensed User

    Iphone. (Still to be finished)
    Video3.gif
     
    Johan Hormaza and Peter Simpson like this.
  20. LucaMs

    LucaMs Expert Licensed User

    I would avoid free scrolling, since there are column headers.
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice