B4J Tutorial TableView Tutorial

Discussion in 'B4J Tutorials' started by Erel, Dec 10, 2013.

  1. Erel

    Erel Administrator Staff Member Licensed User

    TableView is useful to show data in a tabular view.

    The data is held in a List. Each item in this list is an array of objects. The length of each array equals to the number of colums.

    For example to fill a table with three columns with some random data we can use this code:
    Code:
    TableView1.SetColumns(Array As String("Column 1""Column 2""Column 3"))
    For i = 1 To 1000
    Dim Row() As Object = Array ("a""b""c")
    TableView1.Items.Add(Row)
    Next
    TableView can also accept Nodes as items. In this case the nodes will be displayed inside the cells.
    By adding nodes as items you can fully customize the TableView appearance.

    Another advantage of nodes is that they can be easily updated. The attached example creates a table with two columns. The second column can be updated:

    [​IMG]

    DBUtils.ExecuteTableView fills a TableView from a SQLite database. It should be simple to change the code to other DBs.
     

    Attached Files:

    Last edited: Jun 7, 2017
  2. imbault

    imbault Well-Known Member Licensed User

    Erel, please, how to catch a doubleclick, getting the row and rowid (index) as well as in the _selectRowChanged event ?
     
  3. Erel

    Erel Administrator Staff Member Licensed User

    You can add labels instead of strings and then handle the labels MouseClicked event to handle double clicks.

    You can add the row id to the label's tag.
     
    luke2012 likes this.
  4. imbault

    imbault Well-Known Member Licensed User

    Thanks Erel, Labels are fine, except the column sort doesn't work on such columns...

    Patrick
     
  5. coyote

    coyote Member Licensed User

    Hi Patrick & Erel, how can I handle the double click event for labels?
    I've insert some rows with labels but I don't know how to catch the events.
    Could you give me an example?

    Coyote
     
  6. Erel

    Erel Administrator Staff Member Licensed User

    You should handle the labels MouseClicked event. Then call EventData.ClickCount to find the number of clicks.
     
  7. coyote

    coyote Member Licensed User

    OK, I think, I've got it.
    Erel, do you think that's ok?
    Or should I do change something?

    Code:
    Sub Process_Globals
        
    Private fx As JFX
        
    Private MainForm As Form
        
    Private tv1 As TableView
        
    Private lbl As Label
    End Sub

    Sub AppStart (Form1 As Form, Args() As String)
        MainForm = Form1
        MainForm.RootPane.LoadLayout(
    "1")
        MainForm.Show
        MainForm.Title = 
    "Test"
        tv1.SetColumns(
    Array As String("Col1""Col2"))
           
        
    For i = 1 To 5
            
    Dim row(2As Object
            row(
    0) = "Row No." & i
            lbl.Initialize(
    "label")
            lbl.Text = 
    "Label " & i
            lbl.Tag = i
            row(
    1) = lbl
            tv1.Items.Add(row)
        
    Next
        tv1.SetColumnSortable(
    1False)
        tv1.SetColumnWidth(
    1,200)
    End Sub
    Sub label_MouseClicked (EventData As MouseEvent)
        
    If EventData.ClickCount = 2 Then
            
    Log("Label :" & lbl.Tag)
        
    End If
    End Sub

    Coyote
     
    dragonguy and creativemagicman like this.
  8. Erel

    Erel Administrator Staff Member Licensed User

    1. Add Dim lbl As Label to the For loop.
    2. Use Sender in the event to get a reference to the correct label.
     
  9. coyote

    coyote Member Licensed User

    You mean, I should do it like this?

    Loop:
    Code:
    For i = 1 To 5
            
    Dim row(2As Object
            row(
    0) = "Row No." & i
            
    dim lbl As Label
            lbl.Initialize(
    "label")
            lbl.Text = 
    "Label " & i
            lbl.Tag = i
            row(
    1) = lbl
            tv1.Items.Add(row)
        
    Next
    Mouse Click:
    Code:
    Sub label_MouseClicked (EventData As MouseEvent)
        
    Dim lbl As Label
        lbl = 
    Sender
        
    If EventData.ClickCount = 2 Then
            
    Log("Label :" & lbl.Tag )
        
    End If
    End Sub
    Coyote
     
    raphaelcno, dragonguy and Phayao like this.
  10. imbault

    imbault Well-Known Member Licensed User

    Yep Coyote, it should work properly (double-click on your 2nd column)
     
    coyote likes this.
  11. coyote

    coyote Member Licensed User

    Ok, that sounds good.
    But now, I wonder how it works with label.tooltiptext?

    This is not working:
    Code:
    Sub label_MouseMoved (EventData As MouseEvent)
        
    Dim lbl As Label
        lbl = 
    Sender
        
    Dim x As String = "Label :" & lbl.Tag
        lbl.TooltipText = x
    End Sub
    In x is the correct value but the tooltip doesn't appear.

    Coyote
     
  12. imbault

    imbault Well-Known Member Licensed User

    Your code is correct, after a click on 2nd column. put the cursor on the cell, and you should see the tooltip.

    Patrick
     
  13. coyote

    coyote Member Licensed User

    Unfortunately, it doesn't work.
    The mouse cursor is over the label but nothing happens.
    When I insert
    Code:
    tv1.TooltipText = x
    the tooltip appears but it's for the whole table and does not appear when the mouse is over the label.

    Coyote
     
  14. driesvp

    driesvp Member Licensed User

    Is there a property like "rowcount" to determine how many rows are present?

    Dries
     
  15. Erel

    Erel Administrator Staff Member Licensed User

    Code:
    Log(tv1.Items.Size)
     
  16. tcgoh

    tcgoh Active Member Licensed User

    Hi,

    Is there a way or code to set the rows NOT to have alternate color ? ie, all cells in "white" color only.

    Thanks
     
  17. Erel

    Erel Administrator Staff Member Licensed User

    Create a css file with this content (table.css):
    Code:
    .table-row-cell:odd {
      -fx-background-color: -fx-table-cell-border-color, -fx-
    control-inner-background;
      -fx-background-insets: 
    00 0 1 0;
    }

    .table-row-cell:focused:odd {
      -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
      -fx-background-insets: 0, 1, 2;
    }

    .table-view:focused .table-row-cell:filled:focused:selected {
      -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
      -fx-background-insets: 0, 1, 2;
      -fx-background: -fx-accent;
      -fx-text-fill: -fx-selection-bar-text;
    }
    Load it with:
    Code:
    MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "table.css"))
    It is a slightly modified version of the default style: http://pastebin.com/0PebD9nR

    Note that there is an issue with the hovering color not showing on odd rows. You can probably fix it by adding one of the other attributes.

    [​IMG]
     
  18. tcgoh

    tcgoh Active Member Licensed User

    Hi Erel,

    Thanks for the code, its work like a gem. Just a addition request, is it possible to change the "white" base color to any other color?

    I tried adding these on top of your code in css file,
    .table1 {
    -fx-background-color:blue;
    }

    but it only change the color on the edge of the table.

    Many Thanks
     
  19. Erel

    Erel Administrator Staff Member Licensed User

    Try to replace -fx-table-cell-border-color with blue.
     
  20. tcgoh

    tcgoh Active Member Licensed User

    Thanks. Its work with these code

    Code:
    .table-row-cell {
      -fx-background-color:lightgrey;
    -fx-table-cell-border-color:black;
    -fx-background-insets: 
    02 , -5;
    }

    .table-row-cell:odd {
      -fx-background-color:lightgrey;
    -fx-table-cell-border-color:black;
      -fx-background-insets: 0, 2 2 1 -2,15;
    }

    .table-row-cell:focused:odd {
      -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
      -fx-background-insets: 0, 5, 2;
    }

    .table-view:focused .table-row-cell:filled:focused:selected {
      -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-selection-bar;
      -fx-background-insets: 0, 5, 5;
      -fx-background: -fx-accent;
      -fx-text-fill: -fx-selection-bar-text;
    }
     
    Erel likes this.
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