شرح الكلاس ColorPicker
الكلاس ColorPicker يستخدم للحصول على ComboBox خاص لإختيار الألوان ( Color Chooser ), حيث تجد أنه بمجرد النقر على الزر سيظهر أمامك عدة خيارات تتيح لك إختيار أي لون تريد بكل سهولة.
بناء الكلاس ColorPicker
public class ColorPicker extends ComboBoxBase<Color>
الآن, إذا قمت بإنشاء كائن من الكلاس ColorPicker و أضفته في النافذة فإنه سيظهر كـ ComboBox فيه مربع صغير لونه أبيض و بجانبه كلمة White و التي يعني أبيض باللغة الإنجليزية.
بمجرد أن تنقر على الـ ColorPicker سيظهر تحته قائمة خاصة لإختيار الألوان ( Palette ).
في حال لم تعجبك الألوان التي في الـ Palette يمكنك النقر على الزر Custom Color... لإظهار نافذة مخصصة لإختيار درجة اللون ( Custom Color Dialog Window ).
بعد إختيار اللون الذي تريده من هذه النافذة, عندك ثلاث خيارات:
النقر على الزر Use لإختيار اللون.
النقر على الزر Save في حال أردت حفظ اللون مع الألوان الموجودة في الـ Palette.
النقر على الزر Cancel لإغلاق النافذة.
كونستركتورات الكلاس ColorPicker
الجدول التالي يحتوي على كونستركتورات الكلاس ColorPicker.
| الكونستركتور مع تعريفه | |
|---|---|
public ColorPicker()
ينشئ كائن من الكلاس ColorPicker يمثل ComboBox مخصص لإختيار الألوان.و هنا يكون اللون الأبيض مختار بشكل إفتراضي. |
|
public ColorPicker(Color color)
ينشئ كائن من الكلاس ColorPicker يمثل ComboBox مخصص لإختيار الألوان, مع تحديد اللون الذي سيظهر مختاراً فيه بشكل إفتراضي.مكان الباراميتر color نضع كائن من الكلاس Color يمثل اللون الذي سيكون مختاراً بشكل إفتراضي. |
|
دوال الكلاس ColorPicker
الجدول التالي يحتوي على دوال الكلاس ColorPicker الأكثر إستخداماً.
| الدالة مع تعريفها | |
|---|---|
public final void setTranslateX(double value)
تستخدم لتحديد مكان كائن الـ ComboBox الذي قام باستدعائها أفقياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من اليسار إلى اليمين. |
|
public final void setTranslateY(double value)
تستخدم لتحديد مكان كائن الـ ComboBox الذي قام باستدعائها عامودياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من الأعلى إلى الأسفل. |
|
public void setPrefSize(double prefWidth, double prefHeight)
تستخدم لتحديد حجم كائن الـ ComboBox الذي قام باستدعائها.
|
|
public final void setDisable(boolean value)
تستخدم لجعل كائن الـ ComboBox الذي قام باستدعائها يبدو غير مفعّل, أي يصبح لونه باهتاً و غير قابل للنقر عليه.مكان الباراميتر value نضع القيمة true لجعله غير مفعّل. |
|
public final Color getValue()
ترجع كائن من الكلاس Color يحتوي على قيمة اللون المختار في كائن الـ ColorPicker الذي قام باستدعائها. |
|
public void setValue(Color color)
تستخدم لتحديد اللون الحالي في كائن الـ ColorPicker الذي باستدعائها.مكان البارميتر color نضع كائن من الكلاس Color يمثل اللون الذي سيتم إختياره. |
|
public final void setStyle(String value)
تستخدم لتعديل تصميم كائن الـ ColorPicker الذي قام بإستدعائها.مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ ColorPicker بأسلوب لغة CSS لإظهاره بالشكل الذي تريده. |
|
أمثلة شاملة في الكلاس ColorPicker
طريقة إنشاء ColorPicker و إضافته في النافذة
المثال التالي يعلمك طريقة إنشاء كائن من الكلاس ColorPicker و إضافته في النافذة.
مثال
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل قائمة الألوان التي نريد إضافتها في النافذة ColorPicker هنا قمنا بإنشاء كائن من الكلاس
ColorPicker colorPicker = new ColorPicker();
// في النافذة colorPicker هنا قمنا بتحديد مكان ظهور الكائن
colorPicker.setTranslateX(150);
colorPicker.setTranslateY(110);
// في النافذة colorPicker هنا قمنا بتحديد حجم الـ
colorPicker.setPrefSize(100, 30);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن colorPicker هنا قمنا بإضافة الكائن
root.getChildren().add(colorPicker);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ColorPicker");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة تغيير تصميم الـColorPicker الإفتراضي
المثال التالي يعلمك طريقة تغيير تصميم الـ ColorPicker.
ملاحظة: عليك إنشاء مجلد إسمه css. ثم إنشاء ملف إسمه my-style.css بداخله لتضع فيه كود التصميم كما في الصورة التالية.
مثال
/* بشكل إفتراضي لجعله يظهر بشكل أفضل ColorPicker هنا قمنا بتعديل خصائص كلاسات التصميم التي يستخدمها الكلاس */
.color-picker {
-fx-background-color: #669999;
-fx-background-radius: 0 15 15 0;
}
.color-picker .color-picker-label .text {
-fx-fill: #ccffcc;
}
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل قائمة الألوان التي نريد إضافتها في النافذة ColorPicker هنا قمنا بإنشاء كائن من الكلاس
ColorPicker colorPicker = new ColorPicker();
// في النافذة colorPicker هنا قمنا بتحديد مكان ظهور الكائن
colorPicker.setTranslateX(150);
colorPicker.setTranslateY(110);
// في النافذة colorPicker هنا قمنا بتحديد حجم الـ
colorPicker.setPrefSize(100, 30);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن colorPicker هنا قمنا بإضافة الكائن
root.getChildren().add(colorPicker);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 250);
// لتطبيق الخصائص التي يحتويها على الأشياء الموجودة فيه scene بالكائن my-style.css هنا قمنا بربط ملف التصميم
scene.getStylesheets().add("css/my-style.css");
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ColorPicker");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة الحصول على قيمة الـColorPicker
المثال التالي يعلمك طريقة الحصول على قيمة اللون الذي قام المستخدم باختياره في الـ ColorPicker و وضعها كخلفية للنافذة.
مثال
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل قائمة الألوان التي نريد إضافتها في النافذة ColorPicker هنا قمنا بإنشاء كائن من الكلاس
ColorPicker colorPicker = new ColorPicker();
// في النافذة colorPicker هنا قمنا بتحديد مكان ظهور الكائن
colorPicker.setTranslateX(150);
colorPicker.setTranslateY(40);
// في النافذة colorPicker هنا قمنا بتحديد حجم الـ
colorPicker.setPrefSize(100, 30);
// في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// root في الكائن colorPicker هنا قمنا بإضافة الكائن
root.getChildren().add(colorPicker);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 350);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX ColorPicker");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
// colorPicker هنا قمنا بتحديد ما سيحدث عند تغيير قيمة الكائن
colorPicker.setOnAction((ActionEvent e) -> {
// أي للنافذة ,scene هنا قلنا أنه سيتم جلب قيمته و وضعها مباشرةً كلون خلفية للكائن
scene.setFill(colorPicker.getValue());
});
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
