شرح الكلاس Pane
الكلاس Pane يستخدم لإنشاء حاوية لا تترتب فيها الأشياء بشكل تلقائي, و بالتالي أنت من تتولى تحديد أماكن الأشياء التي تضيفها فيها تماماَ مثل الكلاس Group الذي شرحناه في الدرس السابق مع بعض الفوارق التي سنتطرق إليها .
إفتراضياً, الأشياء التي نضيفها في كائن الـ Pane تظهر في الأعلى من جهة اليسار. و في حال قمت بإضافة عدة أشياء و لم تحدد أمكانها, سيظهر آخر شيء أضفته في الأعلى.
دائماً, آخر شيء تضيفه يظهر في الأعلى, أي إذا قمت بإضافة شيئين في مكان واحد, سيظهر آخر شيء أضفته فيه فوق الشيء الذي كان موجوداً.
معلومة عن الكلاس Pane
حجم كائن الـ Pane يمكن تحديده لكن لا يمكن جعله يتغير بشكل تلقائي مع تغير حجم النافذة.
أيضاً, حجم الأشياء التي نضعها بداخل كائن الـ Pane يمكن تحديده لكن لا يمكن جعله تلقائي نسبة لحجم الـ Pane.
بناء الكلاس Pane
@DefaultProperty(value="children") public class Pane extends Region
كونستركتورات الكلاس Pane
الجدول التالي يحتوي على كونستركتورات الكلاس Pane .
| الكونستركتور مع تعريفه | |
|---|---|
Pane()
ينشئ كائن من الكلاس Pane يمثل حاوية فارغة. |
|
Pane(Node... children)
ينشئ كائن من الكلاس Pane يمثل حاوية مع تحديد الأشياء التي نريد وضعها فيها.مكان الباراميتر children نمرر الأشياء التي نريد وضعها فيها مع وضع فاصلة بين كل شيئين. |
|
دوال الكلاس Pane
الجدول التالي يحتوي على دوال الكلاس Pane الأكثر إستخداماً.
| الدالة مع تعريفها | |
|---|---|
public void setPrefSize(double prefWidth, double prefHeight)
تستخدم لتحديد حجم كائن الـ Pane الذي قام باستدعائها.
|
|
public final void setTranslateX(double value)
تستخدم لتحديد مكان كائن الـ Pane الذي قام باستدعائها أفقياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من اليسار إلى اليمين. |
|
public final void setTranslateY(double value)
تستخدم لتحديد مكان كائن الـ Pane الذي قام باستدعائها عامودياً.مكان الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من الأعلى إلى الأسفل. |
|
public final void setBackground(Background value)
تستخدم لوضع لون أو صورة كخلفية لكائن الـ Pane الذي قام بإستدعائها.مكان الباراميتر value نضع كائن من الكلاس Background يشير إلى درجة اللون أو الصورة التي سيتم وضعها كخلفية. |
|
public final void setStyle(String value)
تستخدم لتعديل تصميم كائن الـ Pane الذي قام بإستدعائها.مكان الباراميتر value يمكنك تمرير إسم و قيمة أي خاصية تريد تعديلها في كائن الـ Pane بأسلوب لغة CSS لإظهاره بالشكل الذي تريده. |
|
public ObservableList<Node> getChildren()
ترجع كائن نوعه ObservableList يمثل محتوى كائن الـ Pane الذي قام بإستدعائها مما يجعلك قادراً على إضافة كائنات جديدة أو حذف كائنات موجودة فيه. |
|
أمثلة شاملة في الكلاس Pane
طريقة وضع محتوى النافذة في Pane
المثال التالي يعلمك طريقة إنشاء كائن من الكلاس Pane و وضعه كـ Root Node.
ملاحظة: النافذة تحتوي على 3 كائنات من الكلاس Button لكنها موضوعة فوق بعضها البعض, و لهذا السبب آخر Button هو فقط الذي يظهر.
مثال
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
public class Main extends Application {
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ Pane هنا قمنا بإنشاء كائن من الكلاس
Pane root = new Pane();
// 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, 350, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Pane");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة تحديد حجم و مكان ظهور الأشياء التي نضيفها في Pane
المثال التالي يعلمك طريقة تحديد حجم و مكان ظهور الأشياء التي نضيفها في Pane .
مثال
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
public class Main extends Application {
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ Pane هنا قمنا بإنشاء كائن من الكلاس
Pane root = new Pane();
// root هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
Button button3 = new Button("Button 3");
// root هنا قمنا بتحديد حجم جميع الأشياء التي سنضيفها في الكائن
button1.setPrefSize(150, 30);
button2.setPrefSize(150, 30);
button3.setPrefSize(150, 30);
// root هنا قمنا بتحديد أماكن ظهور الأشياء التي سنضيفها في الكائن
button1.setTranslateX(50);
button1.setTranslateY(60);
button2.setTranslateX(100);
button2.setTranslateY(110);
button3.setTranslateX(150);
button3.setTranslateY(160);
// root في الكائن button3 و button2 و button1 هنا قمنا بإضافة الكائنات
root.getChildren().add(button1);
root.getChildren().add(button2);
root.getChildren().add(button3);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 350, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Pane");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
تحديد لون خلفية الـ Pane
المثال التالي يعلمك طريقة تحديد لون خلفية الـ Pane.
كما أننا سنقوم بوضع Pane بداخل Pane تمهيداً للتمرين التالي.
مثال
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.layout.Pane;
public class Main extends Application {
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ Pane هنا قمنا بإنشاء كائن من الكلاس
Pane root = new Pane();
// root و الذي ننوي وضعه بداخل الكائن Pane هنا قمنا بإنشاء كائن آخر من الكلاس
Pane pane = new Pane();
// زهري root هنا جعلنا لون خلفية الكائن
root.setStyle("-fx-background-color: pink");
// بالإضافة إلى حجمه و مكان ظهوره pane هنا قمنا بتحديد لون خلفية الكائن
pane.setStyle("-fx-background-color: cadetblue");
pane.setPrefSize(250, 200);
pane.setTranslateX(50);
pane.setTranslateY(25);
// root في الكائن pane هنا قمنا بإضافة الكائن
root.getChildren().add(pane);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 350, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Pane");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
طريقة وضع Pane بداخل Pane
المثال التالي يعلمك طريقة وضع Pane بداخل Pane.
ملاحظة: هنا يجب تحديد أماكن الأشياء التي نضيفها في الـ Pane الداخلي نسبة لمكانه و ليس نسبة لمكان الـ Pane الخارجي.
مثال
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
public class Main extends Application {
@Override
public void start(Stage stage) {
// في النافذة Root Node و الذي ننوي جعله الـ Pane هنا قمنا بإنشاء كائن من الكلاس
Pane root = new Pane();
// root و الذي ننوي وضعه بداخل الكائن Pane هنا قمنا بإنشاء كائن آخر من الكلاس
Pane pane = new Pane();
// زهري root هنا جعلنا لون خلفية الكائن
root.setStyle("-fx-background-color: pink");
// بالإضافة إلى حجمه و مكان ظهوره pane هنا قمنا بتحديد لون خلفية الكائن
pane.setStyle("-fx-background-color: cadetblue");
pane.setPrefSize(250, 200);
pane.setTranslateX(50);
pane.setTranslateY(25);
// pane هنا قمنا بإنشاء جميع الأشياء التي سنضيفها في الكائن
Button button1 = new Button("Button 1");
Button button2 = new Button("Button 2");
Button button3 = new Button("Button 3");
// pane هنا قمنا بتحديد حجم الأشياء التي سنضيفها في الكائن
button1.setPrefSize(150, 30);
button2.setPrefSize(150, 30);
button3.setPrefSize(150, 30);
// pane نسبة لموقع الكائن pane هنا قمنا بتحديد مكان ظهور الأشياء التي سنضيفها في الكائن
button1.setTranslateX(50);
button1.setTranslateY(30);
button2.setTranslateX(50);
button2.setTranslateY(90);
button3.setTranslateX(50);
button3.setTranslateY(150);
// root في الكائن pane هنا قمنا بإضافة الكائن
root.getChildren().add(pane);
// pane في الكائن button3 و button2 و button1 هنا قمنا بإضافة الكائنات
pane.getChildren().add(button1);
pane.getChildren().add(button2);
pane.getChildren().add(button3);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 350, 250);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Pane");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
•ستظهر لك النافذة التالية عند التشغيل.
