Loading fxml file in main

Question

i did this tutorial from youtube, and i have the same code than the tutorial but i did my proper fxml with Scenebuilder. Here is the code: https://github.com/AlmasB/FXTutorials/tree/master/src/com/almasb/calc I have the same Main, same Controller and same Model.. When i try to compile it says to me :

`Exception in Application start method
java.lang.reflect.InvocationTargetException
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at com.sun.javafx.application.LauncherImpl.launchApplicationWithArgs(Unknown Source)
    at com.sun.javafx.application.LauncherImpl.launchApplication(Unknown Source)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at sun.launcher.LauncherHelper$FXHelper.main(Unknown Source)
Caused by: java.lang.RuntimeException: Exception in Application start method
    at com.sun.javafx.application.LauncherImpl.launchApplication1(Unknown Source)
    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication$147(Unknown Source)
    at com.sun.javafx.application.LauncherImpl$$Lambda$48/1394438858.run(Unknown Source)
    at java.lang.Thread.run(Unknown Source)
Caused by: java.lang.NullPointerException: Location is required.
    at javafx.fxml.FXMLLoader.loadImpl(Unknown Source)
    at javafx.fxml.FXMLLoader.loadImpl(Unknown Source)
    at javafx.fxml.FXMLLoader.loadImpl(Unknown Source)
    at javafx.fxml.FXMLLoader.loadImpl(Unknown Source)
    at javafx.fxml.FXMLLoader.loadImpl(Unknown Source)
    at javafx.fxml.FXMLLoader.load(Unknown Source)
    at application.Main.start(Main.java:12)
    at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$153(Unknown Source)
    at com.sun.javafx.application.LauncherImpl$$Lambda$51/1252716230.run(Unknown Source)
    at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$166(Unknown Source)
    at com.sun.javafx.application.PlatformImpl$$Lambda$45/1775282465.run(Unknown Source)
    at com.sun.javafx.application.PlatformImpl.lambda$null$164(Unknown Source)
    at com.sun.javafx.application.PlatformImpl$$Lambda$47/21202996.run(Unknown Source)
    at java.security.AccessController.doPrivileged(Native Method)
    at com.sun.javafx.application.PlatformImpl.lambda$runLater$165(Unknown Source)
    at com.sun.javafx.application.PlatformImpl$$Lambda$46/2040495657.run(Unknown Source)
    at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(Unknown Source)
    at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
    at com.sun.glass.ui.win.WinApplication.lambda$null$141(Unknown Source)
    at com.sun.glass.ui.win.WinApplication$$Lambda$37/1558600329.run(Unknown Source)
    ... 1 more
Exception running application application.Main

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.Parent;

This is my main :

    package application;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
       try {
        FXMLLoader loader = new FXMLLoader(getClass().getResource("view/Calculatorview.fxml"));
  //    Parent root = FXMLLoader.load(getClass().getResource("view/Calculatorview.fxml"));
        AnchorPane root = (AnchorPane) loader.load();
        Scene scene = new Scene(root);

        primaryStage.setScene(scene);
        primaryStage.show();
    } 
       catch(Exception e)    {
        e.printStackTrace();
    }
    }
    public static void main(String[] args) {
      launch(args);
    }
}

This is my fxml file :

   <?xml version="1.0" encoding="UTF-8"?>

<?import javafx.embed.swing.*?>
<?import javafx.scene.effect.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<fx:root maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="640.0" type="AnchorPane" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.Controller">
   <children>
      <AnchorPane prefHeight="600.0" prefWidth="700.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <SplitPane dividerPositions="0.19063545150501673" layoutX="149.0" layoutY="32.0" orientation="VERTICAL" prefHeight="600.0" prefWidth="500.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
              <items>
                <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
                     <children>
                        <TextField alignment="CENTER_RIGHT" prefHeight="73.0" prefWidth="638.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                           <font>
                              <Font size="47.0" />
                           </font>
                        </TextField>
                     </children>
                  </AnchorPane>
                <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="515.0" prefWidth="498.0">
                     <children>
                        <GridPane layoutX="90.0" layoutY="116.0" prefHeight="319.0" prefWidth="638.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                          <columnConstraints>
                              <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                              <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                              <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                              <ColumnConstraints hgrow="SOMETIMES" maxWidth="116.0" minWidth="10.0" prefWidth="95.0" />
                              <ColumnConstraints hgrow="SOMETIMES" maxWidth="116.0" minWidth="10.0" prefWidth="95.0" />
                              <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                              <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
                          </columnConstraints>
                          <rowConstraints>
                              <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                              <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                          </rowConstraints>
                           <effect>
                              <Blend />
                           </effect>
                           <children>
                              <Button mnemonicParsing="false" onAction="#processOperator" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #EE543A; -fx-text-fill: #FFFFFF;" text="=" GridPane.columnIndex="7" GridPane.rowIndex="4">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="620.0" layoutY="395.0" mnemonicParsing="false" onAction="#processOperator" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #EE543A; -fx-text-fill: #FFFFFF;" text="+" GridPane.columnIndex="7" GridPane.rowIndex="3">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="620.0" layoutY="299.0" mnemonicParsing="false" onAction="#processOperator" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #EE543A; -fx-text-fill: #FFFFFF;" text="-" GridPane.columnIndex="7" GridPane.rowIndex="2">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="620.0" layoutY="203.0" mnemonicParsing="false" onAction="#processOperator" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #EE543A; -fx-text-fill: #FFFFFF;" text="×" GridPane.columnIndex="7" GridPane.rowIndex="1">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="620.0" layoutY="107.0" mnemonicParsing="false" onAction="#processOperator" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #EE543A; -fx-text-fill: #FFFFFF;" text="÷" GridPane.columnIndex="7">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="532.0" layoutY="395.0" mnemonicParsing="false" prefHeight="70.0" prefWidth="76.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="C" GridPane.columnIndex="4" GridPane.rowIndex="4">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="358.0" layoutY="395.0" mnemonicParsing="false" onAction="#processNumpad" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #9E9D9B; -fx-text-fill: #FFFFFF;" text="0" GridPane.columnIndex="5" GridPane.rowIndex="4">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="362.0" layoutY="395.0" mnemonicParsing="false" prefHeight="69.0" prefWidth="88.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="M-" GridPane.columnIndex="4">
                                 <font>
                                    <Font size="28.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="e" GridPane.columnIndex="1" GridPane.rowIndex="4">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="1/x" GridPane.columnIndex="3" GridPane.rowIndex="4">
                                 <font>
                                    <Font name="System" size="28.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="√" GridPane.columnIndex="3" GridPane.rowIndex="3">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="MC" GridPane.columnIndex="3" GridPane.rowIndex="2">
                                 <font>
                                    <Font name="System" size="28.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="M+" GridPane.columnIndex="3" GridPane.rowIndex="1">
                                 <font>
                                    <Font size="27.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="x²" GridPane.columnIndex="2" GridPane.rowIndex="3">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="tan" GridPane.columnIndex="2" GridPane.rowIndex="2">
                                 <font>
                                    <Font name="System" size="28.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="sin" GridPane.columnIndex="2" GridPane.rowIndex="1">
                                 <font>
                                    <Font name="System" size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="xʸ" GridPane.rowIndex="4">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="log" GridPane.rowIndex="2">
                                 <font>
                                    <Font name="System" size="28.0" />
                                 </font>
                              </Button>
                              <Button graphicTextGap="0.0" layoutX="10.0" layoutY="11.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="cos" GridPane.columnIndex="2">
                                 <font>
                                    <Font name="System" size="26.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text=")">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button alignment="CENTER" layoutX="10.0" layoutY="11.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="x³" GridPane.columnIndex="2" GridPane.rowIndex="4">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="98.0" layoutY="11.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="(" GridPane.rowIndex="1">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" onAction="#processNumpad" prefHeight="64.0" prefWidth="95.0" style="-fx-background-color: #9E9D9B; -fx-text-fill: #FFFFFF;" text="3" GridPane.columnIndex="6" GridPane.rowIndex="3">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" onAction="#processNumpad" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #9E9D9B; -fx-text-fill: #FFFFFF;" text="2" GridPane.columnIndex="5" GridPane.rowIndex="3">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" onAction="#processNumpad" prefHeight="64.0" prefWidth="96.0" style="-fx-background-color: #9E9D9B; -fx-text-fill: #FFFFFF;" text="6" GridPane.columnIndex="6" GridPane.rowIndex="2">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" onAction="#processNumpad" prefHeight="64.0" prefWidth="98.0" style="-fx-background-color: #9E9D9B; -fx-text-fill: #FFFFFF;" text="9" GridPane.columnIndex="6" GridPane.rowIndex="1">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" onAction="#processNumpad" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #9E9D9B; -fx-text-fill: #FFFFFF;" text="8" GridPane.columnIndex="5" GridPane.rowIndex="1">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" prefHeight="64.0" prefWidth="96.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="±" GridPane.columnIndex="5">
                                 <font>
                                    <Font size="29.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" onAction="#processNumpad" prefHeight="58.0" prefWidth="76.0" style="-fx-background-color: #9E9D9B; -fx-text-fill: #FFFFFF;" text="1" GridPane.columnIndex="4" GridPane.rowIndex="3">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" onAction="#processNumpad" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #9E9D9B; -fx-text-fill: #FFFFFF;" text="4" GridPane.columnIndex="4" GridPane.rowIndex="2">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" onAction="#processNumpad" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #9E9D9B; -fx-text-fill: #FFFFFF;" text="5" GridPane.columnIndex="5" GridPane.rowIndex="2">
                                 <font>
                                    <Font size="35.0" />
                                 </font>
                              </Button>
                              <Button layoutX="10.0" layoutY="11.0" mnemonicParsing="false" onAction="#processNumpad" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #9E9D9B; -fx-text-fill: #FFFFFF;" text="7" GridPane.columnIndex="4" GridPane.rowIndex="1">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="619.0" layoutY="395.0" mnemonicParsing="false" prefHeight="100.0" prefWidth="81.0" style="-fx-background-color: #EE543A; -fx-text-fill: #FFFFFF;" text="\%" GridPane.columnIndex="6">
                                 <font>
                                    <Font size="29.0" />
                                 </font>
                              </Button>
                              <Button mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="π" GridPane.rowIndex="3">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="462.0" layoutY="202.0" mnemonicParsing="false" onAction="#processNumpad" prefHeight="64.0" prefWidth="95.0" style="-fx-background-color: #9E9D9B; -fx-text-fill: #FFFFFF;" text="." GridPane.columnIndex="6" GridPane.rowIndex="4">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button graphicTextGap="0.0" layoutX="172.0" layoutY="10.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="cosh" GridPane.columnIndex="1">
                                 <font>
                                    <Font name="System" size="22.0" />
                                 </font>
                              </Button>
                              <Button layoutX="172.0" layoutY="74.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="sinh" GridPane.columnIndex="1" GridPane.rowIndex="1">
                                 <font>
                                    <Font size="25.0" />
                                 </font>
                              </Button>
                              <Button layoutX="172.0" layoutY="138.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="tanh" GridPane.columnIndex="1" GridPane.rowIndex="2">
                                 <font>
                                    <Font name="System" size="24.0" />
                                 </font>
                              </Button>
                              <Button layoutX="91.0" layoutY="266.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="10ʸ" GridPane.columnIndex="1" GridPane.rowIndex="3">
                                 <font>
                                    <Font size="30.0" />
                                 </font>
                              </Button>
                              <Button layoutX="253.0" layoutY="74.0" mnemonicParsing="false" prefHeight="96.0" prefWidth="92.0" style="-fx-background-color: #60646D; -fx-text-fill: #FFFFFF;" text="MR" GridPane.columnIndex="3">
                                 <font>
                                    <Font size="28.0" />
                                 </font>
                              </Button>
                           </children>
                        </GridPane>
                     </children>
                  </AnchorPane>
              </items>
            </SplitPane>
         </children>
      </AnchorPane>
   </children>
</fx:root>

New Main : structure

Answer 1

NullPointerException: Location is required

from the line where you are calling FXMLLoader.load(...) indicates that the URL you provided for the FXML file is null: i.e. the path to the resource is incorrect.

getClass().getResource() will search for a resource on the classpath relative to the current class. According to the screen shot you linked, Main is in the package appication and Calculatorview.fxml is in application.view. So you need

Parent root = FXMLLoader.load(getClass().getResource("view/Calculatorview.fxml"));

Alternatively, you can specify the fxml file relative to the classpath (instead of relative to the current class):

Parent root = FXMLLoader.load(getClass().getResource("/application/view/Calculatorview.fxml"));

(note the additional leading / compared to your code).

Note, of course, that this path is being searched at runtime, so you need to make sure the fxml file is deployed along with the class files when the code is compiled. In other words, if Main and Calculatorview.fxml are in the package application, somewhere you should have a folder called application containing Main.class (note, class file) and Calculatorview.fxml. This would typically be in a folder called bin or classes, depending on your IDE and its setup (or you will have the application structure in a jar file, if you're building a jar).

Answer 2

Alright. I tried to setup my environment with Java 1.8 and tried the tutorial from the provided link. Here is what I did.

1. Installed Elcipse Kepler (Java EE)
2. Followed instructions here for e(fx)clipse https://www.eclipse.org/efxclipse/install.html
3. Installed all the libs/jars as shown below

After above, I create a new Java project in the eclipse. I right clicked on the project and created two Source Folders namely

src/main/java 
src/main/resources 

Then I right clicked on the src/main/java and created new package and named it application. Under application I created 4 java classes and copied across the content from the tutorial link. I did modify the package on top of each java file to reflect the application only.

Here are the java classes

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class App extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("/ui.fxml"));

        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Controller

 package application;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.text.Text;

public class Controller {

    @FXML
    private Text output;

    private long number1 = 0;
    private String operator = "";
    private boolean start = true;

    private Model model = new Model();

    @FXML
    private void processNumpad(ActionEvent event) {
        if (start) {
            output.setText("");
            start = false;
        }

        String value = ((Button)event.getSource()).getText();
        output.setText(output.getText() + value);
    }

    @FXML
    private void processOperator(ActionEvent event) {
        String value = ((Button)event.getSource()).getText();

        if (!"=".equals(value)) {
            if (!operator.isEmpty())
                return;

            operator = value;
            number1 = Long.parseLong(output.getText());
            output.setText("");
        }
        else {
            if (operator.isEmpty())
                return;

            output.setText(String.valueOf(model.calculate(number1, Long.parseLong(output.getText()), operator)));
            operator = "";
            start = true;
        }
    }
}

Model

package application;

public class Model {

    public long calculate(long number1, long number2, String operator) {
        switch (operator) {
            case "+":
                return number1 + number2;
            case "-":
                return number1 - number2;
            case "*":
                return number1 * number2;
            case "/":
                if (number2 == 0)
                    return 0;

                return number1 / number2;
        }

        System.out.println("Unknown operator - " + operator);
        return 0;
    }
}

and ui.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.net.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.beans.property.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.paint.Color?>

<VBox spacing="10" alignment="CENTER" prefWidth="300" prefHeight="300" fx:controller="application.Controller" xmlns:fx="http://javafx.com/fxml">
    <fx:define>
        <Font fx:id="FONT" size="18" />
    </fx:define>

    <StackPane alignment="CENTER">
        <Rectangle fill="TRANSPARENT" stroke="GRAY" width="230" height="50" />
        <Text fx:id="output" font="$FONT" />
    </StackPane>

    <HBox spacing="10" alignment="CENTER">
        <Button text="7" prefWidth="50" font="$FONT" onAction="#processNumpad" />
        <Button text="8" prefWidth="50" font="$FONT" onAction="#processNumpad" />
        <Button text="9" prefWidth="50" font="$FONT" onAction="#processNumpad" />
        <Button text="/" prefWidth="50" font="$FONT" onAction="#processOperator" />
    </HBox>

    <HBox spacing="10" alignment="CENTER">
        <Button text="4" prefWidth="50" font="$FONT" onAction="#processNumpad" />
        <Button text="5" prefWidth="50" font="$FONT" onAction="#processNumpad" />
        <Button text="6" prefWidth="50" font="$FONT" onAction="#processNumpad" />
        <Button text="*" prefWidth="50" font="$FONT" onAction="#processOperator" />
    </HBox>

    <HBox spacing="10" alignment="CENTER">
        <Button text="1" prefWidth="50" font="$FONT" onAction="#processNumpad" />
        <Button text="2" prefWidth="50" font="$FONT" onAction="#processNumpad" />
        <Button text="3" prefWidth="50" font="$FONT" onAction="#processNumpad" />
        <Button text="-" prefWidth="50" font="$FONT" onAction="#processOperator" />
    </HBox>

    <HBox spacing="10" alignment="CENTER">
        <Button text="0" prefWidth="110" font="$FONT" onAction="#processNumpad" />
        <Button text="=" prefWidth="50" font="$FONT" onAction="#processOperator" />
        <Button text="+" prefWidth="50" font="$FONT" onAction="#processOperator" />
    </HBox>

</VBox>

I had issues with Java source library (reference to JRE) and the jfxrt.jar files. So I did the following

1. Removed the referenced library
2. Removed the external jar that was referenced
3. Right clicked on the project and choose Properties
4. Choose Java Build Path
5. Clicked on Add Library on the right side of the window and added JRE System Library as shown below
6. Added external jar jfxrt.jar

After adding the above, the code was resolved and there were no issues.

Remember, I placed ui.fxml under src/main/resources folder. So when I run the project as Java Application initially, it complained and give me the same exception as you are facing. So I changed the "ui.fxml" to "/ui.fxml" and boom, I saw the calculator.

Parent root = FXMLLoader.load(getClass().getResource("/ui.fxml"));

See below the screenshot, I hope these steps help.