JavaFX Program to Build Login Form With CSS Using GridPane UI Layout GUI Desktop App

You are currently viewing JavaFX Program to Build Login Form With CSS Using GridPane UI Layout GUI Desktop App

JavaFX Program to Build Login Form With CSS Using GridPane UI Layout GUI Desktop App

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.effect.DropShadow;
import javafx.scene.effect.Reflection;
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;
  
/**
 *
 * @web http://zoranpavlovic.blogspot.com/
 */
public class Login extends Application {
  
 String user = "JavaFX2";
 String pw = "password";
 String checkUser, checkPw;
  
    public static void main(String[] args) {
        launch(args);
    }
      
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("JavaFX 2 Login");
         
        BorderPane bp = new BorderPane();
        bp.setPadding(new Insets(10,50,50,50));
         
        //Adding HBox
        HBox hb = new HBox();
        hb.setPadding(new Insets(20,20,20,30));
         
        //Adding GridPane
        GridPane gridPane = new GridPane();
        gridPane.setPadding(new Insets(20,20,20,20));
        gridPane.setHgap(5);
        gridPane.setVgap(5);
         
       //Implementing Nodes for GridPane
        Label lblUserName = new Label("Username");
        final TextField txtUserName = new TextField();
        Label lblPassword = new Label("Password");
        final PasswordField pf = new PasswordField();
        Button btnLogin = new Button("Login");
        final Label lblMessage = new Label();
         
        //Adding Nodes to GridPane layout
        gridPane.add(lblUserName, 0, 0);
        gridPane.add(txtUserName, 1, 0);
        gridPane.add(lblPassword, 0, 1);
        gridPane.add(pf, 1, 1);
        gridPane.add(btnLogin, 2, 1);
        gridPane.add(lblMessage, 1, 2);
         
                 
        //Reflection for gridPane
        Reflection r = new Reflection();
        r.setFraction(0.7f);
        gridPane.setEffect(r);
         
        //DropShadow effect 
        DropShadow dropShadow = new DropShadow();
        dropShadow.setOffsetX(5);
        dropShadow.setOffsetY(5);
         
        //Adding text and DropShadow effect to it
        Text text = new Text("JavaFX 2 Login");
        text.setFont(Font.font("Courier New", FontWeight.BOLD, 28));
        text.setEffect(dropShadow);
         
        //Adding text to HBox
        hb.getChildren().add(text);
                           
        //Add ID's to Nodes
        bp.setId("bp");
        gridPane.setId("root");
        btnLogin.setId("btnLogin");
        text.setId("text");
                 
        //Action for btnLogin
        btnLogin.setOnAction(new EventHandler() {
         public void handle(ActionEvent event) {
          checkUser = txtUserName.getText().toString();
          checkPw = pf.getText().toString();
          if(checkUser.equals(user) && checkPw.equals(pw)){
           lblMessage.setText("Congratulations!");
           lblMessage.setTextFill(Color.GREEN);
          }
          else{
           lblMessage.setText("Incorrect user or pw.");
           lblMessage.setTextFill(Color.RED);
          }
          txtUserName.setText("");
          pf.setText("");
         }
         });
        
        //Add HBox and GridPane layout to BorderPane Layout
        bp.setTop(hb);
        bp.setCenter(gridPane);  
         
        //Adding BorderPane to the scene and loading CSS
     Scene scene = new Scene(bp);
     scene.getStylesheets().add(getClass().getClassLoader().getResource("login.css").toExternalForm());
     primaryStage.setScene(scene);
       primaryStage.titleProperty().bind(
                 scene.widthProperty().asString().
                 concat(" : ").
                 concat(scene.heightProperty().asString()));
     //primaryStage.setResizable(false);
     primaryStage.show();
    }
}
#root {
 -fx-background-color:  linear-gradient(lightgray, gray);
 -fx-border-color: white;
 -fx-border-radius: 20;
 -fx-padding: 10 10 10 10;
 -fx-background-radius: 20;
  
}
 
#bp {
 -fx-background-color:  linear-gradient(gray,DimGrey );
  
}
 
#btnLogin {
    -fx-background-radius: 30, 30, 29, 28;
    -fx-padding: 3px 10px 3px 10px;
    -fx-background-color: linear-gradient(orange, orangered );
}
 
#text {
 -fx-fill:  linear-gradient(orange , orangered);
}

Ranjith

Hi, I'm Manoj a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Diksha. Here, I post about programming to help developers.

Leave a Reply