أهلا بكم

الكلاس ProgressBar يستخدم لإضافة شريط تقديم ProgressBar في واجهة المستخدم...و هو عنصر تحكم رسومي يستخدم لجعل المستخدم يدرك أن عليه الإنتظار قليلاً حتى يتم تنفيذ شيء معين ، مثل التنزيل أو نقل الملفات أو التثبيت. في بعض الأحيان ، يصاحب العنصر تمثيل نصي للتقدم في تنسيق النسبة المئوية....وهما نوعان


الـ ProgressBar الذي له قيمة محددة كما في الصورة التالية يسمى Determinate Progress Bar.


الـ ProgressBar الذي ليس له قيمة محددة كما في الصورة التالية يسمى Indeterminate Progress Bar.


الذي يستخدم في الحالات التي يكون فيها مدى المهمة غير معروف أو لا يمكن تحديد تقدم المهمة بطريقة يمكن التعبير عنها كنسبة مئوية.

طريقة التعامل معه


للحصول على Progress Bar, يجب إنشاء كائن من الكلاس ProgressBar.

عند تحديد قيمة الـ ProgressBar يجب وضع رقم بين 0 و 1 و هذا سيمثل بدوره نسبة المئوية لإكتمال الخط الذي يظهر في الـ ProgressBar. إليك بعض الأمثلة:

• إذا وضعت 0 فهذا يمثل 0%.
  
• إذا وضعت 0.40 فهذا يمثل 40%.
  
• إذا وضعت 1 فهذا يمثل 100%.
  
• لتغيير لون كائن الـ ProgressBar نستخدم الدالة setStyle() و نغيير قيمة خاصية إسمها -fx-accent.
  

في حال قمت بإنشاء كائن من الـ ProgressBar و لم تقم بتحديد قيمته الأولية أو قمت بوضع قيمة أصغر من 0 كقيمة له أولية مثل 1- فإنه سيظهر كـ Indeterminate Progress Bar.

ويتم انشاءة على النحو التالى :

الكود:

public ProgressBar(double progress)

حيث ينشئ كائن من الكلاس ProgressBar يمثل Determinate Progress Bar مع تحديد القيمة الأولية التي ستظهر فيه.
مكان الباراميتر value نضع القيمة التي نريدها أن تظهر فيه بشكل إفتراضي عند تشغيل البرنامج.


أهم دوال شريط التقدم ProgressBar

الكود:

setProgress(double value)

تستخدم لتحديد قيمة كائن الـ ProgressBar الذي قام بإستدعائها....الباراميتر value نضع القيمة الجديدة و التي يجب أن تكون بين 0 و 1.

• إذا وضعت قيمة بين 0 و 1 فإنه سيظهر كـ Determinate Progress Bar قيمته تمثل نسبة مئوية. فمثلاً إذا وضعت إذا وضعت 0.40 فهذا يمثل 40%.
  
• إذا وضعت قيمة أصغر من 0 فإنه سيظهر كـ Indeterminate Progress Bar.
  
• إذا وضعت قيمة أكبر من 1 فإنه سيظهر كـ Determinate Progress Bar قيمته تساوي 100%.
  

ويتم إنشاءة على النحو التالى :

1_إستيراد المكتبة التى تحتوى على عناصر واجهة المستخدام الرسومية وتحدديد الكلاس  Progress Bar

الكود:

import javafx.scene.control.ProgressBar;

2_إنشاء كائن جديد من الكلاس ProgressBar  يمثل شريط التقدم الذي نريد إضافته في النافذة

الكود:

ProgressBar progressBar = new ProgressBar();

يرجى ملاحظة اننا لم نحدد قيم لشريط التقدم و بالتالى سوف يظهر من نوع Indeterminate Progress Bar

3_ تغير لون شريط التقدم

الكود:

progressBar.setStyle("-fx-accent: red;");

و اليك المثال بالكامل يعلمك كيفية إنشاء شريط تقديم و طريقة تغيير لون الـ ProgressBar....على النحو التالى :

الكود:

import javafx.application.Application;
import javafx.collections.ObservableList;
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);
 
      
        Group root = new Group();
              ObservableList list = root.getChildren();
 
        // group و الذي بدوره سيضاف أيضاً في الكائن list في الكائن progressBar هنا قمنا بإضافة الكائن
        list.add(progressBar);
           Scene scene = new Scene(root, 400, 250);
           stage.setTitle("JavaFX ProgressBar");
              stage.setScene(scene);
             stage.show();
    }
 
  
    public static void main(String[] args) {
        launch(args);
    }
 
}


و النتيجة على النحو التالى :


فى المثال اعلاه قمنا بانشاء شريط تقديم غير معروف القيمة لكن يمكن انشاء شريط معروف القيم على النحو التالى :

الكود:


import javafx.application.Application;
import javafx.collections.ObservableList;
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;");
        
        // هنا قمنا بتحديد حجم الأشياء التي سنضيفها في النافذة
        progressBar_1.setPrefSize(200, 20);
        progressBar_2.setPrefSize(200, 20);
        progressBar_3.setPrefSize(200, 20);
        progressBar_4.setPrefSize(200, 20);
        label_1.setPrefSize(40, 20);
        label_2.setPrefSize(40, 20);
        label_3.setPrefSize(40, 20);
        label_4.setPrefSize(40, 20);
        
        // هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في النافذة
        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);
        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);
 
      
        Group root = new Group();
            ObservableList list = root.getChildren();
        
        list.add(progressBar_1);
        list.add(progressBar_2);
        list.add(progressBar_3);
        list.add(progressBar_4);
        list.add(label_1);
        list.add(label_2);
        list.add(label_3);
        list.add(label_4);
 
        
        Scene scene = new Scene(root, 400, 250);
           stage.setTitle("JavaFX ProgressBar");
          stage.setScene(scene);
            stage.show();
    }
 
 
    public static void main(String[] args) {
        launch(args);
    }
 
}

و النتيجة على النحو التالى :