تعلم javafx

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

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

شرح الكلاس  HBox

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

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

حجم كائن الـ HBox يمكن تحديده, و يمكن تحديد ما إذا كانت الأشياء بداخله سيتغير حجمها مع تغيّر حجمه أم أن حجمها ثابت لا يتغير.

حجم الفراغ بين الأشياء التي نضيفها فيه يمكن تحديده من جميع الإتجاهات.


بناء الكلاس HBox

@DefaultProperty(value="content")
public class HBox
extends Control

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

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

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

دوال الكلاس HBox

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

الدالة مع تعريفها
public void setSpacing(int value) تستخدم لتحديد حجم الفراغ بين كل شيئين يتم إضافتهما في كائن الـ HBox الذي قام باستدعائها.
مكان الباراميتر value نمرر رقم يمثل حجم الفراغ بالـ Pixel.
public final void setAlignment(Pos value) تستخدم لتحديد مكان ظهور الأشياء التي سيتم وضعها في كائن الـ HBox الذي قام باستدعائها.
مكان الباراميتر value نمرر إحدى ثوابت الكلاس Pos:

  • TOP_LEFT: يظهر المحتوى في الأعلى ناحية اليسار.

  • TOP_CENTER: يظهر المحتوى في الأعلى و في الوسط.

  • TOP_RIGHT: يظهر المحتوى في الأعلى ناحية اليمين.

  • CENTER_LEFT: يظهر المحتوى في الوسط ناحية اليسار.

  • CENTER: يظهر المحتوى في الوسط تماماً.

  • CENTER_RIGHT: يظهر في الوسط ناحية اليمين.

  • BOTTOM_LEFT: يظهر المحتوى في الأسفل ناحية اليسار.

  • BOTTOM_CENTER: يظهر المحتوى في الأسفل و في الوسط.

  • BOTTOM_RIGHT: يظهر المحتوى في الأسفل ناحية اليمين.
public final void setFillHeight(boolean value) تستخدم لتحديد ما إذا كانت الأشياء التي سنضيفها في كائن الـ HBox الذي قام باستدعائها ستتأثر بطوله أم لا.
مكان الباراميتر value نمرر القيمة true في حال أردنا جعل طول الأشياء يتغير بشكل تلقائي نسبة لطول الـ HBox.
public static void setMargin(Node child, Insets value) تستخدم لإضافة فراغ حول أي شيء موضوع بداخل HBox.
مكان الباراميتر child نمرر الشيء الذي نريد إضافة فراغ حوله.
مكان الباراميتر value نمرر كائن من الكلاس Insets نحدد فيه حجم الفراغ الذي سيتم إضافته للشيء من الجهات الأربعة ( فوقه, يمينه, تحته, يساره ).
public static void setHgrow(Node child, Priority value) تستخدم لتحديد ما إذا كان عرض الشيء الموضوع بداخل HBox سيتأثر بعرضه أم أن عرضه سيظل ثابت.
مكان الباراميتر child نمرر الشيء الذي نريد تحديد ما إن كان عرضه سيتأثر بعرض الـ HBox أم لا.
مكان الباراميتر value نمرر إحدى ثوابت الكلاس Priority التي تحدد ذلك:

  • ALWAYS: لجعل عرض الشيء يظهر على أكبر مساحة متوفرة في كائن الـ HBox.

  • NEVER: لجعل عرض الشيء ثابت لا يتأُثر أبدً بحجم كائن الـ HBox.

  • SOMETIMES: لجعل عرض الشيء يظهر على أكبر مساحة متوفرة في كائن الـ HBox في حال لم يكن هناك أي شيء آخر قد تم تعيينه ليظهر على أكبر مساحة متوفرة فيه.
public final void setStyle(String value) تستخدم لتعديل تصميم كائن الـ HBox الذي قام بإستدعائها.
مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ HBox بأسلوب لغة CSS لإظهاره بالشكل الذي تريده.
public ObservableList<Node> getChildren() ترجع كائن نوعه ObservableList يمثل محتوى كائن الـ HBox الذي قام بإستدعائها مما يجعلك قادراً على إضافة كائنات جديدة أو حذف كائنات موجودة فيه.

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


 طريقة إنشاء كائن من الكلاس HBox

المثال التالي يعلمك طريقة إنشاء كائن من الكلاس HBox و وضعه كـ Root Node.

مثال

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

      public class Main extends Application {

      @Override
      public void start(Stage stage) {

      // في النافذة Root Node و الذي ننوي جعله الـ HBox هنا قمنا بإنشاء كائن من الكلاس
      HBox root = new HBox();

      // root هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
      Button button1 = new Button("Button 1");
      Button button2 = new Button("Button 2");
      Button button3 = new Button("Button 3");

      // root في الكائن button3 و button2 و button1 هنا قمنا بإضافة الكائنات
      root.getChildren().add(button1);
      root.getChildren().add(button2);
      root.getChildren().add(button3);

      // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
      Scene scene = new Scene(root, 300, 150);

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

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

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

      }

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

      }

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

طريقة إنشاء كائن من الكلاس HBox

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



 طريقة إضافة مسافة فارغة بين الأشياء التي نضيفها في HBox

المثال التالي يعلمك طريقة إضافة مسافة فارغة بين الأشياء التي نضيفها في HBox.
بالإضافة إلى عرض محتوى الـ HBox في الوسط.

مثال

Main.java 
      import javafx.application.Application;
      import javafx.scene.Scene;
      import javafx.stage.Stage;
      import javafx.geometry.Pos;
      import javafx.scene.control.Button;
      import javafx.scene.layout.HBox;

      public class Main extends Application {

      @Override
      public void start(Stage stage) {

      // في النافذة Root Node و الذي ننوي جعله الـ HBox هنا قمنا بإنشاء كائن من الكلاس
      HBox root = new HBox();

      // root هنا قمنا بإضافة مسافة فارغة بمقدار 10 بيكسل بين أي شيئين يتم إضافتهما في الكائن
      root.setSpacing(10);

      // يظهر في وسطه root هنا قمنا بجعل محتوى الكائن
      root.setAlignment(Pos.CENTER);

      // root هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
      Button button1 = new Button("Button 1");
      Button button2 = new Button("Button 2");
      Button button3 = new Button("Button 3");

      // root في الكائن button3 و button2 و button1 هنا قمنا بإضافة الكائنات
      root.getChildren().add(button1);
      root.getChildren().add(button2);
      root.getChildren().add(button3);

      // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
      Scene scene = new Scene(root, 300, 150);

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

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

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

      }

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

      }

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

طريقة إضافة مسافة فارغة بين الأشياء التي نضيفها في HBox

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



كيفية  تتغير أحجام الأشياء التي نضعها في HBox 

المثال التالي يوضح كيف تتغير أحجام الأشياء التي نضعها في HBox كلما تغير حجمه و كيف أن المسافات الفراغة لا تتأثر.

مثال

Main.java 
      import javafx.application.Application;
      import javafx.scene.Scene;
      import javafx.stage.Stage;
      import javafx.geometry.Pos;
      import javafx.scene.control.Button;
      import javafx.scene.layout.HBox;

      public class Main extends Application {

      @Override
      public void start(Stage stage) {

      // في النافذة Root Node و الذي ننوي جعله الـ HBox هنا قمنا بإنشاء كائن من الكلاس
      HBox root = new HBox();

      // root هنا قمنا بإضافة مسافة فارغة بمقدار 10 بيكسل بين أي شيئين يتم إضافتهما في الكائن
      root.setSpacing(10);

      // يظهر في وسطه root هنا قمنا بجعل محتوى الكائن
      root.setAlignment(Pos.CENTER);

      // root هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
      Button button1 = new Button("Button 1");
      Button button2 = new Button("Button 2");
      Button button3 = new Button("Button 3");

      // root و الذي سيتغير بشكل تلقائي في حال تغيير حجم الكائن root هنا قمنا بتحديد الحجم المفضل للأشياء التي سنضيفها في الكائن
      button1.setPrefSize(150, 30);
      button2.setPrefSize(150, 30);
      button3.setPrefSize(150, 30);

      // root في الكائن button3 و button2 و button1 هنا قمنا بإضافة الكائنات
      root.getChildren().add(button1);
      root.getChildren().add(button2);
      root.getChildren().add(button3);

      // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
      Scene scene = new Scene(root, 300, 150);

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

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

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

      }

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

      }

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

تتغير أحجام الأشياء التي نضعها في HBox

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

•لاحظ أنه عندما يصبح هناك مساحة متوفرة لعرض الأشياء بالحجم الذي نفضله سيصبح حجمهم ثابت و سيظهروا في وسط الـ HBox.



 طريقة إضافة هامش من جميع الإتجاهات لأي شيء تم وضعه في HBox

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

مثال

Main.java 
      import javafx.application.Application;
      import javafx.scene.Scene;
      import javafx.stage.Stage;
      import javafx.geometry.Insets;
      import javafx.scene.control.Button;
      import javafx.scene.layout.HBox;

      public class Main extends Application {

      @Override
      public void start(Stage stage) {

      // في النافذة Root Node و الذي ننوي جعله الـ HBox هنا قمنا بإنشاء كائن من الكلاس
      HBox root = new HBox();

      // root هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
      Button button1 = new Button("Button 1");
      Button button2 = new Button("Button 2");
      Button button3 = new Button("Button 3");

      // root و الذي سيتغير بشكل تلقائي في حال تغيير حجم الكائن root هنا قمنا بتحديد الحجم المفضل للأشياء التي سنضيفها في الكائن
      button1.setPrefSize(150, 30);
      button2.setPrefSize(150, 30);
      button3.setPrefSize(150, 30);

      // HBox هنا قمنا بإضافة هامش لكل شيء سنضيفه في الكائن
      HBox.setMargin(button1, new Insets(10, 10, 10, 10));  // من جميع الجهات button1 هنا أضفنا هامش بمقدار 10 بيكسل حول الكائن
      HBox.setMargin(button2, new Insets(10, 0, 10, 0));    // من الأعلى و الأسفل فقط button2 هنا أضفنا هامش بمقدار 10 بيكسل حول الكائن
      HBox.setMargin(button3, new Insets(10, 10, 10, 10));  // من جميع الجهات button3 هنا أضفنا هامش بمقدار 10 بيكسل حول الكائن

      // root في الكائن button3 و button2 و button1 هنا قمنا بإضافة الكائنات
      root.getChildren().add(button1);
      root.getChildren().add(button2);
      root.getChildren().add(button3);

      // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
      Scene scene = new Scene(root, 300, 150);

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

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

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

      }

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

      }

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

طريقة إضافة هامش من جميع الإتجاهات لأي شيء تم وضعه في HBox

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

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



 طريقة جعل محتوى الـ HBox يظهر على كل المساحة المتوفرة

المثال التالي يعلمك طريقة جعل محتوى الـ HBox يظهر على كل المساحة المتوفرة.

المثال الأول

Main.java 
      import javafx.application.Application;
      import javafx.scene.Scene;
      import javafx.stage.Stage;
      import javafx.geometry.Pos;
      import javafx.scene.control.Button;
      import javafx.scene.layout.HBox;
      import javafx.scene.layout.Priority;

      public class Main extends Application {

      @Override
      public void start(Stage stage) {

      // في النافذة Root Node و الذي ننوي جعله الـ HBox هنا قمنا بإنشاء كائن من الكلاس
      HBox root = new HBox();

      // root هنا قمنا بإضافة مسافة فارغة بمقدار 10 بيكسل بين أي شيئين يتم إضافتهما في الكائن
      root.setSpacing(10);

      // يظهر في وسطه root هنا قمنا بجعل محتوى الكائن
      root.setAlignment(Pos.CENTER);

      // root هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
      Button button1 = new Button("Button 1");
      Button button2 = new Button("Button 2");

      // root و الذي سيتغير بشكل تلقائي في حال تغيير حجم الكائن root اللذين سنضيفهما في الكائن button2 و button1 هنا قمنا بتحديد الحجم الأقصى المفضل للكائنين
      button1.setMaxWidth(Double.MAX_VALUE);
      button2.setMaxWidth(Double.MAX_VALUE);

      // الذي سيتم وضعهما بداخله HBox يكبران لأقصى حدود ممكنة نسبة لحجم كائن الـ button2 و button1 هنا جعلنا عرض الكائنين
      HBox.setHgrow(button1, Priority.ALWAYS);
      HBox.setHgrow(button2, Priority.ALWAYS);

      // root في الكائن button2 و button1 هنا قمنا بإضافة الكائنات
      root.getChildren().add(button1);
      root.getChildren().add(button2);

      // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
      Scene scene = new Scene(root, 300, 150);

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

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

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

      }

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

      }

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

طريقة جعل محتوى الـ HBox يظهر على كل المساحة المتوفرة

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



هنا قمنا بإعادة المثال الأول مع تعديل السطر رقم 32 فقط.

المثال الثاني

Main.java 
      import javafx.application.Application;
      import javafx.scene.Scene;
      import javafx.stage.Stage;
      import javafx.geometry.Pos;
      import javafx.scene.control.Button;
      import javafx.scene.layout.HBox;
      import javafx.scene.layout.Priority;

      public class Main extends Application {

      @Override
      public void start(Stage stage) {

      // في النافذة Root Node و الذي ننوي جعله الـ HBox هنا قمنا بإنشاء كائن من الكلاس
      HBox root = new HBox();

      // root هنا قمنا بإضافة مسافة فارغة بمقدار 10 بيكسل بين أي شيئين يتم إضافتهما في الكائن
      root.setSpacing(10);

      // يظهر في وسطه root هنا قمنا بجعل محتوى الكائن
      root.setAlignment(Pos.CENTER);

      // root هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
      Button button1 = new Button("Button 1");
      Button button2 = new Button("Button 2");

      // root و الذي سيتغير بشكل تلقائي في حال تغيير حجم الكائن root اللذين سنضيفهما في الكائن button2 و button1 هنا قمنا بتحديد الحجم الأقصى المفضل للكائنين
      button1.setMaxWidth(Double.MAX_VALUE);   // ملاحظة: هذا السطر لم يعد له فائدة و يمكن إلغاؤه
      button2.setMaxWidth(Double.MAX_VALUE);

      // الذي سيتم وضعه بداخله HBox ثابت و لا يتأثر أبداً بحجم كائن الـ button1 هنا جعلنا عرض الكائن
      HBox.setHgrow(button1, Priority.NEVER);

      // الذي سيتم وضعه بداخله HBox يكبر لأقصى حدود ممكنة نسبة لحجم كائن الـ button2 هنا جعلنا عرض الكائن
      HBox.setHgrow(button2, Priority.ALWAYS);

      // root و الذي بدوره سيضيفهم أيضاً في الكائن list في الكائن button2 و button1 هنا قمنا بإضافة الكائنات
      root.getChildren().add(button1);
      root.getChildren().add(button2);

      // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
      Scene scene = new Scene(root, 300, 150);

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

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

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

      }

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

      }

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

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

•ببطئ قم بتكبير حجم النافذة و تصغيرها بواسطة الفأرة لتفهم أكثر كيف تم ترتيب العناصر و كيف أن الكائن button1 سيحتل فقط المساحة التي يحتاجها مهما كان حجم كائن الـ HBox. بينما الكائن button2 سيظهر على كل المساحة المتبقية.

كورس تعلم من الصفر  javaFX


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

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