JavaFXطريقة إنشاء برنامج لإختيار الألوان Color Picker بنظام RGB

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); } }