标签其实没什么可以说的,这里就主要说一下输入框。输入框是人机交互的一个非常重要的方式。最常见的就是登录/注册界面,账号密码的输入。注册界面账号密码的输入,需要获取输入框的内容与数据库进行对比,是否存在重复账号、密码是否设置过于简单等等。这里先做一个简单的示例。
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();
}
}
注释写得很清楚,这里就不多解释了。运行效果如下:
密码强度弱
密码强度中等
密码强度强