양식 유효성 검사기 메시지

Question

나는이 예와 비슷한 형태 검사기를 찾고 있어요 ?

이와 비슷한 양식 검사기를 만드는 방법에 대한 예가 있습니까?

Answer 1

바로 시작할 수 있도록 다음은 ContextMenu을 사용하는 작은 예입니다. ContextMenu이이 시나리오에 대한 이상적인 컨트롤이 아니며 Label, Text 등으로 자유롭게 바꿀 수 있습니다. TextField 및 Label은 HBox (처음에는 레이블이 숨겨 짐)에 넣고 HBox는 GridPane에 보관하십시오. 또는 다른 방법을 함께 사용할 수 있습니다!

CSS로 유효성 검사 메시지/컨트롤을 디자인 할 수 있습니다!

그냥 추가 (당신이 알고있을 수 있음) :

기능적

, 그것은 따라 달라에, 당신이 당신의 검증 조건이 있어야한다 무엇 검증 및 을 트리거 할 할 때 . 내 예에서는 비어있는 텍스트 필드을 확인하고 의 버튼을 클릭하여 유효성 검사를 트리거했습니다. 비슷한 시나리오 또는 에서 TextField 또는 일부 다른 시나리오에서 유효성 검사를 실행할 수 있습니다!

javafx는 UI 컨트롤과 디자인이 풍부하여 창의력에 완전히 의존합니다!

ValidationDemo.java

import javafx.application.Application; 
import javafx.beans.value.ChangeListener; 
import javafx.beans.value.ObservableValue; 
import javafx.event.ActionEvent; 
import javafx.event.EventHandler; 
import javafx.geometry.Insets; 
import javafx.geometry.Pos; 
import javafx.geometry.Side; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.ContextMenu; 
import javafx.scene.control.Label; 
import javafx.scene.control.MenuItem; 
import javafx.scene.control.PasswordField; 
import javafx.scene.control.TextField; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.layout.GridPane; 
import javafx.scene.layout.HBox; 
import javafx.scene.paint.Color; 
import javafx.scene.text.Font; 
import javafx.scene.text.FontWeight; 
import javafx.scene.text.Text; 
import javafx.stage.Stage; 

public class ValidationDemo extends Application { 

    @Override 
    public void start(Stage stage) throws Exception { 
     stage.setTitle("Validation Demo"); 
     BorderPane borderPane = new BorderPane(); 

     borderPane.setCenter(loadLoginScreen()); 
     Scene scene = new Scene(borderPane, 700, 500); 
     scene.getStylesheets().add(
       ValidationDemo.class.getResource("context.css") 
         .toExternalForm()); 
     stage.setScene(scene); 
     stage.show(); 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 

    private GridPane loadLoginScreen() { 

     GridPane grid = new GridPane(); 
     grid.setAlignment(Pos.CENTER); 
     grid.setHgap(10); 
     grid.setVgap(10); 
     grid.setPadding(new Insets(25, 25, 25, 25)); 

     Text scenetitle = new Text("Welcome"); 
     scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20)); 
     grid.add(scenetitle, 0, 0, 2, 1); 

     Label userName = new Label("User Name:"); 
     grid.add(userName, 0, 1); 

     final TextField userTextField = new TextField(); 
     grid.add(userTextField, 1, 1); 

     Label pw = new Label("Password:"); 
     grid.add(pw, 0, 2); 

     final PasswordField pwBox = new PasswordField(); 
     grid.add(pwBox, 1, 2); 

     Button btn = new Button("Sign in"); 
     HBox hbBtn = new HBox(10); 
     hbBtn.setAlignment(Pos.BOTTOM_RIGHT); 
     hbBtn.getChildren().add(btn); 
     grid.add(hbBtn, 1, 4); 

     final Text actiontarget = new Text(); 
     grid.add(actiontarget, 1, 6); 

     // Context Menu for error messages 
     final ContextMenu usernameValidator = new ContextMenu(); 
     usernameValidator.setAutoHide(false); 
     final ContextMenu passValidator = new ContextMenu(); 
     passValidator.setAutoHide(false); 

     // Action on button press 
     btn.setOnAction(new EventHandler<ActionEvent>() { 

      @Override 
      public void handle(ActionEvent e) { 
       // Clearing message if any 
       actiontarget.setText(""); 

       // Checking if the userTextField is empty 
       if (userTextField.getText().equals("")) { 
        usernameValidator.getItems().clear(); 
        usernameValidator.getItems().add(
          new MenuItem("Please enter username")); 
        usernameValidator.show(userTextField, Side.RIGHT, 10, 0); 
       } 
       // Checking if the pwBox is empty 
       if (pwBox.getText().equals("")) { 
        passValidator.getItems().clear(); 
        passValidator.getItems().add(
          new MenuItem("Please enter Password")); 
        passValidator.show(pwBox, Side.RIGHT, 10, 0); 
       } 
       // If both of the above textFields have values 
       if (!pwBox.getText().equals("") 
         && !userTextField.getText().equals("")) { 
        actiontarget.setFill(Color.GREEN); 
        actiontarget.setText("Welcome"); 
       } 
      } 
     }); 

     userTextField.focusedProperty().addListener(
       new ChangeListener<Boolean>() { 
        @Override 
        public void changed(
          ObservableValue<? extends Boolean> arg0, 
          Boolean oldPropertyValue, Boolean newPropertyValue) { 
         if (newPropertyValue) { 
          // Clearing message if any 
          actiontarget.setText(""); 
          // Hiding the error message 
          usernameValidator.hide(); 
         } 
        } 
       }); 

     pwBox.focusedProperty().addListener(new ChangeListener<Boolean>() { 
      @Override 
      public void changed(ObservableValue<? extends Boolean> arg0, 
        Boolean oldPropertyValue, Boolean newPropertyValue) { 
       if (newPropertyValue) { 
        // Clearing message if any 
        actiontarget.setText(""); 
        // Hiding the error message 
        passValidator.hide(); 
       } 
      } 
     }); 
     return grid; 
    } 

} 

context.css

.root { 
    -fx-background-color: cornsilk; 
    -fx-padding: 10; 
} 

.context-menu { 
    -fx-background-color: #006699; 
    -fx-text-fill: white; 
    -fx-padding: 0; 
} 

.context-menu:hover { 
    -fx-background-color: #006699; 
    -fx-text-fill: white; 
} 

.menu-item .label { 
    -fx-text-fill: white; 
} 

.menu-item:focused .label { 
    -fx-text-fill: white; 
}