تعلم JavaFx ..مقال 16_ واجهة المستخدم الرسومية _ الكلاس Slider

اذهب الى الأسفل

تعلم JavaFx ..مقال 16_ واجهة المستخدم الرسومية _ الكلاس Slider Empty تعلم JavaFx ..مقال 16_ واجهة المستخدم الرسومية _ الكلاس Slider

مُساهمة من طرف زهراء في الجمعة أكتوبر 19, 2018 8:04 am

أهلا بكم

الكلاس Slider يستخدم لإضافة Slider شريط التمرير أو شريط التوجيه هو عنصر تحكم رسومي يمكن للمستخدم من خلاله تعيين قيمة عن طريق تحريك المؤشر ، عادةً بطريقة أفقية. في بعض الحالات ، قد ينقر المستخدم على نقطة على شريط التمرير لتغيير الإعداد. وهو يختلف عن شريط التمرير في أنه غير مستمر ولكنه يستخدم لضبط قيمة دون تغيير تنسيق العرض أو المعلومات الأخرى على الشاشة.

تعلم JavaFx ..مقال 16_ واجهة المستخدم الرسومية _ الكلاس Slider Slider-tech-words

ويتم بناءه فى javaFx عن طريق المشيد التالى :

الكود:
public Slider(double min, double max, double value)

كما هو واضح اعلا يتم انشاء كائن من الكلاس Slider يمثل Slider مع تحديد أصغر و أكبر قيمة فيه, بالإضافة للقيمة الأولية التي ستظهر مختارة فيه...حيث أن :

  • min نضع أصغر قيمة يمكن اختيارها في الـ Slider.
  • max نضع أكبر قيمة يمكن اختيارها في الـ Slider.
  • value نضع القيمة التي نريدها مختارها بشكل إفتراضي في الـ Slider عند تشغيل البرنامج.



أهم دوال دوال الكلاس Slider

الكود:
setMinValue(double value)
تستخدم لتحديد أصغر قيمة في كائن الـ Slider الذي قام بإستدعائها....حيث الباراميتر value نضع القيمة و التي يجب أن تكون منطقياً أصغر من أكبر قيمة يمكن إختيارها


الكود:
double getMinValue()
ترجع أصغر قيمة يمكن إختيارها في كائن الـ Slider الذي قام بإستدعائها و ترجعها كـ double.


الكود:
setMax(double value)
تستخدم لتحديد أكبر قيمة في كائن الـ Slider الذي قام بإستدعائها...حيث الباراميتر value نضع القيمة و التي يجب أن تكون منطقياً أكبر من أصغر قيمة يمكن إختيارها

الكود:
double getMaxValue()
ترجع أكبر قيمة يمكن إختيارها في كائن الـ Slider الذي قام بإستدعائها ...ترجعها كـ double.

الكود:
setValue(double value)
تستخدم لتحديد قيمة كائن الـ Slider الذي قام بإستدعائها....حيث الباراميتر value نضع القيمة الجديدة و التي يجب أن تكون بين أصغر و أكبر قيمة يمكن أن يحتويها كائن الـ Slider

الكود:
double getValue()
ترجع قيمة كائن الـ Slider الذي قام بإستدعائها كـ double.

الكود:
setShowTickLabels(boolean value)
تستخدم لإظهار أو إخفاء قيم الـ Major Ticks في الـ Slider الذي قام باستدعائها...حيث الباراميتر value نضع true إذا أردنا جعل قيم الـ Major Ticks ظاهرة. و نضع false في حال أردنا إخفائهم.


الكود:
setShowTickMarks(boolean value)
تستخدم لإظهار أو إخفاء خطوط الـ Major Ticks و الـ Minor Ticks في الـ Slider الذي قام باستدعائها.
مكان الباراميتر value نضع true إذا أردنا جعل خطوط الـ Major Ticks و الـ الـ Minor Ticks ظاهرة. و نضع false في حال أردنا إخفائهم.


الكود:
setMajorTickUnit(double value)
تستخدم لتحديد فارق القيمة بين الـ Major Ticks في الـ Slider الذي قام باستدعائها...مكان الباراميتر value نضع رقم أكبر من صفر و يجب أن لا خارج عن المنطق.
فمثلاً, إذا كانت أصغر قيمة في الـ Slider هي 1 و أكبر قيمة فيه هي 10. يجب أن تضع مكان الباراميتر value رقم بين هذا المدى 0 > value < 10 حتى تظهر الـ Major Ticks.


الكود:
setMinorTickCount(double value)
تستخدم لتحديد فارق القيمة بين الـ Minor Ticks في الـ Slider الذي قام باستدعائها..... الباراميتر value نضع رقم أكبر من صفر و يجب أن لا خارج عن المنطق.
فمثلاً, إذا كانت أصغر قيمة في الـ Slider هي 1 و أكبر قيمة فيه هي 10. يجب أن تضع مكان الباراميتر value رقم بين هذا المدى 0 > value < 10 حتى تظهر الـ Minor Ticks.


الكود:
setBlockIncrement(double value)
ستخدم لتحديد كم وحدة سيتم زيادة أو إنقاص قيمة الـ Slider الذي قام باستدعائها في حال قام المستخدم بتغيير قيمته بالنقر على الأسهم ⯅ ⯆ ⯈ ⯇  الموجودة في لوحدة المفاتيح....الباراميتر value نضع رقم أكبر من صفر و بين أصغر و أكبر قيمة موجودة في الـ Slider.


كيفية التعامل معه برمجيا

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

الكود:
import javafx.scene.control.Slider;

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

الكود:
Slider slider = new Slider();

3_ تنسيق الشريط

الكود:

slider.setMin(0);                  // slider هنا قمنا بتحديد أصغر قيمة في الكائن
        slider.setMax(100);                // slider هنا قمنا بتحديد أكبر قيمة في الكائن
        slider.setValue(40);               // slider هنا قمنا بتحديد القيمة التي ستظهر مختارة بشكل إفتراضي في الكائن
        slider.setShowTickLabels(true);    // slider في الكائن Tick هنا قمنا بإظهار قيمة كل
        slider.setShowTickMarks(true);     // slider في الكائن Tick هنا قمنا بإظهار كل
        slider.setMajorTickUnit(20);       // (Major Tick) سيتم إظهار خط كبير slider هنا حددنا أنه بعد كل 20 وحدة في الكائن
        slider.setMinorTickCount(5);       // (Minor Tick) سيتم إظهار خط صغير slider هنا حددنا أنه بعد كل 5 وحدات في الكائن
        slider.setBlockIncrement(10);      // من الأسهم الموجودة في لوحة المفاتيح سيتم زيادة أو إنقاص 10 في كل نقرة slider هنا حددنا أنه في حال قام المستخدم بتغيير قيمة الكائن

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

تعلم JavaFx ..مقال 16_ واجهة المستخدم الرسومية _ الكلاس Slider Example-2

و الشفرة الكاملة للمثال اعلاه على النحو التالى :

الكود:
import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage stage) {
        // الذي نريد إضافته في النافذة Slider  يمثل الـ Slider هنا قمنا بإنشاء كائن من الكلاس
        Slider slider = new Slider();
        
        slider.setMin(0);                  // slider هنا قمنا بتحديد أصغر قيمة في الكائن
        slider.setMax(100);                // slider هنا قمنا بتحديد أكبر قيمة في الكائن
        slider.setValue(40);               // slider هنا قمنا بتحديد القيمة التي ستظهر مختارة بشكل إفتراضي في الكائن
        slider.setShowTickLabels(true);    // slider في الكائن Tick هنا قمنا بإظهار قيمة كل
        slider.setShowTickMarks(true);     // slider في الكائن Tick هنا قمنا بإظهار كل
        slider.setMajorTickUnit(20);       // (Major Tick) سيتم إظهار خط كبير slider هنا حددنا أنه بعد كل 20 وحدة في الكائن
        slider.setMinorTickCount(5);       // (Minor Tick) سيتم إظهار خط صغير slider هنا حددنا أنه بعد كل 5 وحدات في الكائن
        slider.setBlockIncrement(10);      // من الأسهم الموجودة في لوحة المفاتيح سيتم زيادة أو إنقاص 10 في كل نقرة slider هنا حددنا أنه في حال قام المستخدم بتغيير قيمة الكائن

        // في النافذة slider هنا قمنا بتحديد مكان ظهور الكائن
        slider.setTranslateX(100);
        slider.setTranslateY(100);

        // slider هنا قمنا بتحديد حجم الكائن
        slider.setPrefSize(200, 40);

        // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
        Group root = new Group();

        // list و بالتالي أصبح أي شيء نريد إضافته نضيفه في الكائن list مرتبط بالكائن root هنا جعلنا الكائن
        ObservableList list = root.getChildren();

        // group و الذي بدوره سيضاف أيضاً في الكائن list في الكائن slider هنا قمنا بإضافة الكائن
        list.add(slider);

        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 400, 250);

        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX Slider");

        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);

        // هنا قمنا بإظهار النافذة
        stage.show();
    }

    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }

}


الكود أعلاه قام بانشاء شريط تمرير افقى بشكل إفتراضى لكن يمكنك انشاء شريط عامودى باستخدام الشفرة التالية :


الكود:
slider.setOrientation(Orientation.VERTICAL);

تعلم JavaFx ..مقال 16_ واجهة المستخدم الرسومية _ الكلاس Slider Example-3

Very Happy
زهراء
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 406
النقاط : 691
التقيم : 55
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

ََ

مواضيع ذات صلة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى