شرح الكلاس GridPane
الكلاس GridPane يستخدم لإنشاء حاوية تترتب الأشياء التي نضيفها فيها كجدول وهمي يتألف من أسطر و أعمدة متساوية الحجم.
إفتراضياً, حجم الـ GridPane يتحدد نسبة لحجم الأشياء الموضوعة فيه. أي كلما وضعت فيه أشياء كلما كبر حجمه. كما أنك تستطيع جعله يظهر على كل المساحة المتوفرة.
بالنسبة للأشياء التي تضيفها فيه فإنها تظهر في الأعلى ناحية اليسار. و أيضاً تستطيع تحديد مكان ظهورهم.
كما أنك تستطيع إضافة هامش ( فراغ ) بينهم حتى لا يظهروا بشكل متلاصق.
الآن, عند إنشاء كائن GridPane يجب تحديد من كم سطر و عامود يتألف. بعدها يصبح بإمكانك إضافة أي شيء تريد على سطر و عامود محدد فيه.
ملاحظة: أول سطر في كائن الـ GridPane يكون يملك رقم Index يساوي 0. و أول عامود في كل سطر يكون رقمه يكون يملك رقم Index يساوي 0.
بناء الكلاس GridPane
public class GridPane extends Pane
كونستركتورات الكلاس GridPane
الجدول التالي يحتوي على كونستركتورات الكلاس GridPane.
| الكونستركتور مع تعريفه | |
|---|---|
public GridPane()
ينشئ كائن من الكلاس GridPane يمثل حاوية فارغة ترتب الأشياء التي نضيفها فيها كجدول يتألف من أسطر و أعمدة متساوية الحجم. |
|
دوال الكلاس GridPane
الجدول التالي يحتوي على دوال الكلاس GridPane الأكثر إستخداماً.
| الدالة مع تعريفها | |
|---|---|
public void add(Node child, int columnIndex, int rowIndex)
تستخدم لإضافة شيء في مكان محدد في كائن الـ GridPane الذي قام باستدعائها.مكان الباراميتر child نمرر الشيء الذي نريد إضافته.مكان الباراميتر columnIndex نمرر رقم يمثل Index العامود الذي نريد إضافة الشيء عليه.مكان الباراميتر rowIndex نمرر رقم يمثل Index السطر الذي نريد إضافة الشيء عليه. |
|
public static void setColumnSpan(Node child, Integer value)
تستخدم لجعل أي شيء موضوع بداخل GridPane يظهر على أكثر من عامود واحد.مكان الباراميتر child نمرر الشيء الذي نريد جعله يظهر على أكثر من عامود.مكان الباراميتر value نمرر رقم يمثل عدد الأعمدة التي نريده أن يظهر عليها. |
|
public static void setRowSpan(Node child, Integer value)
تستخدم لجعل أي شيء موضوع بداخل GridPane يظهر على أكثر من سطر واحد.مكان الباراميتر child نمرر الشيء الذي نريد جعله يظهر على أكثر من سطر.مكان الباراميتر value نمرر رقم يمثل عدد الأسطر التي نريده أن يظهر عليها. |
|
public final void setAlignment(Pos value)
تستخدم لتحديد مكان ظهور الأشياء التي سيتم وضعها في كائن الـ GridPane الذي قام باستدعائها.مكان الباراميتر value نمرر إحدى ثوابت الكلاس Pos:
|
|
public final void setPadding(Insets value)
تستخدم لإضافة فراغ حول كائن الـ GridPane الذي قام باستدعائها.مكان الباراميتر value نمرر كائن من الكلاس Insets نحدد فيه حجم الفراغ الذي سيتم إضافته من الجهات الأربعة ( فوقه, يمينه, تحته, يساره ). |
|
public final void setHgap(double value)
تستخدم لتحديد حجم الفراغ أفقياً ( أي من اليمين و من اليسار ) بين كل شيئين يتم إضافتهما في كائن الـ GridPane الذي قام باستدعائها.مكان الباراميتر value نمرر رقم يمثل حجم الفراغ بالـ Pixel. |
|
public final void setVgap(double value)
تستخدم لتحديد حجم الفراغ عامودياً ( أي من الأعلى و من الأسفل ) بين كل شيئين يتم إضافتهما في كائن الـ GridPane الذي قام باستدعائها.مكان الباراميتر value نمرر رقم يمثل حجم الفراغ بالـ Pixel. |
|
public static void setMargin(Node child, Insets value)
تستخدم لإضافة فراغ حول أي شيء موضوع بداخل GridPane.مكان الباراميتر child نمرر الشيء الذي نريد إضافة فراغ حوله.مكان الباراميتر value نمرر كائن من الكلاس Insets نحدد فيه حجم الفراغ الذي سيتم إضافته للشيء من الجهات الأربعة ( فوقه, يمينه, تحته, يساره ). |
|
public static void setHgrow(Node child, Priority value)
تستخدم لتحديد ما إذا كان عرض الشيء الموضوع بداخل GridPane سيتأثر بعرضه أم أن عرضه سيظل ثابت.مكان الباراميتر child نمرر الشيء الذي نريد تحديد ما إن كان عرضه سيتأثر بعرض الـ GridPane أم لا.مكان الباراميتر value نمرر إحدى ثوابت الكلاس Priority التي تحدد ذلك:
|
|
public static void setVgrow(Node child, Priority value)
تستخدم لتحديد ما إذا كان طول الشيء الموضوع بداخل GridPane سيتأثر بطوله أم أن طوله سيظل ثابت.مكان الباراميتر child نمرر الشيء الذي نريد تحديد ما إن كان طوله سيتأثر بعرض الـ GridPane أم لا.مكان الباراميتر value نمرر إحدى ثوابت الكلاس Priority التي تحدد ذلك:
|
|
public final void setStyle(String value)
تستخدم لتعديل تصميم كائن الـ GridPane الذي قام بإستدعائها.مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ GridPane بأسلوب لغة CSS لإظهاره بالشكل الذي تريده. |
|
أمثلة شاملة في الكلاس GridPane
طريقة إنشاء كائن من الكلاس GridPane
المثال التالي يعلمك طريقة إنشاء كائن من الكلاس GridPane و وضعه كـ Root Node.
مثال
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
public class Main extends Application {
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ GridPane هنا قمنا بإنشاء كائن من الكلاس
GridPane root = new GridPane();
// root هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
Button button3 = new Button("Button 3");
Button button4 = new Button("Button 4");
Button button5 = new Button("Button 5");
Button button6 = new Button("Button 6");
// root في أول سطر في الكائن button3 و button2 و button1 هنا قمنا بإضافة الكائنات
root.add(button1, 0, 0);
root.add(button2, 1, 0);
root.add(button3, 2, 0);
// root في ثاني سطر في الكائن button6 و button5 و button4 هنا قمنا بإضافة الكائنات
root.add(button4, 0, 1);
root.add(button5, 1, 1);
root.add(button6, 2, 1);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 350, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX GridPane");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل
طريقة إضافة مسافة فارغة بين الأشياء التي نضيفها في GridPane
المثال التالي يعلمك طريقة إضافة مسافة فارغة بين الأشياء التي نضيفها في GridPane, بالإضافة إلى عرض محتوى الـ GridPane في الوسط.
مثال
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
public class Main extends Application {
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ GridPane هنا قمنا بإنشاء كائن من الكلاس
GridPane root = new GridPane();
// تظهر في وسطه root هنا جعلنا الأشياء التي نضيفها في الكائن
root.setAlignment(Pos.CENTER);
// و النافذة نفسها root هنا قمنا بإضافة هامش بمقدار 5 بيكسل بين الكائن
root.setPadding(new Insets(5));
// root هنا قمنا بإضافة هامش بمقدار 10 بيكسل أفقياً بين كل شيئين يتم إضافتهما في الكائن
root.setHgap(10);
// root هنا قمنا بإضافة هامش بمقدار 10 بيكسل عامودياً بين كل شيئين يتم إضافتهما في الكائن
root.setVgap(10);
// root هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
Button button3 = new Button("Button 3");
Button button4 = new Button("Button 4");
Button button5 = new Button("Button 5");
Button button6 = new Button("Button 6");
// root في أول سطر في الكائن button3 و button2 و button1 هنا قمنا بإضافة الكائنات
root.add(button1, 0, 0);
root.add(button2, 1, 0);
root.add(button3, 2, 0);
// root في ثاني سطر في الكائن button6 و button5 و button4 هنا قمنا بإضافة الكائنات
root.add(button4, 0, 1);
root.add(button5, 1, 1);
root.add(button6, 2, 1);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 350, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX GridPane");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
•ببطئ قم بتكبير حجم النافذة و تصغيرها بواسطة الفأرة لتفهم أكثر كيف تم ترتيب العناصر.
طريقة جعل محتوى الـ GridPane يظهر على كل المساحة المتوفرة
المثال التالي يعلمك طريقة جعل محتوى الـ GridPane يظهر على كل المساحة المتوفرة .
مثال
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
public class Main extends Application {
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ GridPane هنا قمنا بإنشاء كائن من الكلاس
GridPane root = new GridPane();
// root هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
Button button3 = new Button("Button 3");
Button button4 = new Button("Button 4");
Button button5 = new Button("Button 5");
Button button6 = new Button("Button 6");
// و هو كل المساحة المتوفرة بالطول و العرض button6 و button5 ,button4 ,button3 ,button2 ,button1 هنا قمنا بجعل الحجم الأقصى للكائنات
button1.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
button2.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
button3.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
button4.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
button5.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
button6.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
// يكبر لأقصى حدود ممكنة button6 و button5 ,button4 ,button3 ,button2 ,button1 هنا جعلنا طول الكائنات
GridPane.setVgrow(button1, Priority.ALWAYS);
GridPane.setVgrow(button2, Priority.ALWAYS);
GridPane.setVgrow(button3, Priority.ALWAYS);
GridPane.setVgrow(button4, Priority.ALWAYS);
GridPane.setVgrow(button5, Priority.ALWAYS);
GridPane.setVgrow(button6, Priority.ALWAYS);
// يكبر لأقصى حدود ممكنة button6 و button5 ,button4 ,button3 ,button2 ,button1 هنا جعلنا عرض الكائنات
GridPane.setHgrow(button1, Priority.ALWAYS);
GridPane.setHgrow(button2, Priority.ALWAYS);
GridPane.setHgrow(button3, Priority.ALWAYS);
GridPane.setHgrow(button4, Priority.ALWAYS);
GridPane.setHgrow(button5, Priority.ALWAYS);
GridPane.setHgrow(button6, Priority.ALWAYS);
// root في أول سطر في الكائن button3 و button2 و button1 هنا قمنا بإضافة الكائنات
root.add(button1, 0, 0);
root.add(button2, 1, 0);
root.add(button3, 2, 0);
// root في ثاني سطر في الكائن button6 و button5 و button4 هنا قمنا بإضافة الكائنات
root.add(button4, 0, 1);
root.add(button5, 1, 1);
root.add(button6, 2, 1);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 350, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX GridPane");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة إظهار الشيء الموضوع في GridPane على أكثر من سطر أو عامود
المثال التالي يعلمك طريقة إظهار الشيء الموضوع في GridPane على أكثر من سطر أو عامود .
مثال
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.control.Button;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
public class Main extends Application {
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ GridPane هنا قمنا بإنشاء كائن من الكلاس
GridPane root = new GridPane();
// تظهر في وسطه root هنا جعلنا الأشياء التي نضيفها في الكائن
root.setAlignment(Pos.CENTER);
// و النافذة نفسها root هنا قمنا بإضافة هامش بمقدار 5 بيكسل بين الكائن
root.setPadding(new Insets(5));
// root هنا قمنا بإضافة هامش بمقدار 10 بيكسل أفقياً بين كل شيئين يتم إضافتهما في الكائن
root.setHgap(10);
// root هنا قمنا بإضافة هامش بمقدار 10 بيكسل عامودياً بين كل شيئين يتم إضافتهما في الكائن
root.setVgap(10);
// root هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
Button button3 = new Button("Button 3");
Button button4 = new Button("Button 4");
// و هو كل المساحة المتوفرة بالطول و العرض button4 و button3 ,button2 ,button1 هنا قمنا بجعل الحجم الأقصى للكائنات
button1.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
button2.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
button3.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
button4.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
// يكبر لأقصى حدود ممكنة button4 و button3 ,button2 ,button1 هنا جعلنا طول الكائنات
GridPane.setVgrow(button1, Priority.ALWAYS);
GridPane.setVgrow(button2, Priority.ALWAYS);
GridPane.setVgrow(button3, Priority.ALWAYS);
GridPane.setVgrow(button4, Priority.ALWAYS);
// يكبر لأقصى حدود ممكنة button4 ,button3 ,button2 ,button1 هنا جعلنا عرض الكائنات
GridPane.setHgrow(button1, Priority.ALWAYS);
GridPane.setHgrow(button2, Priority.ALWAYS);
GridPane.setHgrow(button3, Priority.ALWAYS);
GridPane.setHgrow(button4, Priority.ALWAYS);
// root في العامود الأول من السطر الأول button2 هنا قمنا بإضافة الكائن
root.add(button1, 0, 0);
// يظهر على عامودين button1 هنا جعلنا الكائن
GridPane.setRowSpan(button1, 2);
// root في العامود الثاني من السطر الأول button2 هنا قمنا بإضافة الكائن
root.add(button2, 1, 0);
// يظهر على سطرين button2 هنا جعلنا الكائن
GridPane.setColumnSpan(button2, 2);
// root في العامود الثاني من السطر الثاني button3 هنا قمنا بإضافة الكائن
root.add(button3, 1, 1);
// root في العامود الثالث من السطر الثاني button4 هنا قمنا بإضافة الكائن
root.add(button4, 2, 1);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 350, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX GridPane");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
