javaFx的标签与输入框

      标签其实没什么可以说的,这里就主要说一下输入框。输入框是人机交互的一个非常重要的方式。最常见的就是登录/注册界面,账号密码的输入。注册界面账号密码的输入,需要获取输入框的内容与数据库进行对比,是否存在重复账号、密码是否设置过于简单等等。这里先做一个简单的示例。

public class JavaFxNote extends Application {
    public static void main(String[] args)
    {
//        调用launch方法启动应用
     launch(args);
    }
    @Override
    public void start(Stage primaryStage) throws Exception {

        Group group =new Group();
//        容器添加子组件

//        指定一个布局类或者根结点
        Scene scene = new Scene(group);

        primaryStage.setScene(scene);
        primaryStage.setTitle("骏杰小程序");
        primaryStage.setHeight(400);
        primaryStage.setWidth(400);

        TextField text = new TextField();
//        text.setText("输入框");

        text.setLayoutX(100);
        text.setLayoutY(100);

//        设置提示
        Tooltip tip = new Tooltip("输入账号");
        text.setTooltip(tip);

//        设置文本框背景提示,需要去除焦点,并去除文本框文字
        text.setPromptText("请输入10位账号");
        text.setFocusTraversable(false);

//        设置输入限制,对应上面的背景提示
        text.textProperty().addListener(new ChangeListener<String>() {
            @Override
            public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
//                判断新值是否大于10,
//                大于10则显示旧值,
//                小于10显示新值
                if(newValue.length()>10){
                    text.setText(oldValue);
                }
            }
        });

//        监听文本框内选择的文字
        text.selectedTextProperty().addListener(new ChangeListener<String>() {
            @Override
            public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
                System.out.println(newValue);
            }
        });

//        密码框
        PasswordField pt = new PasswordField();
        pt.setLayoutX(100);
        pt.setLayoutY(200);

//       设置提示
        Tooltip tip2 = new Tooltip("输入密码");
        pt.setTooltip(tip2);

//      设置文本框背景提示,需要去除焦点,并去除文本框文字
        pt.setPromptText("请输入含英文和数字的10位密码");
        pt.setFocusTraversable(false);
//        设置输入限制,对应上面的背景提示
        pt.textProperty().addListener(new ChangeListener<String>() {
            @Override
            public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
//                判断新值是否大于10,
//                大于10则显示旧值,
//                小于10显示新值
                if(newValue.length()>10){
                    pt.setText(oldValue);
                }
            }
        });

        Label label1 = new Label("账号");
        label1.setLayoutX(60);
        label1.setLayoutY(105);
        Label label2 = new Label("密码");
        label2.setLayoutX(60);
        label2.setLayoutY(205);

        group.getChildren().addAll(text,pt,label1,label2);
        primaryStage.show();
    }
}

 

运行后的效果如下:

这里的示例比较简单,监听器里的操作也是比较基础的。账号输入框这里,可以在监听change方法里将输入框里的值拿到数据库进行查询,如果返回为空,可以在输入框后设置标签,设置提示内容“此账号可注册”之类的。如果返回不为空,那么标签的提示内容则可以设置成“此账号已被注册”之类的,这都是比较常见的。账号在我们常见的页面还有其他限制,像什么必须字母加数字啊,不输入中文的,这个可以用正则表达式来进行限制。

还有就是密码输入框,密码输入框在注册时比较常见的是在后面有三条密码强度信号,当你的密码强度达到一定的级别,会亮不同的颜色。这个也是在监听change方法里可以实现的。获取到密码输入框的内容,和正则表达式进行比较,再对密码强度信号标签设置颜色即可。这里我简单的做了个示例:


import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.Group;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.paint.Paint;
import javafx.stage.Stage;
import javafx.scene.Scene;


public class JavaFxNote extends Application {
    public static void main(String[] args)
    {
//        调用launch方法启动应用
        launch(args);
    }
    @Override
    public void start(Stage primaryStage) throws Exception {

        Group group =new Group();
//        容器添加子组件

//        指定一个布局类或者根结点
        Scene scene = new Scene(group);

        primaryStage.setScene(scene);
        primaryStage.setTitle("骏杰小程序");
        primaryStage.setHeight(500);
        primaryStage.setWidth(500);

        TextField text = new TextField();
//        text.setText("输入框");

        text.setLayoutX(100);
        text.setLayoutY(100);

//        设置提示
        Tooltip tip = new Tooltip("输入账号");
        text.setTooltip(tip);

//        设置文本框背景提示,需要去除焦点,并去除文本框文字
        text.setPromptText("请输入10位账号");
        text.setFocusTraversable(false);

//        设置输入限制,对应上面的背景提示
        text.textProperty().addListener(new ChangeListener<String>() {
            @Override
            public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
//                判断新值是否大于10,
//                大于10则显示旧值,
//                小于10显示新值
                if(newValue.length()>10){
                    text.setText(oldValue);
                }
            }
        });

//        监听文本框内选择的文字
        text.selectedTextProperty().addListener(new ChangeListener<String>() {
            @Override
            public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
                System.out.println(newValue);
            }
        });

//        密码框
        PasswordField pt = new PasswordField();
        pt.setLayoutX(100);
        pt.setLayoutY(200);

//        放置密码强度组件的容器
        Group gropTip = new Group();

//       设置提示
        Tooltip tip2 = new Tooltip("输入密码");
        pt.setTooltip(tip2);

//      设置文本框背景提示,需要去除焦点,并去除文本框文字
        pt.setPromptText("请输入含英文和数字的10位密码");
        pt.setFocusTraversable(false);
//        设置输入限制,对应上面的背景提示
        pt.textProperty().addListener(new ChangeListener<String>() {
            @Override
            public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
//                判断新值是否大于10,
//                大于10则显示旧值,
//                小于10显示新值
                if(newValue.length()>10){
                    pt.setText(oldValue);
                }
//                清除密码强度组件
                gropTip.getChildren().clear();
                Label labelTip = new Label("密码强度");
                Label labelLow = new Label(" ");
                labelLow.setLayoutX(60);
                labelLow.setLayoutY(0);
                labelLow.setScaleY(0.6);//对第一个强度信号标签的高度进行缩放
                Label labelMid = new Label(" ");
                labelMid.setLayoutX(65);
                labelMid.setLayoutY(-1.5);
                labelMid.setScaleY(0.8);//对第二个强度信号标签的高度进行缩放
                Label labelHigh = new Label(" ");
                labelHigh.setLayoutX(70);
                labelHigh.setLayoutY(-3);
                gropTip.getChildren().addAll(labelTip,labelLow,labelMid,labelHigh);
//                灰色背景色
                BackgroundFill bgf2 = new BackgroundFill(Paint.valueOf("#d3d7d4"),null,null);
                Background bg2 = new Background(bgf2);
                String patternNumt = "[0-9]*";
                String patternS ="[a-zA-Z]*";
                String pattern2 =".*\\d+.*";
                String pattern3 =".*[a-zA-Z]+.*";
                String pattern4 =".*[~!@#$%^&*()_+|<>,.?/:;'\\[\\]{}\"]+.*";
                if(pt.getText().matches(patternNumt) || pt.getText().matches(patternS)){
//                    红色背景色,密码强度最低,密码只包含数字或只包含字母
                    BackgroundFill bgf = new BackgroundFill(Paint.valueOf("#d71345"),null,null);
                    Background bg = new Background(bgf);
                    labelLow.setBackground(bg);
                    labelMid.setBackground(bg2);
                    labelHigh.setBackground(bg2);
                }else if(pt.getText().matches(pattern4) && pt.getText().matches(pattern3) && pt.getText().matches(pattern2)){
//                    绿色背景色,密码强度最高,密码包含数字字母以及特殊字符
                    BackgroundFill bgf = new BackgroundFill(Paint.valueOf("#45b97c"),null,null);
                    Background bg = new Background(bgf);
                    labelLow.setBackground(bg);
                    labelMid.setBackground(bg);
                    labelHigh.setBackground(bg);
                }else{
//                    黄色背景色,密码强度中等,密码包含数字字母特殊字符中的两种
                    BackgroundFill bgf = new BackgroundFill(Paint.valueOf("#ffd400"),null,null);
                    Background bg = new Background(bgf);
                    labelLow.setBackground(bg);
                    labelMid.setBackground(bg);
                    labelHigh.setBackground(bg2);
                }
//                如果密码框为空,也清除密码强度组件
                if(pt.getText()==null || pt.getText().equals("")){
                    gropTip.getChildren().clear();
                }
            }
        });

        Label label1 = new Label("账号");
        label1.setLayoutX(60);
        label1.setLayoutY(105);
        Label label2 = new Label("密码");
        label2.setLayoutX(60);
        label2.setLayoutY(205);
        gropTip.setLayoutX(280);
        gropTip.setLayoutY(205);

        group.getChildren().addAll(text,pt,label1,label2,gropTip);
        primaryStage.show();
    }
}

 

注释写得很清楚,这里就不多解释了。运行效果如下:

密码强度弱

 

密码强度中等

 

密码强度强

 

        学习javafx的资料比较少,视频学习推荐哔哩哔哩搜索up主:Aimls,或者加入扣扣群里学习:一群 456378454 ,二群:464362636

  • 2
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吃西瓜不吐西瓜籽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值