This discussion is archived
5 Replies Latest reply: Aug 21, 2013 4:51 PM by 963782 RSS

How to write javascript in FXML?

963782 Newbie
Currently Being Moderated

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 Guru
    Currently Being Moderated
    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 Guru
    Currently Being Moderated

    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 Newbie
    Currently Being Moderated

    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 Guru
    Currently Being Moderated

    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 Newbie
    Currently Being Moderated

    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.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points