شرح الكلاس Alert
الكلاس Alert يستخدم لإظهار نافذة ثانوية ( Dialog ) جاهزة أمام المستخدم.
في العادة نستخدم نوافذ ثانوية في التطبيقات لأسباب عديدة منها: لتحذير المستخدم أو إعلامه بشيء ما, لسؤاله إذا كان موافقاً على أمر ما أم لا, لنطلب منه إدخال معلومة ما, لنطلب منه تسجيل الدخول, لإظهار نتيجة عملية بحث ما إلخ..
مصطلحات تقنية Alert
في البداية عليك معرفة أنه لتحديد نوع النافذة التي ستظهر, فإننا نستخدم إحدى الثوابت الموجودة في الكلاس AlertType.
بالنسبة للنوافذ التي يمكن إظهارها للمستخدم فإنه يطلق عليها التسميات التالية:
| المصطلح | معناه |
|---|---|
| Information Dialog | عبارة عن نافذة منبثقة تستخدم لإعلام المستخدم بشيء ما, و البعض يسميها Message Dialog. لإظهار نافذة من هذا النوع يجب تمرير الثابت AlertType.INFORMATION في كونستركتور الكائن Alert. |
| Warning Dialog | عبارة عن نافذة منبثقة تستخدم لتنبيه المستخدم حول أمر ما. لإظهار نافذة من هذا النوع يجب تمرير الثابت AlertType.WARNING في كونستركتور الكائن Alert. |
| Error Dialog | عبارة عن نافذة منبثقة تستخدم لتنبيه المستخدم حول وجود خطأ. لإظهار نافذة من هذا النوع يجب تمرير الثابت AlertType.ERROR في كونستركتور الكائن Alert. |
| Confirmation Dialog | عبارة عن نافذة منبثقة تستخدم لسؤال المستخدم إذا كان موافقاً على شيء ما أم لا. لإظهار نافذة من هذا النوع يجب تمرير الثابت AlertType.CONFIRMATION في كونستركتور الكائن Alert. |
طريقة التعامل مع Alert
في حال أردنا إظهار نافذة ثانوية فيجب أن نفعل التالي:
نقوم بإنشاء كائن من الكلاس
Alert, و في الكونستركتور نمرر ثابت من الكلاسAlertTypeلنحدد نوع النافذة التي نريد إظهارها.نستدعي الدالة
setTitle()من الكائنAlertلوضع عنوان في Stage النافذة.نستدعي الدالة
setHeaderText()من الكائنAlertلوضع عنوان رئيسي بداخل النافذة و الذي سيظهر بأحرف كبيرة.نستدعي الدالة
setContentText()من الكائنAlertلوضع النص الذي سيظهر في النافذة بأحرف صغيرة.لإظهار النافذة نستدعي الدالة
show()أوshowAndWait()من الكائنAlertو ستعرف لاحقاً ما هو الفرق بينهما.
بناء الكلاس Alert
public class Alert extends Dialog<ButtonType>
مكونات الـ Alert
النافذة التي نحصل عليها بواسطة الكلاس Alert تتألف من 4 أجزاء أساسية كما في الصورة التالية.
و جميع هذه الأجزاء في الواقع موضوعة في كائن من كلاس إسمه DialogPane.
أشكال الـ Alert
المثال التالي يظهر 4 أشكال مختلفة من النوافذ التي يمكن الحصول عليها بواسطة الكلاس Alert.
فعلياً, عند تشغيل البرنامج سيظهر لك Alert Information. عند إغلاقه سيظهر لك Alert Warning. عند إغلاقه سيظهر لك Alert Error. عند إغلاقه سيظهر لك Alert Confirmation.
مثال
import javafx.application.Application;
import javafx.scene.control.Alert;
import javafx.scene.control.Alert.AlertType;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// مع تحديد محتواه و من ثم قمنا بإظهاره INFORMATION حددنا أنه يمثل نافذة من النوع Alert هنا قمنا بإنشاء كائن من الكلاس
Alert alertInformation = new Alert(AlertType.INFORMATION);
alertInformation.setTitle("Information Alert Title");
alertInformation.setHeaderText("Information Alert Header");
alertInformation.setContentText("Information Alert Content \nWhich can appears on multi-line if needed");
alertInformation.showAndWait();
// مع تحديد محتواه و من ثم قمنا بإظهاره WARNING حددنا أنه يمثل نافذة من النوع Alert هنا قمنا بإنشاء كائن من الكلاس
Alert alertWarning = new Alert(AlertType.WARNING);
alertWarning.setTitle("Warning Alert Title");
alertWarning.setHeaderText("Warning Alert Header");
alertWarning.setContentText("Warning Alert Content \nWhich can appears on multi-line if needed");
alertWarning.showAndWait();
// مع تحديد محتواه و من ثم قمنا بإظهاره ERROR حددنا أنه يمثل نافذة من النوع Alert هنا قمنا بإنشاء كائن من الكلاس
Alert alertError = new Alert(AlertType.ERROR);
alertError.setTitle("Error Alert Title");
alertError.setHeaderText("Error Alert Header");
alertError.setContentText("Error Alert Content \nWhich can appears on multi-line if needed");
alertError.showAndWait();
// مع تحديد محتواه و من ثم قمنا بإظهاره CONFIRMATION حددنا أنه يمثل نافذة من النوع Alert هنا قمنا بإنشاء كائن من الكلاس
Alert alertConfirmation = new Alert(AlertType.CONFIRMATION);
alertConfirmation.setTitle("Confirmation Alert Title");
alertConfirmation.setHeaderText("Confirmation Alert Header");
alertConfirmation.setContentText("Confirmation Alert Content \nWhich can appears on multi-line if needed");
alertConfirmation.showAndWait();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
•بمجرد أن تغلق النافذة السابقة, ستظهر لك النافذة التالية عند التشغيل.
•بمجرد أن تغلق النافذة السابقة, ستظهر لك النافذة التالية عند التشغيل.
•بمجرد أن تغلق النافذة السابقة, ستظهر لك النافذة التالية عند التشغيل.
ملاحظة
لو استخدمنا الدالة show() بدلاً من الدالة showAndWait() عند إظهار النوافذ لظهروا كلهم في وقت واحد مع إمكانية التعامل مع نافذة واحدة في كل مرة.
معلومة تقنية
تستطيع إضافة أنواع أزرار أخرى في النافذة في المنطقة التي يقال لها Footer Region بشرط أن لا تكون النافذة أصلاً تحتوي على هذا النوع من الأزرار.
فمثلاً لا تستطيع وضع زرين Open في النافذة. لا تقلق لأن هذا الأمر ستراه لاحقاً في الأمثلة ضمن المثال الثاني بالتحديد.
كونستركتورات الكلاس Alert
الجدول التالي يحتوي على كونستركتورات الكلاس Alert.
| الكونستركتور مع تعريفه | |
|---|---|
Alert(Alert.AlertType alertType)
ينشئ كائن من الكلاس Alert يمثل نافذة ثانوية ( Dialog ) لها نوع محدد.مكان الباراميتر alertType نمرر إحدى ثوابت الكلاس AlertType التي تمثل نوع الأيقونة و الأزرار التي ستظهر في النافذة. |
|
Alert(Alert.AlertType alertType, String contentText, ButtonType... buttons)
ينشئ كائن من الكلاس Alert يمثل نافذة ثانوية ( Dialog ) لها نوع محدد.
|
|
دوال الكلاس Alert
الجدول التالي يحتوي على دوال الكلاس Alert الأكثر إستخداماً.
| الدالة مع تعريفها | |
|---|---|
public final void setTitle(String title)
تستخدم لتحديد عنوان لكائن الـ Alert الذي قام باستدعائها, و الذي سيظهر في المنطقة التي يقال لها Title Region.مكان الباراميتر title نمرر النص الذي نريد وضعه. |
|
public final void setHeaderText(String headerText)
تستخدم لتحديد النص الذي سيظهر بجانب الأيقونة في كائن الـ Alert الذي قام باستدعائها, و الذي سيظهر في المنطقة التي يقال لها Header Region.مكان الباراميتر headerText نمرر النص الذي نريد وضعه. |
|
public final void setContentText(String contentText)
تستخدم لتحديد النص الذي سيظهر فوق الأزرار في كائن الـ Alert الذي قام باستدعائها, و الذي سيظهر في المنطقة التي يقال لها Content Region.مكان الباراميتر contentText نمرر النص الذي نريد وضعه. |
|
public final void show()
تستخدم لإظهار كائن الـ Alert الذي قام باستدعائها و هي لا ترجع قيمة.لذلك في حال كنت تريد إظهار أكثر من نافذة وراء بعض فلا تقم باستخدام هذه الدالة لأنها ستفتح كل النوافذ مع بعض. |
|
public final Optional<ButtonType> showAndWait()
تستخدم لإظهار كائن الـ Alert الذي قام باستدعائها و تنتظر المستخدم حتى يغلقها لترجع قيمة تمثل نوع الزر الذي تم النقر عليه حتى تم إغلاقها.نوع الزر الذي ترجعه عبارة عن إحدى الثوابت الموجودة في الكلاس ButtonType. |
|
public final void setResizable(boolean resizable)
تستخدم لجعل المستخدم قادر على تكبير أو تصغير حجم كائن الـ Alert الذي قام باستدعائها.مكان الباراميتر resizable نمرر لها القيمة true إذا أردنا جعل المستخدم قادر على تكبير أو تصغير حجم كائن الـ Alert. |
|
public final ButtonType getResult()
ترجع ثابت من الكلاس ButtonType و نوعه أيضاً ButtonType يمثل نوع الزر الذي تم النقر عليه حتى تم إغلاق كائن الـ Alert الذي قام باستدعائها. |
|
public final void setStyle(String value)
تستخدم لتعديل تصميم كائن الـ Alert الذي قام بإستدعائها.مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ Alert بأسلوب لغة CSS لإظهاره بالشكل الذي تريده. |
|
أمثلة شاملة في الكلاس Alert
طريقة إظهار Alert عند النقر على Button
المثال التالي يعلمك طريقة إظهار Alert عند النقر على Button.
كل Button يظهر Alert مختلف عند النقر عليه.
مثال
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.control.Alert;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.control.Button;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
Button button1 = new Button("Show Information Alert");
Button button2 = new Button("Show Warning Alert");
Button button3 = new Button("Show Error Alert");
Button button4 = new Button("Show Confirmation Alert");
// هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
button1.setPrefSize(200, 30);
button2.setPrefSize(200, 30);
button3.setPrefSize(200, 30);
button4.setPrefSize(200, 30);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
button1.setTranslateX(100);
button1.setTranslateY(55);
button2.setTranslateX(100);
button2.setTranslateY(95);
button3.setTranslateX(100);
button3.setTranslateY(135);
button4.setTranslateX(100);
button4.setTranslateY(175);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن slider هنا قمنا بإضافة الكائن
root.getChildren().add(button1);
root.getChildren().add(button2);
root.getChildren().add(button3);
root.getChildren().add(button4);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Alert");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// button1 هنا قمنا بتحديد ماذا سيحدث عند النقر على الزر
button1.setOnAction((Action) -> {
// مع تحديد محتواه و من ثم قمنا بإظهاره INFORMATION حددنا أنه يمثل نافذة من النوع Alert هنا قمنا بإنشاء كائن من الكلاس
Alert alertInformation = new Alert(AlertType.INFORMATION);
alertInformation.setTitle("Information Alert Title");
alertInformation.setHeaderText("Information Alert Header");
alertInformation.setContentText("Information Alert Content \nWhich can appears on multi-line if needed");
alertInformation.showAndWait();
});
// button2 هنا قمنا بتحديد ماذا سيحدث عند النقر على الزر
button2.setOnAction((Action) -> {
// مع تحديد محتواه و من ثم قمنا بإظهاره WARNING حددنا أنه يمثل نافذة من النوع Alert هنا قمنا بإنشاء كائن من الكلاس
Alert alertWarning = new Alert(AlertType.WARNING);
alertWarning.setTitle("Warning Alert Title");
alertWarning.setHeaderText("Warning Alert Header");
alertWarning.setContentText("Warning Alert Content \nWhich can appears on multi-line if needed");
alertWarning.showAndWait();
});
// button3 هنا قمنا بتحديد ماذا سيحدث عند النقر على الزر
button3.setOnAction((Action) -> {
// مع تحديد محتواه و من ثم قمنا بإظهاره ERROR حددنا أنه يمثل نافذة من النوع Alert هنا قمنا بإنشاء كائن من الكلاس
Alert alertError = new Alert(AlertType.ERROR);
alertError.setTitle("Error Alert Title");
alertError.setHeaderText("Error Alert Header");
alertError.setContentText("Error Alert Content \nWhich can appears on multi-line if needed");
alertError.showAndWait();
});
// button4 هنا قمنا بتحديد ماذا سيحدث عند النقر على الزر
button4.setOnAction((Action) -> {
// مع تحديد محتواه و من ثم قمنا بإظهاره CONFIRMATION حددنا أنه يمثل نافذة من النوع Alert هنا قمنا بإنشاء كائن من الكلاس
Alert alertConfirmation = new Alert(AlertType.CONFIRMATION);
alertConfirmation.setTitle("Confirmation Alert Title");
alertConfirmation.setHeaderText("Confirmation Alert Header");
alertConfirmation.setContentText("Confirmation Alert Content \nWhich can appears on multi-line if needed");
alertConfirmation.showAndWait();
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
•كل زر يظهر Message Dialog مختلف في المحتوى و الأيقونة.
طريقة تحديد أنواع الأزرار التي تريدها أن تظهر في الـ Alert
المثال التالي يعلمك طريقة تحديد أنواع الأزرار التي تريدها أن تظهر في الـ Alert.
إضافةً إلى ذلك ستتعلم كيف تنفذ أوامر معينة بناءاً على كل زر موجود في الـ Alert في حال قام المستخدم بالنقر عليه.
مثال
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.control.Alert;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.control.Button;
import javafx.scene.control.ButtonType;
import javafx.scene.control.Label;
import javafx.scene.paint.Color;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
Button button1 = new Button("Delete your history");
Button button2 = new Button("Exit");
Label label = new Label();
// label هنا قمنا بتحسين تصميم الكائن
label.setStyle("-fx-font-size: 15px;"
+ "-fx-font-weight: bold;"Ti
+ "-fx-alignment: center;");
// هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
button1.setPrefSize(200, 30);
button2.setPrefSize(200, 30);
label.setPrefSize(200, 30);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
button1.setTranslateX(100);
button1.setTranslateY(75);
button2.setTranslateX(100);
button2.setTranslateY(115);
label.setTranslateX(100);
label.setTranslateY(175);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن slider هنا قمنا بإضافة الكائن
root.getChildren().add(button1);
root.getChildren().add(button2);
root.getChildren().add(label);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Alert");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// button1 هنا قمنا بتحديد ماذا سيحدث عند النقر على الزر
button1.setOnAction((Action) -> {
// مع تحديد محتواه CONFIRMATION حددنا أنه يمثل نافذة من النوع Alert هنا قمنا بإنشاء كائن من الكلاس
Alert alert = new Alert(AlertType.CONFIRMATION);
alert.setTitle("Delete History");
alert.setHeaderText("Delete History");
alert.setContentText("You are going to delete you history.\nAre you sure?");
// مع مراقبة أي تفاعل يجريه المستخدم معها alert هنا قمنا بإظهار النافذة التي يمثلها الكائن
alert.showAndWait().ifPresent(response -> {
// OK أزرق في حال تم النقر على الزر label هنا قلنا أنه سيتم جعل لون خط الكائن
if (response == ButtonType.OK) {
label.setTextFill(Color.BLUE);
}
// أحمر في حال تم النقر على أي زر آخر فيها label هنا قلنا أنه سيتم جعل لون خط الكائن
else {
label.setTextFill(Color.RED);
}
});
// Label الذي سينقر عليه المستخدم كنص للكائن Button هنا قمنا بوضع إسم الـ
label.setText(alert.getResult().getText());
});
// button3 هنا قمنا بتحديد ماذا سيحدث عند النقر على الزر
button2.setOnAction((Action) -> {
// مع تحديد محتواه Warning حددنا أنه يمثل نافذة من النوع Alert هنا قمنا بإنشاء كائن من الكلاس
Alert alert = new Alert(AlertType.WARNING);
alert.setTitle("Warning");
alert.setHeaderText("Warning");
alert.setContentText("Save changes before closing?");
// alert و الذي كان في الأصل موجود في الكائن Ok الذي إسمه Button على الـ Button هنا قمنا بإضافة إثنين
alert.getButtonTypes().add(ButtonType.NO);
alert.getButtonTypes().add(ButtonType.CANCEL);
// مع مراقبة أي تفاعل يجريه المستخدم معها alert هنا قمنا بإظهار النافذة التي يمثلها الكائن
alert.showAndWait().ifPresent(response -> {
// OK هنا قلنا أنه سيتم إغلاق التطبيق بالكامل في حال تم النقر على الزر
if (response == ButtonType.OK)
{
System.exit(0);
}
// No أحمر في حال تم النقر على الزر label هنا قلنا أنه سيتم جعل لون خط الكائن
else if(response == ButtonType.NO)
{
label.setTextFill(Color.RED);
}
// Cancel أحمر في حال تم النقر على الزر label هنا قلنا أنه سيتم جعل لون خط الكائن
else if(response == ButtonType.CANCEL)
{
label.setTextFill(Color.BROWN);
}
});
// Label الذي سينقر عليه المستخدم كنص للكائن Button هنا قمنا بوضع إسم الـ
label.setText(alert.getResult().getText());
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
•كل زر يظهر Message Dialog مختلف في المحتوى و الأيقونة.
