شرح الكلاس ProgressIndicator
الكلاس ProgressIndicator يستخدم لإضافة Progress Indicator في واجهة المستخدم.
الـ Progress Indicator يستخدم في العادة للأسباب التالية:
لجعل المستخدم يدرك أن عليه الإنتظار قليلاً حتى يتم تنفيذ شيء معين.
لجعل المستخدم يدرك كم سيستغرق إجراء عملية معينة. مثل عند نسخ ملف أو تحميل ملف من النت.
لجعل المستخدم يدرك كم بقي معه وقت حتى ينهي شيء معين. مثل في حال إنشاء برنامج إختبار.
بناء الكلاس ProgressIndicator
public class ProgressIndicator extends Control
ملاحظة: الكلاس ProgressIndicator هو الكلاس الأب للكلاس ProgressBar الذي شرحناه في الدرس السابق.
لهذا السبب ستجد أن التعامل مع الكلاس ProgressIndicator يشبه تماماً التعامل مع الكلاس ProgressBar.
مصطلحات ProgressIndicator
الـ ProgressIndicator الذي له قيمة محددة كما في الصورة التالية يسمى Determinate Progress Indicator.
الـ ProgressIndicator الذي ليس له قيمة محددة كما في الصورة التالية يسمى Indeterminate Progress Indicator.
طريقة التعامل مع الكلاس ProgressIndicator
للحصول على Progress Bar, يجب إنشاء كائن من الكلاس ProgressIndicator.
عند تحديد قيمة الـ ProgressIndicator يجب وضع رقم بين 0 و 1 و هذا سيمثل بدوره النسبة المئوية لإكتمال الـ ProgressIndicator. و إليك بعض الأمثلة:
إذا وضعت 0 فهذا يمثل 0%.
إذا وضعت 0.40 فهذا يمثل 40%.
إذا وضعت 1 فهذا يمثل 100%.
لتغيير لون كائن الـ ProgressIndicator نستخدم الدالة setStyle() و نغيير قيمة خاصية إسمها -fx-accent.
في حال قمت بإنشاء كائن من الـ ProgressIndicator و لم تقم بتحديد قيمته الأولية أو قمت بوضع قيمة أصغر من 0 كقيمة له أولية مثل 1- فإنه سيظهر كـ Indeterminate Progress Indicator.
كونستركتورات الكلاس ProgressIndicator
الجدول التالي يحتوي على كونستركتورات الكلاس ProgressIndicator.
| الكونستركتور مع تعريفه | |
|---|---|
public ProgressIndicator()
ينشئ كائن من الكلاس ProgressIndicator يمثل Indeterminate Progress Bar. |
|
public ProgressIndicator(double progress)
ينشئ كائن من الكلاس ProgressIndicator يمثل Determinate Progress Bar مع تحديد القيمة الأولية التي ستظهر فيه.مكان الباراميتر value نضع القيمة التي نريدها أن تظهر فيه بشكل إفتراضي عند تشغيل البرنامج. |
|
دوال الكلاس ProgressIndicator
الجدول التالي يحتوي على دوال الكلاس ProgressIndicator الأكثر إستخداماً.
| الدالة مع تعريفها | |
|---|---|
public final void setProgress(double value)
تستخدم لتحديد قيمة كائن الـ ProgressIndicator الذي قام بإستدعائها.مكان الباراميتر value نضع القيمة الجديدة و التي يجب أن تكون بين 0 و 1.
|
|
public final double getProgress()
ترجع قيمة كائن الـ ProgressIndicator الذي قام بإستدعائها كرقم نوعه double. |
|
public final void setTranslateX(double value)
تستخدم لتحديد مكان كائن الـ ProgressIndicator الذي قام باستدعائها أفقياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من اليسار إلى اليمين. |
|
public final void setTranslateY(double value)
تستخدم لتحديد مكان كائن الـ ProgressIndicator الذي قام باستدعائها عامودياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من الأعلى إلى الأسفل. |
|
public void setPrefSize(double prefWidth, double prefHeight)
تستخدم لتحديد حجم كائن الـ ProgressIndicator الذي قام باستدعائها.
|
|
public final void setVisible(boolean value)
تستخدم لإظهار أو إخفاء كائن الـ ProgressIndicator الذي قام باستدعائها في النافذة.مكان الباراميتر value نضع القيمة true لإظهاره, و نضع القيمة false لإخفائه. |
|
public final void setDisable(boolean value)
تستخدم لجعل نص كائن الـ ProgressIndicator الذي قام باستدعائها يبدو غير مفعّل, أي يصبح لونه باهتاً و غير قابل للنقر عليه.مكان الباراميتر value نضع القيمة true لجعله غير مفعّل. |
|
public final void setStyle(String value)
تستخدم لتعديل تصميم كائن الـ ProgressIndicator الذي قام بإستدعائها.مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ ProgressIndicator بأسلوب لغة CSS لإظهاره بالشكل الذي تريده. |
|
طريقة إنشاء ProgressIndicator و إضافته في النافذة
أمثلة شاملة في الكلاس ProgressIndicator
طريقة إنشاء كائن من الكلاس ProgressIndicator
المثال التالي يعلمك طريقة إنشاء كائن من الكلاس ProgressIndicator و إضافته في النافذة.
مثال طريقة إنشاء كائن من الكلاس ProgressIndicator و إضافته في النافذة.
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ProgressIndicator;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// الذي نريد إضافته في النافذة Progress Bar يمثل الـ ProgressIndicator هنا قمنا بإنشاء كائن من الكلاس
ProgressIndicator progressIndicator = new ProgressIndicator();
// progressIndicator هنا قمنا بتحديد حجم الكائن
progressIndicator.setPrefSize(60, 60);
// في النافذة progressIndicator هنا قمنا بتحديد مكان ظهور الكائن
progressIndicator.setTranslateX(170);
progressIndicator.setTranslateY(95);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن progressIndicator هنا قمنا بإضافة الكائن
root.getChildren().add(progressIndicator);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ProgressIndicator");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة تحديد قيمة الـProgressIndicator
المثال التالي يعلمك طريقة تحديد قيمة الـ ProgressIndicator.
مثال طريقة تحديد قيمة الـ ProgressIndicator.
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ProgressIndicator;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// مع تحديد القيمة الأولية لكل واحد منهم ProgressIndicator هنا قمنا بإنشاء 5 كائنات من الكلاس
ProgressIndicator progressIndicator_1 = new ProgressIndicator(0.0);
ProgressIndicator progressIndicator_2 = new ProgressIndicator(0.25);
ProgressIndicator progressIndicator_3 = new ProgressIndicator(0.5);
ProgressIndicator progressIndicator_4 = new ProgressIndicator(0.75);
ProgressIndicator progressIndicator_5 = new ProgressIndicator(1.0);
// هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
progressIndicator_1.setPrefSize(50, 50);
progressIndicator_2.setPrefSize(50, 50);
progressIndicator_3.setPrefSize(50, 50);
progressIndicator_4.setPrefSize(50, 50);
progressIndicator_5.setPrefSize(50, 50);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
progressIndicator_1.setTranslateX(50);
progressIndicator_1.setTranslateY(100);
progressIndicator_2.setTranslateX(110);
progressIndicator_2.setTranslateY(100);
progressIndicator_3.setTranslateX(170);
progressIndicator_3.setTranslateY(100);
progressIndicator_4.setTranslateX(230);
progressIndicator_4.setTranslateY(100);
progressIndicator_5.setTranslateX(290);
progressIndicator_5.setTranslateY(100);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(progressIndicator_1);
root.getChildren().add(progressIndicator_2);
root.getChildren().add(progressIndicator_3);
root.getChildren().add(progressIndicator_4);
root.getChildren().add(progressIndicator_5);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ProgressIndicator");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة ربط الـ ProgressIndicator بمهمة معينة
المثال التالي يعلمك طريقة تغيير شكل الـ ProgressIndicator ليبدو كـ Indeterminate Progress Indicator ثم كـ Determinate Progress Indicator بالإعتماد على الكلاس Task.
سنستخدم الكلاس Task لجعل شكل الـ ProgressIndicator يكتمل خلال ثانيتين.
مثال طريقة ربطالـ ProgressIndicator بمهمة معينة
import javafx.concurrent.Task;
// و هذا يعني أنه عند إنشاء كائن م هذا الكلاس سيتم تنفيذ مهمة معينة Task هنا قمنا بإنشاء كلاس يرث من الكلاس
public class LoginTask extends Task<Boolean>{
// في هذه الدالة نقوم بتحديد ما سيحدث عند إنشاء كائن من هذا الكلاس
@Override
protected Boolean call() throws Exception {
// هنا قلنا أنه سيتم إيقاف تنفيذ هذه المهمة لمدة ثانيتين
Thread.sleep(2000);
// الذي سنربطه بكائن من هذا الكلاس يظهر مكتملاً ProgressIndicator بعد إنقضاء الثانيتين سنجعل قيمة الـ
updateProgress(1, 1);
// و هذا ليس له أي أثر على البرنامج Boolean لأننا قمنا بتعريفها كـ true هنا جعلنا الدالة ترجع القيمة
return true;
}
}
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Alert;
import javafx.scene.control.Alert.AlertType;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.ProgressIndicator;
import javafx.scene.control.TextField;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
Label label_1 = new Label("User");
Label label_2 = new Label("Password");
TextField textField = new TextField();
PasswordField passwordField = new PasswordField();
Button button = new Button("Login");
ProgressIndicator progressIndicator = new ProgressIndicator(-1);
// button و label_2 و label_1 هنا قمنا بتغيير حجم خط الكائنات
label_1.setStyle("-fx-font-weight: bold; -fx-font-size: 16px;");
label_2.setStyle("-fx-font-weight: bold; -fx-font-size: 16px;");
button.setStyle("-fx-font-weight: bold; -fx-font-size: 16px;");
// button لأنني ننوي إظهاره بعد النقر على الكائن progressIndicator هنا قمنا بإخفاء الكائن
progressIndicator.setVisible(false);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
label_1.setTranslateX(80);
label_1.setTranslateY(40);
textField.setTranslateX(165);
textField.setTranslateY(40);
label_2.setTranslateX(80);
label_2.setTranslateY(85);
passwordField.setTranslateX(165);
passwordField.setTranslateY(85);
button.setTranslateX(80);
button.setTranslateY(130);
progressIndicator.setTranslateX(100);
progressIndicator.setTranslateY(190);
// هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
label_1.setPrefSize(80, 30);
textField.setPrefSize(160, 30);
label_2.setPrefSize(80, 30);
passwordField.setPrefSize(160, 30);
button.setPrefSize(245, 35);
progressIndicator.setPrefWidth(200);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(label_1);
root.getChildren().add(textField);
root.getChildren().add(label_2);
root.getChildren().add(passwordField);
root.getChildren().add(button);
root.getChildren().add(progressIndicator);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ProgressIndicator");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// progressIndicator هنا قمنا بتحديد ما سيحدث في كل مرة يتم فيها تغيير قيمة الكائن
progressIndicator.progressProperty().addListener((obs, oldValue, newValue) -> {
// Done تحته بدل النص Login Succefully هنا قلنا أنه في حال أصبحت قيمته تساوي 1 - أي في حال إكتمل - سيتم وضع النص
if (newValue.doubleValue() >= 1.0) {
Text doneText = (Text) progressIndicator.lookup(".percentage");
doneText.setText("Login Succefully");
}
});
// button هنا قمنا بتحديد ماذا سيحدث عند النقر على الكائن
button.setOnAction((ActionEvent e) -> {
// سيتم إظهاره تنبيه passwordField أو الكائن textField في حال لم يقم المستخدم بإدخال أي قيمة في الكائن
if (textField.getText().equals("") || passwordField.getText().equals(""))
{
Alert alert = new Alert(AlertType.WARNING);
alert.setTitle("Missing Information");
alert.setHeaderText("Missing Information");
alert.setContentText("User name & password are required!");
alert.show();
}
// passwordField أو الـ textField في حال قام المستخدم بإدخال أي قيمة في الـ
else
{
// progressIndicator سيتم إظهار الكائن
progressIndicator.setVisible(true);
// LoginTask بعدها سيتم إنشاء كائن من الكلاس
LoginTask task = new LoginTask();
// task بالكائن progressIndicator بعدها سيتم ربط أداء الكائن
progressIndicator.progressProperty().bind(task.progressProperty());
// خاص Thread بداخل LoginTask الموجودة في الكلاس call() في الأخير سيتم تنفيذ المهمة المعرفة بداخل الدالة
new Thread(task).start();
}
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
