B4J Question Write text in TableView column in either red or black

strupp01

Active Member
Licensed User
Longtime User
I have a TableView with 8 columns. Depending on the value to be entered, I would like to display the value in red or black in column 7.
It does not matter if the color is changed when saving to the TableView or directly afterwards.
Have already tried CSSUtils.SetStyleProperty, but it has not worked yet.
Who can help ?
 

strupp01

Active Member
Licensed User
Longtime User
I looked at the example, but found no solution for me.
I want to set the font color to red or black. For a TextArea, this works like this: CSSUtils.SetStyleProperty (long text, "- fx-text-fill", "RED")

I've tried it like this:
SetColumnStyle(Angebot_Neu.Liste_Angebot,7, "-fx-text-fill: Red;")

Sub SetColumnStyle(table As TableView,Index As Int, Style As String)
Dim jo As JavaObject = table
Dim Column As JavaObject = jo.RunMethodJO("getColumns", Null).RunMethod("get", Array(Index))
Column.RunMethod("setStyle", Array(Style))
End Sub

But it does not work either.
 
Last edited:
Upvote 0

Daestrum

Expert
Licensed User
Longtime User
If you look at the example Erel suggested, if you add this to the css file you can choose the colour of the text in a column.

This example code will change column 3 text to red leaving the others as default black.
B4X:
.table-view .table-cell.col3{
 -fx-text-fill: red;
}

NOTE:
This changes all the values in the column. If you want the colour to change on individual values ie <0 = red >0 = black, then you will need to write the cellfactory for that column as that is the only place you can get to the display label for that cell.
 
Upvote 0

strupp01

Active Member
Licensed User
Longtime User
I am very confused now. I would like to change the color in a column to red when 3? so '???' contained in the text of the column.
My TableView is 'Liste_Angebot'. Column 7 should be checked and, if necessary, changed.
B4X:
        If GetCellValue(Markierte_Listen_Zeile, 7).Contains("???") = True Then
            CSSUtils.SetStyleProperty(.table-Liste_Angebot.table-Markierte_Listen_Zeile.col7{-fx-text-fill: red;})
        End If

It does not work that way.
Can you write me the code for CSSUtils?

upload_2018-3-8_18-44-42.png


The text 'Erstattung lt. Rechnung_Nr. ???' should be red.
 
Last edited:
Upvote 0

Daestrum

Expert
Licensed User
Longtime User
Sorry if I did not make my reply clear.

In order to have different coloured text within one column you write a cellfactory for the column.

This example will show you the mechanics of the cell factory. (It's written in java, not been able to recreate in b4j code)
B4X:
#if java
import javafx.scene.control.*; 
import javafx.util.Callback;
import javafx.scene.paint.Color;
public static void setColumnColour(TableColumn tc){
    tc.setCellFactory(new Callback<TableColumn, TableCell>() {
        @Override
        public TableCell call(TableColumn param) {
            return new TableCell<Object, Object>() {
                @Override
                public void updateItem(Object item, boolean empty) {
                    super.updateItem(item, empty);
                    if (!isEmpty()){
       if((Integer)item < 0) {
    // value less than zero - text colour is RED
                      setTextFill(Color.RED);
       setText(""+item);
      } else {
    // value >= 0  - text colour is black
       setTextFill(Color.BLACK);
       setText(""+item);
      }
     } 
                }
            };
        }
    });
} 
#End If

And it is called like
B4X:
...
 Dim cols As List
 cols = asJO(TableView1).RunMethodJO("getColumns",Null)
 Dim cnt As Int = 1
 For Each col As JavaObject In cols
  col.RunMethodJO("getStyleClass",Null).RunMethod("add",Array("col"&cnt))
  If cnt=3 Then ' call the routine on column 3
   asJO(Me).RunMethod("setColumnColour",Array(col))
  End If
  cnt = cnt + 1
 Next
...
Sub asJO(o As JavaObject) As JavaObject
 Return o
End Sub
(sorry about the formatting - MS edge won't copy properly)
 
Upvote 0

Daestrum

Expert
Licensed User
Longtime User
An example changed to detect the '???' in column 3, should be easier to incorporate into your code.
 

Attachments

  • TableViewCellFactory.zip
    3 KB · Views: 223
Upvote 0

strupp01

Active Member
Licensed User
Longtime User
@Daestrum
Thank you for your example. Is for me as a hobby programmer already very complicated. Do I have to look further? Had hoped that there would be a command, as for a TextArea (CSSUtils.SetStyleProperty (long text, "- fx-text-fill", "RED")).
Thank you for your help, because as an amateur programmer I often depend on such examples.

Greeting strupp01
 
Upvote 0

Informatix

Expert
Licensed User
Longtime User
I have a TableView with 8 columns. Depending on the value to be entered, I would like to display the value in red or black in column 7.
It does not matter if the color is changed when saving to the TableView or directly afterwards.
Have already tried CSSUtils.SetStyleProperty, but it has not worked yet.
Who can help ?
Did you look at jTableViewExtended ?
 
Upvote 0

strupp01

Active Member
Licensed User
Longtime User
I found a solution myself by trying it out myself.

B4X:
        SetCellValue(Angebot_Neu.Liste_Angebot.SelectedRow-1, 9, "-fx-text-fill: red")

B4X:
Sub SetCellValue(RowIndex As Int, CellIndex As Int, Value1 As String)
    GetLabel(RowIndex, CellIndex).style = Value1
End Sub

Sub GetLabel(RowIndex As Int, CellIndex As Int) As Label
    Dim row() As Object = Angebot_Neu.Liste_Angebot.Items.Get(RowIndex)
    Return row(CellIndex)
End Sub

As a result, column 9 of the selected line is displayed in red.
This solved my problem.
Thanks to everyone for their help.
strupp01
 
Last edited:
Upvote 0

jmon

Well-Known Member
Licensed User
Longtime User
I iterated from @Daestrum 's code. This example will set the style of the cell based on a map of "text"/"style", simple to adapt to any existing project. Here, for example if the text is "On", it will apply the style of green background.

Note that the style is applied on all the cells of the entire TableView. And it retains the ability to sort the columns by clicking on the header.

B4X:
Sub Button1_Click
   
    tv.Items.Clear
   
    'Create some random items
    For i = 0 To 10
        tv.Items.Add(Array( _
            IIf(Rnd(0,2) > 0, "Bob", "Marc"), _
            IIf(Rnd(0,2) > 0, "On", "Off"), _
            IIf(Rnd(0,2) > 0, "Yes", "No") _
            ))
    Next
   
    TableViewSetCellColour(tv, CreateMap( _
        "On": "-fx-background-color: rgba(255, 0, 0, 0.5); -fx-text-fill:white;", _
        "Off": "-fx-background-color: rgba(0, 255, 0, 0.5);", _
        "Yes": "-fx-background-color: pink;" _
        ))
   
End Sub



'theTable: The tableview to operate on
'TextVSStyleMap: A map of String and the corresponding CSS style to apply if matching.
'Original code from @Daestrum
Sub TableViewSetCellColour(theTable As TableView, TextVSStyleMap As Map)
    Dim cols As List = theTable.as(JavaObject).RunMethodJO("getColumns", Null)
    Dim i As Int = 1
    Dim joMe As JavaObject = Me
    For Each col As JavaObject In cols
        col.RunMethodJO("getStyleClass", Null).RunMethod("add", Array("col" & i))
        joMe.RunMethod("setColumnColour", Array(col, TextVSStyleMap))
        i = i + 1
    Next
End Sub
#if java
import javafx.scene.control.*;
import javafx.util.Callback;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.paint.Color;
import java.util.Map;

public static void setColumnColour(TableColumn tc, Map<String, String> textStyleMap) {
    tc.setCellFactory(new Callback<TableColumn, TableCell>() {
        @Override
        public TableCell call(TableColumn param) {
            return new TableCell<Object, Object>() {
                @Override
                public void updateItem(Object item, boolean empty) {
                    super.updateItem(item, empty);
                    if (!isEmpty()) {
                        if (textStyleMap.containsKey(String.valueOf(item))) {
                            String style = textStyleMap.get(String.valueOf(item));
                            setStyle(style);
                           
                        } else {
                            setStyle("");
                           
                        }
                        setText(String.valueOf(item));
                       
                    }
                }
            };
        }
    });
}
#End If
 

Attachments

  • TableViewCellFactory_v001.zip
    3 KB · Views: 89
Upvote 0
Top