В этом уроке я создам красивую форму для входа в систему с помощью JavaFX 2 и CSS. Это классическая форма входа с именем пользователя и паролем, а также кнопка входа. Чтобы следовать этому уроку, я настоятельно рекомендую вам проверить следующие уроки:
- Начало работы с JavaFX 2 в Eclipse IDE
- JavaFX 2: HBox
- JavaFX 2: GridPane
- JavaFX 2: стилизация кнопок
- JavaFX 2: Работа с текстом и текстовыми эффектами
Имя пользователя: JavaFX2 Пароль: пароль
Вы можете ввести эту информацию выше и нажать на кнопку «Войти». С помощью небольшого сообщения он сообщит вам, что вход в систему выполнен успешно, но если вы введете неверную информацию, он сообщит вам небольшое сообщение о том, что вход не выполнен.
Окончательный снимок экрана этого урока будет как на картинке ниже.
 |
| JavaFX 2 Форма входа |
Вот код Java нашего примера:
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
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; /** * */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(); }} |
Чтобы правильно оформить это приложение, вам нужно создать файл login.css в папке / src вашего проекта. Если вы не знаете, как это сделать, обратитесь к руководству по JavaFX 2: стилизация кнопок .
Вот код CSS нашего примера:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
#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);} |
Это все люди для этого урока, если у вас есть какие-либо комментарии или проблемы, не стесняйтесь комментировать. Если вам нравится этот учебник, вы можете ознакомиться с другими учебниками по JavFX 2 в этом блоге.
Возможно, вы захотите взглянуть на эти учебники ниже:
Ссылка: JavaFX 2: создайте красивую форму входа от нашего партнера по JCG Зорана Павловича в