شرح الكلاس ProgressBar
الكلاس ProgressBar يستخدم لإضافة Progress Bar في واجهة المستخدم.
الـ Progress Bar يستخدم في العادة للأسباب التالية:
لجعل المستخدم يدرك أن عليه الإنتظار قليلاً حتى يتم تنفيذ شيء معين.
لجعل المستخدم يدرك كم سيستغرق إجراء عملية معينة. مثل عند نسخ ملف أو تحميل ملف من النت.
لجعل المستخدم يدرك كم بقي معه وقت حتى ينهي شيء معين. مثل في حال إنشاء برنامج إختبار.
لجعل المستخدم يدرك كم خطوة بقي عليه لإنهاء شيء محدد.
لجعل المستخدم يدرك مدى قوة كلمة السر التي أدخلها.
بناء الكلاس ProgressBar
public class ProgressBar extends ProgressIndicator
مصطلحات ProgressBar
الـ ProgressBar الذي له قيمة محددة كما في الصورة التالية يسمى Determinate Progress Bar.
الـ ProgressBar الذي ليس له قيمة محددة كما في الصورة التالية يسمى Indeterminate Progress Bar.
طريقة التعامل مع الكلاس ProgressBar
للحصول على Progress Bar, يجب إنشاء كائن من الكلاس ProgressBar.
عند تحديد قيمة الـ ProgressBar يجب وضع رقم بين 0 و 1 و هذا سيمثل بدوره النسبة المئوية لإكتمال الخط الذي يظهر في الـ ProgressBar. و إليك بعض الأمثلة:
إذا وضعت 0 فهذا يمثل 0%.
إذا وضعت 0.40 فهذا يمثل 40%.
إذا وضعت 1 فهذا يمثل 100%.
لتغيير لون كائن الـ ProgressBar نستخدم الدالة setStyle() و نغيير قيمة خاصية إسمها -fx-accent.
في حال قمت بإنشاء كائن من الـ ProgressBar و لم تقم بتحديد قيمته الأولية أو قمت بوضع قيمة أصغر من 0 كقيمة له أولية مثل 1- فإنه سيظهر كـ Indeterminate Progress Bar.
كونستركتورات الكلاس ProgressBar
الجدول التالي يحتوي على كونستركتورات الكلاس ProgressBar.
| الكونستركتور مع تعريفه | |
|---|---|
public ProgressBar()
ينشئ كائن من الكلاس ProgressBar يمثل Indeterminate Progress Bar. |
|
public ProgressBar(double progress)
ينشئ كائن من الكلاس ProgressBar يمثل Determinate Progress Bar مع تحديد القيمة الأولية التي ستظهر فيه.مكان الباراميتر value نضع القيمة التي نريدها أن تظهر فيه بشكل إفتراضي عند تشغيل البرنامج. |
|
دوال الكلاس ProgressBar
الجدول التالي يحتوي على دوال الكلاس ProgressBar الأكثر إستخداماً.
| الدالة مع تعريفها | |
|---|---|
public final void setProgress(double value)
تستخدم لتحديد قيمة كائن الـ ProgressBar الذي قام بإستدعائها.مكان الباراميتر value نضع القيمة الجديدة و التي يجب أن تكون بين 0 و 1.
|
|
public final double getProgress()
ترجع قيمة كائن الـ ProgressBar الذي قام بإستدعائها كرقم نوعه double. |
|
public final void setTranslateX(double value)
تستخدم لتحديد مكان كائن الـ ProgressBar الذي قام باستدعائها أفقياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من اليسار إلى اليمين. |
|
public final void setTranslateY(double value)
تستخدم لتحديد مكان كائن الـ ProgressBar الذي قام باستدعائها عامودياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من الأعلى إلى الأسفل. |
|
public void setPrefSize(double prefWidth, double prefHeight)
تستخدم لتحديد حجم كائن الـ ProgressBar الذي قام باستدعائها.
|
|
public final void setVisible(boolean value)
تستخدم لإظهار أو إخفاء كائن الـ ProgressBar الذي قام باستدعائها في النافذة.مكان الباراميتر value نضع القيمة true لإظهاره, و نضع القيمة false لإخفائه. |
|
public final void setDisable(boolean value)
تستخدم لجعل نص كائن الـ ProgressBar الذي قام باستدعائها يبدو غير مفعّل, أي يصبح لونه باهتاً و غير قابل للنقر عليه.مكان الباراميتر value نضع القيمة true لجعله غير مفعّل. |
|
public final void setStyle(String value)
تستخدم لتعديل تصميم كائن الـ ProgressBar الذي قام بإستدعائها.مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ ProgressBar بأسلوب لغة CSS لإظهاره بالشكل الذي تريده. |
|
أمثلة شاملة في الكلاس ProgressBar
طريقة إنشاء كائن من الكلاس ProgressBar
المثال التالي يعلمك طريقة إنشاء كائن من الكلاس ProgressBar و إضافته في النافذة .
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ProgressBar;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// الذي نريد إضافته في النافذة Progress Bar يمثل الـ ProgressBar هنا قمنا بإنشاء كائن من الكلاس
ProgressBar progressBar = new ProgressBar();
// progressBar هنا قمنا بتحديد حجم الكائن
progressBar.setPrefSize(200, 20);
// في النافذة progressBar هنا قمنا بتحديد مكان ظهور الكائن
progressBar.setTranslateX(100);
progressBar.setTranslateY(110);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن progressBar هنا قمنا بإضافة الكائن
root.getChildren().add(progressBar);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ProgressBar");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة تغيير لون الـ ProgressBar
المثال التالي يعلمك طريقة تغيير لون الـ ProgressBar.
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ProgressBar;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// الذي نريد إضافته في النافذة ProgressBar يمثل الـ ProgressBar هنا قمنا بإنشاء كائن من الكلاس
ProgressBar progressBar = new ProgressBar();
// أحمر progressBar هنا قمنا بجعل لون الخط الذي سيظهر بداخل الكائن
progressBar.setStyle("-fx-accent: red;");
// progressBar هنا قمنا بتحديد حجم الكائن
progressBar.setPrefSize(200, 20);
// في النافذة progressBar هنا قمنا بتحديد مكان ظهور الكائن
progressBar.setTranslateX(100);
progressBar.setTranslateY(110);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن progressBar هنا قمنا بإضافة الكائن
root.getChildren().add(progressBar);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ProgressBar");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة تحديد قيمة الـ ProgressBar
المثال التالي يعلمك طريقة تحديد قيمة الـ ProgressBar .
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ProgressBar;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// مع تحديد القيمة الأولية لكل واحد منهم ProgressBar هنا قمنا بإنشاء 4 كائنات من الكلاس
ProgressBar progressBar_1 = new ProgressBar(0.25);
ProgressBar progressBar_2 = new ProgressBar(0.5);
ProgressBar progressBar_3 = new ProgressBar(0.75);
ProgressBar progressBar_4 = new ProgressBar(1.0);
// سنضيفه في النافذة ProgressBar وضعنا فيه النسبة التي يمثلها كل Label هنا قمنا بإنشاء 4 كائنات من الكلاس
Label label_1 = new Label("25 %");
Label label_2 = new Label("50 %");
Label label_3 = new Label("75 %");
Label label_4 = new Label("100 %");
// قمنا بإنشائه ProgressBar هنا قمنا بتحديد لون خط كل كائن
progressBar_1.setStyle("-fx-accent: red;");
progressBar_2.setStyle("-fx-accent: orange;");
progressBar_3.setStyle("-fx-accent: yellow;");
progressBar_4.setStyle("-fx-accent: green;");
// هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
label_1.setPrefSize(40, 20);
label_2.setPrefSize(40, 20);
label_3.setPrefSize(40, 20);
label_4.setPrefSize(40, 20);
progressBar_1.setPrefSize(200, 20);
progressBar_2.setPrefSize(200, 20);
progressBar_3.setPrefSize(200, 20);
progressBar_4.setPrefSize(200, 20);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
label_1.setTranslateX(290);
label_1.setTranslateY(80);
label_2.setTranslateX(290);
label_2.setTranslateY(110);
label_3.setTranslateX(290);
label_3.setTranslateY(140);
label_4.setTranslateX(290);
label_4.setTranslateY(170);
progressBar_1.setTranslateX(80);
progressBar_1.setTranslateY(80);
progressBar_2.setTranslateX(80);
progressBar_2.setTranslateY(110);
progressBar_3.setTranslateX(80);
progressBar_3.setTranslateY(140);
progressBar_4.setTranslateX(80);
progressBar_4.setTranslateY(170);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root هنا قمنا بإضافة جميع الأشياء في الكائن
root.getChildren().add(progressBar_1);
root.getChildren().add(progressBar_2);
root.getChildren().add(progressBar_3);
root.getChildren().add(progressBar_4);
root.getChildren().add(label_1);
root.getChildren().add(label_2);
root.getChildren().add(label_3);
root.getChildren().add(label_4);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ProgressBar");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة تغيير قيمة الـ ProgressBar بناءاً على قيمة TextField أو PasswordField أو TextArea
المثال التالي يعلمك طريقة تغيير قيمة الـ ProgressBar بناءاً على قيمة TextField أو PasswordField أو TextArea.
مثال
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ProgressBar;
import javafx.stage.Stage;
import javafx.scene.Group;
import javafx.scene.control.PasswordField;
import javafx.scene.input.KeyEvent;
public class Main extends Application {
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
Label label_1 = new Label("Password");
Label label_2 = new Label("Strength");
PasswordField passwordField = new PasswordField();
ProgressBar progressBar = new ProgressBar(0f);
// progressBar هنا قمنا بإخفاء لون حدود الكائن
progressBar.setStyle("-fx-text-box-border: transparent;");
// هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
label_1.setPrefSize(60, 30);
label_2.setPrefSize(60, 30);
passwordField.setPrefSize(200, 30);
progressBar.setPrefSize(200, 10);
// هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
label_1.setTranslateX(60);
label_1.setTranslateY(90);
label_2.setTranslateX(60);
label_2.setTranslateY(135);
passwordField.setTranslateX(120);
passwordField.setTranslateY(90);
progressBar.setTranslateX(120);
progressBar.setTranslateY(142);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن slider هنا قمنا بإضافة الكائن
root.getChildren().add(label_1);
root.getChildren().add(label_2);
root.getChildren().add(passwordField);
root.getChildren().add(progressBar);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ProgressBar");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// passwordField هنا قمنا بتحديد ماذا سيحدث كلما تم إدخال أو مسح حرف في الـ
passwordField.setOnKeyReleased((KeyEvent e) -> {
// passLength في المتغير passwordField هنا قمنا بتخزين عدد الأحرف المدخلة في الكائن
double passLength = passwordField.getText().length();
// progressBar يعادل 10% من طول الكائن passwordField هنا قمنا بجعل كل حرف مدخل في الكائن
progressBar.setProgress(passLength/10);
// إلى الأحمر progressBar إذا قام المستخدم بإدخال أقل من 5 أحرف, سيتم تغيير لون الـ
if(passLength < 5)
progressBar.setStyle("-fx-accent: red; -fx-text-box-border: transparent;");
// إلى الأصفر progressBar إذا قام المستخدم بإدخال 5-7 أحرف, سيتم تغيير لون الـ
else if(passLength >= 5 && passLength < 8)
progressBar.setStyle("-fx-accent: yellow; -fx-text-box-border: transparent;");
// إلى الأخضر progressBar إذا قام المستخدم بإدخال 8 أحرف أو أكثر, سيتم تغيير لون الـ
else if(passLength >= 8)
progressBar.setStyle("-fx-accent: green; -fx-text-box-border: transparent;");
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
