This site is currently read-only as we are migrating to Oracle Forums for an improved community experience. You will not be able to initiate activity until January 30th, when you will be able to use this site as normal.

    Forum Stats

  • 3,889,829 Users
  • 2,269,775 Discussions
  • 7,916,823 Comments

Discussions

put rotate only in icon from css

tretonis-JavaNet
tretonis-JavaNet Member Posts: 61
edited Mar 28, 2016 7:06PM in JavaFX 2.0 and Later

it is possible to place rotation icon in css from "Button" ?


Thank's

.my-button {
    -fx-skin: "com.sun.javafx.scene.control.skin.ButtonSkin";
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 5, 5, 4, 3;
    -fx-padding: 0.166667em 0.833333em 0.25em 0.833333em;
    -fx-text-fill: -fx-text-base-color;
    -fx-alignment: CENTER;
    -fx-content-display: LEFT;
    
    -fx-graphic: url('images/vector-combine.png');   /* <--- put rotate only icon into Button ??? */ 

}
bouye-JavaNet

Answers

  • jsmith
    jsmith Member Posts: 2,856
    edited Mar 24, 2016 2:03AM

    No, you cannot rotate a button graphic defined by -fx-graphic using CSS.

    You could perform the rotation via FXML or in Java Code, but not via CSS.

    *Update* -> I was wrong, see bouye's answer below for a solution of how to rotate the graphic using CSS.

  • David Grieve-Oracle
    David Grieve-Oracle Member Posts: 558
    edited Mar 21, 2016 6:24PM

    You can get the graphics node from the button via the graphicProperty(),  set a style-class on it, and use css as you wish. Add a listener to the graphicProperty and set the style-class there.

  • tretonis-JavaNet
    tretonis-JavaNet Member Posts: 61
    edited Mar 22, 2016 10:28AM

    Dear David, thank you for sharing your knowledge and your precious time.

    I will
    test your solution.

    Thank you

  • bouye-JavaNet
    bouye-JavaNet OfficeMember Posts: 394 Silver Badge
    edited Mar 23, 2016 8:09PM

    Actually you can simply do this:

    .my-button {  
        -fx-graphic: url('images/vector-combine.png');   /* <--- put rotate only icon into Button ??? */   
    }  
    .my-button .image-view {  
        -fx-rotate: 45;
    }  
    
  • tretonis-JavaNet
    tretonis-JavaNet Member Posts: 61
    edited Mar 24, 2016 8:16PM

    Thank's bouye-JavaNet, is possible put  width and height into image-view ?

    bouye-JavaNet wrote:
    
    Actually you can simply do this:
    
    
    1. .my-button .image-view {   
    2.     -fx-rotate: 45;    /* <----  yes work correct   */
    3.     -fx-pref-width : 16px;   /* no work   */
    4.     -fx-pref-height : 16px;  /* no work   */
    5. }   
    .my-button {  
        -fx-graphic: url('images/vector-combine.png');   /* <--- put rotate only icon into Button ??? */   
    }  
    .my-button .image-view {  
        -fx-rotate: 45;
    }  
    

    other question :

       into caspian.css no have ".image-view",   where you found ".image-view" ?


    Thank's

  • jsmith
    jsmith Member Posts: 2,856
    edited Mar 25, 2016 5:30PM

    >    into caspian.css no have ".image-view",   where you found ".image-view" ?

    Not everything is in caspian.css.  You can determine the actual CSS used in a SceneGraph, using ScenicView:

    Scenic View //  JavaFX News, Demos and Insight // FX Experience

    You should probably be using Java 8+ anyway, that uses modena.css, not caspian.css.

    > is possible put width and height into image-view ?

    I don't know the answer to this one either, ImageView has fitWidth/fitHeight properties and an image itself can have it's size specified in it's constructor, but I don't think any of that information is exposed through css attributes (although, maybe bouye or somebody else knows how to accomplish this).

    https://docs.oracle.com/javase/8/javafx/api/javafx/scene/image/ImageView.html#fitWidthProperty

    bouye-JavaNet
  • tretonis-JavaNet
    tretonis-JavaNet Member Posts: 61
    edited Mar 26, 2016 10:04AM

    Unfortunately css documentation javafx is poor, lacks examples the level of internal engineering, but the idea is great.

  • bouye-JavaNet
    bouye-JavaNet OfficeMember Posts: 394 Silver Badge
    edited Mar 28, 2016 7:04PM

    Yes, as pointed by jsmith, by using ScenicView you would have been able to notice that, when using JavaFX 8, the ImageView created by the CSS' -fx-graphic selector sports the "image-view" style class. It's basically just what I did before coming up with the CSS I gave you.

    Now I agree that:

    • It's poorly described both in the CSS guide for -fx-graphic and in the javadoc for Labelled.
    • When setting a graphic on a Labelled that node should receive the "graphic" (or something similar) style class for better styling.
  • bouye-JavaNet
    bouye-JavaNet OfficeMember Posts: 394 Silver Badge
    edited Mar 28, 2016 7:06PM

    Also no, you cannot set fit-width and fit-height in CSS currently, see: https://bugs.openjdk.java.net/browse/JDK-8152187

This discussion has been closed.