需要帮助创建自定义UI并将其添加到场景生成器

Question

我是新来的Netbeans，JavaFX和场景生成器。我使用最新版本，意思是8.x。我有一个要求，从几年到几年都会被捕获。年份有4位长，应该是数字。

我找到了一个解决方案，并将其作为一个独立的演示进行了测试。所以我创建了下面的FXML和一个JAVA来创建一个JAR，我可以在场景生成器中导入这个JAR。

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

    <?import java.lang.*?>
    <?import java.util.*?>
    <?import javafx.scene.*?>
    <?import javafx.scene.control.*?>
    <?import javafx.scene.layout.*?>

    <fx:root id="AnchorPane" prefHeight="30.0" prefWidth="150.0"       type="AnchorPane" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="numbertextfield.NumberTextField">
    <children>
          <TextField layoutX="14.0" layoutY="14.0" prefHeight="30.0"  prefWidth="150.0" promptText="Enter only numbers " AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
       </children>
    </fx:root>

控制器代码是

package numbertextfield;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.control.TextField;

/**
 *
 * @author Hornigold Arthur
 */
public class NumberTextField extends TextField {

    private final IntegerProperty maxLength = new SimpleIntegerProperty(this, "maxLength", -1);
    private final StringProperty restrict = new SimpleStringProperty(this, "restrict");

    @FXML
    private TextField numberTextField;

    public void NumberTextFieldController() {
        // TODO
        System.out.println(" Inside NumberTextField Controller");

        numberTextField.textProperty().addListener(new ChangeListener<String>() {
            private boolean ignore;

            @Override
            public void changed(ObservableValue<? extends String> observableValue, String s, String s1) {

                if (ignore || s1 == null) {
                    return;
                }
                if (maxLength.get() > -1 && s1.length() > maxLength.get()) {
                    ignore = true;
                    numberTextField.setText(s1.substring(0, maxLength.get()));
                    ignore = false;
                }

                if (restrict.get() != null && !restrict.get().equals("") && !s1.matches(restrict.get() + "*")) {
                    ignore = true;
                    numberTextField.setText(s);
                    ignore = false;
                }
            }
        });
//
       FXMLLoader fxmlLoader = new FXMLLoader(
                getClass().getResource("/NumberTextField.fxml"));      

        fxmlLoader.setRoot(this);
        fxmlLoader.setController(this);

        try {
            fxmlLoader.load();
        } catch (IOException exception) {
            throw new RuntimeException(exception);
        }
//       
    }

    /**
     *      * The max length property.      *      * @return The max le
     * @return ngth
     * property.      
     */
    public IntegerProperty maxLengthProperty() {
        return maxLength;
    }

    /**
     *      * Gets the max length of the text field.      *      * @return The
     * max length.      
     * @return 
     */
    public int getMaxLength() {
        return maxLength.get();
    }

    /**
     *      * Sets the max length of the text field.      *      * @param
     * maxLength The max length.
     * @param maxLength
     */
    public void setMaxLength(int maxLength) {
        this.maxLength.set(maxLength);
    }

    /**
     *      * The restrict property.      *      * @return The restrict
     * property.
     * @return 
     */
    public StringProperty restrictProperty() {
        return restrict;
    }

    /**
     *      * Gets a regular expression character class which restricts the user
     * input.        *      * @return The regular expression.      * @see
     * #getRestrict()
     
     * @return 
     */
    public String getRestrict() {
        return restrict.get();
    }

    /**
     *      * Sets a regular expression character class which restricts the user
     * input.        * E.g. [0-9] only allows numeric values.      *      
     *
     *
     * @param restrict The regular expression.      
     */
    public void setRestrict(String restrict) {
        this.restrict.set(restrict);
    }
}

我将jar文件作为自定义类导入到场景生成器中，并为独立模块构建了一个FXML。

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

    <?import numbertextfield.*?>
    <?import java.lang.*?>
    <?import java.util.*?>
    <?import javafx.scene.*?>
    <?import javafx.scene.control.*?>
    <?import javafx.scene.layout.*?>

    <AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
       <children>
          <NumberTextField fx:id="testNumber" layoutX="226.0" layoutY="125.0" maxLength="4" restrict="&quot;[0-9]&quot;" />
       </children>
    </AnchorPane>

下面的Java代码应该加载这个FXML (它正确地这样做并显示NumberTextField )。但它允许任意长度的非数字字符。

    package anothertest;

    import java.io.IOException;
    import javafx.application.Application;
    import static javafx.application.ConditionalFeature.FXML;
    import javafx.event.ActionEvent;
    import javafx.event.EventHandler;
    import javafx.fxml.FXML;
    import javafx.fxml.FXMLLoader;
    import javafx.scene.Scene;
    import javafx.scene.control.Button;
    import javafx.scene.layout.AnchorPane;
    import javafx.scene.layout.StackPane;
    import javafx.stage.Stage;
    import numbertextfield.NumberTextField;

    /**
     *
     * @author Hornigold Arthur
     */
    public class AnotherTest extends Application {

        @FXML
        NumberTextField testNumber = new NumberTextField();

        @Override
        public void start(Stage mainStage) throws Exception {

            try {
                FXMLLoader loader = new FXMLLoader();
                loader.setLocation(AnotherTest.class.getResource("AnotherTest.fxml"));
                AnchorPane rootLayout = (AnchorPane) loader.load();
                testNumber.setMaxLength(4);
                testNumber.setRestrict("[0-9");

                // Show the scene containing the root layout.
                Scene scene = new Scene(rootLayout);
                mainStage.setScene(scene);
                mainStage.show();

            } catch (IOException e) {
                e.printStackTrace();
            }

        }

        /**
         * @param args the command line arguments
         */
        public static void main(String[] args) {
            launch(args);
        }

    }

但是下面的代码工作得很好，这是我从互联网样本中提取的。

package testnumberinput;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.control.TextField;

/**
 *
 * @author Hornigold Arthur
 */
public class TestNumberInput extends Application {

    @Override
    public void start(Stage primaryStage) {
        RestrictiveTextField textInput = new RestrictiveTextField();
        textInput.setMaxLength(4);
        textInput.setRestrict("[0-9]");
        Label label1 = new Label("Enter a number  : ");
        textInput.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent event) {
                System.out.println("Hello World!");
            }
        });

        HBox hBox = new HBox();
        hBox.getChildren().addAll(label1, textInput);
        StackPane root = new StackPane();
        root.getChildren().add(hBox);

        Scene scene = new Scene(root, 300, 250);

        primaryStage.setTitle("This is a test ..... !");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

/**
 *  * A text field, which restricts the user's input.  
 * <p>
 *  * The restriction can either be a maximal number of characters which the
 * user is allowed to input  * or a regular expression class, which contains
 * allowed characters.  * </p>
 *  
 * <p/>
 *  * <b>Sample, which restricts the input to maximal 10 numeric characters</b>:
 *  
 * <pre>
 *  * {@code
 *  * RestrictiveTextField textField = new RestrictiveTextField();
 *  * textField.setMaxLength(10);
 *  * textField.setRestrict("[0-9]");
 *  * }
 *  * </pre>  *  * @author Christian Schudt  
 */
class RestrictiveTextField extends TextField {

    private IntegerProperty maxLength = new SimpleIntegerProperty(this, "maxLength", -1);
    private StringProperty restrict = new SimpleStringProperty(this, "restrict");

    public RestrictiveTextField() {
        textProperty().addListener(new ChangeListener<String>() {
            private boolean ignore;

            @Override
            public void changed(ObservableValue<? extends String> observableValue, String s, String s1) {
                if (ignore || s1 == null) {
                    return;
                }
                if (maxLength.get() > -1 && s1.length() > maxLength.get()) {
                    ignore = true;
                    setText(s1.substring(0, maxLength.get()));
                    ignore = false;
                }

                if (restrict.get() != null && !restrict.get().equals("") && !s1.matches(restrict.get() + "*")) {
                    ignore = true;
                    setText(s);
                    ignore = false;
                }
            }
        });
    }

    /**
     *      * The max length property.      *      * @return The max length
     * property.      
     */
    public IntegerProperty maxLengthProperty() {
        return maxLength;
    }

    /**
     *      * Gets the max length of the text field.      *      * @return The
     * max length.      
     */
    public int getMaxLength() {
        return maxLength.get();
    }

    /**
     *      * Sets the max length of the text field.      *      * @param
     * maxLength The max length.
     */
    public void setMaxLength(int maxLength) {
        this.maxLength.set(maxLength);
    }

    /**
    *      * The restrict property.      
    *      * @return The restrict property.
    */

    public StringProperty restrictProperty() {
        return restrict;
    }

    /**
     *      * Gets a regular expression character class which restricts the user
     * input.        *      * @return The regular expression.      * @see
     * #getRestrict()
     
     */
    public String getRestrict() {
        return restrict.get();
    }

    /**
     *      * Sets a regular expression character class which restricts the user
     * input.        * E.g. [0-9] only allows numeric values.      *      
     *
     *
     * @param restrict The regular expression.      
     */
    public void setRestrict(String restrict) {
        this.restrict.set(restrict);
    }
    }

有人能告诉我我在哪里犯的错误吗？非常感谢。

为了方便起见，我修改了整个程序，并将它们放入一个NETBEANS项目中，以查看它是否有效。告诉我下面的部分是否正确。它还是不起作用。字段"periodFrom“允许我键入所有内容。

这是fxml-1。(EditedNumber.fxml)

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>


<fx:root fx:id="numberField" promptText="Enter Number" type="TextField" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" />

这是fxml-1的控制器。(EditedNumber.java)

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package InputNumber;

import java.io.IOException;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.control.TextField;

/**
 *
 * @author Hornigold Arthur
 */
public class EditedNumber extends TextField{

/**
 *
 * @author Hornigold Arthur
 */
    private final IntegerProperty maxLength = new SimpleIntegerProperty(this, "maxLength", -1);
    private final StringProperty restrict = new SimpleStringProperty(this, "restrict");

    @FXML
    private TextField numberField;


    public void EditedNumber() {
        // TODO
        System.out.println(" Inside NumberTextField Controller");

        numberField = new TextField();

        numberField.textProperty().addListener(new ChangeListener<String>() {
            private boolean ignore;

            @Override
            public void changed(ObservableValue<? extends String> observableValue, String s, String s1) {

                if (ignore || s1 == null) {
                    return;
                }
                if (maxLength.get() > -1 && s1.length() > maxLength.get()) {
                    ignore = true;
                    numberField.setText(s1.substring(0, maxLength.get()));
                    ignore = false;
                }

                if (restrict.get() != null && !restrict.get().equals("") && !s1.matches(restrict.get() + "*")) {
                    ignore = true;
                    numberField.setText(s);
                    ignore = false;
                }
            }
        });
//
        FXMLLoader fxmlLoader = new FXMLLoader(
                getClass().getResource("Editor.fxml"));

        fxmlLoader.setRoot(this);
        fxmlLoader.setController(this);

        try {
            fxmlLoader.load();
        } catch (IOException exception) {
            throw new RuntimeException(exception);
        }
    }
//       
    /**
     *      * The max length property.      *      * @return The max le
     *
     * @return      
     */
    public IntegerProperty maxLengthProperty() {
        return maxLength;
    }

    /**
     *      * Gets the max length of the text field.      *      * @return The
     * max length.      
     *
     * @return
     */
    public int getMaxLength() {
        return maxLength.get();
    }

    /**
     *      * Sets the max length of the text field.      *      * @param
     * maxLength The max length.
     *
     * @param maxLength
     */
    public void setMaxLength(int maxLength) {
        this.maxLength.set(maxLength);
    }

    /**
     *      * The restrict property.      *      * @return The restrict
     * property.
     *
     * @return
     */
    public StringProperty restrictProperty() {
        return restrict;
    }

    /**
     *      * Gets a regular expression character class which restricts the user
     * input.        *      * @return The regular expression.      * @see
     * #getRestrict()      
     *
     * @return
     */
    public String getRestrict() {
        return restrict.get();
    }

    /**
     *      * Sets a regular expression character class which restricts the user
     * input.        * E.g. [0-9] only allows numeric values.      *      
     *
     *
     * @param restrict The regular expression.      
     */
    public void setRestrict(String restrict) {
        this.restrict.set(restrict);
    }

}

我的假设是，-TOGETHER应该在一个团队中为一个新的UI类型工作。

这是fxml-2。它使用EditedNumber UI类型。(mainFXML.fxml)

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

<?import javafx.scene.text.*?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import InputNumber.EditedNumber?>


<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.40">
   <children>
      <Label layoutX="128.0" layoutY="104.0" text="Period From : " textAlignment="RIGHT">
         <font>
            <Font name="Bookman Old Style" size="18.0" />
         </font>
      </Label>
      <EditedNumber fx:id="periodFrom" layoutX="255.0" layoutY="98.0" style="-fx-background-color: lightblue; -fx-border-color: red; -fx-border-width: 2;">
         <font>
            <Font name="Bookman Old Style" size="18.0" />
         </font>
      </EditedNumber>
   </children>
</AnchorPane>

这是控制器(或主程序) (InputNumber.java)

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package InputNumber;

import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

/**
 *
 * @author Hornigold Arthur
 */
public class InputNumber extends Application {

    @FXML
    EditedNumber periodFrom;

    @Override
    public void start(Stage mainStage) {
        periodFrom = new EditedNumber();
        periodFrom.setMaxLength(4);
        periodFrom.setRestrict("[0-9]");

        try {
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(InputNumber.class.getResource("mainFXML.fxml"));
            AnchorPane rootLayout = (AnchorPane) loader.load();

            Scene scene = new Scene(rootLayout);
            mainStage.setScene(scene);
            mainStage.show();


        } catch (IOException e) {
            e.printStackTrace();
        }

    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

没有编译错误。如果这样做很好，那么我可以将编辑后的数字类移到场景生成器，并查看它是否正确工作。

提前感谢您的指导。

Answer 1

你这里有点乱..。

让我们从您的主要课程开始。testNumber.setRestrict("[0-9");无法工作，您需要关闭括号：("[0-9]")

然后，在NumberTextField FXML中定义fx:root id=AnchorPane，但在类中扩展TextField。决定你喜欢延长哪一个！我建议扩展TextField，但是在类中不需要额外的私有字段TextField，因为这样就会有两个TextFields。

作为控制器，您编写了controller="numbertextfield.NumberTextField"，但这不是特定的类名。在您的类中，您再次定义控制器。你不能把它设置两次！请再决定一下你喜欢把这些台词放在哪里。

对于TextField，您没有定义fx:id，但是在您的类中，您希望通过@FXML标记访问它。也不可能。

然后，在NumberField类中，有一个名为NumberTextFieldController的方法，它从未被调用过。内部代码必须位于NumberTextField的构造函数中，而不是额外的方法中。然后，必须先加载FXML，然后才能访问textproperty的TextField。所以用你的FXMLLoader向上移动这些线。

请做一些清理，然后再试一次！

编辑：

还是有很多错误！也许你应该去读一下这文档。

EditedNumber类:我猜您实例化了numberField，因为您在下一行中得到了一个NPE？移除这一行，并将fxmlLoader.load()移到构造函数的第一行，这样就可以加载fxml文件并实例化字段，但您甚至不需要字段numberField，因为您的类是TextField。删除它并将调用从numberField.textProperty()更改为this.textProperty()

你还没有构造函数。在这里删除void

public void EditedNumber() {...}

为什么要加载这个资源？你说这个名字是EditedNumber.fxml而不是Editor.fxml。您需要在第一个字符中添加一个/，以便找到fxml。

final FXMLLoader fxmlLoader = new FXMLLoader(this.getClass().getResource("Editor.fxml"));

做所有这些改变，在我的例子中，它是有效的！！