B4J Tutorial TableView Tutorial

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:

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:

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

 

[imbault]

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

 

[Erel]

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.

 

[imbault]

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

Patrick

 

[coyote]

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

 

[Erel]

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

 

[coyote]

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

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(2) As 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(1, False)
    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

 

[Erel]

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

 

[coyote]

You mean, I should do it like this?

Loop:

For i = 1 To 5
        Dim row(2) As 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:

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

 

[imbault]

Yep Coyote, it should work properly (double-click on your 2nd column)

 

[coyote]

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

This is not working:

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

 

[imbault]

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

Patrick

 

[coyote]

Unfortunately, it doesn't work.
The mouse cursor is over the label but nothing happens.
When I insert

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

 

[driesvp]

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

Dries

 

[Erel]

Log(tv1.Items.Size)

 

[tcgoh]

Hi,

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

Thanks

 

[Erel]

Create a css file with this content (table.css):

.table-row-cell:odd {
  -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background;
  -fx-background-insets: 0, 0 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:

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.

 

[tcgoh]

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

 

[Erel]

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

 

[tcgoh]

Thanks. Its work with these code

.table-row-cell {
  -fx-background-color:lightgrey;
-fx-table-cell-border-color:black;
-fx-background-insets: 0, 2 , -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;
}