B4J Tutorial TableView Tutorial

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:
B4X:
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.
 

Attachments

Last edited:

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 ?
 

imbault

Well-Known Member
Licensed User
Thanks Erel, Labels are fine, except the column sort doesn't work on such columns...

Patrick
 

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
 

coyote

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

B4X:
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
 

coyote

Member
Licensed User
You mean, I should do it like this?

Loop:
B4X:
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:
B4X:
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
 

coyote

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

This is not working:
B4X:
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

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
 

coyote

Member
Licensed User
Unfortunately, it doesn't work.
The mouse cursor is over the label but nothing happens.
When I insert
B4X:
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
 

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
 

Erel

Administrator
Staff member
Licensed User
Create a css file with this content (table.css):
B4X:
.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:
B4X:
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

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
 

tcgoh

Active Member
Licensed User
Thanks. Its work with these code

B4X:
.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;
}
 
Top