أهلا بكم

الكلاس ToggleButton يستخدم لإضافة زر تشغيل/إيقاف (Toggle Button) في واجهة المستخدم.و فكرة هذا الزر بشكل عام, هي أنه عند النقر عليه يظل ظاهراً أنه قد تم النقر عليه. و عند النقر عليه من جديد أنه لم يعد مختاراً.

محتوى هذا الزر يمكن أن يكون: نص, أيقونة, نص و أيقونة بجانبه , و يمكن وضع عدة ToggleButton و جعل المستخدم قادر على النقر عليهم كلهم إن أراد.و يمكن أيضاً وضع عدة ToggleButton ضمن مجموعة واحدة فيصبح بإمكان المستخدم النقر على زر واحد في كل مرة.

كيفية إنشاء الكلاس ToggleButton

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

الكود:

import javafx.scene.control.ToggleButton;

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

الكود:

ToggleButton toggleButton = new ToggleButton("ToggleButton");

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

الكود:

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ToggleButton;
import javafx.stage.Stage;
 
public class Main extends Application {
 
    @Override
    public void start(Stage stage) {
        // يمثل الزر الذي نريد إضافته في النافذة ToggleButton هنا قمنا بإنشاء كائن من الكلاس
        ToggleButton toggleButton = new ToggleButton("ToggleButton");
 
        // في النافذة toggleButton هنا قمنا بتحديد مكان ظهور الكائن
        toggleButton.setTranslateX(145);
        toggleButton.setTranslateY(100);
 
        // toggleButton هنا قمنا بتحديد حجم الكائن
        toggleButton.setPrefSize(110, 40);
 
        // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
        Group root = new Group();
 
        // list و بالتالي أصبح أي شيء نريد إضافته نضيفه في الكائن list مرتبط بالكائن root هنا جعلنا الكائن
        ObservableList list = root.getChildren();
 
        // group و الذي بدوره سيضاف أيضاً في الكائن list في الكائن toggleButton هنا قمنا بإضافة الكائن
        list.add(toggleButton);
 
        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 400, 250);
 
        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX ToggleButton");
 
        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);
 
        // هنا قمنا بإظهار النافذة
        stage.show();
    }
 
    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }
 
}


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

الكود:

[right][/right]
[right]import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.collections.ObservableList;
import javafx.geometry.NodeOrientation;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextArea;
import javafx.scene.control.Toggle;
import javafx.scene.control.ToggleButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.text.Font;
import javafx.stage.Stage;
 
public class Main extends Application {
 
    @Override
    public void start(Stage stage) {
 
        // يمثل العنوان الذي نريد وضعه بجانب الزرين Label هنا قمنا بإنشاء كائن من الكلاس
        Label label = new Label("Text Align");
 
        // يمثلان الزرين اللذين نريد إضافتهما في النافذة مع وضع أيقونة على كل زر ToggleButton هنا قمنا بإنشاء كائنين من الكلاس
        ToggleButton tg_L = new ToggleButton("", new ImageView(new Image(getClass().getResourceAsStream("/images/align-left.png"))));
        ToggleButton tg_R = new ToggleButton("", new ImageView(new Image(getClass().getResourceAsStream("/images/align-right.png"))));
 
        // يمثل مربع النص الكبير الذي نريد إضافته تحت الزرين TextArea هنا قمنا بإنشاء كائن من الكلاس
        TextArea textArea = new TextArea();
 
        // هنا قمنا بتحديد مكان ظهور جميع الأشياء التي نريد إضافتها في النافذة
        label.setTranslateX(30);
        label.setTranslateY(20);
        tg_L.setTranslateX(130);
        tg_L.setTranslateY(20);
        tg_R.setTranslateX(170);
        tg_R.setTranslateY(20);
        textArea.setTranslateX(20);
        textArea.setTranslateY(60);
 
        // label هنا قمنا بتحديد تغيير نوع و حجم خط الكائن
        label.setFont(new Font("Arial", 18));
        // textArea هنا قمنا بتحديد تغيير نوع و حجم خط الكائن
        textArea.setFont(new Font("Arial", 18));
        // بالعرض Scroll Bar ينزل على سطر جديد عند الحاجة بدل إظهار TextArea هنا جعلنا النس بداخل الـ
        textArea.setWrapText(true);
        // عرضه 360 بيكسل و طوله 140 بيكسل textArea هنا قمنا بتحديد حجم الـ
        textArea.setPrefSize(360, 140);
 
        // و هكذا أصبح يمكن إختيار واحد منهما في كل مرة tg_R و tg_L و ربطنا فيه الكائنين ToggleGroup هنا قمنا بإنشاء كائن من الكلاس
        ToggleGroup group = new ToggleGroup();
        tg_L.setToggleGroup(group);
        tg_R.setToggleGroup(group);
 
        // مختاراً بشكل إفتراضي عند تشغيل البرنامج tg_L هنا جعلنا الزر
        group.selectToggle(tg_L);
 
        // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
        Group root = new Group();
 
        // list و بالتالي أصبح أي شيء نريد إضافته نضيفه في الكائن list مرتبط بالكائن root هنا جعلنا الكائن
        ObservableList list = root.getChildren();
 
        // group و الذي بدوره سيضيفهم أيضاً في الكائن list هنا قمنا بإضافة جميع الأشياء في الكائن
        list.add(label);
        list.add(tg_L);
        list.add(tg_R);
        list.add(textArea);
 
        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 400, 220);
 
        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX ToggleButton");
 
        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);
 
        // هنا قمنا بإظهار النافذة
        stage.show();
 
        // group هنا قمنا بتحديد ماذا سيحدث عند النقر على أي زر تابع للمجموعة
        group.selectedToggleProperty().addListener((ObservableValue<? extends Toggle> ov, Toggle toggle, Toggle new_toggle) -> {
            // في الجهة اليسرى textArea سيتم عرض النص داخل الـ tg_L إذا تم النقر على الزر
            if(group.getSelectedToggle().equals(tg_L))
                textArea.setNodeOrientation(NodeOrientation.LEFT_TO_RIGHT);
 
            // في الجهة اليمنى textArea سيتم عرض النص داخل الـ tg_R إذا تم النقر على الزر
            else
                textArea.setNodeOrientation(NodeOrientation.RIGHT_TO_LEFT);
        });
 
    }
 
    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }
 
}[/right]

جزاكم الله خيرا ..... تحياتي لك