B4J Question Attaching different CSS styles to similar nodes

[GuyBooth]

I have a form with two TableViews - tblSources and tblMediaTracks. For the tblMediaTracks I want the selection bars to be green, and for the tblSources I want them to be blue. I can make the selection bars on both tableviews green (color #84A082 & #ACC2AB) using a file called TableRows.css containing this code:

/* Selected row */
.table-view:focused .table-row-cell:filled:focused:selected {
    -fx-background-color: #84A082;
}
/* Selected row when table not focused */
.table-row-cell:filled:focused:selected {
    -fx-background-color: #84A082;
}
/* Row hovered */
.table-view:row-selection .table-row-cell:filled:hover {
    -fx-background-color: #ACC2AB;
}
/* Selected row hovered when table not focused */
.table-view:row-selection .table-row-cell:filled:focused:hover {
    -fx-background-color: #84A082;
}

which I then apply using this code:

Form.Stylesheets.Add(File.GetUri(File.DirAssets, "TableRows.css"))

How can I use this code to apply to one specific tableview, and add a second set of "rules" for the other one and have each one applied to the correct tableview? I have seen references to "ID"s in CSS but haven't been able to figure out how to use them in B4J.

 

[Cableguy]

The way did it was to create a css file, and create node specific css blocks by tagging them by their ID.

Check this example out

https://www.b4x.com/android/forum/t...s-file-to-style-a-togglebutton.37214/#content

 

[GuyBooth]

The way did it was to create a css file, and create node specific css blocks by tagging them by their ID.

I'm afraid I'm having trouble with "tagging them by their ID. I tried this to apply green colors to the tblMediaTracks tableview, and blue to the tblSources tableview, and they all came out blue (the last style modification applied):

#tblMediaTracks {
    /* Selected row */
    .table-view:focused .table-row-cell:filled:focused:selected {
        -fx-background-color: #84A082;
    }
    /* Selected row when table not focused */
    .table-row-cell:filled:focused:selected {
        -fx-background-color: #84A082;
    }
    /* Row hovered */
    .table-view:row-selection .table-row-cell:filled:hover {
        -fx-background-color: #ACC2AB;
    }
    /* Selected row hovered when table not focused */
    .table-view:row-selection:hover {
        -fx-background-color: #84A082;
    }
}
#tblSources {
    /* Selected row */
    .table-view:focused .table-row-cell:filled:focused:selected {
        -fx-background-color: blue;
    }
    /* Selected row when table not focused */
    .table-row-cell:filled:focused:selected {
        -fx-background-color: blue;
    }
    /* Row hovered */
    .table-view:row-selection .table-row-cell:filled:hover {
        -fx-background-color: blue;
    }
    /* Selected row hovered when table not focused */
    .table-view:row-selection:hover {
        -fx-background-color: blue;
    }
}

Obviously I'm not understanding how to apply ID tags. Are the IDs the Node names? Or something else?

 

[PatrikCavina]

Watch this thread and see my answer about node id: https://www.b4x.com/android/forum/t...d-colors-for-odd-even-rows-in-listview.79680/

I think your problem is similar

 

[GuyBooth]

Watch this thread and see my answer about node id: https://www.b4x.com/android/forum/t...d-colors-for-odd-even-rows-in-listview.79680/

I think your problem is similar

Thanks for this link Patrik - you are correct, my problem is similar. Unfortunately, although the example in the link works, when I apply the same technique to my tableviews I don't have the same success.
For the moment I'm leaving it alone - applying the same css to both my tables works satisfactorarily for now, if I find later I need to refine it I will revisit.
I appreciate your help (you too Cableguy )

 

[PatrikCavina]

Remember, in this case the ID of node must defined for each css class inside the css file.
In this line

.table-view:focused .table-row-cell:filled:focused:selected

you have 2 classes referred to tables:
.table-view:focused and .table-row-cell:filled:focused:selected

So you should define the id for each of this classes to apply style to a specific table.
The css will become:

   #IDTable .table-view:focused, #IDTable .table-row-cell:filled:focused:selected {
        -fx-background-color: #84A082;
    }

And this css will apply to the table with id = "IDTable" .

TableView1.ID = "IDTable"

I hope will help you.

 

[GuyBooth]

Remember, in this case the ID of node must defined for each css class inside the css file.
In this line

you have 2 classes referred to tables:
.table-view:focused and .table-row-cell:filled:focused:selected

So you should define the id for each of this classes to apply style to a specific table.
The css will become:

   #IDTable .table-view:focused, #IDTable .table-row-cell:filled:focused:selected {
        -fx-background-color: #84A082;
    }

And this css will apply to the table with id = "IDTable" .

TableView1.ID = "IDTable"

I hope will help you.

Patrik you have an amazing instinct for guessing where my problem was (at least one of them anyway).
I still struggled for a while until I noticed the comma after the first css class, then I was able to make it work.
The code in my CSS file now looks like this:

/* Selected row without hover (Darker Green #84A082.)*/
#tblSources .table-view:focused, #blSources .table-row-cell:filled:focused:selected {
    -fx-background-color: purple;
}
/* Selected Row hovered (Darker Green #84A082.)*/
#tblSources .table-view:row-selection, #tblSources .table-row-cell:filled:selected:hover {
    -fx-background-color: brown;
}
/* Row hovered (Lighter Green #ACC2AB.)*/
#tblSources .table-view:row-selection, #tblSources .table-row-cell:filled:hover {
    -fx-background-color: yellow;
}

/* Selected row without hover (Darker Green #84A082.)*/
#tblMediaTracks .table-view:focused, #tblMediaTracks .table-row-cell:filled:focused:selected {
    -fx-background-color: #84A082;
}
/* Selected Row hovered (Darker Green #84A082.)*/
#tblMediaTracks .table-view:row-selection, #tblMediaTracks .table-row-cell:filled:selected:hover {
    -fx-background-color: #84A082;
}
/* Row hovered (Lighter Green #ACC2AB.)*/
#tblMediaTracks .table-view:row-selection, #tblMediaTracks .table-row-cell:filled:hover {
    -fx-background-color: #ACC2AB;
}

My B4J code now looks like this:

    frmPGAddition.Stylesheets.Add(File.GetUri(File.DirAssets, "TableViewswithIDs.css"))
    ' Assign IDs to the tableviews so the css knows to which one to assign each set
    tblSources.Id = "tblSources"
    tblMediaTracks.Id = "tblMediaTracks"

I have one more problem to resolve (in another thread which I will create soon).
Thank you for you insight, and your help.