تعلم javafx

شرح الكلاس AnchorPane في javafx

صورة
صدام العويري
اخر تحديث :

شرح الكلاس AnchorPane

الكلاس AnchorPane يستخدم لإنشاء حاوية لا تترتب فيها الأشياء بشكل تلقائي, و بالتالي أنت من تتولى تحديد أماكن الأشياء التي تضيفها فيها.

كل شيء تضيفه في هذه الحاوية, يمكن تحديد حجم الفراغ بينه و بين الحاوية ( أي بعده عنها ) من الجهات الأربعة ( الأعلى, الأسفل, اليمين, اليسار ).
إنتبه: يمكنك تحديد حجم الفراغ بين الشيء الذي تضيفه و بين الحاوية نفسها. و ليس حجم الفراغ بين الأشياء التي وضعتها في الحاوية.

أيضاً, حجم الفراغ الذي تضيفه يؤثر على حجم الشيء نفسه, فمثلاً:

  • بمجرد تحديد حجم المسافة الفارغة بين أي شيء تضيفه و بين الحاوية من الأعلى و الأسفل فإنه سيظهر على كل المسافة المتوفرة بالطول.

  • و بمجرد تحديد حجم المسافة الفارغة بين أي شيء تضيفه و بين الحاوية من اليمين و اليسار فإنه سيظهر على كل المسافة المتوفرة بالعرض.

لذلك عليك تقدير أحجام المسافات الفارغة التي ستضعها لكل شيء لتحدد أمكان الأشياء التي أضفتها و لجعلها لا تظهر فوق بعضها البعض.

إذاً, فكرة هذه الحاوية هي جعل الأشياء التي نضيفها فيها تظهر على كل المساحة المتوفرة ما عدا المساحات الفارغة التي نقوم بتحديدها لكل شيء على حدا.


معلومة تقنية في الكلاس AnchorPane

إفتراضياً, في حال قمت بإنشاء كائن الـ AnchorPane و أضفت فيه بعض الأشياء بدون تحديد حجم المسافات الفارغة بينه و بين هذه الأشياء. فإنهم سيظهروا جميعاً فوق بعضهم في الأعلى من جهة اليسار. و طبعاً آخر شيء تضيفه يظهر في الأعلى.


بناء الكلاس AnchorPane

@DefaultProperty(value="children")
public class AnchorPane
extends Region

كونستركتورات الكلاس AnchorPane

الجدول التالي يحتوي على كونستركتورات الكلاس AnchorPane.

الكونستركتور مع تعريفه
AnchorPane() ينشئ كائن من الكلاس AnchorPane يمثل حاوية فارغة.
AnchorPane(Node... children) ينشئ كائن من الكلاس AnchorPane يمثل حاوية مع تحديد الأشياء التي نريد وضعها فيها.
مكان الباراميتر children نمرر الأشياء التي نريد وضعها فيها مع وضع فاصلة بين كل شيئين.

دوال الكلاس AnchorPane

الجدول التالي يحتوي على دوال الكلاس AnchorPane الأكثر إستخداماً.

الدالة مع تعريفها
public static void setTopAnchor(Node child, Double value) تستخدم لتحديد كم يبعد الشيء الموضوع في AnchorPane عنه من الأعلى.
مكان الباراميتر child نمرر الشيء الذي نريد إبعاده من الجهة العلوية عن كائن الـ AnchorPane.
مكان الباراميتر value نمرر رقم نوعه Double يمثل كم سيتم إبعاد الشيء من الأعلى عن كائن الـ AnchorPane الموضوع فيه.
public static void setBottomAnchor(Node child, Double value) تستخدم لتحديد كم يبعد الشيء الموضوع في AnchorPane عنه من الأسفل.
مكان الباراميتر child نمرر الشيء الذي نريد إبعاده من الجهة السفلية عن كائن الـ AnchorPane.
مكان الباراميتر value نمرر رقم نوعه Double يمثل كم سيتم إبعاد الشيء من الأسفل عن كائن الـ AnchorPane الموضوع فيه.
public static void setRightAnchor(Node child, Double value) تستخدم لتحديد كم يبعد الشيء الموضوع في AnchorPane عنه من الجهة اليمنى.
مكان الباراميتر child نمرر الشيء الذي نريد تحديد كم يبعد عن يمين كائن الـ AnchorPane.
مكان الباراميتر value نمرر رقم نوعه Double يمثل كم سيتم إبعاد الشيء من الجهة اليمنى عن كائن الـ AnchorPane الموضوع فيه.
public static void setLeftAnchor(Node child, Double value) تستخدم لتحديد كم يبعد الشيء الموضوع في AnchorPane عنه من الجهة اليسرى.
مكان الباراميتر child نمرر الشيء الذي نريد تحديد كم يبعد عن يسار كائن الـ AnchorPane.
مكان الباراميتر value نمرر رقم نوعه Double يمثل كم سيتم إبعاد الشيء من الجهة اليسرى عن كائن الـ AnchorPane الموضوع فيه.
public void setPrefSize(double prefWidth, double prefHeight) تستخدم لتحديد حجم كائن الـ AnchorPane الذي قام باستدعائها.

  • مكان الباراميتر prefWidth نضع رقم يمثل عرض الـ AnchorPane بالـ Pixel.

  • مكان الباراميتر prefHeight نضع رقم يمثل طول الـ AnchorPane بالـ Pixel.
public final void setTranslateX(double value) تستخدم لتحديد مكان كائن الـ AnchorPane الذي قام باستدعائها أفقياً.
مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من اليسار إلى اليمين.
public final void setTranslateY(double value) تستخدم لتحديد مكان كائن الـ AnchorPane الذي قام باستدعائها عامودياً.
مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من الأعلى إلى الأسفل.
public final void setBackground(Background value) تستخدم لوضع لون أو صورة كخلفية لكائن الـ AnchorPane الذي قام بإستدعائها.
مكان الباراميتر value نضع كائن من الكلاس Background يشير إلى درجة اللون أو الصورة التي سيتم وضعها كخلفية.
public final void setStyle(String value) تستخدم لتعديل تصميم كائن الـ AnchorPane الذي قام بإستدعائها.
مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ AnchorPane بأسلوب لغة CSS لإظهاره بالشكل الذي تريده.
public ObservableList<Node> getChildren() ترجع كائن نوعه ObservableList يمثل محتوى كائن الـ AnchorPane الذي قام بإستدعائها مما يجعلك قادراً على إضافة كائنات جديدة أو حذف كائنات موجودة فيه.

أمثلة شاملة في  الكلاس AnchorPane

 طريقة تحديد طول و مكان ظهور الشيء الذي يتم إضافته في AnchorPane

المثال التالي يعلمك طريقة تحديد طول و مكان ظهور الشيء الذي يتم إضافته في AnchorPane.

ملاحظة: هنا جعلنا حجم الفراغ بين الـ Button و الـ AnchorPane من الأعلى و من الأسفل بمقدار 30 بيكسل.
لهذا السبب يظهر على طول النافذة و لكنه يحافظ على الفراغ الموجود من الأعلى و الأسفل.


مثال طريقة تحديد طول و مكان ظهور الشيء الذي يتم إضافته في AnchorPane.

Main.java 
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.scene.layout.AnchorPane;

public class Main extends Application {

    @Override
    public void start(Stage stage) {
        
        // في النافذة Root Node و الذي ننوي جعله الـ AnchorPane هنا قمنا بإنشاء كائن من الكلاس
        AnchorPane root = new AnchorPane();
        
    // root الذي نريد إضافته في الكائن Button يمثل الـ Button هنا قمنا بإنشاء كائن من الكلاس
        Button button = new Button("Button");
        
    // الذي سيوضع بداخله هو 30 بيكسل AnchorPane و كائن الـ button هنا قلنا أن حجم المسافة الفارغة من الأعلى بين الكائن
        AnchorPane.setTopAnchor(button, 30.0);
    
    // الذي سيوضع بداخله هو 30 بيكسل AnchorPane و كائن الـ button هنا قلنا أن حجم المسافة الفارغة من الأسفل بين الكائن
        AnchorPane.setBottomAnchor(button, 30.0);
        
    // root في الكائن button هنا قمنا بإضافة الكائن
        root.getChildren().add(button);
    
        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 350, 250);

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

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

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

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

}

•ستظهر لك النافذة التالية عند التشغيل.

طريقة تحديد طول و مكان ظهور الأشياء التي نضيفها في AnchorPane في JavaFX

•ببطئ قم بتصغير حجم النافذة لأقصى حدود ممكنة لتفهم كيف سيتأثر حجم الكائن Button بحجم الفراغ الموضوع فوقه و تحته.

 طريقة تحديد عرض و مكان ظهور الشيء الذي يتم إضافته في AnchorPane

المثال التالي يعلمك طريقة تحديد عرض و مكان ظهور الشيء الذي يتم إضافته في AnchorPane.

ملاحظة: هنا جعلنا حجم الفراغ بين الـ Button و الـ AnchorPane من اليمين و من اليسار بمقدار 30 بيكسل.
لهذا السبب يظهر على عرض النافذة و لكنه يحافظ على الفراغ الموجود من اليمين و اليسار.


مثال طريقة تحديد عرض و مكان ظهور الشيء الذي يتم إضافته في AnchorPane.

Main.java 
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.scene.layout.AnchorPane;

public class Main extends Application {

    @Override
    public void start(Stage stage) {
        
        // في النافذة Root Node و الذي ننوي جعله الـ AnchorPane هنا قمنا بإنشاء كائن من الكلاس
        AnchorPane root = new AnchorPane();
        
    // root الذي نريد إضافته في الكائن Button يمثل الـ Button هنا قمنا بإنشاء كائن من الكلاس
        Button button = new Button("Button");
        
    // الذي سيوضع بداخله هو 30 بيكسل AnchorPane و كائن الـ button هنا قلنا أن حجم المسافة الفارغة من اليمين بين الكائن
        AnchorPane.setRightAnchor(button, 30.0);
    
    // الذي سيوضع بداخله هو 30 بيكسل AnchorPane و كائن الـ button هنا قلنا أن حجم المسافة الفارغة من اليسار بين الكائن
        AnchorPane.setLeftAnchor(button, 30.0);
        
    // root في الكائن button هنا قمنا بإضافة الكائن
        root.getChildren().add(button);
    
        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 350, 250);

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

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

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

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

}

•ستظهر لك النافذة التالية عند التشغيل.

طريقة تحديد عرض و مكان ظهور الأشياء التي نضيفها في AnchorPane في JavaFX

•ببطئ قم بتصغير حجم النافذة لأقصى حدود ممكنة لتفهم كيف سيتأثر حجم الكائن Button بحجم الفراغ الموضوع يمينه و يساره.

 طريقة تحديد حجم و مكان ظهور الشيء الذي يتم إضافته في AnchorPane

المثال التالي يعلمك طريقة تحديد حجم و مكان ظهور الشيء الذي يتم إضافته في AnchorPane.

ملاحظة: هنا قمنا بتحديد حجم الفراغ بين الـ Button و الـ AnchorPane من جميع الجوانب بمقدار 30 بيكسل.
لهذا السبب يظهر على عرض و طول النافذة و لكنه يحافظ على الفراغ الموجود من الأعلى, الأسفل, اليمين و اليسار.


مثال طريقة تحديد حجم و مكان ظهور الشيء الذي يتم إضافته في AnchorPane.

Main.java 
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.scene.layout.AnchorPane;

public class Main extends Application {

    @Override
    public void start(Stage stage) {
        
        // في النافذة Root Node و الذي ننوي جعله الـ AnchorPane هنا قمنا بإنشاء كائن من الكلاس
        AnchorPane root = new AnchorPane();
        
        // root الذي نريد إضافته في الكائن Button يمثل الـ Button هنا قمنا بإنشاء كائن من الكلاس
        Button button = new Button("Button");
        
        // الذي سيوضع بداخله هو 30 بيكسل AnchorPane و كائن الـ button هنا قلنا أن حجم المسافة الفارغة من الأعلى بين الكائن
        AnchorPane.setTopAnchor(button, 30.0);
        
        // الذي سيوضع بداخله هو 30 بيكسل AnchorPane و كائن الـ button هنا قلنا أن حجم المسافة الفارغة من الأسفل بين الكائن
        AnchorPane.setBottomAnchor(button, 30.0);
        
        // الذي سيوضع بداخله هو 30 بيكسل AnchorPane و كائن الـ button هنا قلنا أن حجم المسافة الفارغة من اليمين بين الكائن
        AnchorPane.setRightAnchor(button, 30.0);
        
        // الذي سيوضع بداخله هو 30 بيكسل AnchorPane و كائن الـ button هنا قلنا أن حجم المسافة الفارغة من اليسار بين الكائن
        AnchorPane.setLeftAnchor(button, 30.0);
        
        // root في الكائن button هنا قمنا بإضافة الكائن
        root.getChildren().add(button);
        
        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 350, 250);

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

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

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

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

}

•ستظهر لك النافذة التالية عند التشغيل.

طريقة تحديد حجم و مكان ظهور الأشياء التي نضيفها في AnchorPane في JavaFX

•ببطئ قم بتصغير حجم النافذة لأقصى حدود ممكنة لتفهم كيف سيتأثر حجم الكائن Button بحجم الفراغ الموضوع حوله.

 طريقة وضع أكثر من شيء في AnchorPane

المثال التالي يعلمك طريقة وضع أكثر من شيء في AnchorPane.

ملاحظة: هنا قمنا بتحديد حجم الفراغ بين كل Button و بين الـ AnchorPane من جميع الجوانب بالإضافة إلى تحديد حجمهم المفضل كالتالي:

  • Button1 يتأثر بعرض الـ AnchorPane فقط.

  • Button2 يتأثر بعرض و طول الـ AnchorPane.

  • Button3 يتأثر بطول الـ AnchorPane فقط.


مثال طريقة وضع أكثر من شيء في AnchorPane.

Main.java 
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;
import javafx.scene.layout.AnchorPane;

public class Main extends Application {

    @Override
    public void start(Stage stage) {
        
        // في النافذة Root Node و الذي ننوي جعله الـ AnchorPane هنا قمنا بإنشاء كائن من الكلاس
        AnchorPane root = new AnchorPane();
        
        // root هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
        Button button1 = new Button("Button 1");
        Button button2 = new Button("Button 2");
        Button button3 = new Button("Button 3");
        
        // الذي سيوضع بداخله AnchorPane و كائن الـ button هنا قمنا بتحديد حجم الفراغ من الأعلى, اليسار و اليمين بين الكائن
        AnchorPane.setTopAnchor(button1, 30.0);
        AnchorPane.setRightAnchor(button1, 30.0);
        AnchorPane.setLeftAnchor(button1, 30.0);
        
		// ثابت و يساوي 30 بيكسل فقط كحد أقصى إذا كان هناك مساحة متوفرة في النافذة button1 هنا جعلنا طول الكائن
        button1.setPrefHeight(30);
        
        // الذي سيوضع بداخله AnchorPane و كائن الـ button هنا قمنا بتحديد حجم الفراغ من الأعلى, اليسار, اليمين و الأسفل بين الكائن
        AnchorPane.setTopAnchor(button2, 70.0);
        AnchorPane.setRightAnchor(button2, 130.0);
        AnchorPane.setLeftAnchor(button2, 30.0);
        AnchorPane.setBottomAnchor(button2, 30.0);
        
        // الذي سيوضع بداخله AnchorPane و كائن الـ button هنا قمنا بتحديد حجم الفراغ من الأعلى, اليمين و الأسفل بين الكائن
        AnchorPane.setTopAnchor(button3, 70.0);
        AnchorPane.setRightAnchor(button3, 30.0);
        AnchorPane.setBottomAnchor(button3, 30.0);
        
		// ثابت و يساوي 80 بيكسل فقط كحد أقصى إذا كان هناك مساحة متوفرة في النافذة button3 هنا جعلنا عرض الكائن
        button3.setPrefWidth(80);

        // root في الكائن button هنا قمنا بإضافة الكائن
        root.getChildren().addAll(button1, button2, button3);
        
        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 350, 250);

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

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

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

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

}

•ستظهر لك النافذة التالية عند التشغيل.

طريقة وضع أكثر من شيء في AnchorPane في JavaFX

•ببطئ قم بتصغير و تكبير حجم النافذة لتفهم كيف ستتغير أحجام الأشياء الموضوعة في الكائن AnchorPane نسبة لحجمه.

 تعلم و أحتراف javaFX


تعديل المقال
الأقسام

مقالات قد تهمك