12 * by Oracle in the LICENSE file that accompanied this code.
13 *
14 * This code is distributed in the hope that it will be useful, but WITHOUT
15 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
16 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
17 * version 2 for more details (a copy is included in the LICENSE file that
18 * accompanied this code).
19 *
20 * You should have received a copy of the GNU General Public License version
21 * 2 along with this work; if not, write to the Free Software Foundation,
22 * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
23 *
24 * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
25 * or visit www.oracle.com if you need additional information or have any
26 * questions.
27 */
28 -->
29
30 <html lang="en">
31 <head>
32 <link href="fxml.css" type="text/css" rel="stylesheet"/>
33 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
34 <title>Introduction to FXML | JavaFX @FXVERSION@</title>
35 <meta name="description" content="The document introduces FXML, an XML-based declarative markup language for defining user interfaces in JavaFX @FXVERSION@ applications."/>
36 <meta name="keywords" content="JavaFX, FXML, JavaFX GUI development, web development, Java application development, GUI applications, rich internet applications, RIA, expressive content"/>
37 </head>
38 <body>
39
40 <div class="fx-code-header">
41 <div class="version"><br/>Release: JavaFX @FXVERSION@</div>
42 </div>
43
44 <h1>Introduction to FXML</h1>
45 <p class="subtitle">Last updated: 01 May 2017</p>
46
47 <h2>Contents</h2>
48 <ul class="contents">
49 <li><a href="#overview">Overview</a></li>
50 <li>
51 <a href="#elements">Elements</a>
52 <ul>
580
581 <pre class="code">
582 <TextField fx:id="textField"/>
583 <Label text="${textField.text}"/>
584 </pre>
585
586 <p>As the user types in the text input, the label's text content will be automatically updated.</p>
587
588 <p>More complex expression are also supported. A list of supported constants and operators follows:</p>
589
590 <table>
591 <caption>Constants and Operators Table</caption>
592 <tr><th scope="col">Constant / Operator</th><th scope="col">Description</th></tr>
593 <tr><th scope="row">"string"<br />'string'</th><td>A string constant</td></tr>
594 <tr><th scope="row">true<br />false</th><td>A boolean constant</td></tr>
595 <tr><th scope="row">null</th><td>A constant representing the null value</td></tr>
596 <tr><th scope="row">50.0<br />3e5<br />42</th><td>A numerical constant</td></tr>
597 <tr><th scope="row">- <br/>(unary operator)</th><td>Unary minus operator, applied on a number</td>
598 <tr><th scope="row">! <br/>(unary operator)</th><td>Unary negation of a boolean</td></tr>
599 <tr><th scope="row">+ - <br />
600 * /
601 %</th> <td>Numerical binary operators</td></tr>
602 <tr><th scope="row">&& ||</th><td>Boolean binary operators</td></tr>
603 <tr><th scope="row">> >= <br />
604 < <= <br />
605 == !=</th>
606 <td>Binary operators of comparison.<br/> Both arguments must be of type Comparable</td></tr>
607 </table>
608
609 <h3><a id="static_property_attributes">Static Properties</a></h3>
610 <p>Attributes representing static properties are handled similarly to static property elements and use a similar syntax. For example, the earlier <span class="code">GridPane</span> markup shown earlier to demonstrate static property elements could be rewritten as follows:</p>
611
612 <pre class="code">
613 <GridPane>
614 <children>
615 <Label text="My Label" GridPane.rowIndex="0" GridPane.columnIndex="0"/>
616 </children>
617 </TabPane>
618 </pre>
619
620 <p>In addition to being more concise, static property attributes, like instance property attributes, support location, resource, and variable resolution operators, the only limitation being that it is not possible to create an expression binding to a static property.</p>
621
622 <h3><a id="event_handler_attributes">Event Handlers</a></h3>
623 <p>Event handler attributes are a convenient means of attaching behaviors to document elements. Any class that defines a <span class="code">setOn<span class="variable">Event</span>()</span> method can be assigned an event handler in markup.</p>
624
625 <p>FXML supports three types of event handler attributes: script event handlers, controller method event handlers and expressions. Each are discussed below.</p>
626
627 <h4><a id="script_event_handlers">Script Event Handlers</a></h4>
628 <p>A script event handler is an event handler that executes script code when the event is fired, similar to event handlers in HTML. For example, the following script-based handler for the button's "onAction" event uses JavaScript to write the text "You clicked me!" to the console when the user presses the button:</p>
629
630 <pre class="code">
631 <?language javascript?>
632 ...
633
634 <VBox>
635 <children>
636 <Button text="Click Me!"
637 onAction="java.lang.System.out.println('You clicked me!');"/>
638 </children>
639 </VBox>
640 </pre>
641
642 <p>Note the use of the language processing instruction at the beginning of the code snippet. This PI tells the FXML loader which scripting language should be used to execute the event handler. A page language must be specified whenever inline script is used in an FXML document, and can only be specified once per document. However, this does not apply to external scripts, which may be implemented using any number of supported scripting languages. Scripting is discussed in more detail in the next section.</p>
643
644 <h4><a id="controller_method_event_handlers">Controller Method Event Handlers</a></h4>
645 <p>A controller method event handler is a method defined by a document's "controller". A controller is an object that is associated with the deserialized contents of an FXML document and is responsible for coordinating the behaviors of the objects (often user interface elements) defined by the document.</p>
646
647 <p>A controller method event handler is specified by a leading hash symbol followed by the name of the handler method. For example:</p>
648
649 <pre class="code">
650 <VBox fx:controller="com.foo.MyController"
651 xmlns:fx="http://javafx.com/fxml">
652 <children>
653 <Button text="Click Me!" onAction="#handleButtonAction"/>
654 </children>
655 </VBox>
656 </pre>
657
658 <p>Note the use of the <span class="code">fx:controller</span> attribute on the root element. This attribute is used to associate a controller class with the document. If <span class="code">MyController</span> is defined as follows:</p>
659
660 <pre class="code">
661 package com.foo;
662
663 public class MyController {
683 </pre>
684
685 <p>Controllers are discussed in more detail in a later section.</p>
686
687 <h4><a id="expression_handlers">Event handlers from expressions</a></h4>
688 <p>Any expression that point to a <a href="#variable_resolution">variable</a> of javafx.event.EventHandler type
689 can be used as an expression handler. </p>
690 <p>
691 Previous example using an expression handler:
692 </p>
693 <pre class="code">
694 <VBox fx:controller="com.foo.MyController"
695 xmlns:fx="http://javafx.com/fxml">
696 <children>
697 <Button text="Click Me!" onAction="$controller.onActionHandler"/>
698 </children>
699 </VBox>
700 </pre>
701
702 <p> With the controller that contains a field like this </p>
703
704 <pre class="code">
705 public class MyController {
706
707 @FXML
708 public EventHandler<ActionEvent> onActionHandler = new EventHandler<>() { ... }
709
710 ...
711 }
712 </pre>
713
714 <p> Note that other kinds of expressions, like <a href="#expression_binding">binding expressions</a>
715 are not supported in this context. </p>
716
717 <h4><a id="collections_and_property_handlers">Special handlers for collections and properties</a></h4>
718 <p> Collections and object properties cannot be listen to using <span class="code">setOn<span class="variable">Event</span>()</span> methods.
719 For these reason, special handler methods need to be used.
720 <span class="code">ObservableList</span>, <span class="code">ObservableMap</span> or <span class="code">ObservableSet</span>
721 uses a special <span class="code">onChange</span> attribute that points to a handler method with a <span class="code">ListChangeListner.Change</span>, <span class="code">MapChangeListener.Change</span> or <span class="code">SetChangeListener.Change</span> parameter respectively.
722 </p>
723 <pre class="code">
724 <VBox fx:controller="com.foo.MyController"
725 xmlns:fx="http://javafx.com/fxml">
726 <children onChange="#handleChildrenChange"/>
727 </VBox>
728 </pre>
729
730 where the handler method looks like this:
731
746
747 <p>A handler for parent property would look like this</p>
748 <pre class="code">
749 public class MyController {
750 public void handleParentChange(ObservableValue value, Parent oldValue, Parent newValue) {
751 System.out.println("Parent changed!");
752 }
753 }
754 </pre>
755
756 <p>For convenience, the first parameter can be a subclass of <span class="code">ObservableValue</span>,
757 e.g. <span class="code">Property</span></p>
758
759 <p>For registering to a property, a special <span class="code">on<propertyName>Change</span>
760 attribute must be used.</p>
761
762 <pre class="code">
763 <VBox fx:controller="com.foo.MyController"
764 xmlns:fx="http://javafx.com/fxml" onParentChange="#handleParentChange"/>
765 </pre>
766
767 <p>Note that collections and properties do not currently support scripting handlers.</p>
768
769 <h2><a id="scripting">Scripting</a></h2>
770 <p>
771 The <span class="code"><fx:script></span> tag allows a caller to import scripting code into or embed script within a FXML file. Any JVM scripting language can be used, including JavaScript, Groovy, and Clojure, among others. Script code is often used to define event handlers directly in markup or in an associated source file, since event handlers can often be written more concisely in more loosely-typed scripting languages than they can in a statically-typed language such as Java.</p>
772
773 <p>For example, the following markup defines a function called <span class="code">handleButtonAction()</span> that is called by the action handler attached to the <span class="code">Button</span> element:</p>
774
775 <pre class="code">
776 <?language javascript?>
777
778 <?import javafx.scene.control.*?>
779 <?import javafx.scene.layout.*?>
780
781 <VBox xmlns:fx="http://javafx.com/fxml">
782 <fx:script>
783
784 function handleButtonAction(event) {
785 java.lang.System.out.println('You clicked me!');
786 }
787 </fx:script>
788
789 <children>
790 <Button text="Click Me!" onAction="handleButtonAction(event);"/>
791 </children>
792 </VBox>
793 </pre>
794
795 <p>Clicking the button triggers the event handler, which invokes the function, producing output identical to the previous examples.</p>
796
797 <p>Script code may also be defined in external files. The previous example could be split into an FXML file and a JavaScript source file with no difference in functionality:</p>
798
799 <div class="caption">example.fxml</div>
800 <pre class="code">
801 <?import javafx.scene.control.*?>
802 <?import javafx.scene.layout.*?>
803
804 <VBox xmlns:fx="http://javafx.com/fxml">
805 <fx:script source="example.js" charset="cp1252"/>
806
807 <children>
808 <Button text="Click Me!" onAction="handleButtonAction(event);"/>
809 </children>
810 </VBox>
811 </pre>
812
813 <div class="caption">example.js</div>
814 <pre class="code">
815
816 function handleButtonAction(event) {
817 java.lang.System.out.println('You clicked me!');
818 }
819 </pre>
820
821 <p>It is often preferable to separate code from markup in this way, since many text editors support syntax highlighting for the various scripting languages supported by the JVM. It can also help improve readability of the source code and markup.</p>
822
823
824 <p>Note that script blocks are not limited to defining event handler functions. Script code is executed as it is processed, so it can also be used to dynamically configure the structure of the resulting output. As a simple example, the following FXML includes a script block that defines a variable named "labelText". The value of this variable is used to populate the text property of a <span class="code">Label</span> instance:</p>
825
826 <pre class="code">
827 <fx:script>
828 var myText = "This is the text of my label.";
829 </fx:script>
830
831 ...
832
833 <Label text="$myText"/>
834 </pre>
835
836
837 <p><strong>Warning:</strong>As of JavaFX 8, <span class="code">importClass()</span> javascript function is no longer supported. You have to use fully qualified names as in the example above or load a nashorn compatibility script.</p>
838
839 <pre class="code">
840 load("nashorn:mozilla_compat.js");
841 importClass(java.lang.System);
842
843 function handleButtonAction(event) {
844 System.out.println('You clicked me!');
845 }
846 </pre>
847
848 <h2><a id="controllers">Controllers</a></h2>
849 <p>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. As discussed earlier, the <span class="code">fx:controller</span> attribute allows a caller to associate a "controller" class with an FXML document. A controller is a compiled class that implements the "code behind" the object hierarchy defined by the document.</p>
850
851 <p>As shown earlier, controllers are often used to implement event handlers for user interface elements defined in markup:</p>
852
853 <pre class="code">
854 <VBox fx:controller="com.foo.MyController"
855 xmlns:fx="http://javafx.com/fxml">
856 <children>
857 <Button text="Click Me!" onAction="#handleButtonAction"/>
858 </children>
859 </VBox>
860 </pre>
861
862 <pre class="code">
863 package com.foo;
864
865 public class MyController {
866 public void handleButtonAction(ActionEvent event) {
|
12 * by Oracle in the LICENSE file that accompanied this code.
13 *
14 * This code is distributed in the hope that it will be useful, but WITHOUT
15 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
16 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
17 * version 2 for more details (a copy is included in the LICENSE file that
18 * accompanied this code).
19 *
20 * You should have received a copy of the GNU General Public License version
21 * 2 along with this work; if not, write to the Free Software Foundation,
22 * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
23 *
24 * Please contact Oracle, 500 Oracle Parkway, Redwood Shores, CA 94065 USA
25 * or visit www.oracle.com if you need additional information or have any
26 * questions.
27 */
28 -->
29
30 <html lang="en">
31 <head>
32 <link href="fxml.css" type="text/css" rel="stylesheet"/>
33 <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
34 <title>Introduction to FXML | JavaFX @FXVERSION@</title>
35 <meta name="description" content="The document introduces FXML, an XML-based declarative markup language for defining user interfaces in JavaFX @FXVERSION@ applications."/>
36 <meta name="keywords" content="JavaFX, FXML, JavaFX GUI development, web development, Java application development, GUI applications, rich internet applications, RIA, expressive content"/>
37 </head>
38 <body>
39
40 <div class="fx-code-header">
41 <div class="version"><br/>Release: JavaFX @FXVERSION@</div>
42 </div>
43
44 <h1>Introduction to FXML</h1>
45 <p class="subtitle">Last updated: 01 May 2017</p>
46
47 <h2>Contents</h2>
48 <ul class="contents">
49 <li><a href="#overview">Overview</a></li>
50 <li>
51 <a href="#elements">Elements</a>
52 <ul>
580
581 <pre class="code">
582 <TextField fx:id="textField"/>
583 <Label text="${textField.text}"/>
584 </pre>
585
586 <p>As the user types in the text input, the label's text content will be automatically updated.</p>
587
588 <p>More complex expression are also supported. A list of supported constants and operators follows:</p>
589
590 <table>
591 <caption>Constants and Operators Table</caption>
592 <tr><th scope="col">Constant / Operator</th><th scope="col">Description</th></tr>
593 <tr><th scope="row">"string"<br />'string'</th><td>A string constant</td></tr>
594 <tr><th scope="row">true<br />false</th><td>A boolean constant</td></tr>
595 <tr><th scope="row">null</th><td>A constant representing the null value</td></tr>
596 <tr><th scope="row">50.0<br />3e5<br />42</th><td>A numerical constant</td></tr>
597 <tr><th scope="row">- <br/>(unary operator)</th><td>Unary minus operator, applied on a number</td>
598 <tr><th scope="row">! <br/>(unary operator)</th><td>Unary negation of a boolean</td></tr>
599 <tr><th scope="row">+ - <br />
600 * /
601 %</th> <td>Numerical binary operators</td></tr>
602 <tr><th scope="row">&& ||</th><td>Boolean binary operators</td></tr>
603 <tr><th scope="row">> >= <br />
604 < <= <br />
605 == !=</th>
606 <td>Binary operators of comparison.<br/> Both arguments must be of type Comparable</td></tr>
607 </table>
608
609 <h3><a id="static_property_attributes">Static Properties</a></h3>
610 <p>Attributes representing static properties are handled similarly to static property elements and use a similar syntax. For example, the earlier <span class="code">GridPane</span> markup shown earlier to demonstrate static property elements could be rewritten as follows:</p>
611
612 <pre class="code">
613 <GridPane>
614 <children>
615 <Label text="My Label" GridPane.rowIndex="0" GridPane.columnIndex="0"/>
616 </children>
617 </TabPane>
618 </pre>
619
620 <p>In addition to being more concise, static property attributes, like instance property attributes, support location, resource, and variable resolution operators, the only limitation being that it is not possible to create an expression binding to a static property.</p>
621
622 <h3><a id="event_handler_attributes">Event Handlers</a></h3>
623 <p>Event handler attributes are a convenient means of attaching behaviors to document elements. Any class that defines a <span class="code">setOn<span class="variable">Event</span>()</span> method can be assigned an event handler in markup.</p>
624
625 <p>FXML supports three types of event handler attributes: script event handlers, controller method event handlers and expressions. Each are discussed below.</p>
626
627 <h4><a id="script_event_handlers">Script Event Handlers</a></h4>
628 <p>A script event handler is an event handler that executes script code when the event is fired, similar to event handlers in HTML. For example, the following script-based handler for the button's "onAction" event uses JavaScript to write the text "You clicked me!" to the console when the user presses the button:</p>
629
630 <pre class="code">
631 <?language javascript?>
632 ...
633
634 <VBox>
635 <children>
636 <Button text="Click Me!"
637 onAction="java.lang.System.out.println('You clicked me!');"/>
638 </children>
639 </VBox>
640 </pre>
641
642 <p>Note the use of the language processing instruction at the beginning of the code snippet. This PI tells the FXML loader which scripting language should be used to execute the event handler. A page language must be specified whenever inline script is used in an FXML document, and can only be specified once per document. However, this does not apply to external scripts, which may be implemented using any number of supported scripting languages. Scripting is discussed in more detail in the next section.</p>
643
644 <p>Note: to turn off automatic compilation of script code place the processing instruction <span class="code"><?compile false?></span> before the element that contains the script. To turn on compilation of script code again use the processing instruction <span class="code"><?compile true?></span> (or short: <span class="code"><?compile?></span>). The compile processing instruction can be used repeatedly to turn compilation of script code off and on.</p>
645
646 <h4><a id="controller_method_event_handlers">Controller Method Event Handlers</a></h4>
647 <p>A controller method event handler is a method defined by a document's "controller". A controller is an object that is associated with the deserialized contents of an FXML document and is responsible for coordinating the behaviors of the objects (often user interface elements) defined by the document.</p>
648
649 <p>A controller method event handler is specified by a leading hash symbol followed by the name of the handler method. For example:</p>
650
651 <pre class="code">
652 <VBox fx:controller="com.foo.MyController"
653 xmlns:fx="http://javafx.com/fxml">
654 <children>
655 <Button text="Click Me!" onAction="#handleButtonAction"/>
656 </children>
657 </VBox>
658 </pre>
659
660 <p>Note the use of the <span class="code">fx:controller</span> attribute on the root element. This attribute is used to associate a controller class with the document. If <span class="code">MyController</span> is defined as follows:</p>
661
662 <pre class="code">
663 package com.foo;
664
665 public class MyController {
685 </pre>
686
687 <p>Controllers are discussed in more detail in a later section.</p>
688
689 <h4><a id="expression_handlers">Event handlers from expressions</a></h4>
690 <p>Any expression that point to a <a href="#variable_resolution">variable</a> of javafx.event.EventHandler type
691 can be used as an expression handler. </p>
692 <p>
693 Previous example using an expression handler:
694 </p>
695 <pre class="code">
696 <VBox fx:controller="com.foo.MyController"
697 xmlns:fx="http://javafx.com/fxml">
698 <children>
699 <Button text="Click Me!" onAction="$controller.onActionHandler"/>
700 </children>
701 </VBox>
702 </pre>
703
704 <p> With the controller that contains a field like this </p>
705
706 <pre class="code">
707 public class MyController {
708
709 @FXML
710 public EventHandler<ActionEvent> onActionHandler = new EventHandler<>() { ... }
711
712 ...
713 }
714 </pre>
715
716 <p> Note that other kinds of expressions, like <a href="#expression_binding">binding expressions</a>
717 are not supported in this context. </p>
718
719 <h4><a id="collections_and_property_handlers">Special handlers for collections and properties</a></h4>
720 <p> Collections and object properties cannot be listen to using <span class="code">setOn<span class="variable">Event</span>()</span> methods.
721 For these reason, special handler methods need to be used.
722 <span class="code">ObservableList</span>, <span class="code">ObservableMap</span> or <span class="code">ObservableSet</span>
723 uses a special <span class="code">onChange</span> attribute that points to a handler method with a <span class="code">ListChangeListner.Change</span>, <span class="code">MapChangeListener.Change</span> or <span class="code">SetChangeListener.Change</span> parameter respectively.
724 </p>
725 <pre class="code">
726 <VBox fx:controller="com.foo.MyController"
727 xmlns:fx="http://javafx.com/fxml">
728 <children onChange="#handleChildrenChange"/>
729 </VBox>
730 </pre>
731
732 where the handler method looks like this:
733
748
749 <p>A handler for parent property would look like this</p>
750 <pre class="code">
751 public class MyController {
752 public void handleParentChange(ObservableValue value, Parent oldValue, Parent newValue) {
753 System.out.println("Parent changed!");
754 }
755 }
756 </pre>
757
758 <p>For convenience, the first parameter can be a subclass of <span class="code">ObservableValue</span>,
759 e.g. <span class="code">Property</span></p>
760
761 <p>For registering to a property, a special <span class="code">on<propertyName>Change</span>
762 attribute must be used.</p>
763
764 <pre class="code">
765 <VBox fx:controller="com.foo.MyController"
766 xmlns:fx="http://javafx.com/fxml" onParentChange="#handleParentChange"/>
767 </pre>
768
769 <p>Note that collections and properties do not currently support scripting handlers.</p>
770
771 <h2><a id="scripting">Scripting</a></h2>
772 <p>
773 The <span class="code"><fx:script></span> tag allows a caller to import scripting code into or embed script within a FXML file. Any JVM scripting language can be used, including JavaScript, Groovy, and Clojure, among others. Script code is often used to define event handlers directly in markup or in an associated source file, since event handlers can often be written more concisely in more loosely-typed scripting languages than they can in a statically-typed language such as Java.</p>
774
775 <p>Scripts are compiled by default, when they are first loaded, if the <span class="code">ScriptEngine</span> implements the <span class="code">javax.script.Compilable</span> interface. If compilation fails, the <span class="code">FXMLLoader</span> will fall back to interpreted mode.</p>
776
777 <p>Note: to turn off automatic compilation of script code place the processing instruction <span class="code"><?compile false?></span> before the script element. To turn on compilation of script code again use the processing instruction <span class="code"><?compile true?></span> (or short: <span class="code"><?compile?></span>). The compile processing instruction can be used repeatedly to turn compilation of script code off and on.</p>
778
779 <p>The following example markup defines a function called <span class="code">handleButtonAction()</span> that is called by the action handler attached to the <span class="code">Button</span> element:</p>
780
781 <pre class="code">
782 <?language javascript?>
783
784 <?import javafx.scene.control.*?>
785 <?import javafx.scene.layout.*?>
786
787 <VBox xmlns:fx="http://javafx.com/fxml">
788 <fx:script>
789
790 function handleButtonAction(event) {
791 java.lang.System.out.println('You clicked me!');
792 }
793 </fx:script>
794
795 <children>
796 <Button text="Click Me!" onAction="handleButtonAction(event);"/>
797 </children>
798 </VBox>
799 </pre>
800
801 <p>Clicking the button triggers the event handler, which invokes the function, producing output identical to the previous examples.</p>
802
803 <p>Script code may also be defined in external files. The previous example could be split into an FXML file and a JavaScript source file with no difference in functionality:</p>
804
805 <div class="caption">example.fxml</div>
806 <pre class="code">
807 <?language javascript?>
808
809 <?import javafx.scene.control.*?>
810 <?import javafx.scene.layout.*?>
811
812 <VBox xmlns:fx="http://javafx.com/fxml">
813 <fx:script source="example.js" charset="cp1252"/>
814
815 <children>
816 <Button text="Click Me!" onAction="handleButtonAction(event);"/>
817 </children>
818 </VBox>
819 </pre>
820
821 <div class="caption">example.js</div>
822 <pre class="code">
823
824 function handleButtonAction(event) {
825 java.lang.System.out.println('You clicked me!');
826 }
827 </pre>
828
829 <p>It is often preferable to separate code from markup in this way, since many text editors support syntax highlighting for the various scripting languages supported by the JVM. It can also help improve readability of the source code and markup.</p>
830
831
832 <p>Note that script blocks are not limited to defining event handler functions. Script code is executed as it is processed, so it can also be used to dynamically configure the structure of the resulting output. As a simple example, the following FXML includes a script block that defines a variable named "labelText". The value of this variable is used to populate the text property of a <span class="code">Label</span> instance:</p>
833
834 <pre class="code">
835 <fx:script>
836 var myText = "This is the text of my label.";
837 </fx:script>
838
839 ...
840
841 <Label text="$myText"/>
842 </pre>
843
844 <p><strong>Warning:</strong> As of JavaFX 8, <span class="code">importClass()</span> javascript function is no longer supported. You have to use fully qualified names as in the example above or load a nashorn compatibility script.</p>
845
846 <pre class="code">
847 load("nashorn:mozilla_compat.js");
848 importClass(java.lang.System);
849
850 function handleButtonAction(event) {
851 System.out.println('You clicked me!');
852 }
853 </pre>
854
855 <h2><a id="controllers">Controllers</a></h2>
856 <p>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. As discussed earlier, the <span class="code">fx:controller</span> attribute allows a caller to associate a "controller" class with an FXML document. A controller is a compiled class that implements the "code behind" the object hierarchy defined by the document.</p>
857
858 <p>As shown earlier, controllers are often used to implement event handlers for user interface elements defined in markup:</p>
859
860 <pre class="code">
861 <VBox fx:controller="com.foo.MyController"
862 xmlns:fx="http://javafx.com/fxml">
863 <children>
864 <Button text="Click Me!" onAction="#handleButtonAction"/>
865 </children>
866 </VBox>
867 </pre>
868
869 <pre class="code">
870 package com.foo;
871
872 public class MyController {
873 public void handleButtonAction(ActionEvent event) {
|