تطبيق وصل wassll لمتابعة مخصصات المحروقات

تنظيم العناصر بواسطة GridPane

التنظيم بواسطة ( GridPane ) من تسميته يتضح لنا أنه عبارة عن جدول نستطيع من خِلاله تنظيم العناصر في المشهَد. تعلّمنا كيفية إنشاء عناصر و إضافتها للمشهد و اليوم سوف نتعلم كيفية إستخدام GridPane لتنظيم العناصر في المشهد. و نحن عندما نقول عناصر يُقصَد بها ( الأزرار و النصوص و الحقول....الخ) أي العناصر التفاعلية. التي يتفاعل معها المستخدم مثل أزرار و مربعات نصوص و ComboBox...الخ.

سوف نستخدم الحزمة GridPane التي تتبع إلى layout و يتبعون للحزمة Scene و الحزمة TextField ايضاً. تابعة للحزمة Scene نستطيع من خلاله كتابة مربع نص و نستخدم الحزمة button لإنشاء زر. سوف نتعلم كيفية إنشاء عنصرين تفاعليين و هما مربع نص و زر و إضافتهم إلى الـ GridPane و إضافة GridPane للمشهد ثم إضافة المشهد للمقطع النهائي. الكلاس GridPane يتم إستخدامه لإنشاء حاوية تترتب الأشياء التي نضيفها فيها كجدول وهمي يتألف هذا الجدول من أسطر و أعمدة متساوية الحجم.

مثال 1

package mhamad;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class Mhamad extends Application {
    public void start(Stage stage) {
        TextField txt=new TextField();
        Button b=new Button("click");
        GridPane p=new GridPane();
        p.setHgap(10);
        p.setVgap(10);
        p.setMinSize(400, 400);
        p.setAlignment(Pos.CENTER);
        p.add(b, 0, 0);
        p.add(txt, 0, 1);
        Scene s=new Scene(p);
        stage.setScene(s);
        stage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

قبل الدخول للبدء بكتابة البرنامج قمنا بإستدعاء الحزم التي نحتاجها و منها حزمة geometry.Pos هي المسؤولة. عن محاذاة GridPane سواء للمنتصف أو يمين أو يسار. و الحزمة layout.GridPane هي المسؤولة عن تنظيم العناصر التفاعلية و هي زبدة هذا الدرس. و باقي الحزم التي تم إستدعاءها تعرّفنا عليها في الدروس السابقة من بداية دروس JavaFX. ثم دخلنا للدالة start و بدأنا بكتابة البرنامج و في البداية قمنا بإنشاء كلاس المربع النصي TextField. ثم أنشأنا كلاس الزر Button و من ثم قمنا بإنشاء كلاس الـ GridPane و أخذ الكائن p.

و بعدها قمنا بتحديد الحواشي الأفقية عن طريق setHgap و الحواشي العمودية عن طريق setVgap و أخذو الحاشي 10 للأفقي و العمودي. و قُمنا بتحديد حجم GridPane و هو 400 للعرض و 400 للطول بواسطة الدالة setMinSize. و قمنا بمحاذاة GridPane إلى منتصف الشاشة عن طريق setAlignment و القيمة التي أخذها CENTER أي في منتصف الشاشة. و أضفنا العناصر إلى GridPane بواسطة الدالة add للعمود الأول 0, 0 و العمود الثاني 0, 1 و اضفناهم للمشهد. و أضفنا المشهد إلى النموذج stage و أظهرنا الواجهة.

عند تشغيل الكود السابق سوف نحصل على النتيجة التالية

كما نلاحظ أنه تم وضع الزر في الخلية 0 و المربع النصي في الخلية 1 كما طلبنا منه فإذا قمنا بتغير مكان الخلايا عكسياً بالأمر p.add(txt, 1, 0) سوف تكون النتيجة.

نلاحظ أنه وضعنا الزر في الخلية 0,0 و وضعنا المربع النصي في الخلية 1,0 أي العمود التالي.

 

إنشاء نموذج تسجيل دخول بواسطة GridPane

سوف نستخدم نفس الحزم التي إستخدمناها سابقاً, إضافةً لحزم جديدة و هي:

1. الكلاس Button لإنشاء الزر.
2. الكلاس PasswordField لإنشاء تكست خاص بإدخال كلمة السر.
3. الكلاس TextField لأنشاء مربع نصي.
4. الكلاس GridPane الذي عن طريقه يمكننا تنظيم العناصر التفاعلية التي نقوم بإنشاءها.
5. الكلاس text.Text التي تستخدم لإنشاء النصوص.
6. الكلاس Stage.
7. الكلاس geometry.Pos تُستخدَم لمحاذاة الـ GridPane (في الوسط, اليمين, اليسار).

مثال 2

package mhamad;
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class Mhamad extends Application {   
    public void start(Stage stage) {
        Text t1=new Text("Email");
        Text t2=new Text("Password");
        TextField txt1=new TextField();
        PasswordField txt2=new PasswordField();
        Button b=new Button("Send");
        GridPane p=new GridPane();
        p.setMinSize(300, 300);
        p.setAlignment(Pos.CENTER);
        p.setHgap(5);
        p.setVgap(5);
        p.add(t1, 0, 0);
        p.add(txt1, 1, 0);
        p.add(t2, 0, 1);
        p.add(txt2, 1, 1);
        p.add(b, 0, 2);
        Scene s=new Scene(p);
        stage.setScene(s);
        stage.show();
    }
    public static void main(String[] args) {
        launch(args);
    } 
}

لقد إستخدمنا في هذا المثال حزم عديدة و هي: حزمة geometry.Pos تُستخدَم لمحاذاة GridPane سواء للوسط أو اليمين أو اليسار. و حزمة الزر Button و الحزمة PasswordField هي حزمة خاصة بإنشاء تكست خاص بإدخال كلمة مرور. و حزمة TextField الخاصة بالمربع النصي و حزمة GridPane الخاصة بتنظيم العناصر. و دخلنا للدالة start و بدأنا بكتابة الأكواد و في بدايتها أنشأنا ليبل t1 من أجل إدخال الإيميل و أنشأنا ليبل ثاني t2 من أجل حقل كلمة السر.

و أنشأنا كلاس مربع نصي بإسم txt1 عن طريق الكلاس TextField و كلاس كلمة المرور. txt2 عن طريق الكلاس PasswordField ثم أنشأنا كلاس الزر Button من أجل إرسال البيانات. بعد ذلك قمنا بإنشاء GridPane من أجل تنظيم العناصر و تحديد حجم GridPane عن طريق الدالة setMinSize و كانت. بطول 300 و عرض 300 ووضعنا محاذاتها في المنتصف بواسطة setAlignment. ثم قمنا بتحديد المسافة بين العنصرين من اليمين و الأعلى و الأسفل عن طريق setHgap و المحاذاة العمودية بين العناصر عن طريق setVgap.

وقمنا بإضافة عنوان الكائن t1 و إضافة المربع النصي في العمود المجاور و بعدها اضفنا الباسورد t2 و اضفناها للعمود الثاني. ثم اضفنا الزر في الأسفل بالصف الثالث و رقمه 2 أي الخلية 2 ثم أنشأنا المشهد و إضافته إلى الفورم و إظهار الفورم.

عند تشغيل هذا الكود سوف تكون نتيجته هي.