تعلم JavaFx ..مقال 4 _ واجهة المستخدم الرسومية _ الكلاس Label

إرسال مساهمة في موضوع

اذهب الى الأسفل

تعلم JavaFx ..مقال 4 _ واجهة المستخدم الرسومية _ الكلاس Label

مُساهمة من طرف زهراء في الجمعة أكتوبر 12, 2018 1:19 pm

بسم الله الرحمن الرحيم

أهلا بكم

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

مقدمة :

الكلاس Label يستخدم لإضافة عنوان (Label) في واجهة المستخدم.و محتوى هذا العنوان يمكن أن يكون: نص, أيقونة, نص و أيقونة بجانبه

كونستركتورات الكلاس Label :

_
الكود:
public Label()

ينشئ كائن من الكلاس Label يمثل عنوان فارغ.

_
الكود:
public Label(String text)

ينشئ كائن من الكلاس Label يمثل عنوان.مكان الباراميتر text نمرر النص الذي نريد وضعه كعنوان

_
الكود:
public Label(String text, Node graphic)

ينشئ كائن من الكلاس Label يمثل نص و أيقونة معاً كعنوان.


  • الباراميتر text نمرر النص الذي نريد وضعه في العنوان.
  • الباراميتر graphic نمرر كائن من الكلاس Node يمثل الأيقونة التي سيتم وضعها في العنوان


كيفية إنشاء الكلاس Label

الخطوات التالية تبين كيفية انشاء Label بسيط و إضافته النافذة

1_استيراد المكتبة التى تحتوى على عناصر واجهة المستخدام الرسومية وتحدديد الكلاس Label  منها
الكود:
import javafx.scene.control.Label;

2_إنشاء كائن من الكلاس Label يمثل العنوان الذي نريد إضافته في النافذة
الكود:
Label label = new Label("Welcome to http://egy-tech.forumegypt.net");



3_تحديد مكان ظهور الكائن Label فى النافذة
الكود:
label.setTranslateX(180);
        label.setTranslateY(140);

وكما تلاحظ اعلاه ما يلى :

  • الدالة setTranslateX : تستخدم لتحديد مكان الـ Label الذي قام باستدعائها أفقياً.. الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من اليسار إلى اليمين.
  • الدالة setTranslateY : تستخدم لتحديد مكان الـ Label الذي قام باستدعائها عامودياً... الباراميتر value نضع رقم يمثل كم Pixel سيتم إزاحته من الأعلى إلى الأسفل


4_إنشاء كائن من الكلاس Group أننا ننوي جعله ال Root Node في النافذة
الكود:
Group root = new Group();

5_جعلنا root مرتبط بالكائن list التالي أصبح أي شيء نريد إضافته نضيفه في الكائن list
الكود:
ObservableList list = root.getChildren();

6_قمنا بإضافة الكائن label في الكائن list و الذي بدوره سيضاف أيضاً في الكائن group
الكود:
list.add(label);


و الكود الكامل على النحو التالي
الكود:

import javafx.application.Application;
import javafx.collections.ObservableList;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;


public class JavaFX1 extends Application {
    
     @Override
    public void init() {
        System.out.println("init() method is called");
    }
    
    @Override
    public void start(Stage primaryStage) {
        
             // يمثل العنوان الذي نريد إضافته في النافذة Label هنا قمنا بإنشاء كائن من الكلاس
        Label label = new Label("http://egy-tech.forumegypt.net/");
 
        // في النافذة label هنا قمنا بتحديد مكان ظهور الكائن
        label.setTranslateX(180);
        label.setTranslateY(140);
 
        // في النافذة Root Node لأننا ننوي جعله الـ Group هنا قمنا بإنشاء كائن من الكلاس
        Group root = new Group();
 
        // list و بالتالي أصبح أي شيء نريد إضافته نضيفه في الكائن list مرتبط بالكائن root هنا جعلنا الكائن
        ObservableList list = root.getChildren();
 
        // group و الذي بدوره سيضاف أيضاً في الكائن list في الكائن label هنا قمنا بإضافة الكائن
        list.add(label);
 
        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 500, 300);
 
        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX Label");
 
        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);
 
        // هنا قمنا بإظهار النافذة
        stage.show();
    }

    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }
  
    
}


بعض الطرق و الاساليب الكلاس Label 


  • الدالة setFont وتستخدم لتحديد نوع وحجم الخط كائن الـ Label


الكود:
  label.setFont(new Font("Cambria", 32));


  • الدالة setTextFill : و تستخدم لتحديد لون نص كائن الـ Label


الكود:
label.setTextFill(Color.PURPLE);


  • الدالة setBackground تستخدم لوضع لون أو صورة كخلفية لكائن الـ Label  


الكود:
label.setBackground(new Background(new BackgroundFill(Color.GRAY, CornerRadii.EMPTY, Insets.EMPTY)));


  • الدالة setContentDisplay تستخدم لتحديد مكان ظهور الأيقونة التي تم إضافتها لكائن الـ Label و تاخذ الثوابت التالية :



  1. الثابت LEFT يجعل الصورة تظهر يسار النص كما يظهر بشكل إفتراضي 
  2. الثابت RIGHT يجعل الصورة تظهر يمين النص.
  3. الثابت TOP يجعل الصورة تظهر تحت النص.
  4. الثابت BOTTOM يجعل الصورة تظهر فوق النص.
  5. الثابت CENTER يجعل النص يظهر على الصورة.
  6. الثابت GRAPHIC_ONLY يجعل الصورة فقط تظهر.
  7. الثابت TEXT_ONLY يجعل النص فقط يظهر.


مثال :
الكود:
 // يمثل الصورة التي سنضعها كأيقونة Image هنا قمنا بإنشاء كائن من الكلاس
        Image image = new Image(getClass().getResourceAsStream("/images/smily-face.png"));
 
        // مع وضع نص و أيقونة لكل كائن منهم Label هنا قمنا بإنشاء 7 كائنات من الكلاس
        Label label_1 = new Label("Label 1", new ImageView(image));
        Label label_2 = new Label("Label 2", new ImageView(image));
        Label label_3 = new Label("Label 3", new ImageView(image));
        Label label_4 = new Label("Label 4", new ImageView(image));
        Label label_5 = new Label("Label 5", new ImageView(image));
        Label label_6 = new Label("Label 6", new ImageView(image));
        Label label_7 = new Label("Label 7", new ImageView(image));
 
        // قمنا بإنشائه Label هنا قمنا بتحديد مكان ظهور الأيقونة بالنسبة لكل
        label_1.setContentDisplay(ContentDisplay.LEFT);           // هنا وضعنا الصورة يسار النص
        label_2.setContentDisplay(ContentDisplay.BOTTOM);         // هنا وضعنا الصورة فوق النص
        label_3.setContentDisplay(ContentDisplay.TOP);            // هنا وضعنا الصورة تحت النص
        label_4.setContentDisplay(ContentDisplay.RIGHT);          // هنا وضعنا الصورة يمين النص
        label_5.setContentDisplay(ContentDisplay.CENTER);         // هنا وضعنا النص على الصورة
        label_6.setContentDisplay(ContentDisplay.GRAPHIC_ONLY);   // هنا قمنا بإظهار الصورة فقط
        label_7.setContentDisplay(ContentDisplay.TEXT_ONLY);      // هنا بإظهار النص فقط


عدل سابقا من قبل زهراء في الأحد أكتوبر 14, 2018 7:32 pm عدل 1 مرات
avatar
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 347
النقاط : 571
التقيم : 38
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: تعلم JavaFx ..مقال 4 _ واجهة المستخدم الرسومية _ الكلاس Label

مُساهمة من طرف NEXT في السبت أكتوبر 13, 2018 6:03 am

بالتوفيق زهراء تحياتي لمجهودك 

ـــــــــــــــــــ التوقيع ــــــــــــــــــــ
avatar
NEXT
الادارة
الادارة

تاريخ التسجيل : 18/02/2011
المساهمات : 334
النقاط : 200490
التقيم : 10
الدولة : مصر
الجنس : ذكر

الرجوع الى أعلى الصفحة اذهب الى الأسفل

رد: تعلم JavaFx ..مقال 4 _ واجهة المستخدم الرسومية _ الكلاس Label

مُساهمة من طرف زهراء في الأحد أكتوبر 14, 2018 6:48 pm

شكرا على تشجيعلك استاذ
avatar
زهراء
........
........

تاريخ التسجيل : 18/02/2011
المساهمات : 347
النقاط : 571
التقيم : 38
الدولة : مصر
الجنس : انثى

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

ََ

مواضيع ذات صلة


 
صلاحيات هذا المنتدى:
تستطيع الرد على المواضيع في هذا المنتدى