B4J Question Attaching different CSS styles to similar nodes

GuyBooth

Active Member
Licensed User
Longtime User
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:
B4X:
/* 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:
B4X:
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.
 

GuyBooth

Active Member
Licensed User
Longtime User
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):
B4X:
#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?
 
Upvote 0

GuyBooth

Active Member
Licensed User
Longtime User
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 :) )
 
Upvote 0

PatrikCavina

Active Member
Licensed User
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:
B4X:
   #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" .
B4X:
TableView1.ID = "IDTable"

I hope will help you.
 
Upvote 0

GuyBooth

Active Member
Licensed User
Longtime User
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:
B4X:
   #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" .
B4X:
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:
B4X:
/* 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:
B4X:
    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.
 
Upvote 0
Top