شرح الكلاس TextField
الكلاس TextField يستخدم لإضافة مربع نص ( Text Field ) في واجهة المستخدم.
ملاحظة: الـ Text Field يظهر سطر واحد بداخله و لا يمكن جعله يتألف من أكثر من سطر.
بناء الكلاس TextField
public class TextField extends TextInputControl
كونستركتورات الكلاس TextField
الجدول التالي يحتوي على كونستركتورات الكلاس TextField.
| الكونستركتور مع تعريفه | |
|---|---|
public TextField()
ينشئ كائن من الكلاس TextField يمثل مربع نص فارغ. |
|
public TextField(String text)
ينشئ كائن من الكلاس TextField يمثل مربع نص فيه نص.مكان الباراميتر text نمرر النص الذي نريد وضعه بداخل الـTextField. |
|
دوال الكلاس TextField
الجدول التالي يحتوي على دوال الكلاس TextField الأكثر إستخداماً.
| الدالة مع تعريفها | |
|---|---|
public String getText()
ترجع نص كائن الـ TextField الذي قام بإستدعائها كنص. |
|
public void setText(String text)
تستخدم لتبديل نص كائن الـ TextField الذي قام بإستدعائها.مكان الباراميتر text نضع النص الجديد. |
|
public final void setTextFill(Paint value)
تستخدم لتحديد لون نص كائن الـ TextField الذي قام بإستدعائها.مكان الباراميتر value نضع كائن من إحدى الكلاسات التي ترث من الكلاس Paint و التي يمكن إستخدامها لتحديد درجة اللون. |
|
public final void setBackground(Background value)
تستخدم لوضع لون أو صورة كخلفية لكائن الـ TextField الذي قام بإستدعائها.مكان الباراميتر value نضع كائن من الكلاس Background يشير إلى درجة اللون أو الصورة التي سيتم وضعها كخلفية. |
|
public final void setFont(Font newFont)
تستخدم لتحديد حجم و نوع خط كائن الـ TextField الذي قام بإستدعائها.مكان الباراميتر newFont نضع كائن من الكلاس Font يمثل خصائص الخط الجديد. |
|
public final void setPadding(Insets value)
تستخدم لإضافة هامش ( مسافة فارغة ) حول نص كائن الـ TextField الذي قام باستدعائها.مكان الباراميتر value نضع كائن من الكلاس Insets يمثل حجم الهامش حول النص من كل الجهات. |
|
public final void setTranslateX(double value)
تستخدم لتحديد مكان الـ TextField الذي قام باستدعائها أفقياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من اليسار إلى اليمين. |
|
public final void setTranslateY(double value)
تستخدم لتحديد مكان الـ TextField الذي قام باستدعائها عامودياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من الأعلى إلى الأسفل. |
|
public void setPrefSize(double prefWidth, double prefHeight)
تستخدم لتحديد حجم الـ TextField الذي قام باستدعائها.
|
|
public final void setDisable(boolean value)
تستخدم لجعل نص كائن الـ TextField الذي قام باستدعائها يبدو غير مفعّل, أي يصبح لونه باهتاً و غير قابل لتغير النص الموجود بداخله.مكان الباراميتر value نضع القيمة true لجعله غير مفعّل. |
|
public final void setStyle(String value)
تستخدم لتعديل تصميم الـ TextField الذي قام بإستدعائها.مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ TextField بأسلوب لغة CSS لإظهاره بالشكل الذي تريده. |
|
أمثلة شاملة في الكلاس TextField في javafx
طريقة إنشاء كائن من الكلاس TextField و إضافته في النافذة
المثال التالي يعلمك طريقة إنشاء كائن من الكلاس TextField و إضافته في النافذة .
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل مربع النص الذي نريد إضافته في النافذة TextField هنا قمنا بإنشاء كائن من الكلاس
TextField textField = new TextField();
// في النافذة textField هنا قمنا بتحديد مكان ظهور الكائن
textField.setTranslateX(100);
textField.setTranslateY(110);
// textField هنا قمنا بتحديد عرض الـ
textField.setPrefWidth(200);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن textField هنا قمنا بإضافة الكائن
root.getChildren().add(textField);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX TextField");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة تغيير نوع و حجم خط الـ TextField
المثال التالي يعلمك طريقة تغيير نوع و حجم خط الـ TextField.
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.text.Font;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل مربع النص الذي نريد إضافته في النافذة TextField هنا قمنا بإنشاء كائن من الكلاس
TextField textField = new TextField();
// في النافذة textField هنا قمنا بتحديد مكان ظهور الكائن
textField.setTranslateX(100);
textField.setTranslateY(110);
// textField هنا قمنا بتغيير نوع و حجم خط الكائن
textField.setFont(new Font("Arial", 20));
// textField هنا قمنا بتحديد عرض الـ
textField.setPrefWidth(200);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن textField هنا قمنا بإضافة الكائن
root.getChildren().add(textField);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX TextField");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة الحصول على النص المدخل في الـ TextField
المثال التالي يعلمك طريقة الحصول على النص المدخل في الـ TextField.
مثال
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
Label nameLabel = new Label("Enter your name");
TextField textField = new TextField();
Button button = new Button("Get name");
Label resultLabel = new Label();
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
nameLabel.setTranslateX(50);
nameLabel.setTranslateY(83);
textField.setTranslateX(150);
textField.setTranslateY(80);
button.setTranslateX(50);
button.setTranslateY(157);
resultLabel.setTranslateX(150);
resultLabel.setTranslateY(160);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(nameLabel);
root.getChildren().add(textField);
root.getChildren().add(button);
root.getChildren().add(resultLabel);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX TextField");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// button هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
button.setOnAction((ActionEvent e) -> {
// resultLabel و وضعه كنص للـ textField عند النقر على الزر سيتم جلب نص الـ
resultLabel.setText(textField.getText());
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة الحصول على النص المدخل في TextField و تحويله إلى رقم
المثال التالي يعلمك طريقة الحصول على النص المدخل في TextField و تحويله إلى رقم.
مثال
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
Label label_1 = new Label("First Number");
Label label_2 = new Label("Second Number");
TextField textField_1 = new TextField();
TextField textField_2 = new TextField();
Button equalButton = new Button("Calculate the sum");
Label resultLabel = new Label();
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
label_1.setTranslateX(100);
label_1.setTranslateY(50);
textField_1.setTranslateX(200);
textField_1.setTranslateY(47);
label_2.setTranslateX(100);
label_2.setTranslateY(90);
textField_2.setTranslateX(200);
textField_2.setTranslateY(87);
equalButton.setTranslateX(100);
equalButton.setTranslateY(130);
resultLabel.setTranslateX(100);
resultLabel.setTranslateY(180);
// هنا قمنا بتحديد عرض الأشياء التي سنضيفها في النافذة
label_1.setPrefWidth(90);
textField_1.setPrefWidth(100);
label_2.setPrefWidth(90);
textField_2.setPrefWidth(100);
equalButton.setPrefSize(200, 30);
resultLabel.setPrefWidth(200);
// هنا قمنا بتحديد عرض الأشياء التي سنضيفها في النافذة
resultLabel.setAlignment(Pos.CENTER);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(label_1);
root.getChildren().add(textField_1);
root.getChildren().add(label_2);
root.getChildren().add(textField_2);
root.getChildren().add(equalButton);
root.getChildren().add(resultLabel);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX TextField");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// equalButton هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
equalButton.setOnAction((ActionEvent e) -> {
// فارغ لن يتم عرض أي ناتج TextField إذا كان يوجد أي
if (textField_1.getText().equals("") || textField_2.getText().equals(""))
resultLabel.setText("");
// فارغ TextField إذا كان لا يوجد أي
else {
try {
// num_2 و num_1 و تخزينهم في المتغيرات textField_2 و الـ textField_1 سيتم جلب الأرقام التي أدخلها المستخدم في الـ
double num_1 = Double.valueOf(textField_1.getText());
double num_2 = Double.valueOf(textField_2.getText());
// resultLabel في حال قام المستخدم بإدخال أرقام, سيتم جمعهم ثم سيوضع الناتج كنص مكان المتغير
resultLabel.setTextFill(Color.BLACK);
resultLabel.setText(num_1+" + "+num_2+" = "+(num_1 + num_2));
}
catch (Exception ex) {
// resultLabel في حال لم يقم المستخدم بإدخال أرقام, سيتم عرض النص التالي و تلوينه بالأحمر
resultLabel.setTextFill(Color.RED);
resultLabel.setText("خطأ في الإدخال !");
}
}
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة إظهار نص إرشاد في الـ TextField في حال كان فارغاً
المثال التالي يعلمك طريقة إظهار نص إرشاد في الـ TextField في حال كان فارغاً.
لإظهار نص إرشاد ( Hint ) بداخل الـ TextField عندما يكون لا يحتوي على أي نص عليك إتباعا الخطوتين التاليتين:
تحديد النص الذي سيظهر بداخل الـ
TextFieldعندما يكون فارغاً بواسطة الدالةsetPromptText().قم باستدعاء الدالة
setFocusTraversable(false)كما هي لكلTextFieldلضمان أن لا تكون الفأرة موضوعة بداخل أي واحد فيهم عند تشغيل البرنامج.
هذه الخطوة تعتبر إختيارية لكنها تضمن أن يتم إظهار نص الإرشاد الذي تم وضعه لكلTextFieldتم إضافته في النافذة عند تشغيل البرنامج.
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
TextField textField1 = new TextField();
TextField textField2 = new TextField();
TextField textField3 = new TextField();
Button button = new Button("Submit");
// هنا قمنا بتحديد النصوص التي سيتم عرضها في مربعات النصوص عندما تكون فارغة
textField1.setPromptText("First Name");
textField2.setPromptText("Last Name");
textField3.setPromptText("Email Address");
// هنا جعلنا زر الفأرة غير موضوع بداخل أي مربع نص عند تشغيل البرنامج
textField1.setFocusTraversable(false);
textField2.setFocusTraversable(false);
textField3.setFocusTraversable(false);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
textField1.setTranslateX(100);
textField1.setTranslateY(50);
textField2.setTranslateX(100);
textField2.setTranslateY(90);
textField3.setTranslateX(100);
textField3.setTranslateY(130);
button.setTranslateX(100);
button.setTranslateY(170);
// هنا قمنا بتحديد عرض الأشياء التي سنضيفها في النافذة
textField1.setPrefWidth(200);
textField2.setPrefWidth(200);
textField3.setPrefWidth(200);
button.setPrefWidth(200);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(textField1);
root.getChildren().add(textField2);
root.getChildren().add(textField3);
root.getChildren().add(button);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX TextField");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
