title: Adding custom Pane class to JAVAFX FXML Application using Scene Editor
body: <p>Okay so I have a custom pane class that I want to reference from inside FXML. When I try to change the node class to BallPane, it says it doesn't exist.</p>
  
  <pre><code>import javafx.animation.KeyFrame;
  import javafx.animation.Timeline;
  import javafx.beans.property.DoubleProperty;
  import javafx.scene.layout.Pane;
  import javafx.scene.paint.Color;
  import javafx.scene.shape.Circle;
  import javafx.util.Duration;
  
  public class BallPane extends Pane {
  
      public final double radius = 20;
      private double x = radius, y = radius;
      private double dx = 1, dy = 1;
      private Circle circle = new Circle(x, y, radius);
      private Timeline animation;
  
      public BallPane() {
          circle.setFill(Color.GREEN);
          getChildren().add(circle);
          animation = new Timeline(
                  new KeyFrame(Duration.millis(50), e -&gt; moveBall()));
          animation.setCycleCount(Timeline.INDEFINITE);
          animation.play(); // Start animation 
      }
  
      public void play() {
          animation.play();
      }
  
      public void pause() {
          animation.pause();
      }
  
      public void increaseSpeed() {
          animation.setRate(animation.getRate() + 0.1);
      }
  
      public void decreaseSpeed() {
          animation.setRate(
                  animation.getRate() &gt; 0 ? animation.getRate() - 0.1 : 0);
      }
  
      public DoubleProperty rateProperty() {
          return animation.rateProperty();
      }
  
      protected void moveBall() {
          // Check boundaries 
          if (x &lt; radius || x &gt; getWidth() - radius) {
              dx *= -1; // Change ball move direction 
          }
          if (y &lt; radius || y &gt; getHeight() - radius) {
              dy *= -1; // Change ball move direction 
          }
  
          // Adjust ball position 
          x += dx;
          y += dy;
          circle.setCenterX(x);
          circle.setCenterY(y);
      }
  }
  </code></pre>
  
  <p>I have tried this nested inside my FXML</p>
  
  <pre><code>    &lt;BallPane layoutX="14.0" layoutY="14.0" prefHeight="334.0" prefWidth="462.0" /&gt;
  </code></pre>
  
  <p>and then this in my Controller</p>
  
  <pre><code>@FXML
  BallPane bpane;
  </code></pre>
  
  <p>What am I missing?</p>