JavaFX Responsive Design

Question

I have been searching for how to make a resposnvie application in javafx and by googling I found a way that just bind the child node to its parent size I dont't know whether it is correct way of making resposive design or not. For example to make a label responsive I have used

 Label price=new Label("price");
 name.styleProperty().bind(Bindings.concat("-fx-font-size: ", 
 fontSize.asString(), ";")); //where font size is
 fontSize.bind(scene.widthProperty().add(scene.heightProperty()).divide(100));
 private DoubleProperty fontSize = new SimpleDoubleProperty(10);

But today I found another way that we can make responsive design by using jfoenix responsiveHandler class,but as a beginner to java code I have no idea how to link my fxml with this class, so can anyone explain how to link my fxml page with this pseudo class to make responsive javafx pages.

JFXResponsiveHandler class

  public class JFXResponsiveHandler { 

  public static final PseudoClass PSEUDO_CLASS_EX_SMALL = PseudoClass.getPseudoClass("extreme-small-device"); 
  public static final PseudoClass PSEUDO_CLASS_SMALL = PseudoClass.getPseudoClass("small-device"); 
  public static final PseudoClass PSEUDO_CLASS_MEDIUM = PseudoClass.getPseudoClass("medium-device"); 
  public static final PseudoClass PSEUDO_CLASS_LARGE = PseudoClass.getPseudoClass("large-device"); 


   public JFXResponsiveHandler(Stage stage, PseudoClass pseudoClass) { 
   scanAllNodes(stage.getScene().getRoot(), PSEUDO_CLASS_LARGE);   

   } 

  private void scanAllNodes(Parent parent, PseudoClass pseudoClass){   
  parent.getChildrenUnmodifiable().addListener(new ListChangeListener<Node>
  (){ 
  @Override 
  public void onChanged(javafx.collections.ListChangeListener.Change<? extends Node> c) { 
  while (c.next()) 
  if (!c.wasPermutated() && !c.wasUpdated())  
                  for (Node addedNode : c.getAddedSubList())  
                   if(addedNode instanceof Parent) 
                    scanAllNodes((Parent) addedNode,pseudoClass); 
  } 
  });   
  for (Node component : parent.getChildrenUnmodifiable()) { 
     if (component instanceof Pane) { 
      ((Pane)component).getChildren().addListener(new ListChangeListener<Node>(){ 
 @Override 
 public void onChanged(javafx.collections.ListChangeListener.Change<? extends Node> c) { 
  while (c.next()) { 
   if (!c.wasPermutated() && !c.wasUpdated()) { 
                    for (Node addedNode : c.getAddedSubList()) { 
                     if(addedNode instanceof Parent) 
                      scanAllNodes((Parent) addedNode,pseudoClass); 
                    } 
                } 
  } 
 } 
      }); 
         //if the component is a container, scan its children 
      scanAllNodes((Pane) component, pseudoClass); 
     } else if (component instanceof ScrollPane){ 
      ((ScrollPane)component).contentProperty().addListener((o,oldVal,newVal)-> { 
       scanAllNodes((Parent) newVal,pseudoClass);  
      }); 
         //if the component is a container, scan its children 
      if(((ScrollPane)component).getContent() instanceof Parent){ 

       scanAllNodes((Parent) ((ScrollPane)component).getContent(), pseudoClass); 
      } 
     } else if (component instanceof Control) { 
         //if the component is an instance of IInputControl, add to list           
      ((Control)component).pseudoClassStateChanged(PSEUDO_CLASS_EX_SMALL, pseudoClass == PSEUDO_CLASS_EX_SMALL); 
      ((Control)component).pseudoClassStateChanged(PSEUDO_CLASS_SMALL, pseudoClass == PSEUDO_CLASS_SMALL); 
      ((Control)component).pseudoClassStateChanged(PSEUDO_CLASS_MEDIUM, pseudoClass == PSEUDO_CLASS_MEDIUM); 
      ((Control)component).pseudoClassStateChanged(PSEUDO_CLASS_LARGE, pseudoClass == PSEUDO_CLASS_LARGE); 
     } 
    } 
    } 
   }

My sample class

   public class MainClass extends Application {

@Override
public void start(Stage primaryStage) {



        Parent root;
        try {
            root = FXMLLoader.load(getClass().getResource("demo.fxml"));
            Scene scene = new Scene(root);

            primaryStage.setScene(scene);
            primaryStage.show();

            scene.widthProperty().addListener(new ChangeListener<Number>() { // i know usually we use this codes to get screen size
                @Override public void changed(ObservableValue<? extends Number> observableValue, Number oldSceneWidth, Number newSceneWidth) {
                    System.out.println("Width: " + newSceneWidth.doubleValue());

                    int width=newSceneWidth.intValue();
                    sc.setWidth(width);
                }
            });
            scene.heightProperty().addListener(new ChangeListener<Number>() {
                @Override public void changed(ObservableValue<? extends Number> observableValue, Number oldSceneHeight, Number newSceneHeight) {
                    System.out.println("Height: " + newSceneHeight);
                    int height=newSceneHeight.intValue();
                    sc.setHeight(height);                   }               });

          } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
       }

/**
 * @param args the command line arguments
 */
    public static void main(String[] args) {
    launch(args);
   }}

my sampe FXML

 <VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
 <children>
  <Button mnemonicParsing="false" text="Hello plese make me responsive" />
  <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
     <image>
        <Image url="https://www.google.co.in/search?q=imageview&amp;rlz=1C1CHWL_enIN763IN763&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ved=0ahUKEwiTo7SxmMDWAhVEtI8KHb-bAIUQ_AUICigB&amp;biw=1366&amp;bih=613#imgrc=-TvmJxWfQMJLQM:" />
     </image>
  </ImageView>
  <Label text="Iam Label Plese make me responsive" />

default sample css

 .button {
-fx-pref-width: 50px;
-fx-background-color: #44B449;
-fx-background-radius: 50px;`
-fx-pref-height: 50px;
-fx-text-fill: white;
-fx-border-color: WHITE;
-fx-border-radius: 50px;
-fx-border-width: 4px;
}

Please anyone explain how to make a responsive page with this sample fxml nodes I have designed in a vbox,css(small,medium,large-no idea how) and JFXResponsivehandler class for me and also those who are looking for creating responsive design in javaFX.ThankYou in advance. Answers will be appreciated.