مكونات التحكم البسيطة في واجهة المستخدم في مكتبة JavaFX

تُعد JavaFX واحدة من أقوى المكتبات الحديثة لتطوير واجهات المستخدم الرسومية (GUI) بلغة Java، وقد جاءت لتُحل محل مكتبة Swing التي كانت تُستخدم سابقًا. تمتاز JavaFX بتقديم عناصر تحكم (Controls) متطورة، ومخصصة لبناء تطبيقات مرئية متقدمة تتسم بالسلاسة وسهولة الاستخدام، بالإضافة إلى إمكانية تخصيص الواجهة وفقًا لاحتياجات المستخدم من خلال CSS وFXML. ومن أبرز مزايا JavaFX هو دعمه لمجموعة غنية من مكونات التحكم (UI Controls)، التي تُستخدم لتكوين واجهات تفاعلية ومرنة.

أولًا: مفهوم مكونات التحكم (UI Controls) في JavaFX

مكونات التحكم هي اللبنات الأساسية لبناء واجهات المستخدم في JavaFX. تُستخدم هذه المكونات للتفاعل مع المستخدم، مثل عرض البيانات أو إدخال المعلومات أو التحكم في الأحداث. تشمل هذه المكونات عناصر مثل الأزرار، مربعات النصوص، مربعات الاختيار، القوائم المنسدلة، وأشرطة التمرير وغيرها.

يتم تنظيم هذه المكونات ضمن مشهد (Scene) يتم عرضه داخل نافذة (Stage)، مما يتيح إنشاء واجهات رسومية مرنة تُمكّن المستخدم من التفاعل مع البرنامج بشكل ديناميكي.

ثانيًا: المكونات البسيطة في JavaFX

في JavaFX، تُصنّف مكونات التحكم إلى نوعين: مكونات تحكم بسيطة وأخرى متقدمة. في هذا المقال، سنركّز على المكونات البسيطة التي تُعد حجر الأساس في أي واجهة رسومية.

1. الزر (Button)

الزر هو من أكثر مكونات التحكم استخدامًا. يُستخدم لتنفيذ إجراء معين عندما ينقر المستخدم عليه. يمكن تخصيص شكله ونصه ولونه عبر CSS.

java
CopyEdit
Button button = new Button("انقر هنا");
button.setOnAction(e -> System.out.println("تم النقر على الزر"));

من أهم خصائص الزر:

• setText(String text): لتحديد النص داخل الزر.

• setDisable(boolean value): لتعطيل الزر أو تمكينه.

• setGraphic(Node graphic): لإضافة أيقونة أو صورة داخل الزر.

2. تصنيف النصوص (Label)

تصنيف النصوص يُستخدم لعرض نصوص ثابتة لا يمكن للمستخدم تعديلها. يُفيد في توضيح الوظائف أو إظهار نتائج.

java
CopyEdit
Label label = new Label("مرحبًا بك في JavaFX");

يمكن تنسيقه بخطوط وألوان مختلفة باستخدام CSS أو API داخلي مثل setStyle.

3. حقل النص (TextField)

يُستخدم حقل النص لإدخال سطر نصي واحد من المستخدم. يمكن تخصيصه لقبول أرقام فقط أو نصوص أو بريد إلكتروني، وفقًا للحاجة.

java
CopyEdit
TextField textField = new TextField();
textField.setPromptText("أدخل اسمك هنا");

يُوفر أيضًا عدة أحداث مثل:

• onAction: عند الضغط على Enter.

• textProperty(): لمراقبة تغير النص.

4. منطقة النصوص (TextArea)

تشبه TextField ولكنها تسمح بإدخال نصوص متعددة الأسطر. تُستخدم في حالات مثل كتابة تعليقات أو وصف مطوّل.

java
CopyEdit
TextArea textArea = new TextArea();
textArea.setPromptText("اكتب ملاحظاتك هنا");

5. مربع الاختيار (CheckBox)

يُستخدم لتوفير خيارين: مفعل أو غير مفعل. ويمكن استخدام عدة مربعات اختيار في نفس الواجهة.

java
CopyEdit
CheckBox checkBox = new CheckBox("أوافق على الشروط");

يمتاز بالخصائص التالية:

• isSelected(): للتحقق مما إذا تم اختياره.

• setSelected(boolean value): لتعيين حالته.

6. زر التبديل (RadioButton)

يُستخدم في مجموعة من الخيارات التي يُسمح باختيار واحد منها فقط. يتم وضعها ضمن ToggleGroup.

java
CopyEdit
ToggleGroup group = new ToggleGroup();

RadioButton option1 = new RadioButton("الخيار 1");
option1.setToggleGroup(group);

RadioButton option2 = new RadioButton("الخيار 2");
option2.setToggleGroup(group);

7. القائمة المنسدلة (ComboBox)

توفر قائمة من الخيارات المنسدلة، يُمكن من خلالها اختيار قيمة واحدة.

java
CopyEdit
ComboBox comboBox = new ComboBox<>();
comboBox.getItems().addAll("القاهرة", "الرياض", "بيروت");
comboBox.setValue("القاهرة");

تُستخدم كثيرًا في واجهات الإدخال، خصوصًا عند وجود عدد محدود من الخيارات.

8. شريط التمرير (Slider)

يسمح للمستخدم باختيار قيمة رقمية ضمن نطاق معين عن طريق سحب المؤشر.

java
CopyEdit
Slider slider = new Slider(0, 100, 50);
slider.setShowTickLabels(true);
slider.setShowTickMarks(true);

يُمكن استخدامه لضبط الصوت، الإضاءة، أو قيم أخرى.

9. شريط التقدم (ProgressBar) ومؤشر التقدم (ProgressIndicator)

يُستخدم هذان المكونان لعرض تقدم عملية معينة. يُمكن عرض شريط أفقي أو دائرة.

java
CopyEdit
ProgressBar progressBar = new ProgressBar(0.5); // 50%
ProgressIndicator progressIndicator = new ProgressIndicator(0.75); // 75%

يُمكن استخدامهما مع مهام زمنية أو تحميل بيانات.

10. التاريخ والوقت (DatePicker)

يُستخدم هذا العنصر لاختيار تاريخ باستخدام تقويم منبثق.

java
CopyEdit
DatePicker datePicker = new DatePicker();
datePicker.setValue(LocalDate.now());

يدعم اللغات المختلفة ويمكن تخصيصه ليتناسب مع التقويم الهجري أو الميلادي.

ثالثًا: تنسيق مكونات التحكم باستخدام CSS

تتميز JavaFX بإمكانية تخصيص المظهر العام للمكونات باستخدام CSS، مما يوفر مستوى عاليًا من التحكم في التصميم دون الحاجة لتغيير الكود البرمجي. يمكن على سبيل المثال:

css
CopyEdit
.button {
    -fx-background-color: #3498db;
    -fx-text-fill: white;
    -fx-font-size: 14px;
}

وذلك يسمح بفصل منطق الواجهة عن مظهرها، وهو أحد مبادئ التصميم الحديثة.

رابعًا: تنظيم الواجهة باستخدام الحاويات (Layouts)

المكونات البسيطة تحتاج إلى تنظيم ضمن حاويات Layout حتى تُعرض بطريقة منظمة وسلسة. من أشهر الحاويات:

• VBox: تنظيم عمودي.

• HBox: تنظيم أفقي.

• GridPane: شبكة من الصفوف والأعمدة.

• BorderPane: تقسيم النافذة إلى خمسة مناطق (أعلى، أسفل، يمين، يسار، وسط).

• StackPane: تكديس العناصر فوق بعضها.

مثال على استخدام VBox:

java
CopyEdit
VBox vbox = new VBox(10); // مسافة 10 بيكسل بين العناصر
vbox.getChildren().addAll(label, textField, button);

خامسًا: ربط الأحداث بمكونات التحكم

يُمكن لمكونات التحكم التفاعل مع المستخدم من خلال الأحداث مثل الضغط، الإدخال، أو التحديد. JavaFX تعتمد على مستمعات الأحداث (Event Listeners) لربط هذه التفاعلات بالمنطق البرمجي.

مثال على الحدث:

java
CopyEdit
button.setOnAction(event -> {
    String name = textField.getText();
    label.setText("مرحبًا " + name);
});

سادسًا: جدول لمقارنة مكونات التحكم الأساسية

سابعًا: التوافق مع FXML وScene Builder

تُسهل JavaFX عملية التصميم من خلال استخدام FXML، وهي لغة تعتمد على XML لوصف واجهات المستخدم. يمكن للمبرمج تصميم الواجهة باستخدام Scene Builder، أداة رسومية تسهل بناء الواجهة وسحب المكونات بسهولة، ثم ربطها بمنطق التطبيق من خلال Java Controller.

مثال على FXML:

xml
CopyEdit
<Button text="انقر" onAction="#handleClick"/>

ويُربط هذا الزر بدالة في كلاس الـ Controller:

java
CopyEdit
@FXML
private void handleClick(ActionEvent event) {
    System.out.println("تم النقر");
}

ثامنًا: مزايا استخدام مكونات التحكم البسيطة

• سهولة التعلم والتطوير: تساعد على بناء تطبيقات بسهولة للمبتدئين والمطورين المتقدمين.

• دعم للـ CSS وFXML: فصل التصميم عن المنطق البرمجي.

• دعم التفاعل الديناميكي: يمكن برمجتها للتفاعل مع المستخدم بسهولة.

• أداء عالي: مكونات JavaFX أكثر سلاسة وتوافقًا مع الأجهزة الحديثة من Swing.

• دعم متعدد المنصات: تطبيقات JavaFX تعمل على Windows، macOS وLinux.

تاسعًا: الاستخدامات التطبيقية لمكونات التحكم البسيطة

تُستخدم هذه المكونات في تصميم تطبيقات سطح المكتب المتنوعة مثل:

• أنظمة إدارة المخزون.

• واجهات تسجيل الدخول.

• أدوات الكتابة والتحرير.

• تطبيقات التعليم والتدريب.

• أدوات تحليل البيانات والرسوم البيانية.

عاشرًا: الخلاصة

تمثل مكونات التحكم البسيطة في JavaFX النواة الأساسية لأي تطبيق رسومي مبني باستخدام هذه المكتبة. توفر هذه المكونات بيئة غنية لإنشاء واجهات متقدمة وسهلة الاستخدام، وتدعم مجموعة من الأدوات المساعدة التي تُمكن المطور من تخصيص وتوسيع وظائفها لتناسب مختلف الاحتياجات. إن فهم كيفية استخدام هذه العناصر وتخصيصها، وتنظيمها ضمن هيكل واجهة مرن، يمثل حجر الأساس لأي مشروع ناجح في JavaFX.

المراجع:

1. JavaFX Documentation – Oracle

2. JavaFX API Reference – Java SE Documentation