Results 1 to 10 of 10

Thread: JavaFX and CSS

  1. #1
    asdfg is offline Senior Member
    Join Date
    Nov 2016
    Posts
    163
    Rep Power
    3

    Default JavaFX and CSS

    What plugin I should use to use CSS ? I have HTML editor WTP.


    I like to fill GUI elements with this kind of code:
    Java FX Code:
     button.setStyle("-fx-font: 22 arial; -fx-base: #b6e7c9;");
    I want to find out how to fill button :

    -Set image as button background.
    -Make button not square, but 100% circle.

    For example this code lets modify button width and height.
    Java FX Code:
        button.setPrefSize(200,200);

  2. #2
    benji2505 is offline Senior Member
    Join Date
    Sep 2014
    Location
    MA, USA
    Posts
    398
    Rep Power
    5

    Default Re: JavaFX and CSS

    There is no need for a separate plug-in. You just add the css file to your classpath and point the Node to that file.

  3. #3
    asdfg is offline Senior Member
    Join Date
    Nov 2016
    Posts
    163
    Rep Power
    3

    Default Re: JavaFX and CSS

    Quote Originally Posted by benji2505 View Post
    You just add the css file to your classpath and point the Node to that file.
    This is just headashe. Problems with pathfinding everyday.
    I actually cant find the answer how to solve.

    Yet the best option to describe element is:
    Java FX Code:
    button.setStyle("-fx-font: 22 arial; -fx-base: #b6e7c9;");
    However I cant figure out how to make picture as button background, without hiding text and how to modify button form ( not being square).

  4. #4
    asdfg is offline Senior Member
    Join Date
    Nov 2016
    Posts
    163
    Rep Power
    3

    Default Re: JavaFX and CSS

    Java FX Code:
    package ooo;
    
    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.stage.Stage;
    
    public class More extends Application {
    	
    	Button hover, button;
    	Scene scene1;
    	Stage window;
    	
    	public static void main(String[] args) {
    		  launch(args);
        }
    	public void start(Stage primaryStage) {
    	
    		    window = primaryStage;
    	        primaryStage.setTitle("Moves");
    	       
    	        button = new Button ("pic");
    	        
    	        
    	        
    	         hover = new Button ("Play me");
    		     hover.setTranslateY (150);
    		     hover.setTranslateX (150);
    		     hover.setPrefSize(200,200 );
    		     
    	   
    		     Group full = new Group ();
    		     full.getChildren().addAll(hover,button);
    		     
    		     scene1 = new Scene (full,600,600);
    		     scene1.getStylesheets().add("paint.css");
    		    
    	         primaryStage.setScene(scene1);
    		     window.show();
           
    		
    	}
    }
    And paint.css

    Java FX Code:
    @CHARSET "ISO-8859-1";
    
    .root {
    	-fx-spacing: 30;
    	-fx-background-color:#BDBDBD;
    	-fx-padding: 10;
    }
    
    .button {
    	-fx-font-family: "Arial";
    	-fx-font-size: 20px;
    	-fx-font-weight: bold;
    	-fx-background-color: linear-gradient(#9EA7E5, #61a2b1);
    	-fx-text-fill: #383640;
    }
    
    .button:hover {
    	-fx-background-color: linear-gradient(#2A5058, #61a2b1);
    	-fx-text-fill: #ffffff;
    }
    I tried to send that file to 'ooo' package, inside project, inside src folder. Eclipse cant find it, or it is ignored.

  5. #5
    Norm's Avatar
    Norm is online now Moderator
    Join Date
    Jun 2008
    Location
    Eastern Florida
    Posts
    19,993
    Rep Power
    32

    Default Re: JavaFX and CSS

    Is the .css file on the classpath?

    Use this statement to print the value of the classpath
    Java FX Code:
          System.out.println("Classpath: " + System.getenv("classpath") 
                      + "\n java.class.path=" + System.getProperty("java.class.path"));
    If you don't understand my response, don't ignore it, ask a question.

  6. #6
    jim829 is offline Senior Member
    Join Date
    Jan 2013
    Location
    Northern Virginia, United States
    Posts
    6,226
    Rep Power
    13

    Default Re: JavaFX and CSS

    The JavaFX Javadoc on scene.getStyleSheets() is here.

    https://docs.oracle.com/javase/8/jav...tStylesheets--

    Regards,
    Jim
    The JavaTM Tutorials | SSCCE | Java Naming Conventions
    Poor planning on your part does not constitute an emergency on my part

  7. #7
    benji2505 is offline Senior Member
    Join Date
    Sep 2014
    Location
    MA, USA
    Posts
    398
    Rep Power
    5

    Default Re: JavaFX and CSS

    I fixed it for you. The header of the css file also needed repair.

    Just for what it's worth: this way of changing styles only replaces the styles that are referenced in the additional ("new") css file. If you want to swap out the complete css style to a new css file you have to use the setUserAgentStylesheet() method. If you want to switch the style of a single node you have to use the method yourNode.setID() ... (There are other alternatives for this).

    Java FX Code:
    package stylesheetT;
    
    import javafx.application.Application;
    import javafx.scene.Group;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.stage.Stage;
     
    public class More extends Application {
         
        Button hover, button;
        Scene scene1;
        Stage window;
         
        public static void main(String[] args) {
              launch(args);
        }
        public void start(Stage primaryStage) {
         
                window = primaryStage;
                primaryStage.setTitle("Moves");
                
                button = new Button ("pic");
                 
                 
                 
                 hover = new Button ("Play me");
                 hover.setTranslateY (150);
                 hover.setTranslateX (150);
                 hover.setPrefSize(200,200 );
                  
            
                 Group full = new Group ();
                 full.getChildren().addAll(hover,button);
                  
                 scene1 = new Scene (full,600,600);
                 //scene1.getStylesheets().add("paint.css");
                 scene1.getStylesheets().add(getClass().getResource("paint.css").toExternalForm()); 
                 
                 primaryStage.setScene(scene1);
                 window.show();
            
             
        }
    }
    Java FX Code:
     
    .root {
        -fx-spacing: 30;
        -fx-background-color:#BDBDBD;
        -fx-padding: 10;
    }
     
    .button {
        -fx-font-family: "Arial";
        -fx-font-size: 20px;
        -fx-font-weight: bold;
        -fx-background-color: linear-gradient(#9EA7E5, #61a2b1);
        -fx-text-fill: #383640;
    }
     
    .button:hover {
        -fx-background-color: linear-gradient(#2A5058, #61a2b1);
        -fx-text-fill: #ffffff;
    }

  8. #8
    asdfg is offline Senior Member
    Join Date
    Nov 2016
    Posts
    163
    Rep Power
    3

    Default Re: JavaFX and CSS

    Figured out.
    The problem is that: outdated information lies in most blogs/videos that are +3 years old.
    Java FX Code:
     button.setStyle ("-fx-background-image: url('file:///w:/Task.jpg');");
    This is correct pathfinding code example to find file.
    No matter if file is inside project or somewhere in computer.

    Using external CSS is also not a must anymore. It simply can be writted like this.
    Java FX Code:
      button.setStyle("-fx-text-fill: #006464;"
    	        		+ "-fx-border-radius: 20;"
    	        		+ "-fx-background-radius: 20; "
    	        		+ "-fx-padding: 5;"
    	        		+ "-fx-text-fill: #006464;");


    Otherwise:
    Jan 22, 2017 6:28:10 PM com.sun.javafx.css.parser.CSSParser parse
    WARNING: CSS Error parsing file:/W:/workplace/GameDev/bin/OP/paint.css: Expected LBRACE at [1,9]
    Last edited by asdfg; 01-22-2017 at 05:29 PM.

  9. #9
    benji2505 is offline Senior Member
    Join Date
    Sep 2014
    Location
    MA, USA
    Posts
    398
    Rep Power
    5

    Default Re: JavaFX and CSS

    Well, not exactly true. As I mentioned earlier, there are many ways to get this accomplished. Your methods hard-code the style. I would suggest that you keep a separate css file and just point the nodes to the respective style (or style "classes") or just let it be overridden by the "new" css file.
    Background is that it makes things much easier later on: If you want to adjust a certain style for a certain node type later on you just change the css file code and it adjusts all styles of that node "class" (not to be confused with a Java Class). In the corporate world some designers then work on the css file to make it pretty and the coders worry about the logic behind the program. If you keep that style of programming you have to go in and change every single Node (style).
    Your way of coding this somehow defeats the purpose of css files.
    Last edited by benji2505; 01-22-2017 at 05:47 PM.

  10. #10
    jim829 is offline Senior Member
    Join Date
    Jan 2013
    Location
    Northern Virginia, United States
    Posts
    6,226
    Rep Power
    13

    Default Re: JavaFX and CSS

    Quote Originally Posted by asdfg View Post
    Using external CSS is also not a must anymore. It simply can be writted like this.
    Java FX Code:
      button.setStyle("-fx-text-fill: #006464;"
                        + "-fx-border-radius: 20;"
                        + "-fx-background-radius: 20; "
                        + "-fx-padding: 5;"
                        + "-fx-text-fill: #006464;");
    True. However, by using external files you can alter the appearance without having to recompile the code.

    Regards,
    Jim
    The JavaTM Tutorials | SSCCE | Java Naming Conventions
    Poor planning on your part does not constitute an emergency on my part

Similar Threads

  1. Gui con JavaFX
    By Julik in forum JavaFX
    Replies: 5
    Last Post: 11-27-2016, 05:12 PM
  2. Need Help with JavaFX
    By incredibleX in forum New To Java
    Replies: 4
    Last Post: 01-22-2014, 05:07 PM
  3. JavaFX Book | Learn JavaFX More In Depth
    By SnakeDoc in forum JavaFX
    Replies: 0
    Last Post: 05-17-2013, 11:10 PM
  4. Help with javaFX?!
    By JavaNoob!1 in forum JavaFX
    Replies: 7
    Last Post: 07-18-2012, 10:56 PM
  5. JavaFX Script and JavaFX Mobile
    By levent in forum Java Software
    Replies: 1
    Last Post: 01-27-2010, 04:48 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •