Hello guys,
After a long days gaps I’m back on my favourite blog. I’m preety glad to know that Oracle has launched the new JavaFX Scene Builder. If you have not started then please give it a try. You can download the Scene Builder from here:

Ok Now lets go to the main stuffs of today’s post. I’ve been working on CSS stuff and it’s being so interesting to use in JavaFX which is more easier to design the controls and make the design more interactive in Application for the end-user. In the real world application we may need the form to fill up from the javafx and when ever there comes the form then the validation is one of the important part of form. Every field in the form need the validation for making the proper data entry.

Let’s start with small Textfield validation with the simple app.

 

Validation.java
@Override
public void start(Stage primaryStage) {
	primaryStage.setTitle("Hello World!");
	final TextField nfield= new TextField();
	final Label error = new Label("Integer not allowed !");
	error.setVisible(false);
	nfield.addEventFilter(KeyEvent.KEY_TYPED, new EventHandler(){
		@Override
		public void handle(KeyEvent arg0) {
			if(arg0.getCharacter().matches("[0-9]")){
				nfield.getStyleClass().add("error");
				error.setVisible(true);
				arg0.consume();
			}else{
				error.setVisible(false);
				 nfield.getStyleClass().remove("error"); 

			}
		}
	});

	Label n = new Label("Name");
	error.setTextFill(Color.RED); 

	HBox hbox = new HBox(10);
	hbox.getChildren().addAll(n,nfield,error);
	hbox.setPadding(new Insets(20,20,20,20));

	primaryStage.setScene(new Scene(hbox, 300, 250)); 
	primaryStage.getScene().getStylesheets().add("file:/c:/gui.css");
	primaryStage.show();
}

 

gui.css
.error{
	-fx-background-color: red,linear-gradient(to bottom, derive(red,60%) 5%,derive(red,90%) 40%);
}

error

 

In the same way we can even make some multii-behaviour validation textfield too. Like below.

 

Validation.java
public void setMessage(Label l, String message, Color color){
	l.setText(message);
	l.setTextFill(color);
	l.setVisible(true); 
}
public void removeAllStyle(Node n){
	n.getStyleClass().removeAll("bad","med","good","best"); 
}

@Override
public void start(Stage primaryStage) {
	primaryStage.setTitle("Hello World!");
	Label n = new Label("Username");
	TextField nfield= new TextField();
	Label p= new Label("Password");
	PasswordField pfield = new PasswordField();
	final Label message = new Label();
	message.setVisible(false);

	pfield.addEventFilter(KeyEvent.KEY_RELEASED, new EventHandler<KeyEvent>(){
		@Override
		public void handle(KeyEvent arg0) {
			PasswordField f=(PasswordField)arg0.getSource();
			int length = f.getText().length();

			if(length <8){
				setMessage(message,"Password Strength: Bad",Color.RED);
				removeAllStyle(f);
				f.getStyleClass().add("bad");  
			}
			else if(length <12){
				setMessage(message,"Password Strength: Medium",Color.ORANGERED);
				removeAllStyle(f);
				f.getStyleClass().add("med");
			}
			else if(length <18){
				setMessage(message,"Password Strength: Good",Color.ORANGE);
				removeAllStyle(f);
				f.getStyleClass().add("good");
			}
			else if(length <25){
				setMessage(message,"Password Strength: Best",Color.GREEN);
				removeAllStyle(f);
				f.getStyleClass().add("best");
			}else{
				removeAllStyle(f);
				message.setVisible(false);
			}

		}
	});

	GridPane pane = new GridPane();
	pane.add(n, 1, 1);
	pane.add(nfield, 2, 1);
	pane.add(p, 1, 2);
	pane.add(pfield, 2, 2);
	pane.add(message, 3, 2); 
	pane.add(new Button("Submit"), 2,4);

	pane.setHgap(20);
	pane.setVgap(20);
	primaryStage.setScene(new Scene(pane, 500, 300)); 
	primaryStage.getScene().getStylesheets().add("file:/c:/gui.css");
	primaryStage.show();
}

gui.css

.bad{
	-fx-background-color: red,linear-gradient(to bottom, derive(red,60%) 5%,derive(red,90%) 40%);
}
.med{
	-fx-background-color: orangered,linear-gradient(to bottom, derive(orangered,60%) 5%,derive(orangered,90%) 40%);
}
.good{
	-fx-background-color: orange,linear-gradient(to bottom, derive(orange,60%) 5%,derive(orange,90%) 40%);
}
.best{
	-fx-background-color: green,linear-gradient(to bottom, derive(green,60%) 5%,derive(green,90%) 40%);
}

Output:

bad password

medium password

good password

best password

That’s all for today. Hope you like this post. Have a 🙂 good day . Thanks