Search code examples
cssgluon-mobile

GluonMobile Css Navigation Drawer selected

On GluonMobile is there a way to have the CSS when a Item is selected in the drawer?

My application will have a lot of menu so I want to be able to see rapidly on wish one we are.

I manage to get the Item color, the Hover color but not the selected. 

.navigation-drawer{

   -fx-background-color: -primary-swatch-500;
}


.item  {
   -fx-background-color: -primary-swatch-300;
}

.item > .item-content:hover{
   -fx-background-color: black;
}

I try all these thing

.item:selected
.item > .item-content:selected
.item:focused
.item > .item-content:focused

But nothing work.

So first can someone explain me why I need to do .item > .item-content:hover and why not just .item:hover like in any other CSS ive done before.

Second I find it really hard to work with GluonMobile do to the lack of documentation IMO.

Maybee I dnt find the write documentation yet but the fact that I needed to do a printLn to find the styleSheet of a Node for me I find it weird.

Solution

  • The JavaDoc for Gluon Mobile controls, like the NavigationDrawer.Item is here.

    However, you won't find the style classes applied to these controls, as you won't find it either in the JavaFX built-in controls javadoc.

    Whenever you have issues with finding out the right style classes and pseudoclasses I'd strongly suggest you use ScenicView.

    Find the distribution for Java 8, and run it:

    java -jar scenicView.jar

    while you also run your Gluon Mobile project on desktop:

    ./gradlew run

    For instance, when you open the drawer of a default Glisten-Afterburner template project, you can see:

    SV+GM

    The node with item style class is a ViewItem, and it gets the selected and hover states.

    The node with item-content is an HBox, child of ViewItem, and while it gets hover, it doesn't get selected:

    Item-content

    Following the hierarchy of nodes you can also create the hierarchy of style classes, like:

    .navigation-drawer > * > .scroll-pane > .viewport > * > .container > .item > .item-container

    So for each item in the drawer, the different states can be:

    .item:hover {}
.item:selected {}
.item:selected:hover {}

    or for the content node:

    .item:selected > .item-content {}
.item:selected:hover > .item-content {}
...

    In your case, you could just apply something like:

    .item {
    -fx-background-color: -primary-swatch-300;
}

.item > .item-content:hover {
    -fx-background-color: black;
}

.item:selected > .item-content { 
    -fx-background-color: green;
}

.item:selected:hover > .item-content {
    -fx-background-color: lightgreen;
}

    to get something like: