JavaFXطريقة إنشاء برنامج لإختيار الألوان Color Picker بنظام RGB
في هذا الدرس ستتعلم طريقة إنشاء برنامج لإختيار الألوان ( Color Picker ) بنظام RGB باستخدام JavaFX.
⇓ تحميل البرنامج ⇓ تحميل المشروع كاملاً
كود البرنامج
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Orientation;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollBar;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class Main extends Application {
// هنا قمنا بتعريف الأشياء التي سيتم وضعها في النافذة
ScrollBar redScroller;
ScrollBar greenScroller;
ScrollBar blueScroller;
Label redLabel;
Label greenLabel;
Label blueLabel;
Rectangle selectedColorShape;
Label selectedColorLabel;
Color color = Color.rgb(127, 127, 127, 1);
// blueScroller و greenScroller ,redScroller هنا قمنا بتعريف دالة ترجع نص يمثل درجة اللون المختارة في الكائنات
public String getColorValue() {
return "Color: " + (int)redScroller.getValue() + ", " + (int)greenScroller.getValue() + ", "+ (int)blueScroller.getValue();
}
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
redLabel = new Label("Red");
greenLabel = new Label("Green");
blueLabel = new Label("Blue");
redScroller = new ScrollBar();
greenScroller = new ScrollBar();
blueScroller = new ScrollBar();
selectedColorShape = new Rectangle();
selectedColorLabel = new Label();
// ( أصغير قيمة فيه, أكبر قيمة فيه, القيمة الإفتراضية, يظهر بشكل أفقي ) redScroller هنا قمنا بتحديد خصائص الكائن
redScroller.setBlockIncrement(1);
redScroller.setMin(0);
redScroller.setMax(255);
redScroller.setValue(127);
redScroller.setOrientation(Orientation.HORIZONTAL);
// ( أصغير قيمة فيه, أكبر قيمة فيه, القيمة الإفتراضية, يظهر بشكل أفقي ) greenScroller هنا قمنا بتحديد خصائص الكائن
greenScroller.setBlockIncrement(1);
greenScroller.setMin(0);
greenScroller.setMax(255);
greenScroller.setValue(127);
greenScroller.setOrientation(Orientation.HORIZONTAL);
// ( أصغير قيمة فيه, أكبر قيمة فيه, القيمة الإفتراضية, يظهر بشكل أفقي ) blueScroller هنا قمنا بتحديد خصائص الكائن
blueScroller.setBlockIncrement(1);
blueScroller.setMin(0);
blueScroller.setMax(255);
blueScroller.setValue(127);
blueScroller.setOrientation(Orientation.HORIZONTAL);
// selectedColorLabel كنص للكائن getColorValue() هنا قمنا بوضع النص الذي ترجعه الدالة
selectedColorLabel.setText(getColorValue());
// هنا قمنا بتحديد حجم كل شيء سيتم إضافته في الحاوية الرئيسية التي سنضعها في النافذة
redLabel.setPrefSize(60, 25);
greenLabel.setPrefSize(60, 25);
blueLabel.setPrefSize(60, 25);
redScroller.setPrefSize(200, 25);
greenScroller.setPrefSize(200, 25);
blueScroller.setPrefSize(200, 25);
selectedColorShape.setWidth(145);
selectedColorShape.setHeight(80);
selectedColorLabel.setPrefSize(145, 25);
// هنا قمنا بتحديد مكان ظهور كل شيء سيتم إضافته في الحاوية الرئيسية التي سنضعها في النافذة
redLabel.setTranslateX(40);
redLabel.setTranslateY(40);
greenLabel.setTranslateX(40);
greenLabel.setTranslateY(80);
blueLabel.setTranslateX(40);
blueLabel.setTranslateY(120);
redScroller.setTranslateX(120);
redScroller.setTranslateY(40);
greenScroller.setTranslateX(120);
greenScroller.setTranslateY(80);
blueScroller.setTranslateX(120);
blueScroller.setTranslateY(120);
selectedColorShape.setTranslateX(350);
selectedColorShape.setTranslateY(40);
selectedColorLabel.setTranslateX(350);
selectedColorLabel.setTranslateY(125);
// هنا قمنا يتعديل تصميم كل شيء سيتم إضافته في الحاوية الرئيسية التي سنضعها في النافذة
redLabel.setStyle("-fx-font-weight: bold; -fx-font-size: 18px");
greenLabel.setStyle("-fx-font-weight: bold; -fx-font-size: 18px");
blueLabel.setStyle("-fx-font-weight: bold; -fx-font-size: 18px");
selectedColorLabel.setStyle("-fx-font-weight: bold; -fx-font-size: 15px; -fx-text-fill: gray");
redScroller.setStyle("-fx-background-color: red");
greenScroller.setStyle("-fx-background-color: green");
blueScroller.setStyle("-fx-background-color: blue");
// color هو اللون الذي يمثله الكائن - selectedColorShape هنا قمنا بجعل لون خلفية المربع - الكائن
selectedColorShape.setFill(color);
// أي كلما تم تحريك أي واحد فيهم ,ScrollBar هنا وضعنا الأوامر التي نريد تنفيذها عند تغيير قيمة أي
ChangeListener myListener = (ChangeListener) (ObservableValue observable, Object oldValue, Object newValue) -> {
// blue و green ,red بالترتيب في المتغيرات blueScroller و greenScroller ,redScroller في البداية بتخزين قيم الكائنات
int red = (int) redScroller.getValue();
int green = (int) greenScroller.getValue();
int blue = (int) blueScroller.getValue();
// color و خزناها في الكائن blue و green ,red بعدها قمنا بإنشاء درجة لون جديدة بناءاَ على القيم المخزنة في المتغيرات
color = Color.rgb(red, green, blue, 1);
// selectedColorShape كخلفية للكائن color بعدها وضعنا درجة اللون المخزنة في الكائن
selectedColorShape.setFill(color);
// selectedColorLabel كنص للكائن color بعدها سيتم وضع درجة اللون المخزنة في الكائن
selectedColorLabel.setText(getColorValue());
};
// myListener سيتم تنفيذ الأوامر الموضوعة في الكائن blueScroller أو الكائن greenScroller أو الكائن redScroller هنا قلنا أنه عند تحريك الكائن
redScroller.valueProperty().addListener(myListener);
greenScroller.valueProperty().addListener(myListener);
blueScroller.valueProperty().addListener(myListener);
// في النافذة Root Node و الذي ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// هنا قمنا بإضافة جميع الأشياء التي قمنا بإنشائها في النافذة
root.getChildren().add(redLabel);
root.getChildren().add(greenLabel);
root.getChildren().add(blueLabel);
root.getChildren().add(redScroller);
root.getChildren().add(greenScroller);
root.getChildren().add(blueScroller);
root.getChildren().add(selectedColorShape);
root.getChildren().add(selectedColorLabel);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 540, 180);
// هنا وضعنا عنوان للنافذة
stage.setTitle("Color Picker");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Orientation;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollBar;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class Main extends Application {
// هنا قمنا بتعريف الأشياء التي سيتم وضعها في النافذة
ScrollBar redScroller;
ScrollBar greenScroller;
ScrollBar blueScroller;
Label redLabel;
Label greenLabel;
Label blueLabel;
Rectangle selectedColorShape;
Label selectedColorLabel;
Color color = Color.rgb(127, 127, 127, 1);
// blueScroller و greenScroller ,redScroller هنا قمنا بتعريف دالة ترجع نص يمثل درجة اللون المختارة في الكائنات
public String getColorValue() {
return "Color: " + (int)redScroller.getValue() + ", " + (int)greenScroller.getValue() + ", "+ (int)blueScroller.getValue();
}
@Override
public void start(Stage stage) {
// هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في النافذة
redLabel = new Label("Red");
greenLabel = new Label("Green");
blueLabel = new Label("Blue");
redScroller = new ScrollBar();
greenScroller = new ScrollBar();
blueScroller = new ScrollBar();
selectedColorShape = new Rectangle();
selectedColorLabel = new Label();
// ( أصغير قيمة فيه, أكبر قيمة فيه, القيمة الإفتراضية, يظهر بشكل أفقي ) redScroller هنا قمنا بتحديد خصائص الكائن
redScroller.setBlockIncrement(1);
redScroller.setMin(0);
redScroller.setMax(255);
redScroller.setValue(127);
redScroller.setOrientation(Orientation.HORIZONTAL);
// ( أصغير قيمة فيه, أكبر قيمة فيه, القيمة الإفتراضية, يظهر بشكل أفقي ) greenScroller هنا قمنا بتحديد خصائص الكائن
greenScroller.setBlockIncrement(1);
greenScroller.setMin(0);
greenScroller.setMax(255);
greenScroller.setValue(127);
greenScroller.setOrientation(Orientation.HORIZONTAL);
// ( أصغير قيمة فيه, أكبر قيمة فيه, القيمة الإفتراضية, يظهر بشكل أفقي ) blueScroller هنا قمنا بتحديد خصائص الكائن
blueScroller.setBlockIncrement(1);
blueScroller.setMin(0);
blueScroller.setMax(255);
blueScroller.setValue(127);
blueScroller.setOrientation(Orientation.HORIZONTAL);
// selectedColorLabel كنص للكائن getColorValue() هنا قمنا بوضع النص الذي ترجعه الدالة
selectedColorLabel.setText(getColorValue());
// هنا قمنا بتحديد حجم كل شيء سيتم إضافته في الحاوية الرئيسية التي سنضعها في النافذة
redLabel.setPrefSize(60, 25);
greenLabel.setPrefSize(60, 25);
blueLabel.setPrefSize(60, 25);
redScroller.setPrefSize(200, 25);
greenScroller.setPrefSize(200, 25);
blueScroller.setPrefSize(200, 25);
selectedColorShape.setWidth(145);
selectedColorShape.setHeight(80);
selectedColorLabel.setPrefSize(145, 25);
// هنا قمنا بتحديد مكان ظهور كل شيء سيتم إضافته في الحاوية الرئيسية التي سنضعها في النافذة
redLabel.setTranslateX(40);
redLabel.setTranslateY(40);
greenLabel.setTranslateX(40);
greenLabel.setTranslateY(80);
blueLabel.setTranslateX(40);
blueLabel.setTranslateY(120);
redScroller.setTranslateX(120);
redScroller.setTranslateY(40);
greenScroller.setTranslateX(120);
greenScroller.setTranslateY(80);
blueScroller.setTranslateX(120);
blueScroller.setTranslateY(120);
selectedColorShape.setTranslateX(350);
selectedColorShape.setTranslateY(40);
selectedColorLabel.setTranslateX(350);
selectedColorLabel.setTranslateY(125);
// هنا قمنا يتعديل تصميم كل شيء سيتم إضافته في الحاوية الرئيسية التي سنضعها في النافذة
redLabel.setStyle("-fx-font-weight: bold; -fx-font-size: 18px");
greenLabel.setStyle("-fx-font-weight: bold; -fx-font-size: 18px");
blueLabel.setStyle("-fx-font-weight: bold; -fx-font-size: 18px");
selectedColorLabel.setStyle("-fx-font-weight: bold; -fx-font-size: 15px; -fx-text-fill: gray");
redScroller.setStyle("-fx-background-color: red");
greenScroller.setStyle("-fx-background-color: green");
blueScroller.setStyle("-fx-background-color: blue");
// color هو اللون الذي يمثله الكائن - selectedColorShape هنا قمنا بجعل لون خلفية المربع - الكائن
selectedColorShape.setFill(color);
// أي كلما تم تحريك أي واحد فيهم ,ScrollBar هنا وضعنا الأوامر التي نريد تنفيذها عند تغيير قيمة أي
ChangeListener myListener = (ChangeListener) (ObservableValue observable, Object oldValue, Object newValue) -> {
// blue و green ,red بالترتيب في المتغيرات blueScroller و greenScroller ,redScroller في البداية بتخزين قيم الكائنات
int red = (int) redScroller.getValue();
int green = (int) greenScroller.getValue();
int blue = (int) blueScroller.getValue();
// color و خزناها في الكائن blue و green ,red بعدها قمنا بإنشاء درجة لون جديدة بناءاَ على القيم المخزنة في المتغيرات
color = Color.rgb(red, green, blue, 1);
// selectedColorShape كخلفية للكائن color بعدها وضعنا درجة اللون المخزنة في الكائن
selectedColorShape.setFill(color);
// selectedColorLabel كنص للكائن color بعدها سيتم وضع درجة اللون المخزنة في الكائن
selectedColorLabel.setText(getColorValue());
};
// myListener سيتم تنفيذ الأوامر الموضوعة في الكائن blueScroller أو الكائن greenScroller أو الكائن redScroller هنا قلنا أنه عند تحريك الكائن
redScroller.valueProperty().addListener(myListener);
greenScroller.valueProperty().addListener(myListener);
blueScroller.valueProperty().addListener(myListener);
// في النافذة Root Node و الذي ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
Group root = new Group();
// هنا قمنا بإضافة جميع الأشياء التي قمنا بإنشائها في النافذة
root.getChildren().add(redLabel);
root.getChildren().add(greenLabel);
root.getChildren().add(blueLabel);
root.getChildren().add(redScroller);
root.getChildren().add(greenScroller);
root.getChildren().add(blueScroller);
root.getChildren().add(selectedColorShape);
root.getChildren().add(selectedColorLabel);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 540, 180);
// هنا وضعنا عنوان للنافذة
stage.setTitle("Color Picker");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}