Post: [Java] : Password Protected Form
11-18-2013, 01:56 AM #1
(adsbygoogle = window.adsbygoogle || []).push({});


How to create a Password Protected Form in Java




First Download an IDE:
Netbeans: You must login or register to view this content. ( Best Java FX Support )
Intelli J: You must login or register to view this content.
Eclipse: You must login or register to view this content.
( I use Netbeans as an IDE but Eclipse seems to be the most popular, Intelli J is very good )

Second Prepare your project (assuming you already downloaded the correct JDKs and installed your IDE of choice correctly )

We will be using Java FX so we will need to import these first...


    
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
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.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Text;
import javafx.stage.Stage;



After you import those in we will start creating the GUI ( Graphical User Interface )


    
public class Login extends Application {

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

@Override
public void start(final Stage primaryStage) {
//set-up our grid
primaryStage.setTitle("JavaFX Welcome: Login Form");
GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25, 25, 25, 25));

//start content
//set the title
Text scenetitle = new Text("Welcome");
scenetitle.setId("welcome-text");
grid.add(scenetitle, 0, 0, 2, 1);

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

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

//add password label
Label password = new Label("Password:");
grid.add(password, 0, 2);

//add password "passbox" aka textbox for passwords
final PasswordField pwBox = new PasswordField();
grid.add(pwBox, 1, 2);

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

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

//add credits
Label credits = new Label("Program by: ENTER YOUR NAME HERE");
grid.add(credits, 1,7);



This form of setting up the GUI is by using a "GridPane" Which orders everything into columns and rows thus giving us exact location of where we want our tools...

Next we will start creating the engine of our Program...


    
//button sets and action event
btn.setOnAction(new EventHandler<ActionEvent>() {

@Override
public void handle(ActionEvent e) {
//save userName and password as Srings
String userName;
String password;
userName = userTextField.getText();
password = pwBox.getText();

//password and userName are correct...
if(password.equals("P455W0RD") && userName.equals("User 1") ){
//changes actiontarget's Id for CSS
actiontarget.setId("confirmed");
//changes actiontarget's text property
actiontarget.setText("Confirmed");
//start content for Form 2
Label secondLabel = new Label("Hello");

StackPane secondaryLayout = new StackPane();
secondaryLayout.getChildren().add(secondLabel);

Scene secondScene = new Scene(secondaryLayout, 200, 100);

Stage secondStage = new Stage();
secondStage.setTitle("Second Stage");
secondStage.setScene(secondScene);
secondScene.getStylesheets().add
(Login.class.getResource("Loggedin.css").toExternalForm());
//Set position of second window, related to primary window.
secondStage.setX(primaryStage.getX() + 250);
secondStage.setY(primaryStage.getY() + 100);

secondStage.show();
primaryStage.close();

}
//either password, userName or both are incorrect...
else{
actiontarget.setId("denied");
actiontarget.setText("ERROR!");
}
}
});

//end content



Finally we will make sure the user can see and use our program...


    
//Form Window Properties
Scene scene = new Scene(grid, 400, 275);
primaryStage.setScene(scene);
//Link to CSS
scene.getStylesheets().add
(Login.class.getResource("Login.css").toExternalForm());
//Shows Form1
primaryStage.show();
}



}



As you may have noticed we have linked our program to an External CSS Sheet... After you create a CSS Style Sheet, add the following code to it...


    
.root {
-fx-background-color: #ffffff;
}

.label {
-fx-font-size: 12px;
-fx-font-weight: bold;
-fx-text-fill: #333333;
-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

#welcome-text {
-fx-font-size: 32px;
-fx-font-family: "Arial Black";
-fx-fill: #818181;
-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
#confirmed {
-fx-fill: #008000;
-fx-font-weight: bold;
-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}
#denied {
-fx-fill: #b22222;
-fx-font-weight: bold;
-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

.button {
-fx-text-fill: white;
-fx-font-family: "Arial Narrow";
-fx-font-weight: bold;
-fx-background-color: linear-gradient(#9400d3, #483d8b);
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

.button:hover {
-fx-background-color: linear-gradient(#483d8b, #9400d3);
}



Add what ever background you want and add it to the source directory with the rest of your code...
I used this background: [ATTACH=CONFIG]28085[/ATTACH]


Last edited by SillyBilly79 ; 11-19-2013 at 02:03 AM. Reason: fix errors
11-18-2013, 03:38 AM #2
Dan
I'm a god.
Originally posted by SillyBilly79 View Post

snip


Nice tutorial! Good detail.

Next time use the code tags:
[code]your example code here[/code]

The following user thanked Dan for this useful post:

SillyBilly79
11-19-2013, 02:01 AM #3
I did so now THANKS! =D
11-21-2013, 05:05 PM #4
thex for the hp

Copyright © 2024, NextGenUpdate.
All Rights Reserved.

Gray NextGenUpdate Logo