B4J Question Attaching different CSS styles to similar nodes

Discussion in 'B4J Questions' started by GuyBooth, Apr 14, 2019.

  1. GuyBooth

    GuyBooth Active Member Licensed 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:
    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:
    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.
     
  2. Cableguy

    Cableguy Expert Licensed User

  3. GuyBooth

    GuyBooth Active Member Licensed User

    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):
    Code:
    #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?
     
  4. PatrikCavina

    PatrikCavina Active Member Licensed User

    GuyBooth likes this.
  5. GuyBooth

    GuyBooth Active Member Licensed User

    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 :) )
     
  6. PatrikCavina

    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
    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:
    Code:
    #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" .
    Code:
    TableView1.ID = "IDTable"
    I hope will help you.
     
    GuyBooth likes this.
  7. GuyBooth

    GuyBooth Active Member Licensed User

    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:
    Code:
    /* 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:
    Code:
    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.
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice