عناصر JavaFX والتخطيطات وFXML

التصميم باستخدام Scene Builder

18 دقيقة الدرس 8 من 12

التصميم باستخدام Scene Builder

في كل درس سابق كنت تبني واجهة المستخدم بكتابة Java أو FXML يدويًا. هذا الأسلوب واضح للتعلّم، لكن في مشروع حقيقي — نموذج بعشرين حقلًا وشريط أدوات وتخطيط منقسم — تصبح كتابة FXML باليد سريعة الوقوع في الأخطاء. Scene Builder هو محرر بصري مجاني مستقل من Gluon يتيح لك سحب عناصر التحكم إلى لوحة القماش ورؤية ملف FXML الناتج في الوقت الفعلي. لا يحل محل معرفة FXML بل يكمّلها بجعل العمل أسرع وتصحيح أخطاء التخطيط قبل تشغيل التطبيق.

ما هو Scene Builder حقًا

Scene Builder هو أداة وقت التصميم. يقرأ ملفات FXML القياسية ويكتبها — وهي نفس الملفات التي يقرأها FXMLLoader في وقت التشغيل. لا يوجد إطار عمل مخفي ولا خطوة توليد كود ولا إغلاق على أدوات بعينها: كل بيكسل تُرتّبه بصريًا يُعبَّر عنه بـ XML عادي يمكنك قراءته ومقارنته وتسليمه لنظام التحكم في الإصدارات مثل أي ملف مصدر آخر.

Scene Builder مقابل مصممي IntelliJ/Eclipse: توفر JetBrains وEclipse محررات نماذج FXML أساسية، لكنها تتأخر كثيرًا خلف Scene Builder في الميزات والجودة. Scene Builder هو المعيار المجتمعي؛ استخدمه.

تثبيت Scene Builder

نزّل المثبّت لنظام تشغيلك من gluonhq.com/products/scene-builder. يمكن لـ IntelliJ IDEA تنزيله أيضًا: انتقل إلى Settings → Languages & Frameworks → JavaFX وانقر Download Scene Builder. بعد التثبيت، أشر IntelliJ إلى الملف التنفيذي حتى يفتح ملفات .fxml بنقرة واحدة.

واجهة Scene Builder

عند فتح Scene Builder ترى أربعة مناطق رئيسية:

لوحة المكتبة (يسار): جميع عناصر التحكم المتاحة مُجمَّعة حسب الفئة — Layout وControls وCharts وغيرها. اكتب في مربع البحث للتصفية.
لوحة الوثيقة / التسلسل الهرمي (يسار، النصف السفلي): البنية الشجرية للمشهد. تحديد عقدة هنا يحددها على القماش أيضًا — ضروري للنقر على العناصر المتداخلة بعمق.
القماش (الوسط): المعاينة الحية للمشهد. اسحب عناصر التحكم من المكتبة وأسقطها هنا.
لوحة الفحص (يمين): ثلاث تبويبات — Properties (المظهر البصري) وLayout (الحجم والهامش والمحاذاة) وCode (fx:id وأسماء معالجات الأحداث). هنا تربط واجهة المستخدم بالمتحكم.

سير عمل نموذجي في Scene Builder

يتناسب سير العمل بشكل طبيعي في حلقة قصيرة:

أنشئ ملف FXML أو افتحه. في IntelliJ، انقر بزر الماوس الأيمن على حزمة ← New ← FXML File، أو افتح ملفًا موجودًا وانقر Open in Scene Builder في أعلى المحرر.
حدد الحاوية الجذر. في لوحة التسلسل الهرمي، العقدة الجذر محددة مسبقًا (مثل AnchorPane). يمكنك تغييرها عبر النقر بزر الأيمن ← Wrap In.
اسحب عناصر التحكم من المكتبة إلى القماش. يضع Scene Builder كل عنصر في أقرب نقطة إدراج صالحة داخل قواعد الحاوية الحالية (مثلًا يرصّها VBox رأسيًا).
اضبط الخصائص في لوحة الفحص. انقر على عنصر ← تبويب Properties لضبط نصه وخطه وتعبئته أو فئة الأسلوب. استخدم تبويب Layout لضبط العرض والارتفاع المفضلَين والهامش والمحاذاة.
عيّن fx:id وأسماء المعالجات في تبويب Code. كل عنصر تحكم تحتاج للإشارة إليه من Java يحصل على fx:id فريد. كل زر يطلق حدثًا يحصل على اسم معالج onAction — بالاتفاقية #handleSomething.
حدد فئة المتحكم في لوحة الوثيقة. وسّع قسم Controller واكتب اسم الفئة المؤهل بالكامل (مثل com.example.FormController). يستخدم Scene Builder هذا للتحقق من أن قيم fx:id وأسماء المعالجات موجودة فعلًا في تلك الفئة.
احفظ (Ctrl+S / Cmd+S). يكتب Scene Builder ملف FXML. ارجع إلى IntelliJ — المصدر محدَّث فورًا.

استخدم فئات CSS بدلًا من النمط المضمّن. في تبويب Properties يمكنك ضبط سلسلة Style مضمّنة، لكنها صعبة الصيانة. بدلًا من ذلك، أضف Style Class (مثل form-field) وعرّف القواعد في ملف .css منفصل محمَّل بمشهدك. يحترم Scene Builder أوراق الأنماط الخاصة بك إذا أضفتها عبر View → Scene Style Sheets.

قراءة FXML الناتج

بعد وضع TextField وButton داخل VBox وتعيين معرّفات لهما، يُنتج Scene Builder شيئًا كهذا:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.VBox?>

<VBox alignment="CENTER" spacing="12.0" xmlns="http://javafx.com/javafx/21"
      xmlns:fx="http://javafx.com/fxml/1"
      fx:controller="com.example.FormController">

    <TextField fx:id="nameField" promptText="Enter your name" />
    <Button fx:id="submitBtn" text="Submit" onAction="#handleSubmit" />

</VBox>

لاحظ أن Scene Builder كتب تعليمات المعالجة ?import وسمات xmlns وربط fx:controller تلقائيًا — وهو نمطيّ كان سيستغرق وقتًا لو كتبته يدويًا.

الربط بالمتحكم

بعد حفظ FXML، يجب أن يُعلن متحكمك عن الحقول والأساليب المطابقة:

package com.example;

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;

public class FormController {

    @FXML
    private TextField nameField;   // يطابق fx:id="nameField"

    @FXML
    private Button submitBtn;      // يطابق fx:id="submitBtn"

    @FXML
    private void handleSubmit() {  // يطابق onAction="#handleSubmit"
        String name = nameField.getText().trim();
        if (!name.isEmpty()) {
            System.out.println("Hello, " + name + "!");
        }
    }
}

إذا لم يتطابق fx:id في FXML مع اسم الحقل في المتحكم، يرمي FXMLLoader استثناء IllegalAccessException أو يترك الحقل فارغًا بصمت — وهو خطأ شائع للمبتدئين. يرصد التحقق في تبويب Code الخاص بـ Scene Builder (الأيقونات الخضراء/الحمراء بجانب كل معرّف) هذه التعارضات قبل تشغيل التطبيق.

تحقق دائمًا من مسار فئة المتحكم. يخزّن Scene Builder اسم فئة المتحكم كسلسلة نصية عادية. إذا أعدت تسمية الفئة أو نقلتها في IntelliJ دون تحديث سمة fx:controller في FXML، سيرمي التطبيق ClassNotFoundException في وقت التشغيل. أعد التسمية عبر أداة الإعادة المدركة لـ FXML في IntelliJ (نقر أيمن ← Refactor ← Rename) للحفاظ على التزامن.

نصائح عملية للعمل اليومي مع Scene Builder

المعاينة الحية (Ctrl+P / Cmd+P): تتيح لك قائمة Preview في Scene Builder عرض المشهد كما سيبدو في وقت التشغيل بما فيه CSS. استخدمها قبل العودة إلى IntelliJ.
Wrap / Unwrap: انقر بزر الأيمن على أي عقدة في التسلسل الهرمي ← Wrap In لإضافة حاوية أب (مثلًا لفّ Button مجردًا في HBox) دون حذفه وإعادة إنشائه.
التراجع عميق: Ctrl+Z يعمل بشكل موثوق عبر تغييرات خصائص متعددة، لذا جرّب بحرية.
View → Show Sample Data: لـ TableView وListView، يمكن لـ Scene Builder ملء بعض الصفوف الوهمية لجعل التخطيط يبدو واقعيًا أثناء التصميم.
المكوّنات المخصصة: إذا كان لديك ودجت قابل لإعادة الاستخدام مبني كزوج FXML + متحكم، يمكنك استيراد ملف JAR الخاص به إلى لوحة المكتبة في Scene Builder وسحبه إلى القماش مثل أي عنصر تحكم مدمج.

الخلاصة

Scene Builder هو محرر FXML مرئي يتحدث نفس تنسيق الملف الذي يحمّله تطبيقك في وقت التشغيل. سير العمل الأساسي هو: اسحب عناصر التحكم ← اضبط الخصائص ← عيّن fx:id وأسماء المعالجات في تبويب Code ← حدد فئة المتحكم ← احفظ. الناتج ملف FXML نظيف يقرأه FXMLLoader دون تعديل. في الدرس القادم ستُكمل الصورة بتنسيق ذلك FXML بـ CSS وترى كيف يعمل الثالوث الكامل متحكم-FXML-CSS معًا في شاشة منتهية.