شرح الكلاس VBox
الكلاس VBox يستخدم لإنشاء حاوية ترتب الأشياء التي نضيفها فيها بشكل عامودي.
إفتراضياً, الأشياء التي نضيفها في كائن الـVBox تظهر في الأعلى من جهة اليسار.
و طبعاً تستطيع تحديد من أي جهة تريد أن تظهر الأشياء التي يتم إضافتها فيه.
حجم كائن الـ VBox يمكن تحديده, و يمكن تحديد ما إذا كانت الأشياء بداخله سيتغير حجمها مع تغيّر حجمه أم أن حجمها ثابت لا يتغير.
حجم الفراغ بين الأشياء التي نضيفها فيه يمكن تحديده من جميع الإتجاهات.
بناء الكلاس VBox
public class VBox
extends Pane
كونستركتورات الكلاس VBox
الجدول التالي يحتوي على كونستركتورات الكلاس VBox.
| الكونستركتور مع تعريفه | |
|---|---|
VBox()
ينشئ كائن من الكلاس VBox يمثل حاوية فارغة ترتب الأشياء التي نضيفها فيها بشكل عامودي. |
|
VBox(double spacing)
ينشئ كائن من الكلاس VBox يمثل حاوية فارغة ترتب الأشياء التي نضيفها فيها بشكل عامودي مع تحديد المسافة الفارغة بين الأشياء التي نضيفها فيها.مكان الباراميتر spacing نمرر رقم يمثل حجم المسافة الفارغة التي سيتم وضعها بين الأشياء التي نضيفها فيها. |
|
VBox(Node... children)
ينشئ كائن من الكلاس VBox يمثل حاوية ترتب الأشياء التي نضيفها فيها بشكل عامودي مع تحديد الأشياء التي نريد وضعها فيها.مكان الباراميتر children نمرر الأشياء التي نريد وضعها فيها مع وضع فاصلة بين كل شيئين. |
|
VBox(double spacing, Node... children)
ينشئ كائن من الكلاس VBox يمثل حاوية ترتب الأشياء التي نضيفها فيها بشكل عامودي مع تحديد الأشياء التي نريد وضعها فيها و المسافة الفارغة بينهم.مكان الباراميتر spacing نمرر رقم يمثل حجم المسافة الفارغة التي سيتم وضعها بين الأشياء التي نضيفها فيها.مكان الباراميتر children نمرر الأشياء التي نريد وضعها فيها مع وضع فاصلة بين كل شيئين. |
|
دوال الكلاس VBox
الجدول التالي يحتوي على دوال الكلاس VBox الأكثر إستخداماً.
| الدالة مع تعريفها | |
|---|---|
public void setSpacing(int value)
تستخدم لتحديد حجم الفراغ بين كل شيئين يتم إضافتهما في كائن الـ VBox الذي قام باستدعائها.مكان الباراميتر value نمرر رقم يمثل حجم الفراغ بالـ Pixel. |
|
public final void setAlignment(Pos value)
تستخدم لتحديد مكان ظهور الأشياء التي سيتم وضعها في كائن الـ VBox الذي قام باستدعائها.مكان الباراميتر value نمرر إحدى ثوابت الكلاس Pos:
|
|
public final void setFillWidth(boolean value)
تستخدم لتحديد ما إذا كانت الأشياء التي سنضيفها في كائن الـ VBox الذي قام باستدعائها ستتأثر بعرضه أم لا.مكان الباراميتر value نمرر القيمة true في حال أردنا جعل عرض الأشياء يتغير بشكل تلقائي نسبة لطول الـ VBox. |
|
public static void setMargin(Node child, Insets value)
تستخدم لإضافة فراغ حول أي شيء موضوع بداخل VBox.مكان الباراميتر child نمرر الشيء الذي نريد إضافة فراغ حوله.مكان الباراميتر value نمرر كائن من الكلاس Insets نحدد فيه حجم الفراغ الذي سيتم إضافته للشيء من الجهات الأربعة ( فوقه, يمينه, تحته, يساره ). |
|
public static void setVgrow(Node child, Priority value)
تستخدم لتحديد ما إذا كان طول الشيء الموضوع بداخل VBox سيتأثر بطوله أم أن طوله سيظل ثابت.مكان الباراميتر child نمرر الشيء الذي نريد تحديد ما إن كان طوله سيتأثر بطول الـ VBox أم لا.مكان الباراميتر value نمرر إحدى ثوابت الكلاس Priority التي تحدد ذلك:
|
|
public final void setStyle(String value)
تستخدم لتعديل تصميم كائن الـ VBox الذي قام بإستدعائها.مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ VBox بأسلوب لغة CSS لإظهاره بالشكل الذي تريده. |
|
public ObservableList<Node> getChildren()
ترجع كائن نوعه ObservableList يمثل محتوى كائن الـ VBox الذي قام بإستدعائها مما يجعلك قادراً على إضافة كائنات جديدة أو حذف كائنات موجودة فيه. |
|
أمثلة شاملة في الكلاس VBox
طريقة إنشاء كائن من الكلاس VBox
المثال التالي يعلمك طريقة إنشاء كائن من الكلاس VBox و وضعه كـ Root Node.
مثال
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
public class Main extends Application {
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ VBox هنا قمنا بإنشاء كائن من الكلاس
VBox root = new VBox();
// 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 VBox");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة إضافة مسافة فارغة بين الأشياء التي نضيفها في VBox في JavaFX
المثال التالي يعلمك طريقة إضافة مسافة فارغة بين الأشياء التي نضيفها في VBox.
بالإضافة إلى عرض محتوى الـ VBox في الوسط.
مثال
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.VBox;
public class Main extends Application {
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ VBox هنا قمنا بإنشاء كائن من الكلاس
VBox root = new VBox();
// 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 VBox");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
•ببطئ قم بتكبير حجم النافذة و تصغيرها بواسطة الفأرة لتفهم أكثر كيف تم ترتيب العناصر.
طريقة تتغير أحجام الأشياء التي نضعها في VBox في JavaFX
المثال التالي يوضح كيف تتغير أحجام الأشياء التي نضعها في VBox كلما تغير حجمه و كيف أن المسافات الفارغة لا تتأثر.
مثال
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.VBox;
public class Main extends Application {
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ VBox هنا قمنا بإنشاء كائن من الكلاس
VBox root = new VBox();
// 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, 50);
button2.setPrefSize(150, 50);
button3.setPrefSize(150, 50);
// 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 VBox");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
•ببطئ قم بتكبير حجم النافذة و تصغيرها بواسطة الفأرة لتفهم أكثر كيف ستتغير أحجام الأشياء التي وضعناها في الـ VBox.
•لاحظ أنه عندما يصبح هناك مساحة متوفرة لعرض الأشياء بالحجم الذي نفضله سيصبح حجمهم ثابت و سيظهروا في وسط الـ VBox.
طريقة إضافة هامش من جميع الإتجاهات لأي شيء تم وضعه في VBox في JavaFX
المثال التالي يعلمك طريقة إضافة هامش من جميع الإتجاهات لأي شيء تم وضعه في VBox.
مثال
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
public class Main extends Application {
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ VBox هنا قمنا بإنشاء كائن من الكلاس
VBox root = new VBox();
// يظهر في وسطه 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, 50);
button2.setPrefSize(150, 50);
button3.setPrefSize(150, 50);
// VBox هنا قمنا بإضافة هامش لكل شيء سنضيفه في الكائن
VBox.setMargin(button1, new Insets(10, 10, 10, 10)); // من جميع الجهات button1 هنا أضفنا هامش بمقدار 10 بيكسل حول الكائن
VBox.setMargin(button2, new Insets(0, 10, 0, 10)); // من اليمين و اليسار فقط button2 هنا أضفنا هامش بمقدار 10 بيكسل حول الكائن
VBox.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 VBox");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
•ببطئ قم بتكبير حجم النافذة و تصغيرها بواسطة الفأرة لتفهم أكثر كيف ستتغير أحجام الأشياء التي وضعناها في الـ VBox.
•لاحظ أنه عندما يصبح هناك مساحة متوفرة لعرض الأشياء بالحجم الذي نفضله سيصبح حجمهم ثابت و سيظهروا دائماً في وسط الـ VBox.
طريقة جعل محتوى ال VBox يظهر على كل المساحة المتوفرة فيه في JavaFX
المثال التالي يعلمك طريقة جعل محتوى الـ VBox يظهر على كل المساحة المتوفرة.
المثال الأول
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.VBox;
import javafx.scene.layout.Priority;
public class Main extends Application {
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ VBox هنا قمنا بإنشاء كائن من الكلاس
VBox root = new VBox();
// root هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
// و هو كل المساحة المتوفرة بالطول و العرض button1 هنا قمنا بتحديد الحجم الأقصى المفضل للكائن
button1.setMaxWidth(Double.MAX_VALUE);
button2.setMaxWidth(Double.MAX_VALUE);
// و هو كل المساحة المتوفرة بالطول و العرض button2 هنا قمنا بتحديد الحجم الأقصى المفضل للكائن
button1.setMaxHeight(Double.MAX_VALUE);
button2.setMaxHeight(Double.MAX_VALUE);
// الذي سيتم وضعهما بداخله VBox يكبران لأقصى حدود ممكنة نسبة لحجم كائن الـ button2 و button1 هنا جعلنا طول الكائنين
VBox.setVgrow(button1, Priority.ALWAYS);
VBox.setVgrow(button2, Priority.ALWAYS);
// VBox و الذي سيظهر عند إضافتهما في button2 و button1 هنا قمنا بإضافة هامش حول الكائنين
VBox.setMargin(button1, new Insets(10, 10, 5, 10));
VBox.setMargin(button2, new Insets(5, 10, 10, 10));
// root في الكائن button2 و button1 هنا قمنا بإضافة الكائنات
root.getChildren().add(button1);
root.getChildren().add(button2);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 300, 150);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX VBox");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
•ببطئ قم بتكبير حجم النافذة و تصغيرها بواسطة الفأرة لتفهم أكثر كيف تم ترتيب العناصر و كيف أنهم ظهروا في كامل عرض الـ VBox.
هنا قمنا بإعادة المثال الأول مع تعديل السطر رقم 31 فقط.
المثال الثاني
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;
import javafx.scene.layout.Priority;
public class Main extends Application {
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ VBox هنا قمنا بإنشاء كائن من الكلاس
VBox root = new VBox();
// root هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
// و هو كل المساحة المتوفرة بالطول و العرض button1 هنا قمنا بتحديد الحجم الأقصى المفضل للكائن
button1.setMaxWidth(Double.MAX_VALUE);
button2.setMaxWidth(Double.MAX_VALUE);
// و هو كل المساحة المتوفرة بالطول و العرض button2 هنا قمنا بتحديد الحجم الأقصى المفضل للكائن
button1.setMaxHeight(Double.MAX_VALUE);
button2.setMaxHeight(Double.MAX_VALUE);
// الذي سيتم وضعه بداخله VBox ثابت و لا يتأثر أبداً بحجم كائن الـ button1 هنا جعلنا طول الكائن
HBox.setHgrow(button1, Priority.NEVER);
// الذي سيتم وضعه بداخله VBox يكبر لأقصى حدود ممكنة نسبة لحجم كائن الـ button2 هنا جعلنا طول الكائن
HBox.setHgrow(button2, Priority.ALWAYS);
// VBox و الذي سيظهر عند إضافتهما في button2 و button1 هنا قمنا بإضافة هامش حول الكائنين
VBox.setMargin(button1, new Insets(10, 10, 5, 10));
VBox.setMargin(button2, new Insets(5, 10, 10, 10));
// root و الذي بدوره سيضيفهم أيضاً في الكائن list في الكائن button2 و button1 هنا قمنا بإضافة الكائنات
root.getChildren().add(button1);
root.getChildren().add(button2);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 300, 150);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX VBox");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
•ببطئ قم بتكبير حجم النافذة و تصغيرها بواسطة الفأرة لتفهم أكثر كيف تم ترتيب العناصر و كيف أن الكائن button1 سيحتل فقط المساحة التي يحتاجها مهما كان حجم كائن الـ VBox. بينما الكائن button2 سيظهر على كل المساحة المتبقية.