5 Replies Latest reply: Aug 21, 2013 6:51 PM by 963782 RSS

    How to write javascript in FXML?

    963782

      Normally, javascript is used to write event handlers in FXML. Consider the snippet below which is an event handler defined in Controller.java:

      @FXML
        private Button submitButton;
      
      
        @FXML
        private void handlePFAction() {
        System.out.println("handled by java");
        PauseTransition pressTime = new PauseTransition(Duration.millis(220));
        pressTime.setOnFinished(new EventHandler<ActionEvent>() {
        @Override
        public void handle(ActionEvent event) {
        submitButton.disarm();
        submitButton.fire();
        }
        });
        submitButton.arm();
        pressTime.play();
        }
      

      How to put that event handler to a .js file?

      In tutorial of JavaFX, there is only a simple description of scripting language in FXML, but no details usage criteria.

        • 1. Re: How to write javascript in FXML?
          James_D
          Normally, javascript is used to write event handlers in FXML.

          I'm not sure I agree with that statement; I've always handled events in a Controller using Java; and I've not really seen any "real" app written solely in FXML with event handlers in Javascript.


          In tutorial of JavaFX, there is only a simple description of scripting language in FXML, but no details usage criteria.

          The Introduction to FXML contains a section on scripting. I don't know how you'd write something as complex as your example (even though it's not too complex) in Javascript (admittedly my javascript skills are weak), but if you know how to do that the referenced section will show you how to map into a javascript function, defined either in the fxml file or in an external file.


          Note that the following section on Controllers states

          While it can be convenient to write simple event handlers in script, either inline or defined in external files, it is often preferable to define more complex application logic in a compiled, strongly-typed language such as Java.

          so it seems fairly clear that the intention is that using Javascript is for very simple use cases only, and that Java-based controllers are considered the way to go for most real-world event handling. My interpretation, obviously; yours may vary.

          • 2. Re: How to write javascript in FXML?
            jsmith

            Take a look at the metronome example from the the WebFX project.

             

            That example features fxml with referenced JavaScript logic in a separate file (only example of it that I know of :-)

             

            https://github.com/brunoborges/webfx/tree/master/samples/metronome

             

            Script inclusion is:

             

              <fx:script source="metronome.js" />

             

            I looks like the javascript file is sourced from the same location as the fxml (at least with the above sample).

             

            If you used Nashorn to load your fxml, you could probably write the whole program in JavaScript.

             

            https://blogs.oracle.com/nashorn/entry/jjs_fx

             

            I've never tried using JavaScript and JavaFX together.

            • 3. Re: How to write javascript in FXML?
              963782

              Thanks. I've read that, and learnt a lot about the scripting programming using javascript, though still cannot immigrate the event handler defined in my fist post into a .js file.

              • 4. Re: How to write javascript in FXML?
                James_D

                I have no idea why you would want to use javascript for this, but the following works for me:

                 

                <?xml version="1.0" encoding="UTF-8"?>
                
                <?language javascript?>
                <?import javafx.scene.layout.HBox?>
                <?import javafx.scene.control.Button?>
                <?import javafx.geometry.Insets?>
                <?import javafx.animation.PauseTransition?>
                <?import javafx.util.Duration?>
                <?import java.lang.Double?>
                
                <HBox xmlns:fx="http://javafx.com/fxml" spacing="5">
                 <padding>
                  <Insets top="5" bottom="5" left="5" right="5"/>
                 </padding>
                 <Button text="Simulate Button 2 Press" onAction="simulateSubmitButton()" />
                 <Button text="Button 2" onAction="submit()" fx:id="submitButton" />
                
                 <fx:define>
                  <PauseTransition fx:id="pause" onFinished="pauseEnded()" />
                 </fx:define>
                 <fx:script source="programmaticButtonPress.js"/>
                </HBox>
                
                
                


                programmaticButtonPress.js:

                var java = Packages.java;
                var javafx = Packages.javafx ;
                
                var Duration = javafx.util.Duration ;
                
                pause.setDuration(Duration.millis(220));
                
                function submit() {
                  java.lang.System.out.println("Submit button pressed");
                }
                
                function simulateSubmitButton() {
                  submitButton.arm();
                  pause.play();
                }
                
                function pauseEnded() {
                  submitButton.disarm();
                  submitButton.fire();
                }
                
                
                
                
                
                
                
                
                

                 

                It makes more sense (at least to me) to define the PauseTransition in the controller (i.e. the javascript file), but I couldn't find a way of setting the onFinished event handler there.

                • 5. Re: How to write javascript in FXML?
                  963782

                  Thanks for your proposition. I agree with you, handle events in Java Controller makes more sense and more easier. I will use Controller written in Java + FXML.